Cómo crear una plantilla de página de resultados de búsqueda en Divi
Publicado: 2019-11-13Todos nos hemos acostumbrado a utilizar formularios de búsqueda para encontrar lo que necesitamos en un sitio web. Entonces, al crear un sitio web en Divi, realmente debemos considerar el diseño de la plantilla de resultados de la página que impulsará la apariencia de esos resultados de búsqueda.
En este tutorial, cubriremos cómo crear una plantilla de página de resultados de búsqueda simple y elegante utilizando Divi Theme Builder. Le mostraremos cómo incluir los elementos cruciales de una plantilla de página de resultados de búsqueda, incluido un título de resultados de página dinámica y el contenido de búsqueda relevante generado por un módulo de blog.
Empecemos.
Vistazo
Aquí hay un vistazo rápido a la plantilla de la página de resultados de búsqueda que crearemos.
Descarga la (s) plantilla (s) GRATIS
Para poner sus manos en la plantilla de la página de resultados de búsqueda de este tutorial, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
Para importar el diseño a su página, simplemente extraiga el archivo zip y agregue uno de los archivos json en Divi Theme Builder usando la opción de portabilidad de Theme Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá instalar y activar Divi Theme. Asegúrese de tener la última versión de Divi.
También necesitará algunas publicaciones / páginas creadas con fines de prueba para que la página de resultados de búsqueda realmente muestre resultados.
Después de eso, estará listo para comenzar.
Acerca de la página de resultados de búsqueda
En Divi, la página de resultados de búsqueda es la página a la que se redirige al usuario una vez que ingresa una consulta de búsqueda en uno de los formularios de búsqueda de Divi. Las posibles consultas de búsqueda que conducen a la página de resultados de búsqueda incluyen el formulario de búsqueda en el encabezado Divi predeterminado, la búsqueda generada desde el Módulo de búsqueda en Divi Builder y el widget de búsqueda integrado en WordPress.
De forma predeterminada, la página de resultados de búsqueda simplemente mostrará las páginas o publicaciones buscadas en una fuente de forma muy similar a una página de blog típica. Pero con Divi, puedes diseñar la plantilla como quieras usando Divi Theme Builder.
Cómo crear una plantilla de página de resultados de búsqueda en Divi
Crear nueva plantilla
Para comenzar, vaya al Tablero de WordPress y navegue a Divi> Theme Builder. Luego haga clic en el área "Agregar nueva plantilla".
En la configuración de la plantilla, asigne la plantilla Resultados de búsqueda.
Luego, haga clic en el área Agregar cuerpo personalizado de la nueva plantilla y seleccione "Crear cuerpo personalizado".
Seleccione para construir el diseño desde cero.
Diseño de la plantilla de la página de resultados de búsqueda con el editor de diseño de plantillas
La sección de encabezado de la plantilla de resultados de la página
Dentro del editor de diseño de plantilla, inicie el diseño de la plantilla agregando una fila de una columna a la sección predeterminada. Aquí es donde crearemos nuestro encabezado de página para la plantilla.
Acento del diseño del módulo divisor
Luego inserte un módulo divisor. Esto servirá como un acento de diseño para el encabezado de nuestra página.
Actualice el estilo del divisor de la siguiente manera:
- Color de línea: # 3a405a
- Posición de la línea: Inferior
- Peso del divisor: 5px
- Índice Z: -1
Módulo de texto con encabezado
Debajo del Módulo divisor, agregue un nuevo módulo de texto con el siguiente contenido:
<h1>Search Results</h1>
Actualice el diseño del texto de la siguiente manera:
- Color de fondo: #ffffff
- Alineación de texto: centro
- Fuente de encabezado: Muli
- Peso de la fuente del encabezado: Pesado
- Color del texto del encabezado: # 3a405a
- Tamaño del texto del encabezado: 70 px (escritorio), 40 px (tableta), 22 px (teléfono)
- Altura de la línea de rumbo: 80px
- Ancho máximo: 60%
- Alineación del módulo: centro
- Altura mínima: 80 px
Ahora podemos mover el módulo de texto hacia arriba para superponer el divisor agregando un margen personalizado.
- Margen: -75px
Módulo de búsqueda
Debajo del módulo de texto con el encabezado, agregue un módulo de búsqueda. Esto será útil para los usuarios que deseen continuar buscando en su blog / sitio una vez que lleguen a la página de resultados de búsqueda.
Agregue texto de marcador de posición de entrada para el formulario.
También tiene la opción de excluir ciertas páginas, publicaciones y / o categorías de los resultados de la búsqueda seleccionando opciones en el grupo de opciones de excepciones. Por ejemplo, si está creando un formulario de búsqueda principalmente para su blog, es posible que desee excluir páginas de los resultados de búsqueda para que solo se muestren las publicaciones del blog.
Luego actualice la configuración de búsqueda de la siguiente manera:
- Color del marcador de posición: # 3a405a
- Color de fondo del campo: #ffffff
- Fuente de campo: Montserrat
- Tamaño del texto del campo: 20px
- Color del botón y del borde: # 3a405a
- Fuente del botón: Muli
- Peso de la fuente del botón: negrita
- Color del texto del botón: #ffffff
- Tamaño del texto del botón: 18px
- Ancho: 100%
- Ancho máximo: 300px
- Alineación del módulo: centro
- Esquinas redondeadas: 8px
Eso se ocupa de nuestra sección de encabezados en su mayor parte.
Relleno de filas
Antes de comenzar la siguiente sección, saquemos el relleno inferior de la fila.
- Acolchado: 0px inferior
Creación de la sección del cuerpo de la plantilla de resultados de búsqueda
Ahora estamos listos para agregar nuestra segunda sección de la plantilla que contendrá el título del archivo de resultados de búsqueda y el contenido de los resultados de búsqueda.
Crear la nueva sección y fila
Debajo de la sección superior, agregue una nueva sección regular al diseño.
Luego agregue una fila de una columna a la sección.
Agregar el título de la publicación / archivo como contenido dinámico
La página de resultados de búsqueda se beneficiará de un título que muestra la consulta de búsqueda ingresada por el usuario. Podemos agregar esto a la página usando un módulo de texto y tirando del elemento de contenido dinámico del título de la publicación / archivo.
Primero, agregue un módulo de texto.
Elimine el texto ficticio dentro del cuadro de contenido del cuerpo y seleccione el icono de contenido dinámico que se muestra al pasar el cursor sobre el cuadro de contenido del cuerpo. A continuación, seleccione el título de la publicación / archivo de la lista.
El elemento Título de publicación / archivo comienza con la frase "Resultados de" seguida del contenido de búsqueda / consulta entre paréntesis. A continuación, se muestra un ejemplo de lo que se mostraría si un usuario buscara el término "empresa".
A continuación, actualice la configuración de diseño para el módulo de texto de la siguiente manera:
- Fuente de texto: Muli
- Peso de la fuente del texto: Pesado
- Color del texto del texto: # d30c7b
- Tamaño del texto del texto: 22px
- Alineación de texto: centro
- Estilo de animación: diapositiva
- Dirección de animación: abajo
- Intensidad de la animación: 250%
La animación agregada revelará el título del resultado de la búsqueda debajo del estilo de divisor de "nube" (agregaremos esto un poco más adelante). Por lo tanto, cada vez que un usuario ingresa una nueva consulta de búsqueda, el título se desplegará para lograr un efecto genial.
Agregar nueva fila
En el módulo Texto que contiene el elemento de título de la publicación / archivo, cree una nueva fila de una columna.
Agrega un módulo de blog a la fila. Esto mostrará las publicaciones / contenido real de la página de resultados de búsqueda.
Actualice la configuración de contenido para el módulo de blog de la siguiente manera:
- Publicaciones para la página actual: SÍ
- Número de publicaciones: 9
- Longitud del extracto: 120
- Mostrar autor: NO
La opción más importante aquí son las publicaciones de la página actual. Debe estar activo para que la página de resultados de búsqueda muestre el contenido dinámico de la búsqueda.
Luego actualice el diseño del módulo de blog de la siguiente manera:
- Diseño: cuadrícula
- Fuente del título: Muli
- Peso de la fuente del título: Ultra Bold
- Color del texto del título: # 3a405a
- Tamaño del texto del título: 24px
- Altura de la línea de título: 1.3em
- Fuente del cuerpo: Montserrat
- Color del texto del cuerpo: # 3a405a
- Esquinas redondeadas de diseño de cuadrícula: 10px
- Ancho del borde del diseño de la cuadrícula: 0px
- Box Shadow: mostrar captura de pantalla
- Posición vertical de la sombra del cuadro: 0px
- Fuerza de desenfoque de sombra de caja 15px
- Fuerza de propagación de la sombra de caja: -5px
A continuación, actualice el estilo de paginación de la siguiente manera:
Fondo de sección y divisor
Como toque final al diseño, actualice la configuración de la sección de la siguiente manera:
- Color de fondo: #eeeeee
- Estilo de divisor superior: ver captura de pantalla
- Color del divisor: #ffffff
- Flip divisor: vertical
- Disposición del divisor: encima del contenido de la sección
- Acolchado: 100px superior
Resultado final
Este es el resultado final de la plantilla de página al buscar el término "negocio" en el sitio en vivo.
Aquí está el diseño en tableta y teléfono.
Y aquí hay un ejemplo de la animación del título del resultado de búsqueda cuando se usa el formulario de búsqueda para consultas adicionales en la página de resultados de búsqueda.
Pensamientos finales
Una página de resultados de búsqueda puede ser una herramienta útil para los usuarios, por lo que es una gran idea darle la atención que merece. Con Divi, puede crear una plantilla de resultados de búsqueda con todos los elementos dinámicos necesarios utilizando Divi Visual Builder al diseñar la plantilla. No se requieren conocimientos de código. Espero que esto le sirva de inspiración para crear una plantilla de página de resultados de búsqueda personalizada para su propio blog o sitio.
Espero tener noticias tuyas en los comentarios.
¡Salud!