Divi te permite crear un número ilimitado de áreas listas para usar sobre la marcha. Las barras laterales se pueden agregar a cualquier página, lo que le permite crear barras laterales únicas para diferentes secciones de su Sitio web.

Cómo agregar un módulo de widget de Zonde desde Divi

Antes de que pueda agregar un módulo de barra lateral a su página, primero debe acceder a Divi Builder. Una vez el Tema divi instalado en su Sitio web, notarás un botón Utilice Divi Builder encima del editor de publicaciones cada vez que crea una página nueva. 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 puede hacer clic en el botón Use Visual Builder cuando navegas por tu Sitio web en primer plano si ha iniciado sesión en su panel de WordPress.

Una vez que esté utilizando Visual Builder, puede hacer clic en el botón gris (+) para agregar un nuevo módulo a su página. Los nuevos módulos solo se pueden agregar dentro de las filas. Si está comenzando una nueva página, recuerde agregar una fila a su página primero.

Busque el módulo de la barra lateral en la lista de módulos y haga clic en él para agregarlo a su página. La lista de módulos se puede buscar, lo que significa que también puede escribir la palabra "barra lateral" y luego hacer clic en "Entrar" para buscar y agregar automáticamente el módulo de la barra lateral. Una vez que se agrega el módulo, será recibido por la lista de opciones del módulo. Estas opciones se dividen en tres grupos principales: Contenido , diseño et Avanzado .

Ejemplo de caso de uso: agregar una barra lateral a la página de su blog

El módulo de barra lateral le permite insertar una barra lateral (y todos sus widgets incorporados) en cualquier lugar de su página. En realidad, puede agregar cualquier área de widgets usando el módulo de barra lateral. Para este ejemplo, le mostraré cómo insertar una barra lateral personalizada en la página de su blog utilizando la sección especializada para mostrar el widget de búsqueda y publicaciones recientes en WordPress.

Esta página de blog tiene un encabezado de ancho completo para mostrar el título del blog en la parte superior de la página. Debajo del módulo de encabezado de ancho completo hay un diseño especializado con un módulo de blog a la izquierda y un área de la barra lateral vertical derecha a la derecha.

El uso de la sección especializada le permite agregar variaciones complejas de columna junto a las barras laterales verticales, sin agregar saltos no deseados a la página. Esto es perfecto para un blog con barra lateral.

Primero debe asegurarse de tener los widgets configurados en la página de Widgets de su panel de WordPress. Para este ejemplo, estoy agregando el widget de búsqueda y el widget de artículos recientes al widget de barra lateral.

Luego, implemente Visual Builder para editar la página del blog. Agregue una sección especializada a su página (justo debajo de su encabezado) con el siguiente diseño:

Una vez que haya agregado una sección especializada a la página, notará que un área (a la izquierda) tiene un botón "Agregar módulo". Para este ejemplo, aquí es donde se ha agregado el módulo Blog con un diseño de cuadrícula para mostrar las publicaciones del blog.

El otro (a la derecha) tiene un botón "Insertar fila". El área "Insertar módulo" representa su barra lateral vertical. Aquí es donde ingresarás al módulo de la barra lateral. Puede agregar tantos módulos aquí, en una sola fila, y abarcarán el ancho vertical de la sección, junto a la estructura de columna que construya junto a ella. De hecho, para este ejemplo, la página del blog ya tiene un módulo Optin de correo electrónico y un módulo Persona en esa área de la barra lateral vertical del diseño de especialidad.

Ahora, agregue el módulo de barra lateral a la parte superior de los otros módulos en su área de barra lateral vertical.

En la configuración del Módulo de barra lateral, actualice lo siguiente:

Pestaña de contenido

Área de widgets: seleccione Barra lateral

Pestaña Diseño

Orientación: derecha (porque la barra lateral está a la derecha)
Eliminar separador de borde: SÍ
Color del texto:
Tamaño de fuente del encabezado oscuro: 26px
Espaciado de letras de
header: 3px Altura de la fila del encabezado: 1.1em

Pestaña Avanzado

En la sección CSS personalizado, agregue el siguiente CSS al cuadro de texto Widget. Esto hará que el diseño de los widgets de la barra lateral coincida con el diseño del sitio:

fondo: #fff; relleno: 20px; -webkit-box-shadow: 0 1px 5px rgba (0, 0, 0, 0.1) -moz-box-shadow: 0 1px 5px rgba (0, 0, 0, 0.1); box-shadow: 0 1px 5px rgba (0, 0, 0, 0.1);

Guardar configuración

Ahora puede ver que el módulo de la barra lateral muestra los elementos del widget de la barra lateral (Buscar y Artículos recientes) y los muestra en el área de la barra lateral vertical de su sección de especialidad.

Opciones de contenido para la barra lateral

En la pestaña 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.

Área de widgets

El módulo de la barra lateral utiliza cuadros de creación de widgets que puede crear en la pestaña Apariencias> Widgets. Puede seleccionar una de sus áreas personalizadas de widgets en este menú desplegable.

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ódulo de la interfaz Divi Builder.

Opciones de diseño de barra lateral

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 configuraciones de diseño que puede usar para cambiar cualquier cosa.

Orientación

Aquí puede elegir en qué lado de la página se mostrará su barra lateral. Este parámetro controla la orientación del texto y la posición del borde.

