Cómo crear una página de resultados de búsqueda personalizada en Elementor

Una página de resultados de búsqueda bien diseñada juega un papel crucial a la hora de mejorar la experiencia del usuario. Permite a los visitantes navegar rápidamente al contenido relevante que están buscando. No solo ahorra tiempo en la navegación por el contenido, sino que también los anima a explorar más.

Elementor es un creador de páginas de referencia para millones de sitios web de WordPress. Proporciona un creador de temas y widgets útiles mediante los cuales puedes crear fácilmente una página de resultados de búsqueda. En esta publicación del tutorial, le explicaremos cómo crear una página de resultados de búsqueda personalizada en Elementor.

Recuerde, el cuadro de búsqueda es el elemento principal de cualquier página de resultados de búsqueda. Es donde las personas escriben sus palabras clave para encontrar publicaciones y productos relevantes. Entonces, primero crearemos un cuadro de búsqueda dinámica usando Elementor. Luego, finalizaremos la página agregando un widget de archivo, convirtiéndola en una página de archivo de blog.

¿Qué es una página de resultados de búsqueda personalizada en Elementor?

Una página de resultados de búsqueda es una página web dedicada que permite a los usuarios y visitantes navegar rápidamente a tipos específicos de contenido, como publicaciones de blog, productos de comercio electrónico y artículos de cartera. Estas páginas son obligatorias para sitios web con mucho contenido.

Una página de resultados de búsqueda personalizada le permite incorporar varios elementos como imágenes destacadas, encabezados personalizados, filtros, etc., como desee para que la página se vea bien. Esto no sólo mejora la experiencia del usuario sino que también ayuda a disparar las conversiones.

Casos de uso de las páginas de resultados de búsqueda personalizadas en WordPress

Antes de pasar al tutorial, echemos un vistazo a algunos casos de uso de las páginas de resultados de búsqueda personalizadas en WordPress. Hojee la lista a continuación.

• Sitios web de comercio electrónico

Mostrar la página de resultados de búsqueda de productos con filtros. Los visitantes pueden usar la barra de búsqueda para encontrar el producto exacto o filtrarlos para ordenarlos por precios, calificaciones y categorías.

• Sitios de blogs

Las publicaciones y artículos del blog se muestran según etiquetas y categorías. Los usuarios pueden ordenarlos por autor, fecha y otras consultas.

• Página de base de conocimientos

Las páginas de la base de conocimientos suelen cubrir guías de documentación de bricolaje y recursos útiles. La función de búsqueda es imprescindible en estas páginas para explorar rápidamente el contenido útil.

• Empresas basadas en servicios

Los usuarios pueden ordenar los servicios que desean según calificaciones, rangos de precios, ofertas y otros detalles relevantes antes de reservar o completar un formulario de contacto.

• Sitios web educativos

Las opciones avanzadas de búsqueda y filtrado le permiten buscar cursos, lecciones y materiales de estudio para que los estudiantes puedan encontrar fácilmente el contenido que necesitan.

Cómo crear una página de resultados de búsqueda personalizada en Elementor

La parte teórica ha terminado. En esta sección, cubriremos la parte del tutorial sobre cómo crear una página de resultados de búsqueda personalizada en Elementor. Asegúrese de tener los siguientes complementos disponibles en su sitio.

• Elementor
• ElementorPro

Una vez que los tengas en tu sitio, sigue el tutorial que se explica a continuación.

Paso 01: vaya al Creador de temas de Elementor

Inicie sesión en su panel de WordPress. Luego, navega a Plantillas > Creador de temas .

Seleccione la opción Resultados de la búsqueda en Partes del sitio. Luego, haga clic en el botón + Agregar nuevo .

Esto abrirá el lienzo de Elementor, donde podrá agregar cualquier widget que desee para crear la página de resultados de búsqueda personalizada.

Paso 02: cree una nueva sección para agregar el widget de búsqueda

Haga clic en el icono más (+) en el lienzo. Luego, seleccione la estructura de columnas que desee.

Debes escribir un título para la sección. Esto es útil para SEO.

Entonces, arrastre y suelte el widget Encabezado en la sección. Esto le permitirá escribir un título para la sección.

Vaya a la pestaña Estilos . Obtendrá opciones para cambiar el color, la tipografía, el tamaño de fuente, la alineación y más del texto del encabezado. Hazlo tú mismo.

De manera similar, arrastre y suelte el widget Editor de texto en la sección debajo del texto del encabezado. Luego, escriba el texto que desee y personalícelo como se muestra arriba.

Paso 03: agregue el widget de búsqueda en la sección

Busque el widget de búsqueda . Arrástrelo y suéltelo en la sección debajo del widget Editor de texto de la misma manera que se muestra arriba.

Paso 04: personaliza el widget de búsqueda

