Saltar al contenido principal

Tutorial de Divi: Cómo usar el módulo de búsqueda

Divi: el tema de WordPress más fácil de usar

Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 600.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62. [Recomendado]

Al usar el módulo de búsqueda, puede colocar un formulario de búsqueda en cualquier parte de su sitio. Este formulario de búsqueda permitirá a sus visitantes buscar todo el contenido de su sitio web, incluidas todas las páginas y publicaciones de blog. Esto le brinda la funcionalidad del widget de búsqueda de WordPress con la flexibilidad que ofrece Divi Builder. No solo puede controlar la ubicación de los formularios de búsqueda en la página, sino también personalizar su diseño.

Cómo agregar un módulo de búsqueda a tu página

Antes de que pueda agregar un módulo de búsqueda a su página, primero debe saltar a Divi Builder. Una vez que el tema Divi esté instalado en su sitio web, notará un botón Utilice Divi Builder encima del editor cada vez que crea una nueva página. Haga clic en este botón para activar Divi Builder y acceder a todos los módulos de Divi Builder. Luego haga clic en el botón Use Visual Builder para iniciar el generador en modo visual. También puedes hacer clic en el botón Use Visual Builder cuando navega por su sitio web en primer plano si está conectado a su panel de WordPress.

constructor divi

Una vez que haya ingresado en Visual Builder, puede hacer clic en el botón gris más para agregar un nuevo módulo a su página. Los nuevos módulos solo se pueden agregar dentro de las líneas. Si comienza una nueva página, no olvide agregar primero una línea a su página.

divi.png módulo de investigación

Localice el módulo de búsqueda en la lista de módulos y haga clic en él para agregarlo a su página. Se puede buscar en la lista de módulos, lo que significa que también puede escribir la palabra "buscar", luego hacer clic en Intro para buscar y agregar automáticamente el módulo de búsqueda. Una vez que se agrega el módulo, la lista de opciones lo recibirá. Estas opciones se separan en tres grupos principales: Contenido , diseño et Avanzado .

Ejemplo de caso de uso: agregar un módulo de búsqueda personalizado a una página de blog de ancho completo

Para este ejemplo, le mostraré cómo agregar un módulo de búsqueda para que sea una llamada a la acción principal en la parte superior de una página de blog. Esto permite a los usuarios buscar fácilmente el contenido de su blog sin ningún desorden.

Esta página tiene un encabezado de ancho completo en la parte superior con el módulo de búsqueda directamente debajo. Debajo del módulo de búsqueda hay un módulo de blog que utiliza el diseño de la cuadrícula.

blog de ejemplo con formulario de búsqueda divi.jpg

Con Visual Builder, agregue una nueva sección estándar a la página del blog con una línea de ancho completo (columna 1). Luego inserte el módulo de búsqueda en la fila.

Actualice la configuración del módulo de búsqueda de la siguiente manera:

Opciones de contenido

Texto reservado: Busca en nuestro blog ...
Ocultar el botón: SÍ

Opciones de diseño

Color de fondo del campo de entrada: # f8f8f8
Color del marcador de posición: # 888888
Tamaño de fuente de entrada: 16px
Color del texto de entrada: # 888888
Altura de la línea de entrada: 1em
Relleno personalizado: 20px Top, 20px Bottom

divi search configuration content.png

Guardar configuración

Ahora, regrese para cambiar el ancho de la línea que contiene su módulo de búsqueda. En la pestaña Diseño de parámetros de línea, establezca la línea en un ancho personalizado de 300 px. Esto mantendrá el módulo de búsqueda compacto y centrado en la página.

Cree fácilmente su sitio web con Elementor

Elementor le permite crear fácilmente cualquier diseño de sitio web con un aspecto profesional. Deja de pagar caro por lo que puedes hacer tú mismo. [Gratis]

configuración divi.png ancho

Es todo !

Opciones de contenido de búsqueda

En la pestaña de contenido, encontrará todos los elementos de contenido del módulo, como texto, imágenes e iconos. Todo lo que controla lo que aparece en su módulo siempre se encontrará en esta pestaña.

módulo de búsqueda divi contenu.png