Eliminar el separador de borde

Aquí puede eliminar el borde gris delgado que separa su barra lateral del contenido de su página.

Color del texto

Aquí puede elegir si su texto debe ser claro u oscuro. Si está trabajando en un fondo oscuro, su texto debe ser claro. Si su fondo es claro, su texto debe ser oscuro.

Fuente de encabezado

Puede cambiar la fuente del texto del encabezado seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes geniales impulsadas por Google Fonts. De forma predeterminada, 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 de negrita, cursiva, mayúsculas y subrayado.

Tamaño de fuente del encabezado

Aquí puede ajustar el tamaño del texto de su encabezado. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto o ingresar directamente el valor de tamaño de texto 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" según el valor de su tamaño para cambiar su tipo de unidad.

Color del texto del encabezado

De forma predeterminada, todos los colores del texto en Divi aparecen en blanco o gris oscuro. Si desea cambiar el color del texto de su encabezado, elija el color deseado en el selector de color usando esta opción.

Espaciado entre letras del encabezado

El espaciado de letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en el texto del encabezado, 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" según el valor de su tamaño para cambiar su tipo de unidad.

Altura de la fila del encabezado

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

Fuente del cuerpo

Puede cambiar la fuente de su cuerpo seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes geniales impulsadas por Google Fonts. De forma predeterminada, 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 de negrita, cursiva, mayúsculas y subrayado.

Tamaño de letra del cuerpo

Aquí puede ajustar el tamaño del texto del cuerpo. Puede arrastrar el control deslizante para aumentar o disminuir el tamaño de su texto o ingresar directamente el valor del tamaño de texto 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" según el valor de su tamaño para cambiar su tipo de unidad.

Color del texto del cuerpo

De forma predeterminada, todos los colores del texto en Divi aparecen en blanco o gris oscuro. Si desea cambiar el color de su texto, elija el color deseado en el selector de color usando esta opción.

Espaciado de letras corporales

El espaciado de letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en su texto, 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" según el valor de su tamaño para cambiar su tipo de unidad.

Altura de la línea del cuerpo

La altura de la línea afecta el espacio entre cada línea de texto en su cuerpo 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 espaciado 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" según el valor de su tamaño para cambiar su tipo de unidad.

Opciones avanzadas de barra lateral

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

ID de CSS

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

Clase de CSS

Ingrese las clases de CSS opcionales para usar en este módulo. Se puede usar una clase CSS para crear estilos CSS personalizados. 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 usando las opciones del tema Divi o la configuración de la página Divi Builder.

CSS personalizado

También se puede aplicar CSS personalizado al módulo y a cualquiera de los componentes internos del módulo. En la sección CSS personalizado, encontrará un campo de texto donde puede agregar hojas de estilo CSS personalizadas directamente a cada elemento. Las entradas CSS en esta configuración ya están envueltas en etiquetas de estilo. Así que simplemente 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 optar por desactivar su módulo en tabletas, teléfonos inteligentes o computadoras de escritorio individualmente. Esto es útil si desea utilizar diferentes mods en diferentes dispositivos o si desea simplificar el diseño del móvil eliminando ciertos elementos de la página.

[vc_row center_row=”sí”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARGAR TEMA DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/filiales/idevfiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARGAR EL TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Otros tutoriales de Divi

• 5 sitios web para su uso restaurante temático Divi
• Cómo agregar texto en un producto Divi WooCommerce
• Cómo cambiar el color del menú entre páginas Divi
• Cómo personalizar las cuadrículas de un blog con Divi
• Cómo utilizar la función de editor Divi en WordPress
• Cómo crear un control deslizante Divi a pantalla completa
• Cómo cambiar el color de los menús entre páginas Divi
• Características que probablemente no conozcas sobre Divi
• Cómo usar Divi Builder en WordPress
• Cómo usar el módulo de desplazamiento de video Divi
• Cómo usar el módulo Divi Builder Flip
• Cómo agregar un módulo testimonial en Divi Builder
• Cómo usar el módulo de texto Divi
• Cómo crear un control deslizante en Divi
• Cómo editar un rol de usuario Divi
• Cómo usar el módulo de Divi Social Media
• Cómo usar el módulo de tienda en el tema WordPress Divi
• Cómo usar el módulo de la barra lateral Divi
• Cómo usar el Módulo Divi Price Table
• Cómo usar el módulo de título de las publicaciones de Divi
• Cómo agregar un módulo de video de Divi
• Cómo usar el módulo de navegación del artículo
• Cómo usar el módulo de búsqueda Divi
• Cómo usar el módulo Divi wallet
• Cómo usar el módulo de persona en Divi Builder
• Cómo usar el módulo de billetera con filtro Divi
• Cómo usar el módulo deslizante de ancho completo
• Cómo usar el Módulo de imagen Divi Builder
• Cómo utilizar el módulo de navegación de ancho completo de Divi Builder
• Cómo usar el módulo de la galería de imágenes
• Cómo utilizar el módulo de tarjeta de ancho completo de Divi Builder
• Cómo utilizar el módulo de cartera de ancho completo de Divi
• Cómo usar el módulo de encabezado de ancho completo Divi
• Cómo usar el módulo Divi Counter
• Cómo usar el control deslizante de artículos en Divi Builder
• Cómo usar el módulo Divi Email Optin