Todos nos hemos acostumbrado a usar formularios de búsqueda para encontrar lo que necesitamos en un sitio web. Por lo tanto, 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 usando 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ámico 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.
Descargue 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.
Para importar el diseño a su página, simplemente extraiga el archivo zip y agregue uno de los archivos json al Divi Theme Builder utilizando la opción Portabilidad del generador de temas.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, necesitarás instalar y activar el tema Divi. Asegúrate 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, estás listo para partir.
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 a un 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 un feed de forma muy similar a una página de blog típica. Pero con Divi, puede diseñar la plantilla como quiera con 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 Panel de WordPress y navegue hasta Divi> Generador de temas. Luego haga clic en el área "Agregar nueva plantilla".
En la configuración de la plantilla, asigne los resultados de búsqueda de la plantilla.
Luego haga clic en el área Agregar cuerpo personalizado de la nueva plantilla y seleccione "Crear cuerpo personalizado".
Seleccione Crear el diseño desde cero.
Diseño de la plantilla de página de resultados de búsqueda utilizando el editor de diseño de plantilla
La sección de encabezado para 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 construiremos el encabezado de nuestra página para la plantilla.
Acento de 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 divisor de la siguiente manera:
- Color de línea: # 3a405a
- Posición de línea: inferior
- Divisor de peso: 5px
- Índice Z: -1
Módulo de texto con encabezado
En el Módulo divisor, agregue un nuevo módulo de texto con el siguiente contenido:
Search Results
La actualización del diseño del texto de la siguiente manera:
- Color de fondo: #ffffff
- Alineación de texto: centro
- Fuente del 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: 80 px
- Ancho Máx .: 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 quieran continuar buscando en su blog / sitio una vez que lleguen a la página de resultados de búsqueda.
Agregar 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 búsqueda seleccionando las 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: 20 px
- Botón y color del borde: # 3a405a
- Fuente del botón: Muli
- Peso de fuente del botón: negrita
- Color del texto del botón: #ffffff
- Tamaño del texto del botón: 18 px
- Ancho: 100%
- Ancho Máx .: 300px
- Alineación del módulo: centro
- Esquinas redondeadas: 8px
Eso se encarga de nuestra sección de encabezados en su mayor parte.
Relleno de fila
Antes de comenzar la siguiente sección, saquemos el relleno inferior de la fila.
- Relleno: 0px inferior
Crear 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 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 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. Luego seleccione el Título de publicación / archivo de la lista.
El elemento Título de publicación / archivo comienza con la frase "Resultados para" seguida de la búsqueda de contenido / consulta entre paréntesis. A continuación se muestra un ejemplo de lo que se mostrará si un usuario busca 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 fuente de texto: pesado
- Color del texto del texto: # d30c7b
- Tamaño del texto: 22 px
- Alineación de texto: centro
- Estilo de animación: diapositiva
- Dirección de animación: abajo
- Intensidad de animación: 250%
La animación agregada revelará el título del resultado de la búsqueda debajo del estilo 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 obtener un efecto genial.
Agregar nueva fila
En el módulo de texto que contiene el elemento de título de publicación / archivo, cree una nueva fila de una columna.
Agregue un módulo de blog a la fila. Esto mostrará las publicaciones / contenido reales 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Í
- Recuento de publicaciones: 9
- Longitud del extracto: 120
- Mostrar autor: NO
La opción más importante aquí es las Publicaciones para la página actual. Esto 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: 24 px
- Altura de la línea de título: 1.3em
- Fuente del cuerpo: Montserrat
- Color del texto del cuerpo: # 3a405a
- Diseño de cuadrícula Esquinas redondeadas: 10px
- Ancho de borde de diseño de cuadrícula: 0px
- Box Shadow: mostrar captura de pantalla
- Posición vertical de la sombra de la caja: 0px
- Caja Shadow Blur Strength 15px
- Fuerza de propagación de sombra de caja: -5px
A continuación, actualice el estilo de paginación de la siguiente manera:
Sección de fondo 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 divisor superior: ver captura de pantalla
- Color del divisor: #ffffff
- Divisor Flip: vertical
- Disposición del divisor: sobre el contenido de la sección
- Acolchado: tapa de 100 px
Resultado final
Aquí está 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 utiliza 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 prestarle 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 requiere conocimiento de código. Espero que esto te sirva de inspiración para crear una plantilla de página de resultados de búsqueda personalizada para tu propio blog o sitio.
Espero tener noticias suyas en los comentarios.
¡Salud!