Aquí es donde puedes agregar un borde al módulo. Cuando agregas un borde, se aplicará a cada tarjeta de blog individual. Para agregar un borde que rodee todo el módulo, se recomienda agregar el borde a la fila que contiene el módulo.
Sombra de Caja
Aquí puedes agregar una sombra paralela (drop shadow) a todo el módulo.
Una vez que selecciones un estilo de sombra, puedes personalizar las siguientes opciones:
Posición Horizontal de la Sombra de Caja – Define la posición horizontal de la sombra.
Posición Vertical de la Sombra de Caja – Define la posición vertical de la sombra.
Intensidad del Desenfoque de la Sombra de Caja – Define la intensidad del desenfoque de la sombra. Cuanto mayor sea el valor, más grande será el desenfoque y más ancha y tenue será la sombra.
Intensidad de Expansión de la Sombra de Caja – Define qué tanto se expande la sombra. Aumentar esta intensidad hará que la sombra sea más densa. A mayor densidad, más intensa se verá la sombra.
Color de la Sombra – Define el color de la sombra.
Posición de la Sombra de Caja – Define la posición de la sombra. Puede estar dentro del módulo o fuera del módulo.
Filtros
Ajusta los filtros del módulo:
Matiz (Hue) – Define el ángulo del matiz de un color.
Saturación – Define cuán intensa debe ser la saturación del color.
Brillo (Brightness) – Define cuán brillantes deben ser los colores.
Contraste – Define cuán marcadas deben ser las áreas claras y oscuras.
Invertir – Invierte el matiz, la saturación y el brillo según el valor especificado.
Sepia – Define una apariencia más cálida, en tonos amarillos/marrones.
Opacidad – Define cuán transparente u opaco debe ser el fondo (color, degradado, imagen, etc.).
Desenfoque – Define la cantidad de desenfoque gaussiano aplicado al módulo.
Modo de Fusión – Se refiere a cómo el módulo se mezcla con las capas que están debajo. De forma predeterminada, estará seleccionado normal.
-
Escalar
-
Trasladar
-
Rotar
Inclinar
-
Puntos de Origen
Navega entre las pestañas para acceder a cada opción. Configura cada opción ingresando valores numéricos o arrastrando y expandiendo el cuadro o círculo.
Puedes bloquear estos valores para que siempre sean idénticos haciendo clic en el icono de cadena en la esquina inferior derecha.
Animación
Aquí puedes aplicar una animación al módulo. Una vez que elijas un estilo, puedes ajustar las siguientes opciones:
Duración de la Animación – Define el tiempo que tarda la animación en completar un ciclo.
Retraso de la Animación – Define la cantidad de tiempo que debe esperar la animación desde que se aplica al elemento antes de comenzar. La animación puede comenzar más tarde, inmediatamente desde el inicio, o inmediatamente a mitad de la animación.
Opacidad Inicial de la Animación – Define el valor inicial de opacidad.
Curva de Velocidad de la Animación – Define el método de aceleración (easing) de la animación. Aplicar easing al inicio y al final de la animación crea un efecto más suave que una curva de velocidad lineal.
Repetición de la Animación – Por defecto, las animaciones se reproducen solo una vez. Si deseas que se repita de forma continua, selecciona la opción Bucle (Loop).
Pestaña Avanzado
Dentro de la pestaña Avanzado, encontrarás opciones que pueden ser útiles para diseñadores web con más experiencia, como CSS personalizado.
Aquí puedes aplicar CSS personalizado a tu módulo. También puedes asignar clases CSS e ID personalizados al módulo, lo que permite personalizar estilos utilizando propiedades CSS avanzadas o aplicar código CSS personalizado usando la clase del módulo.
ID y Clases CSS
Asigna un ID CSS o una Clase CSS específica a este módulo. Esto es útil cuando deseas aplicar CSS personalizado al módulo utilizando la hoja de estilos de tu tema hijo.
CSS Personalizado
CSS de Forma Libre – Escribe CSS de forma libre utilizando el selector selector para apuntar a este módulo.
Ejemplo: selector h1 {color: red;}
Elementos del Módulo – También puedes aplicar CSS personalizado pegándolo en esta pestaña. Al hacer clic en la pestaña de Elementos del Módulo, verás secciones individuales donde puedes agregar propiedades CSS personalizadas.
Condiciones
Esta pestaña te permite elegir cuándo mostrar este módulo basándote en un conjunto de condiciones, como por ejemplo:
-
Si un usuario está visitando la página
-
Si ya ha comprado anteriormente en tu sitio
-
Qué navegador está utilizando
-
Qué sistema operativo está usando
y más.
Puedes añadir una condición o múltiples condiciones.
Visibilidad
Desactivar en – Define la visibilidad del módulo. Puedes desactivarlo (ocultarlo) cuando la ventana de visualización sea un Teléfono, Tablet o Escritorio marcando la casilla correspondiente.
Desbordamiento Horizontal (Horizontal Overflow) – Define lo que se muestra cuando el contenido se desborda por los lados izquierdo y derecho de un elemento a nivel de bloque. Puede ser:
-
Visible – El contenido se mostrará si se desborda más allá del ancho del módulo.
-
Desplazar – Si el contenido del módulo se desborda, se mostrará una barra de desplazamiento horizontal.
-
Oculto – Si el contenido se desborda, se ocultará la parte que sobrepase.
-
Automático – El navegador decidirá si mostrar una barra de desplazamiento.
Desbordamiento Vertical – Define lo que se muestra cuando el contenido se desborda por los bordes superior e inferior del módulo. Puede ser:
-
Visible – El contenido se mostrará si se desborda más allá de la altura del módulo.
-
Desplazar – Si el contenido se desborda, se mostrará una barra de desplazamiento vertical.
-
Oculto – Si el contenido se desborda, se ocultará la parte que sobrepase.
-
Automático – El navegador decidirá si mostrar una barra de desplazamiento.
Transiciones
Controla la duración, el retraso y la curva de velocidad de la animación al pasar el cursor (hover).
-
Duración de la Transición – Define la duración (en milisegundos) de la transición de la animación al pasar el cursor.
-
Retraso de la Transición – Define el retraso (en milisegundos) de la animación al pasar el cursor.
-
Curva de Velocidad de la Transición – Define la curva de velocidad para la transición de la animación al pasar el cursor.
Posición
Posición – Define la posición del módulo:
-
Relativa (valor predeterminado) – El módulo se posiciona según el flujo normal del documento, y los valores de desplazamiento (vertical y horizontal) se aplican con respecto a sí mismo. El desplazamiento no afecta a otros elementos ni al espacio ocupado.
-
Absoluta – El módulo se saca del flujo normal del documento y no ocupa espacio en el diseño de la página. Se posiciona en relación con su ancestro más cercano posicionado (si existe) o con el bloque contenedor inicial. Las opciones de ubicación determinan su posición final.
-
Fija – El módulo se saca del flujo normal del documento y no ocupa espacio en el diseño. Se posiciona en relación con la ventana del navegador. Esto puede usarse para crear un módulo fijo (sticky).
Desplazamiento Vertical – Define la posición vertical del módulo.
Desplazamiento Horizontal – Define la posición horizontal del módulo.
Z-index – Define el orden del módulo en el diseño de la página. Los módulos con un valor de z-index más alto se superponen a los de menor valor.
Efectos de Desplazamiento
Esto define cómo se comporta el módulo durante el desplazamiento. Puedes hacer que el módulo sea fijo (sticky) (en la parte superior, inferior o en ambas) y elegir si el módulo se transforma al desplazarse.
También puedes habilitar el movimiento vertical en este módulo, lo cual te permite ajustar la velocidad a la que este elemento se desplaza (haciéndolo más rápido o más lento) sin afectar a los elementos circundantes.
El Disparador del Efecto de Movimiento (Motion Trigger Effect) te permite elegir cuándo se activa el efecto de desplazamiento que acabas de aplicar: cuando la parte superior, el centro, o la parte inferior del elemento está a la vista.
Guardar tu diseño
Una vez que hayas terminado de estilizar y configurar el módulo, haz clic en la flecha verde en la parte inferior derecha del módulo para guardar tu diseño. Si cierras el módulo sin guardar, perderás tu trabajo.
A continuación, guarda el diseño de la página
Para guardar el diseño de la página, puedes presionar CMD + S en una Mac o CTRL + S en una PC. También puedes usar la barra de herramientas inferior de Divi para guardar el diseño de tu página haciendo clic en el ícono circular morado con los tres puntos … para expandir la barra de herramientas, y luego hacer clic en el botón verde Guardar en la parte inferior derecha.
Salir del Visual Builder
Una vez que todos tus cambios estén guardados, haz clic en Salir del Visual Builder en la barra de herramientas de administrador en la parte superior para salir del Visual Builder.
Consejos y mejores prácticas para usar el módulo de blog de Divi
Cómo diseñar una plantilla de publicación de blog con el Generador de Temas de Divi (Descarga GRATUITA)
Con el Generador de Temas de Divi, crear plantillas de página personalizadas para tus publicaciones de blog es muy fácil.
En este artículo, te mostraremos exactamente cómo hacerlo.
Entendiendo la opción Publicaciones para la página actual dentro del módulo Blog de Divi
El módulo Blog de Divi sirve para mucho más que solo una página de blog. También puedes usarlo para construir diversas páginas, como una página de categoría o una página de archivo.
La opción Publicaciones para la página actual dentro del módulo Blog te permite mostrar dinámicamente publicaciones, como en una página de resultados de búsqueda, una página de categoría o una página de archivo.
En esta publicación, te mostraremos cómo configurarlo.
Cómo agregar publicaciones relacionadas a la plantilla de tu entrada de blog en Divi
Las publicaciones relacionadas son una excelente manera de aumentar el tráfico de tu blog. Los usuarios en tu blog verán publicaciones que ya les interesan. Esto los mantiene más tiempo en tu sitio y aumenta su interacción contigo y con tu página web.
Afortunadamente, agregar publicaciones relacionadas a las plantillas de entradas de blog en Divi Theme Builder es fácil. En este artículo, te mostraremos cómo hacerlo.
