Todos solíamos usar formularios de búsqueda para encontrar lo que necesitamos en un sitio web. Por lo tanto, al crear un sitio web en la división, debemos considerar el diseño de los resultados de la página que conducirán a la apariencia y los resultados de esos resultados de búsqueda. En este tutorial, presentaremos cómo construir una plantilla de resultados de búsqueda simple y elegante, utilizando el creador de temas. Le mostraremos cómo incluir los elementos cruciales de una plantilla de página con resultados de búsqueda, incluido un título dinámico de título y el contenido de búsqueda relevante generado por un módulo de blog.
Vamos a empezar. Tire de la vista con un breve vistazo a la plantilla de página con los resultados de búsqueda que crearemos.



Descargue su plantilla (modelos) de forma gratuita para poner su mano en la plantilla de página con los resultados de búsqueda en este tutorial, primero tendrá que descargarla usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la apariencia en su página, simplemente extraiga el archivo ZIP y agregue uno de los archivos JSON al constructor de temas de portabilidad de Divic Builder de temas.
Pasemos al tutorial, ¿no? Lo que necesita para comenzar a comenzar, deberá instalar y activar el tema de Div. Asegúrese de tener la última división de división. También necesitará algunas publicaciones / páginas creadas con el propósito de probar los resultados de búsqueda para mostrar los resultados de manera efectiva. Después de eso, estás listo para irte. Sobre la página con los resultados de búsqueda en el DIV, la página con los resultados de búsqueda es la página a la que se redirige a un usuario una vez que ha introducido una consulta de búsqueda en uno de los formularios de búsqueda de la divicidad. Las posibles consultas de búsqueda que conducen a los resultados de búsqueda incluyen el formulario de búsqueda en el encabezado de división predeterminado, la búsqueda generada por el generador Divi y el widget de búsqueda incorporado en WordPress.
De manera predeterminada, los resultados de búsqueda simplemente mostrarán páginas o publicaciones buscadas en un feed como una página de blog típica. Pero con Div, puede diseñar la plantilla de todos modos que desee usar el Builder Div. Cómo crear una plantilla de página con los resultados de búsqueda en la división Cree una nueva plantilla para comenzar, acceder al tablero de WordPress y navegar en Div> Temo Builder. Luego haga clic en el área “Agregar una nueva plantilla”. En la configuración de la plantilla, asigne los resultados de la plantilla.
Luego haga clic en el cuerpo de Agregar personalizado de la nueva plantilla y seleccione “Construir cuerpo personalizado”.

Seleccione para construir el look desde cero.

Diseño de la plantilla de página con los resultados de búsqueda utilizando el editor de plantilla La sección de título para la página de los resultados de la página en el editor de apariencia del patrón, comience a diseñar la plantilla agregando una fila a una columna a la sección predeterminada. Aquí construiremos el título de nuestra página para la plantilla.

Diseñe el énfasis en el módulo divisor y luego ingrese un módulo divisor. Esto servirá como acento de diseño para el título de nuestra página.

Actualice el estilo del divisor de la siguiente manera:

Color de línea: # 3A405A

Posición de línea: abajo
Peso del divisor: 5 PX
Z -DEX: -1
Modo de texto con encabezado en el módulo Divisor, agregue un nuevo módulo de texto con el siguiente contenido:

Resultados de búsqueda

Actualice el diseño de texto de la siguiente manera:

Color de fondo: #ffffff

Alineación de texto: Centro
Fuente del título: muchos
Peso de la fuente del encabezado: duro
Text Pre -Text: # 3A405A
Encabezado de texto de tamaño: 70 PX (escritorio), 40 px (tableta), 22 px (teléfono)
Altura de la línea de dirección: 80 PX
Ancho máximo: 60%de alineación del módulo: centro
Altura mínima: 80 PX
Ahora podemos mover el módulo de texto para superponer el divisor agregando un margen personalizado.
Marja: -75px
Modo de búsqueda en el módulo de texto de título, agregue un módulo de búsqueda. Esto será útil para los usuarios que deseen continuar buscando su blog / sitio después de alcanzar los resultados de búsqueda.

Agregue el texto sustituyente de texto 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 opciones del grupo de opciones de excepción. Por ejemplo, si crea un formulario de búsqueda principalmente para su blog, le recomendamos que excluya las páginas de los resultados de búsqueda, para que solo se muestren las publicaciones de blog.

Luego actualice la configuración de búsqueda de la siguiente manera:


Color sustituyente: # 3A405A

El color del fondo del campo: #ffffff

