Cómo agregar, configurar y personalizar el módulo de barra lateral de Divi.
El Módulo de Barra Lateral de Divi facilita añadir una barra lateral compatible con widgets en cualquier página, entrada, proyecto o plantilla de página.
Este módulo funciona con la funcionalidad de widgets de WordPress, lo que hace que administrar y actualizar barras laterales en todo el sitio sea muy sencillo.
En esta guía, repasaremos todas las opciones de contenido y diseño disponibles dentro del Módulo de Barra Lateral de Divi y cómo utilizarlas.
En el siguiente ejemplo, utilizaremos el Módulo de Barra Lateral de Divi en una plantilla de entrada del blog.
Ejemplo del Módulo de Barra Lateral de Divi
Ver una demostración en vivo de este módulo
Cómo añadir el Módulo de Barra Lateral en tu página
Navega al Generador de Temas Divi
Utilizaremos el Generador de Temas Divi para editar una plantilla personalizada de entradas del blog que incluirá el módulo de navegación dentro del diseño.
El Generador de Temas Divi es donde puedes diseñar encabezados, pies de página y plantillas personalizadas para tu sitio.
Si aún necesitas diseñar una plantilla personalizada para entradas del blog, aprende cómo hacerlo aquí.
Para más información sobre el Generador de Temas Divi, haz clic aquí.
Ve al Panel de WordPress → Divi → Generador de Temas.
Esto te lleva al panel del Generador de Temas, donde se gestionan todas las plantillas personalizadas de tu sitio.
Añadir nueva plantilla
Haz clic en Añadir nueva plantilla.
Desplázate hasta la sección de Entradas y haz clic en Todas las entradas. Esto garantizará que el diseño que creemos para entradas del blog se aplique a todas las entradas. Además, puedes crear plantillas únicas para entradas en categorías o etiquetas específicas, o incluso entradas individuales.
Haz clic en el botón azul Crear plantilla en la parte inferior de la ventana de opciones. Esto crea una plantilla de página en blanco con tu encabezado global y pie de página global aplicados automáticamente.
- Añadir cuerpo personalizado
Haz clic en Añadir cuerpo personalizado.
Luego haz clic en Construir cuerpo personalizado.
Esto cargará la plantilla de página en blanco, donde podemos comenzar a personalizarla. Se añade automáticamente una sección a la página. Para comenzar a estilizar, añade una fila y luego el Módulo de Barra Lateral.
Agregar el Módulo de Barra Lateral
Haz clic en el ícono gris + para abrir la biblioteca de módulos.
Desplázate hasta el módulo Barra Lateral y haz clic para cargarlo.
Nota: la biblioteca de módulos también permite buscar. Usa la barra de búsqueda en la parte superior y escribe el nombre del módulo que deseas.
El Módulo de Barra Lateral extrae la información de los widgets nativos de WordPress. Así que necesitas crear y editar el contenido de tu barra lateral en Apariencia → Widgets desde el panel de WordPress.
Todas las opciones del Módulo de Barra Lateral explicadas
Una vez añadido, aparecerán automáticamente las opciones del módulo. Aquí configuras el contenido y los estilos de diseño. Estas opciones están organizadas en tres pestañas: Contenido, Diseño y Avanzado.
Pestaña Contenido
Aquí encontrarás las opciones de contenido disponibles.
Área de widget – Haz clic en el menú desplegable para seleccionar el widget que deseas usar. Para este ejemplo, seleccionaremos Barra Lateral.
Enlace
Si deseas aplicar un enlace clicable al módulo completo, puedes hacerlo aquí:
-
URL de enlace del módulo – Pega aquí la URL que quieres que todo el módulo enlace; así, al hacer clic redirigirá a esa URL.
Destino del enlace – Define si al hacer clic el enlace se abre en la misma ventana o en una pestaña nueva:
-
En la misma ventana
-
En una pestaña nueva
Fondo
En este grupo puedes configurar:
-
Color de fondo
-
Degradado de fondo
-
Imagen de fondo
-
Vídeo de fondo
-
Patrón de fondo
-
Máscara de fondo
Cómo añadir un color de fondo
Cómo añadir un degradado de fondo
-
Haz clic en la segunda pestaña (ícono de degradado).
-
Haz clic en Añadir degradado de fondo.
Para cambiar los colores, haz clic en los puntos de parada del degradado y elige desde la paleta o usa el cuentagotas. Para añadir un punto, haz clic en la barra deslizante.
Opciones del degradado:
Cómo añadir una imagen de fondo
Opciones de imagen de fondo:
Cómo añadir un vídeo de fondo
-
Haz clic en la cuarta pestaña, el icono de vídeo.
-
Haz clic en el ícono gris + para abrir la biblioteca de medios, donde puedes seleccionar un vídeo ya subido o subir uno nuevo.
Opciones de vídeo de fondo
-
MP4 vs WebM – Se recomienda subir ambas versiones (MP4 y WebM), ya que no todos los navegadores admiten WebM. Subir ambos formatos garantiza que el vídeo se reproduzca en todos los dispositivos y navegadores.
-
Ancho del vídeo de fondo – Establece el ancho del vídeo escribiendo un valor numérico.
-
Alto del vídeo de fondo – Establece el alto del vídeo escribiendo un valor numérico.
-
Pausar el vídeo cuando se reproduzca otro – Si quieres que el vídeo de fondo se pause al reproducirse otro vídeo, activa esta opción en “sí”. Por defecto, el vídeo se pausa cuando no está visible. Si deseas que continúe, actívala en “no”.
Cómo añadir un patrón de fondo
-
Haz clic en la quinta pestaña, el icono de patrón.
-
Haz clic en Agregar patrón de fondo.
-
Elige el tipo de patrón que deseas desde el menú desplegable.
Opciones de patrón de fondo
-
Color del patrón – Selecciona el color desde la paleta del sitio o usa el cuentagotas.
-
Transformación del patrón – Transforma el patrón horizontal o verticalmente, gíralo o inviértelo.
-
Tamaño del patrón – Elige tamaño real, cubrir, ajustar, estirar o personalizado. Si eliges personalizado, aparecen opciones para establecer ancho y alto con el deslizador o escribiendo números.
-
Origen de repetición del patrón – Selecciona el origen desde donde se repite el patrón.
-
Desplazamiento horizontal y vertical – Ajusta los desplazamientos del patrón.
-
Repetición del patrón – Decide si se repite horizontal, vertical u otra opción.
-
Modo de mezcla del patrón – Define cómo se mezcla el patrón con capas inferiores. Elige entre 16 modos disponibles.
Cómo añadir una máscara de fondo
-
Haz clic en la sexta pestaña, el icono de máscara.
-
Haz clic en Agregar máscara de fondo.
-
Selecciona el tipo de máscara desde el menú desplegable.
Opciones de máscara de fondo
-
Color de la máscara – Elige el color desde la paleta o usa el cuentagotas.
-
Transformación de la máscara – Transforma, gira o invierte la máscara.
-
Proporción de aspecto – Define la relación entre ancho y alto de la máscara.
-
Tamaño de la máscara – Selecciona tamaño real, cubrir, ajustar, estirar o personalizado. Si eliges personalizado, aparecen opciones para ancho y alto con el deslizador o escribiendo valores.
-
Modo de mezcla de la máscara – Define cómo interactúa la máscara con las capas inferiores. Elige entre 16 modos disponibles.
Etiqueta administrativa
La etiqueta administrativa es donde puedes darle un nombre al módulo, visible solo para ti, para mantener todo organizado en el panel de administración. Por defecto se usa el nombre del módulo, pero puedes cambiarlo a tu conveniencia.
Pestaña Diseño
Aquí se encuentran todos los estilos y configuraciones de diseño para este módulo.
Diseño
Texto
Define los estilos generales de texto del módulo. Sin embargo, puedes configurar estilos específicos para elementos como texto de título o cuerpo.
-
Alineación de texto – Elige: izquierda, centrado, derecha o justificado.
-
Color de texto – Selecciona la paleta de colores predeterminada: clara u oscura. Estas paletas se configuran en las opciones del tema.
-
Sombra de texto – Aplica sombra paralela a todo el texto del módulo.
Texto de título
Opciones específicas para el estilo del título:
-
Nivel de encabezado – Elige entre h1, h2, h3, h4, h5 o h6.
-
Fuente del título, grosor, estilo (cursiva, mayúsculas, versalitas, subrayado o tachado).
-
Alineación, color, tamaño, espaciado entre letras, altura de línea.
-
Sombra del texto del título – Ajusta dirección horizontal/vertical, desenfoque y color.
Texto del cuerpo
Opciones específicas para el estilo del texto del cuerpo:
-
Fuente, grosor, estilo, alineación, color, tamaño, espaciado entre letras, altura de línea.
-
Sombra del texto del cuerpo – Ajusta dirección, desenfoque y color.
Dimensiones, Espaciado, Borde
Igual que en el módulo anterior: define ancho, ancho máximo, alineación, altura mínima, altura, altura máxima; márgenes, rellenos; bordes redondeados, estilos, color y ancho.
Sombra de caja
Añade una sombra paralela a todo el módulo. Una vez que seleccionas un estilo de sombra, puedes personalizar las siguientes opciones:
-
Posición horizontal – Define la ubicación horizontal de la sombra paralela.
-
Posición vertical – Define la ubicación vertical de la sombra paralela.
-
Intensidad del desenfoque – Define qué tan intenso es el desenfoque. A mayor valor, más grande, amplia y ligera será la sombra.
-
Intensidad de expansión – Define cómo se propaga el desenfoque. A mayor expansión, mayor densidad de sombra.
-
Color de la sombra – Define el color de la sombra.
-
Ubicación de la sombra – Determina si la sombra está dentro o fuera del módulo.
Filtros
Ajusta los filtros del módulo:
-
Tono – Define el ángulo del tono del color.
-
Saturación – Controla la intensidad del color.
-
Brillo – Controla qué tan brillantes serán los colores.
-
Contraste – Controla la diferencia entre zonas claras y oscuras.
-
Invertir – Invierte tono, saturación y brillo según el valor indicado.
-
Sepia – Aplica un aspecto más cálido, amarillento o marrón.
-
Opacidad – Controla qué tan transparente u opaco será el fondo (color, degradado, imagen, etc.).
-
Desenfoque – Controla la cantidad de desenfoque gaussiano aplicado.
-
Modo de fusión – Define cómo se mezcla el módulo con las capas inferiores. Por defecto está Normal.
Opciones disponibles:
-
Escalar
-
Trasladar
-
Rotar
-
Inclinar
-
Puntos de origen
Usa la tecla TAB para acceder a cada opción. Configura cada una ingresando valores numéricos o arrastrando y expandiendo el cuadro o círculo.
Puedes bloquear valores idénticos haciendo clic en el icono de cadena en la esquina inferior derecha.
Animación
Aquí puedes aplicar animaciones al módulo. Una vez que eliges un estilo, puedes ajustar:
-
Duración – Define el tiempo que dura un ciclo completo de la animación.
-
Retraso – Define cuánto tiempo esperar antes de iniciar la animación tras aplicarla. Puede comenzar más tarde, en cuanto se activa o parcialmente durante la animación.
-
Opacidad inicial – Define el valor de opacidad al comenzar la animación.
-
Curva de animación – Controla la aceleración y desaceleración. Suaviza el efecto más que una velocidad lineal.
-
Repetición – Por defecto solo se reproduce una vez. Para repetirla continuamente, selecciona la opción bucle.
Pestaña avanzada
En esta pestaña encontrarás opciones útiles para diseñadores más experimentados, como CSS personalizado.
Aquí puedes:
Identificador y clases CSS
Asigna un identificador o clase CSS específica al módulo. Esto ayuda a aplicar estilos personalizados mediante la hoja de estilos del tema hijo.
CSS personalizado
-
CSS libre – Escribe CSS arbitrario usando el selector “selector”. Ejemplo: selector h1 {color: rojo;}
-
Elementos del módulo – En esta pestaña puedes aplicar CSS personalizado para secciones concretas del módulo.
Condiciones
Las condiciones de visualización te permiten definir cuándo mostrar este módulo según criterios como:
Puedes añadir una o varias condiciones.
Visibilidad
-
Deshabilitar en – Define en qué dispositivos se oculta el módulo: teléfono, tableta o escritorio.
Desbordamiento horizontal – Controla lo que sucede si el contenido se desborda hacia los lados:
-
Visible
-
Con desplazamiento
-
Oculto
-
Automático
Desbordamiento vertical – Controla lo que ocurre si el contenido se desborda hacia arriba o abajo:
-
Visible
-
Con desplazamiento
-
Oculto
-
Automático
Transiciones
Controla la animación al pasar el cursor:
-
Duración – Tiempo de la transición en milisegundos.
-
Retraso – Retardo antes de iniciar la transición.
-
Curva de velocidad – Controla la aceleración y desaceleración de la transición.
Posición
Define la ubicación del módulo:
-
Relativa (predeterminada) – Se posiciona según el flujo normal del documento; los desplazamientos no afectan a otros elementos.
-
Absoluta – Se elimina del flujo normal y se posiciona respecto a un elemento contenedor.
-
Fija – Se elimina del flujo normal y se posiciona respecto a la ventana del navegador; útil para efectos “pegajosos”.
-
Desplazamiento vertical – Controla la posición vertical.
-
Desplazamiento horizontal – Controla la posición horizontal.
-
Índice z – Controla el orden de superposición; valores más altos se superponen sobre otros.
Efectos al desplazarse
Define el comportamiento del módulo al hacer scroll:
-
Puedes hacerlo “pegajoso” en parte superior, inferior o ambas.
-
También puedes aplicar transformaciones durante el desplazamiento.
-
Puedes habilitar movimiento vertical independiente del contenido circundante.
-
La función de activación permite definir si el efecto comienza cuando la parte superior, media o inferior del módulo está visible.
Guardar tu diseño
Tras terminar de configurar el módulo, haz clic en la flecha verde abajo a la derecha para guardar. Si cierras sin guardar, perderás los cambios.
Luego guarda el diseño de la página presionando:
-
CMD + S (Mac)
-
CTRL + S (PC)
O utiliza la barra de herramientas inferior: haz clic en el icono morado de tres puntos para expandir y luego en el botón verde de guardar.
Salir del constructor visual
Una vez guardados los cambios, haz clic en “Salir del constructor visual” en la barra de administración superior para salir.
Recursos del módulo de barra lateral Divi
-
Cómo crear una barra lateral pegajosa para la plantilla de entradas del blog
-
Cómo incluir una barra lateral fija en toda la altura para la plantilla de entradas del blog
-
Descargar una plantilla de entrada de blog con barra lateral gratuita
Cómo añadir llamadas a la acción pegajosas en la barra lateral de una entrada del blog de Divi