Texto de marcador de posición

Escriba el texto que desea usar como marcador de posición para el campo de búsqueda.

Botón Ocultar

Si habilita esta opción, el botón Buscar estará oculto.

Excluir Páginas

Si habilita esta opción, las páginas se excluirán de los resultados de búsqueda.

excluir elementos

Al habilitar esta opción, se excluirán los mensajes de los resultados de búsqueda.

Excluir categorías

Elija las categorías que desea excluir de los resultados de búsqueda.

Etiqueta de administrador

Esto cambiará la etiqueta del módulo en el constructor para una fácil identificación. Cuando usa la vista WireFrame en Visual Builder, estas etiquetas aparecen en el bloque de módulos de la interfaz Divi Builder.

Opciones de diseño de búsqueda

En la pestaña Diseño, encontrará todas las opciones de estilo del módulo, como fuentes, colores, tamaño y espaciado. Esta es la pestaña que usará para cambiar la apariencia de su módulo. Cada módulo Divi tiene una larga lista de parámetros de diseño que puede usar para modificar cualquier cosa.

divi search design.png

¿Estás buscando los mejores temas y complementos de WordPress?

Descarga los mejores complementos y temas de WordPress en Envato y crea fácilmente tu sitio web. Ya más de las descargas de 49.720.000. [EXCLUSIVO]

Color de fondo del campo de entrada

Aquí puede cambiar el color de fondo de la barra de búsqueda.

Marcador de posición

Antes de usar el campo de búsqueda, el texto del marcador de posición existe dentro del campo. Si ha ajustado el color de fondo del campo, también puede ajustar el color del texto del marcador de posición para asegurarse de que sea legible.

Color del texto

Aquí puedes elegir el valor de tu texto. Si está trabajando en un fondo oscuro, su texto debe estar activado. Si trabaja con un fondo claro, su texto debe estar oscuro.

Orientación del texto

Esto controla cómo se alinea su texto en el módulo.

Policía de entrada

Puede cambiar la fuente de su texto de entrada seleccionando la fuente deseada del menú desplegable. Divi viene con docenas de fuentes grandes con tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones en negrita, cursiva, mayúscula y subrayada.

Tamaño de la fuente de entrada

Aquí puede ajustar el tamaño de su texto de entrada. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto, o ingresar el valor del tamaño de texto deseado directamente en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Color de texto de entrada

Por defecto, todos los colores de texto Divi aparecen en blanco o gris oscuro. Si desea cambiar el color de su texto de entrada, elija el color deseado en el selector de color con esta opción.

Espaciado entre letras

El espaciado de las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en su texto de entrada, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Altura de la línea

La altura de línea afecta el espacio entre cada línea de su texto de entrada. Si desea aumentar el espacio entre cada línea, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo. ingresado a la derecha del cursor. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Botón y color de borde

Esto cambiará el fondo y el color del borde del botón de búsqueda.

Fuente del botón

Puede cambiar la fuente del texto de su botón seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes grandes con tecnología de Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones en negrita, cursiva, mayúscula y subrayada.

Tamaño de fuente del botón

Aquí puede ajustar el tamaño del texto de su botón. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto, o ingresar el valor del tamaño de texto deseado directamente en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Color del texto del botón

Por defecto, todos los colores de texto Divi aparecen en blanco o gris oscuro. Si desea cambiar el color del texto de su botón, elija el color deseado en el selector de colores con esta opción.

Espaciado de las letras del botón

El espaciado de las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en el texto del botón, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Altura de la línea del botón

La altura de la línea afecta el espacio entre cada línea del texto de su botón. Si desea aumentar el espacio entre cada línea, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada ubicado a la derecha del cursor. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" dependiendo del valor de su tamaño para cambiar su tipo de unidad.

Ancho máximo

De manera predeterminada, el ancho máximo de la barra de búsqueda está establecido en 100%. Esto significa que la barra de búsqueda se mostrará en su ancho natural a menos que el ancho de la barra de búsqueda exceda el ancho de la columna principal, en cuyo caso la barra de búsqueda estará limitada al 100% del ancho de la columna. Si desea restringir aún más el ancho máximo de la barra de búsqueda, puede hacerlo ingresando el valor de ancho máximo deseado aquí. Por ejemplo, un valor de 50% limitaría el ancho de la barra de búsqueda a 50% del ancho de la columna principal.

Margen personalizado

El margen es el espacio agregado al exterior de su módulo, entre el módulo y el siguiente elemento arriba, abajo o a la izquierda y derecha del mismo. Puede agregar valores de margen personalizados a uno de los cuatro lados del módulo. Para eliminar el margen personalizado, elimine el valor agregado del campo de entrada. Por defecto, estos valores se miden en píxeles, pero puede ingresar unidades de medida personalizadas en los campos de entrada.

Relleno personalizado

Relleno es el espacio agregado dentro de su módulo, entre el borde del módulo y sus elementos internos. Puede agregar valores de relleno personalizados a uno de los cuatro lados del módulo. Para eliminar el margen personalizado, elimine el valor agregado del campo de entrada. Por defecto, estos valores se miden en píxeles, pero puede ingresar unidades de medida personalizadas en los campos de entrada.

Crea fácilmente tu tienda en línea

Descargue gratis WooCommerce, los mejores complementos de comercio electrónico para vender sus productos físicos y digitales en WordPress. [Recomendado]

Opciones avanzadas del módulo de investigación

En la pestaña Avanzado, encontrará opciones que los diseñadores web más experimentados pueden encontrar útiles, como los atributos personalizados CSS y HTML. Aquí puede aplicar CSS personalizado a uno de los muchos elementos del módulo. También puede aplicar clases personalizadas e ID de CSS al módulo, que se pueden usar para personalizar el módulo en el archivo style.css de su tema secundario.

divi advanced option module search.png

ID de CSS

Ingrese un identificador CSS opcional para usar para este módulo. Se puede usar una ID para crear un estilo CSS personalizado o para crear enlaces a secciones particulares de su página.

Clase de CSS

Ingrese las clases de CSS opcionales que se utilizarán para este módulo. Se puede usar una clase CSS para crear un estilo CSS personalizado. Puede agregar varias clases, separadas por un espacio. Estas clases se pueden usar en su tema secundario Divi o en la hoja de estilo CSS personalizada que agrega a su página o sitio web mediante las opciones de tema Divi o la configuración de la página Divi Builder.

CSS personalizado

El CSS personalizado también se puede aplicar al módulo y a uno de los elementos internos del módulo. En la sección CSS personalizado, encontrará un campo de texto en el que puede agregar hojas de estilo CSS personalizadas directamente a cada elemento. Las entradas CSS en estos parámetros ya están envueltas en las etiquetas de estilo. Tan solo ingrese las reglas CSS separadas por punto y coma.

visibilidad

Esta opción le permite controlar los dispositivos en los que aparece su módulo. Puede elegir deshabilitar su módulo en tabletas, teléfonos inteligentes o computadoras de escritorio de forma individual. Esto es útil si desea utilizar diferentes módulos en diferentes dispositivos, o si desea simplificar el diseño móvil al eliminar ciertos elementos de la página.

Otros tutoriales de Divi

Este artículo contiene los comentarios 3
  1. Hola gracias por el articulo Tengo una pregunta, ¿se puede usar el formulario de búsqueda solo para una sección de una página? por ejemplo, para la sección de preguntas frecuentes, me gustaría configurar un formulario de búsqueda limitado solo a las preguntas de las preguntas frecuentes (+ 20 preguntas) de esta manera, el usuario no tiene que leerlas todas, pero encuentra gracias al formulario de búsqueda solamente los que tienen las palabras clave que le importan. Gracias de antemano por su respuesta.

  2. Gracias por este artículo, es bueno eliminar las páginas del módulo de búsqueda, pero ¿también puede excluir páginas cuando realiza una búsqueda con la lupa del encabezado? Gracias

Dejar un comentario

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

Este sitio usa Akismet para reducir los no deseados. Obtenga más información sobre cómo se utilizan sus datos de comentarios.

Volver arriba
20 acciones
cuota12
Tweet2
Siguiente 6