Fuente de campo: Montserrat
Tamaño de texto de campo: 20 PX
Botón de color y borde: # 3A405A
Botón de fuente: muchos
Botón de peso de fuente de fuente: en negrita
El color del texto del botón: #ffffff
Tamaño de texto de texto: 18 PX
Ancho: 100%
Ancho máximo: 300 PX
Alineación del módulo: centro
Esquinas redondeadas: 8 px
Se trata principalmente de nuestra sección de rúbricas. El revestimiento de las filas antes de comenzar la siguiente sección, para eliminar el relleno inferior de la fila.
Forro: 0px hacia abajo
Creando la sección del cuerpo de la plantilla con los resultados de la búsqueda ahora estamos listos para agregar la segunda sección de la plantilla que contendrá el título de los resultados de búsqueda y el contenido de los resultados de búsqueda. Creando la nueva sección y filas debajo de la sección superior, agregue una nueva sección habitual a la apariencia. Luego agregue una fila con una columna a la sección.

Agregar el título de publicación / archivo como un contenido dinámico con los 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 e ingresar el contenido dinámico del título de publicación / archivo.
Primero, agregue un módulo de texto.

Elimine el texto falso del cuadro de contenido del cuerpo y seleccione el icono de contenido dinámico que aparece cuando pasa con el mouse sobre el cuadro de contenido del cuerpo. Luego seleccione el título de publicación / archivo de la lista.

El elemento del título de publicación / archivo comienza con la expresión “resultados para” seguido de la consulta de contenido / búsqueda entre los soportes. A continuación se muestra un ejemplo de lo que se mostraría si un usuario busca el término “negocio”.

Luego actualice la configuración de diseño para el módulo de texto de la siguiente manera:
Texto de fuentes: muchos

Texto de la fuente de peso: duro

Color de texto de texto: # D30C7B

Tamaño de texto de texto: 22 PX
Alineación de texto: Centro
Estilo de animación: diapositiva
Dirección de la animación: Down
Intensidad de animación: 250%
La animación adicional revelará el título del resultado de la búsqueda del estilo divisor “Cloud” (agregaremos esto un poco más tarde). Entonces, cada vez que un usuario presenta una nueva consulta de búsqueda, el título se caerá para un efecto frío.
Agregue una nueva línea debajo del módulo de texto que contenga el elemento de título de publicación / archivo, cree una nueva fila con una columna. Agregue un módulo de blog en una fila. Esto mostrará las publicaciones / contenido reales de la página con los 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 adicional: 120

Mostrar al autor: No

La opción más importante aquí son las publicaciones para la página actual. Esto debe estar activo para la página de resultados de búsqueda para mostrar el contenido de búsqueda dinámica.
Luego actualice el diseño del módulo de blog de la siguiente manera:
Apariencia: cuadrícula
Título de la fuente: multi
Fuente de peso del título: Ultra Bold
Color de texto del título: # 3A405A

Título Tamaño del texto: 24 PX
Altura de la línea de título: 1.3em
Font Corp: Montserrat
Color of Body Text: # 3A405A
La aparición de las esquinas redondeadas de la cuadrícula: 10 px
Ancho del borde de la cuadrícula de apariencia: 0 PX
Box Shadow: Mostrar captura de pantalla
Box Shadow Posición vertical: 0px
Box Shadow Blur Force 15 PX
Poder de extender la sombra de la caja: -5 PX
Luego actualice el estilo de paginación de la siguiente manera:
La sección de fondo y divisor como último diseño del diseño, actualice la configuración de la sección de la siguiente manera:
Color de fondo: #EEEEEE
El estilo del divisor superior: ver la captura de pantalla
Color divisor: #ffffff

Divisor de flip: vertical

Disposición del divisor: contenido en la parte superior de la sección
Revestimiento: parte superior de 100 px
El resultado final aquí 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 la tableta y el teléfono.
Aquí hay un ejemplo de animación del resultado del resultado de la búsqueda cuando se usa el formulario de búsqueda para agregar consultas en los resultados de búsqueda. Los resultados finales con resultados de búsqueda pueden ser una herramienta útil para los usuarios, por lo que es una idea maravillosa prestar atención a quien se lo merece.Con Div, puede crear un resultado de búsqueda con todos los elementos dinámicos necesarios utilizando Visual Builder al diseñar la plantilla.No se requiere conocimiento del código.Espero que esto le brinde un poco de inspiración para crear una plantilla de página con resultados de búsqueda personalizados para su propio blog o sitio.Espero tener noticias suyas en los comentarios.¡Suerte!