De forma predeterminada, el widget de búsqueda se mostrará en todo el ancho del lienzo. Vaya a la pestaña Avanzado para reducir su ancho.

Verás la sección Margen . Coloque los valores deseados en los cuadros de sección a la derecha e izquierda. Verás que el ancho del widget de búsqueda se ha reducido.

A continuación, vaya a la pestaña Estilo . Obtendrá opciones para cambiar la tipografía del texto del marcador de posición, el color de fondo del cuadro de búsqueda, el tipo de borde y más. Hágalo usted mismo de acuerdo con los requisitos del diseño de su sitio web.

Lo que hemos hecho aquí es agregar un valor de radio al cuadro de búsqueda. Hemos colocado valor en los cuadros Superior e Izquierdo debajo del Radio del borde.

De manera similar, hemos agregado un radio al botón de búsqueda. Para hacer esto, expanda la sección Botón Enviar en la pestaña Estilo. Coloque valores en los cuadros Derecha e Inferior debajo de Radio.

Verás los cambios al instante. Si desea agregar un efecto de desplazamiento, color de fondo, sombra de cuadro, etc., explore las opciones allí.

Explora cómo crear una plantilla de publicación de blog con Elementor.

Paso 05: configurar la opción de resultados

Esperamos que tenga una idea sobre la función de búsqueda de Ajax. Cada vez que un usuario comienza a escribir algo, se muestran instantáneamente varios resultados justo debajo del cuadro de búsqueda.

La opción Resultados del widget de búsqueda le permite habilitar esta función y configurar la cantidad total de resultados instantáneos que desea mostrar en el cuadro de búsqueda.

Vaya a la pestaña Contenido . Luego, expanda la sección Resultados .

Active la opción Resultados en vivo . La función ahora está habilitada.

Paso 06: cree una plantilla para resultados en vivo

Elementor te permite crear una plantilla de resultados en vivo a través de la cual puedes especificar cómo se mostrará el contenido cada vez que el usuario escriba en el cuadro de búsqueda.

Haga clic en el botón Crear plantilla en la sección Resultados.

Esto lo llevará a un nuevo lienzo. Aquí debe crear un diseño para los resultados de búsqueda en vivo y guardarlo como plantilla.

Seleccione la estructura de columnas que desee. Hemos seleccionado la Fila Direccional . Continuará mostrándose en el lado derecho a medida que agregue a esta sección.

Queremos utilizar este cuadro de búsqueda para mostrar publicaciones de blog. Entonces, cada vez que alguien escribe un tema de blog, el cuadro de búsqueda debe mostrar una lista de publicaciones de blog relevantes. Para hacer esto, tenemos que agregar widgets de publicaciones recomendadas.

Arrastre y suelte el widget Imagen destacada en la sección.

De forma predeterminada, la imagen destacada será de tamaño grande. Primero, desde la opción Resolución de imagen , seleccione el tamaño Mediano .

Luego, ve a la pestaña Estilo . Utilice opciones como alineación, ancho y radio para reducir aún más el tamaño de la imagen destacada, como se ve en la captura de pantalla adjunta a continuación.

De la misma manera, coloque el widget Título de la publicación junto a la imagen destacada.

Puedes ver que hemos reducido el tamaño de fuente y cambiado su color.

Nota: En esta etapa, guarde la plantilla . Puede agregarle más elementos si lo desea.

Aprenda a crear un sitio web de currículum con Elementor.

Paso 07: agregue la plantilla al resultado

Entra a la página principal de lo que estábamos diseñando. Al hacer clic en el ícono desplegable en la sección Resultados, elija una plantilla que diseñó hace un momento.

Una vez seleccionada una plantilla, aparecerán varias opciones nuevas debajo de ella. Utilizándolos, puede configurar la cantidad total de elementos que se mostrarán en el cuadro de búsqueda.

Paso 08: estiliza el diseño de los resultados en vivo

Vaya a la pestaña Estilo nuevamente y expanda la sección Resultados. Puede estilizar el tipo de fondo, el tipo de borde, el radio, el relleno, la distancia desde el campo de búsqueda, la altura y el ancho de la columna y el espacio entre filas y columnas.

Vista previa de resultados en vivo

Ahora, escribe algo en el cuadro de búsqueda. Verá una lista de tres elementos relevantes para el tema escrito que aparecerá debajo.

Esto garantiza que el widget de búsqueda funcione perfectamente.

Nota: Su widget de búsqueda está listo y es completamente funcional. Puede crear cuadros de búsqueda en cualquier lugar de su sitio web, como en el encabezado, pie de página y páginas de la misma manera. Estos cuadros de búsqueda generalmente se colocan en las páginas de encabezado y publicación de archivo.

Paso 09: agregue el widget de publicaciones de archivo

