Cómo Hacer una Página de Resultados de Búsqueda con Divi

Descarga Divi

Manual de Divi

Aprende a usar y configurar todos los módulos de Divi.

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.

Manual de Divi

Aprende a usar y configurar todos los módulos de Divi.

Jorge Baffa

Jorge Baffa

En 2013 fundé Aventura Digital para ayudar a profesionales y emprendedores independientes a tener su sitio web profesional con WordPress.

Comienza tu Web con Divi

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *