Cómo crear secciones de héroe de publicaciones de blog dinámicas y atractivas con Divi

Cada vez que sale una nueva actualización, aumentan las posibilidades de diseño que tienes. La combinación de contenido dinámico y opciones de desplazamiento, por ejemplo, puede brindar resultados sorprendentes. Para demostrarlo, le mostraremos cómo crear 3 impresionantes secciones dinámicas de héroes de publicaciones de blog utilizando solo las opciones integradas de Divi. Lo guiaremos paso a paso a través de cada uno de los ejemplos que lo inspirarán a crear sus propias variaciones también.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo al resultado final de los tres ejemplos que crearemos.

Ejemplo 1

Ejemplo # 2

Ejemplo # 3

Agregar una nueva publicación de blog

Detalles de la publicación

Lo primero es lo primero, comience por crear una nueva publicación de blog. Agrega el título, la categoría elegida y la imagen destacada. Una vez hecho esto, habilite Divi Builder.

Configuración de página Divi

Antes de cambiar a Visual Builder, cambie la configuración de la página Divi en la esquina superior derecha de la nueva publicación del blog.

• Diseño de página: ancho completo
• Título de la publicación: Ocultar

Cambiar a Visual Builder

¡Es hora de cambiar al Visual Builder para comenzar a crear los diferentes ejemplos!

Creando los Módulos

Agregar una nueva sección + fila de una columna

Antes de sumergirnos en cada uno de los ejemplos por separado, comenzaremos creando los módulos de texto que contienen contenido dinámico. A lo largo de los tres ejemplos, usaremos estos módulos prefabricados para terminar el diseño. Una vez que haya agregado una nueva sección, agregue una nueva fila usando la siguiente estructura de columnas:

Módulo de texto del título de la publicación

Seleccionar contenido dinámico del título de la publicación

El primer módulo dinámico que necesitamos contendrá el título de la publicación. Agregue un nuevo módulo de texto y seleccione Título de la publicación en la lista de contenido dinámico.

Configuración de texto

Luego, vaya a la configuración de texto y realice algunos cambios.

• Fuente de texto: Lato
• Peso de la fuente del texto: negrita
• Color del texto: # 000000
• Tamaño del texto: 58px (escritorio), 45px (tableta), 35px (teléfono)
• Altura de la línea de texto: 1em
• Orientación del texto: centro

Espaciado

Cambie también los valores de espaciado.

• Margen inferior: 50 px
• Acolchado superior: 10px
• Acolchado inferior: 10px

Módulo de texto de fecha de publicación

Seleccione el contenido dinámico de la fecha de publicación

El segundo módulo que necesitaremos es un módulo de texto que contiene la fecha de publicación. Continúe y agregue uno y seleccione Publicar fecha de publicación en la lista de contenido dinámico.

Configuración de texto

A continuación, cambie la configuración de texto de este módulo.

• Peso de la fuente del texto: Ligero
• Color del texto: # 000000
• Tamaño del texto: 30 px (escritorio), 20 px (tableta), 16 px (teléfono)
• Espaciado de letras de texto: 14px
• Orientación del texto: centro

Espaciado

Agregue un poco de margen inferior también.

• Margen inferior: 50 px

Módulo de texto de categorías de publicaciones

Seleccionar categorías Contenido dinámico

El último módulo que agregaremos es un módulo de texto que contiene contenido dinámico de categorías de publicaciones.

Configuración de texto

Vaya a la configuración de texto y cambie la orientación del texto.

• Orientación del texto: centro

Configuración del texto del enlace

Luego, aplique algunas modificaciones a la configuración del texto del enlace.

• Peso de la fuente del enlace: Ultra Bold
• Estilo de fuente de enlace: mayúsculas
• Color del texto del enlace: # 000000
• Tamaño del texto del enlace: 15px
• Espaciado de letras de enlace: 5px

Espaciado

A continuación, agregue el relleno inferior.

• Acolchado inferior: 20px

Frontera

Y termina con un borde inferior sutil.

• Ancho del borde inferior: 1 px
• Color del borde inferior: # 000000

Creación del ejemplo n. ° 1

Agregar nueva sección

Espaciado

¡Comencemos a crear el primer ejemplo! Justo debajo de la sección anterior que ha creado, continúe y agregue una nueva. Abra su configuración y elimine todo el relleno personalizado predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila con la siguiente estructura de columnas:

Dimensionamiento

Abra la configuración de tamaño de esta fila y cambie las cosas.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí

Espaciado

A continuación, agregue algunos valores de espaciado personalizados.

• Relleno superior: 0px
• Acolchado inferior: 0px
• Relleno superior de la columna 2: 130 px
• Relleno inferior de la columna 2: 130px
• Columna 2 Relleno izquierdo: 50px
• Columna 2 Relleno derecho: 50px

Agregar módulo de imagen a la columna 1

Seleccionar contenido dinámico de imagen destacada

Continúe agregando un módulo de imagen a la primera columna. En lugar de cargar una imagen, vincule el módulo a la imagen destacada dinámica.

Borde predeterminado

También estamos agregando un borde derecho al pasar el mouse. Para hacer eso, elija primero el siguiente ancho de borde predeterminado:

• Ancho del borde derecho: 0px

Desplazamiento del borde

Y agregue la siguiente configuración al pasar el mouse:

• Ancho del borde derecho: 24px
• Color del borde derecho: #FFFFFF

Sombra de cuadro predeterminada

Lo mismo ocurre con la sombra del cuadro, aplique la siguiente configuración predeterminada de sombra del cuadro:

• Posición vertical de la sombra del cuadro: 0px
• Fuerza de desenfoque de sombra de caja: 0px
• Fuerza de propagación de la sombra de caja: 80px
• Color de sombra: rgba (255,255,255,0)

Cuadro de sombra flotante

Y cambiar las cosas al pasar el mouse:

• Posición horizontal de la sombra del cuadro: 600px
• Posición vertical de la sombra del cuadro: 0px
• Fuerza de desenfoque de sombra de caja: 0px
• Fuerza de propagación de la sombra de caja: 80px
• Color de sombra: # E4BAC7

Transiciones

Para crear una transición suave, cambie la duración de la transición en la pestaña avanzada.

• Duración de la transición: 1200ms

Coloque módulos dinámicos en la columna 2

Lo único que queda por hacer para completar este ejemplo es colocar los módulos que hemos creado en la primera parte de este tutorial en la segunda columna.

Creación del ejemplo n. ° 2

Agregar nueva sección

Divisor superior predeterminado

¡En el siguiente! Agregue una nueva sección con el siguiente divisor superior:

• Estilo de divisor: Buscar en la lista
• Color del divisor: #FFFFFF
• Altura del divisor: 50 px
• Disposición del divisor: encima del contenido de la sección

Desplazamiento del divisor superior

Cambia la altura del divisor al pasar el mouse.

• Altura del divisor: 174px

Espaciado

Elimine todo el relleno personalizado de la siguiente sección. Esto permitirá que la fila y la sección choquen en uno de los siguientes pasos.

• Relleno superior: 0px
• Acolchado inferior: 0px

Transiciones

Para crear una transición de divisor suave, cambie la duración de la transición en la pestaña avanzada.

• Duración de la transición: 500 ms

Agregar nueva fila

Estructura de la columna

Ahora, continúe y agregue una fila a su sección usando la siguiente estructura de columnas:

Color de fondo predeterminado

Agregue el siguiente color de fondo:

• Color de fondo: #FFFFFF

Colocar el cursor sobre el color de fondo

Cambia el color de fondo al pasar el mouse.

• Color de fondo: rgba (255,255,255,0.56)

Imagen destacada Imagen de fondo dinámica

Sube también la imagen destacada como una imagen de fondo de fila dinámica. Después de hacerlo, cambie la combinación de la imagen de fondo.

• Mezcla de imagen de fondo: pantalla

Dimensionamiento

Permita que la fila ocupe todo el ancho de la pantalla cambiando la configuración de tamaño.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canaleta personalizado: Sí
• Ancho de la canaleta: 1

Espaciado

Y agregue algunos valores de espaciado de relleno personalizados.

• Relleno superior: 200 px
• Acolchado inferior: 200px
• Relleno izquierdo: 100 px (escritorio), 50 px (tableta), 20 px (teléfono)
• Relleno derecho: 100 px (escritorio), 50 px (tableta), 20 px (teléfono)

Transiciones

Por último, pero no menos importante, cree una transición suave cambiando la duración de la transición.

• Duración de la transición: 700 ms

Colocar módulos dinámicos en columna

¡Ahora puede colocar todos los módulos dinámicos en la columna de la fila y ya está con el segundo ejemplo!

Creación del ejemplo n. ° 3

Agregar nueva sección

Imagen destacada Imagen de fondo dinámica

¡Vamos al último ejemplo! Agregue una nueva sección y seleccione la Imagen destacada como la imagen de fondo de la sección.

Espaciado predeterminado

Luego, elimine todo el relleno personalizado predeterminado de la sección.

• Relleno superior: 0px
• Acolchado inferior: 0px

Desplazamiento del espaciado

Agregue un margen personalizado al pasar el mouse para crear un efecto de reducción.

• Relleno izquierdo: 150 px (escritorio), 50 px (tableta), 30 px (teléfono)
• Relleno derecho: 150 px (escritorio), 50 px (tableta), 30 px (teléfono)

Transiciones

Cambie también la duración de la transición.

• Duración de la transición: 500 ms

Agregar nueva fila

Estructura de la columna

Una vez que haya terminado de modificar la configuración de la sección, continúe agregando una nueva fila con la siguiente estructura de columnas:

Color de fondo predeterminado

Agregue el siguiente color de fondo:

• Color de fondo: #ffffff

Colocar el cursor sobre el color de fondo

Cambie el color de fondo al pasar el mouse.

• Color de fondo: rgba (255,255,255,0.46)

Fondo degradado

Agrega también un fondo de degradado radial.

• Color 1: rgba (41,196,169,0)
• Color 2: #ffffff
• Tipo de degradado: radial
• Posición inicial: 29%
• Posición final: 29%

Dimensionamiento

Cambie la configuración de tamaño de la fila siguiente.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Espaciado

Y agregue algunos valores de relleno personalizados.

• Relleno superior: 200 px
• Acolchado inferior: 200px
• Relleno izquierdo: 100 px (escritorio), 50 px (tableta), 20 px (teléfono)
• Relleno derecho: 100 px (escritorio), 50 px (tableta), 20 px (teléfono)

Transiciones

Por último, pero no menos importante, cambie la duración de la transición para una transición suave.

• Duración de la transición: 500 ms

Colocar módulos dinámicos en columna

Continúe y coloque todos los módulos prefabricados en la columna de la fila.

Cambiar la orientación del texto de todos los módulos

Lo único que necesitará cambiar sobre estos módulos es la orientación del texto y ¡listo!

• Orientación del texto: izquierda

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final a los tres ejemplos que hemos creado.

Ejemplo 1

Ejemplo # 2

Ejemplo # 3

Pensamientos finales

En esta publicación, le mostramos cómo combinar contenido dinámico con las opciones de desplazamiento de Divi para crear impresionantes secciones de héroe de publicación de blog. Sin lugar a dudas, estos ejemplos lo inspirarán a crear sus propias variaciones y personalizar la publicación de blog que publica. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!