Cree una nueva sección debajo de la sección del cuadro de búsqueda. Luego, arrastre y suelte el widget Archivar publicaciones en la nueva sección.

Esto mostrará todas las publicaciones del blog en el formato de cuadrícula que haya publicado en su sitio web.

Paso 10: Configurar los ajustes del widget de publicaciones de archivo

Ahora es el momento de personalizar el widget Archivar publicaciones y diseñar el diseño que desee. El widget tiene numerosas opciones de personalización. Primero, configure los ajustes básicos. Vaya a la pestaña Contenido y expanda la sección Diseño .

Elija el número de columnas, la posición de la imagen y la resolución de la imagen . Hemos seleccionado 2 columnas, configuramos la posición de la imagen en la parte superior y la resolución completa.

Después de eso, active las opciones Título, Extracto, Metadatos y Leer más . Pero si no desea ninguna opción, manténgala desactivada.

Para definir la longitud del extracto, establezca el número de caracteres al lado. Además, especifique el tipo de metadatos que desea mostrar. Hemos seleccionado las opciones de metadatos de Datos y Comentarios para el widget.

La paginación divide tus publicaciones en varias páginas. Expandir la sección de paginación le permite configurar el tipo de paginación, la alineación, el límite de páginas y el acortamiento .

Aprenda a crear un formulario de contacto con Elementor.

Paso 11: Estilizar el widget de publicaciones de archivo

Vaya a la pestaña Estilos . Aquí encontrarás varias opciones. Primero, expanda la sección Diseño .

Puede personalizar el espacio entre columnas, el espacio entre filas y la alineación .

Expandir la sección Imagen le permitirá establecer el radio del borde y el espacio entre imágenes y otros elementos.

De la misma manera, al expandir la sección Contenido , puedes estilizar la tipografía, el color y el espaciado de los textos Título, Meta, Extracto y Leer más.

Finalmente, expanda la sección Paginación . Esto le permitirá personalizar la tipografía, los colores, los efectos de desplazamiento y los espacios para los elementos de paginación.

Nota: De hecho, hay muchas más opciones para cada widget de Elementor, incluido el widget Archivar publicaciones. En el tutorial anterior, intentamos darle una idea básica de las personalizaciones que puede realizar para el widget Archivar publicaciones. Espero que puedas explorar y utilizar otras opciones además de estas.

Paso 12: guarde y obtenga una vista previa de la página de resultados de búsqueda

Ahora, vaya al modo de vista previa de la página. Escriba algo en el cuadro y presione el botón Buscar . Verá las publicaciones de blog relacionadas que aparecen a continuación en formato de cuadrícula.

¿Algún error? ¡La página de resultados de búsqueda parece rota!

Después de presionar el botón de búsqueda, es posible que se asuste si ve las publicaciones de blog relacionadas que aparecen como en la imagen a continuación. Es posible que sienta que la página está rota.

¡No te preocupes! Es muy fácil solucionar el problema.

Sólo tienes que crear una página de Archivo en el creador de temas de Elementor. La forma en que diseñe la página de archivo afectará la forma en que se muestran las publicaciones del blog relacionadas después de hacer clic en el botón Buscar.

Si desea que creemos una publicación tutorial separada sobre cómo crear una página de archivo con Elementor, háganoslo saber a través de la sección de comentarios. Consideraremos diseñar dicha página según sus expectativas.

Entonces, este es el final de la parte del tutorial de la publicación. Por lo tanto, puede crear una página de resultados de búsqueda usando Elementor en WordPress.

Punto de bonificación: use HappyAddons para obtener más widgets para Elementor

HappyAddons es un complemento destacado con una gran colección de potentes widgets para Elementor. Si alguna vez siente que los widgets de Elementor disponibles no son suficientes y busca más, puede probar el complemento HappyAddons.

HappyAddons viene con más de 120 widgets y docenas de funciones que pueden llevar su sitio Elementor a un nuevo nivel. El complemento tiene una versión gratuita y una premium. Primero puedes probar con la versión gratuita. Si está satisfecho, puede actualizar a la versión premium en cualquier momento y hacer algo grandioso.

Obtenga el complemento haciendo clic en los botones adjuntos a continuación.

Conclusión

Crear una página de resultados de búsqueda no es un lujo hoy en día, pero es obligatorio para mejorar la experiencia del usuario. Le ayuda a mantener el atractivo y el valor de marca de su sitio web. Si su sitio es principalmente para productos de comercio electrónico, marketing de afiliación y blogs, nunca es suficiente sin una página de resultados de búsqueda.

Con suerte, siguiendo el tutorial explicado anteriormente, podrá crear impresionantes páginas de resultados de búsqueda en su sitio Elementor. Sin embargo, no olvides optimizar el widget de búsqueda para tablets y dispositivos móviles para que todo tipo de personas puedan utilizar este elemento.