Cada vez que sale una nueva actualización, las posibilidades de diseño que tienes aumentan. La combinación de contenido dinámico y opciones de desplazamiento, por ejemplo, puede generar resultados sorprendentes. Para demostrarlo, le mostraremos cómo crear 3 impresionantes secciones dinámicas de héroes de publicaciones de blog utilizando Divi y sus opciones integradas únicamente. Te guiaremos paso a paso a través de cada uno de los ejemplos que te inspirarán a crear tus propias variaciones también.
¡Hagámoslo!
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 creando una nueva publicación de blog. Agregue el título, la categoría de su elección y la imagen destacada. Una vez hecho esto, habilite Divi Builder.
Configuración de la 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 de blog.
- Diseño de página: Ancho completo
- Título de la publicación: Ocultar
Cambiar a Visual Builder
¡Es hora de cambiar a Visual Builder para comenzar a crear los diferentes ejemplos!
Crear 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, utilizaremos estos módulos prefabricados para finalizar 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 de título de publicación
Seleccione el 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 del texto: Lato
- Peso de fuente de texto: Negrita
- Color del texto: #000000
- Tamaño del texto: 58 px (escritorio), 45 px (tableta), 35 px (teléfono)
- Altura de línea de texto: 1em
- Orientación del texto: Centro
Espaciado
Cambie también los valores de espaciado.
- Margen inferior: 50px
- Relleno superior: 10px
- Relleno inferior: 10px
Módulo de texto de fecha de publicación posterior
Seleccione la fecha de publicación del contenido dinámico
El segundo módulo que necesitaremos es un módulo de texto que contenga la fecha de publicación posterior. Continúe, agregue uno y seleccione Publicar fecha de publicación en la lista de contenido dinámico.
Configuración de texto
Cambie la configuración de texto de este módulo a continuación.
- Peso de fuente de texto: ligero
- Color del texto: #000000
- Tamaño del texto: 30 px (escritorio), 20 px (tableta), 16 px (teléfono)
- Espaciado entre letras de texto: 14px
- Orientación del texto: Centro
Espaciado
Agregue un poco de margen inferior también.
- Margen inferior: 50px
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 publicación.
Configuración de texto
Vaya a la configuración de texto y cambie la orientación del texto.
- Orientación del texto: Centro
Ajustes de texto de enlace
Luego, aplique algunas modificaciones a la configuración del texto del enlace.
- Peso de la fuente del enlace: ultra negrita
- Estilo de fuente del enlace: Mayúsculas
- Color del texto del enlace: #000000
- Tamaño del texto del enlace: 15 px
- Espaciado entre letras de enlace: 5px
Espaciado
Agregue el relleno inferior a continuación.
- Relleno inferior: 20px
Borde
Y termine con un borde inferior sutil.
- Ancho del borde inferior: 1px
- Color del borde inferior: #000000
Creando Ejemplo #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
- Relleno 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 del canalón: 1
- Igualar alturas de columna: Sí
Espaciado
Agregue algunos valores de espaciado personalizados a continuación.
- Relleno superior: 0px
- Relleno inferior: 0px
- Relleno superior de la columna 2: 130 px
- Relleno inferior de la columna 2: 130 px
- 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 por defecto
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 de borde
Y agregue la siguiente configuración al pasar el mouse:
- Ancho del borde derecho: 24px
- Color del borde derecho: #FFFFFF
Predeterminado de sombra de cuadro
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 cuadro: 0px
- Fuerza de propagación de la sombra del cuadro: 80px
- Color de sombra: rgba(255,255,255,0)
Suspensión de la sombra de la caja
Y cambiar las cosas al pasar el mouse:
- Posición horizontal de la sombra del cuadro: 600 px
- Posición vertical de la sombra del cuadro: 0px
- Fuerza de desenfoque de sombra de cuadro: 0px
- Fuerza de propagación de la sombra del cuadro: 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.
Creando Ejemplo #2
Agregar nueva sección
Predeterminado del divisor superior
¡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: 50px
- Disposición de los divisores: en la parte superior del contenido de la sección
Desplazamiento del divisor superior
Cambie la altura del divisor al pasar el mouse.
- Altura del divisor: 174px
Espaciado
Retire todo el relleno personalizado de la siguiente sección. Esto permitirá que la fila y la sección colisionen en uno de los siguientes pasos.
- Relleno superior: 0px
- Relleno inferior: 0px
Transiciones
Para crear una transición divisoria suave, cambie la duración de la transición en la pestaña avanzada.
- Duración de la transición: 500ms
Agregar nueva fila
Estructura de la columna
Ahora, continúa y agrega una fila a tu sección usando la siguiente estructura de columnas:
Color de fondo predeterminado
Añádele el siguiente color de fondo:
- Color de fondo: #FFFFFF
Color de fondo flotante
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
Cargue la imagen destacada como una imagen de fondo de fila dinámica también. Después de hacerlo, cambie la mezcla 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 canalón personalizado: Sí
- Ancho del canalón: 1
Espaciado
Y agregue algunos valores de espaciado de relleno personalizados.
- Relleno superior: 200px
- Relleno 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: 700ms
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á listo con el segundo ejemplo!
Creando Ejemplo #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 imagen de fondo de la sección.
Espaciado predeterminado
Luego, elimine todo el relleno personalizado predeterminado de la sección.
- Relleno superior: 0px
- Relleno inferior: 0px
Suspensión de 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: 500ms
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
Agrega el siguiente color de fondo:
- Color de fondo: #ffffff
Color de fondo flotante
Cambia el color de fondo al pasar el mouse.
- Color de fondo: rgba(255,255,255,0.46)
Fondo degradado
Agrega también un fondo degradado radial.
- Color 1: rgba(41.196.169,0)
- Color 2: #ffffff
- Tipo de gradiente: 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 del canalón: 1
Espaciado
Y agregue algunos valores de relleno personalizados.
- Relleno superior: 200px
- Relleno 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: 500ms
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 deberá cambiar de 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éroes de publicaciones de blog. Sin lugar a dudas, estos ejemplos lo inspirarán a crear sus propias variaciones y personalizar la publicación de blog que publique. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!