Cómo crear una plantilla de página de resultados de búsqueda en Divi


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.

Plantilla de página de resultados de búsqueda Divi

Plantilla de página de resultados de búsqueda Divi

Plantilla de página de resultados de búsqueda Divi

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".

Plantilla de página de resultados de búsqueda Divi

En la configuración de la plantilla, asigne los resultados de búsqueda de la plantilla.

Plantilla de página de resultados de búsqueda Divi

Luego haga clic en el área Agregar cuerpo personalizado de la nueva plantilla y seleccione "Crear cuerpo personalizado".

Plantilla de página de resultados de búsqueda Divi

Seleccione Crear el diseño desde cero.

Plantilla de página de resultados de búsqueda Divi

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.

Plantilla de página de resultados de búsqueda Divi

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.

Plantilla de página de resultados de búsqueda Divi

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

Plantilla de página de resultados de búsqueda Divi

Módulo de texto con encabezado

En el Módulo divisor, agregue un nuevo módulo de texto con el siguiente contenido:

Search Results

Plantilla de página de resultados de búsqueda Divi

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

Plantilla de página de resultados de búsqueda Divi

Ahora podemos mover el módulo de texto hacia arriba para superponer el divisor agregando un margen personalizado.

  • Margen: -75px

Plantilla de página de resultados de búsqueda Divi

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.

Plantilla de página de resultados de búsqueda Divi

Agregar texto de marcador de posición de entrada para el formulario.

Plantilla de página de resultados de búsqueda Divi

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.

Plantilla de página de resultados de búsqueda Divi

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

Plantilla de página de resultados de búsqueda Divi

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

Plantilla de página de resultados de búsqueda Divi

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.

Plantilla de página de resultados de búsqueda Divi

Luego agregue una fila de una columna a la sección.

Plantilla de página de resultados de búsqueda Divi

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.

Plantilla de página de resultados de búsqueda Divi

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.

Plantilla de página de resultados de búsqueda Divi

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".

Plantilla de página de resultados de búsqueda Divi

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.

Plantilla de página de resultados de búsqueda Divi

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.

Plantilla de página de resultados de búsqueda Divi

Agregue un módulo de blog a la fila. Esto mostrará las publicaciones / contenido reales de la página de resultados de búsqueda.

Plantilla de página de resultados de búsqueda Divi

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.

Plantilla de página de resultados de búsqueda Divi

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

Plantilla de página de resultados de búsqueda Divi

A continuación, actualice el estilo de paginación de la siguiente manera:

Plantilla de página de resultados de búsqueda Divi

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

Plantilla de página de resultados de búsqueda Divi

Resultado final

Aquí está el resultado final de la plantilla de página al buscar el término "negocio" en el sitio en vivo.

Plantilla de página de resultados de búsqueda Divi

Aquí está el diseño en tableta y teléfono.

Plantilla de página de resultados de búsqueda Divi

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.

Plantilla de página de resultados de búsqueda Divi

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!