Vivimos en un mundo en el que la gente prefiere preguntar lo que quiere saber en lugar de dedicar tiempo a navegar en busca de la respuesta.
Por tal motivo es importantísimo cuando diseñamos un blog con Divi colocar en lugar visible el buscador interno de WordPress y prestar atención al diseño de la página de resultados de búsqueda.
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 en uno de los formularios de búsqueda del sitio web.
De forma predeterminada, la página de resultados de búsqueda de WordPress simplemente muestra las páginas y entradas buscadas en un listado muy similar a una página de blog. Pero con Divi podemos diseñar la plantilla como se nos ocurra.
En esta guía vamos a ver cómo diseñar la página de resultados de búsqueda con Divi y asignarla para que WordPress la muestre siempre que alguien efectúe una búsqueda interna en el blog.
Empecemos.
Lo primero que hay que hacer es ir al Theme Builder o Generador de temas y crear una nueva plantilla. Esta nueva plantilla la vamos a asignar a la opción Resultados de búsqueda, en la sección Otro.
Sección para el Título y Buscador
Una vez que carga el constructor Divi, en la sección predeterminada insertamos una fila con estructura de una columna, la cual va a contener el título de la página y una caja de búsqueda.
Fila para el Título y Buscador
Antes de comenzar añadir elementos eliminamos el espacio que queda debajo de la fila.
Separación:
- Relleno base: 0px;
Módulo Separador
Insertamos un Módulo Separador de Divi para dibujar una línea horizontal en la página y definimos los siguientes estilos.
Línea:
- Color de Línea (etiqueta): #3a405a
- Posición de la línea: Base
Tamaño
- Anchura del separador: 5px
Puesto:
- Indice Z: -1
Ya te vas a dar cuenta dentro de un rato por qué ponemos un índice Z negativo.
Módulo Texto
Debajo del separador vamos a insertar un módulo Texto de Divi que nos va a servir para escribir el título de la página,
Fondo:
- Color del fondo: #ffffff
Texto de subtítulo:
- Alineación del Texto: Centrado
- Fuente: Muli
- Grosor de la fuente: Pesado
- Color: #3a405a
- Tamaño del texto: 70px (Escritorio), 40px (Tablet), 22px (Teléfono)
- Altura del texto: 80px
Tamaño:
- Ancho máximo: 50%
- Alineación del módulo: Centrado
Separación:
- Margen superior: -75px
Al poner un margen superior negativo hacemos que el módulo suba y se ubique por encima de la línea del módulo separador.
Módulo Búsqueda
Y debajo del texto insertamos un módulo Búsqueda de Divi ya que siempre es útil poder hacer una nueva consulta en la página de resultados.
Campo:
- Fuente del campo: Montserrat
- Tamaño de fuente del campo: 20px
Texto del Botón:
- Color del borde y del botón: #3a405a
- Fuente del botón: Muli
- Peso de la fuente: Negrita
- Tamaño del texto del botón: 18px
Tamaño:
- Ancho máximo: 300px
- Alineación del módulo: Centrado
Borde:
- Redondeo de esquinas: 10px
Sección para los Resultados de Búsqueda
Ahora que tenemos resuelta la parte del título de la página vamos a añadir una nueva sección para colocar los resultados de búsqueda propiamente dichos.
Configuramos los ajustes de la sección de la siguiente manera.
Fondo:
- Color del fondo: #eeeeee
Separador:
- Estilo del separador: ver video
- Color del borde: #ffffff
- Separador Flip: Vertical
- Posición del separador: En la parte superior del contenido
Separación:
- Relleno superior: 100px
Fila para los Resultados de Búsqueda
Insertamos una fila con estructura de 1 columna para comenzar a añadir módulos.
Módulo Texto
El primer elemento de esta sección va a ser un subtítulo que indique la búsqueda para la cual estamos viendo los resultados.
Para ésto vamos a insertar un nuevo módulo Texto de Divi y en su contenido seleccionamos la opción de contenido dinámico «Título de la publicación» (o equivalente según la traducción de Divi).
Luego configuramos sus estilos de la siguiente forma.
Texto:
- Fuente: Muli
- Espesor: Pesado
- Color: #d30c7b
- Tamaño: 22px
- Alineación del Texto: Centrado
Animación:
- Estilo: Diapositiva
- Dirección: Hacia abajo
- Intensidad: 250%
Módulo Blog
Y por último insertamos un módulo Blog de Divi para mostrar las entradas relacionadas con la búsqueda del usuario.
Contenido:
- Publicaciones para la página actual: Sí (ésto es lo más importante de todo para que muestre los resultados correctos).
- Recuento de Entradas: 9
- Longitud del extracto: 120
Elementos:
- Mostrar autor: NO
Diseño:
- Diseño: Rejilla
Texto del Título:
- Fuente: Muli
- Grosor: Ultra negrita
- Color: #3a405a
- Tamaño: 24px
- Altura del texto: 1.3em
Texto del Cuerpo:
- Fuente: Montserrat
- Color: #3a405a
Borde:
- Redondeo de esquinas: 10px
- Ancho del borde: 0px
Sombra de la caja:
- Box Shadow Blur Strength 15px
- Fuerza de propagación: -5px
Espero que te hayan gustado. Dejame debajo un comentario contándome que te parecieron estas características y posibilidades de Divi.
Ayudame compartiéndolo para que más personas puedan aprender todo lo que se puede hacer con Divi.
Hola. Hice más o menos lo mismo que describes en tu post, y funciona perfecto.
Un detalle, solo me funciona en español, estamos usando Polylang y cuando haces la búsqueda se rompe enviandonos a la página 404.
¿Cómo podemos crear la misma para inglés?
Gracias por leer.