Cómo crear secciones de héroes hermosas y cautivadoras para publicaciones de blog con Div

Cada vez que aparece una nueva actualización, las posibilidades de diseño que tiene. La combinación de contenido dinámico y opciones de viaje, por ejemplo, puede traer resultados sorprendentes. Para demostrar esto, le mostraremos cómo crear 3 secciones de héroes increíbles de publicaciones de blog utilizando solo las opciones integradas del Div. Lo guiaremos paso a paso a través de cada uno de los ejemplos que lo inspirarán a crear sus propias variaciones. ¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo al resultado final de los tres ejemplos que crearemos.
Ejemplo no. 1

Ejemplo no. 2

Ejemplo no. 3

Agregue una nueva publicación de publicación de blog primero, comience creando una nueva publicación de blog. Agregue el título, la categoría de elección y la imagen presentada. Una vez que haya terminado, active Divi Builder.

Configuración de la página Div antes de pasar a Visual Builder, modifique la configuración de la página de la Divic en la esquina superior derecha de la nueva publicación de blog.
Apariencia de la página: ancho completo
Publicación Título: Hide

¡Vaya a Visual Builder es hora de pasar al Visual Builder para comenzar a crear diferentes ejemplos!

La creación de los módulos agregue una nueva sección + fila con una columna antes de arrojarnos a cada uno de los ejemplos por separado, comenzaremos creando los módulos de texto que contienen contenido dinámico. En los tres ejemplos, utilizaremos estos módulos prefabricados para completar el diseño. Después de haber agregado una nueva sección, agregue una nueva línea utilizando la siguiente estructura de columna:

El módulo de texto del título de publicación Seleccione el contenido dinámico del título de publicación El primer módulo dinámico que necesitamos contendrá el título de publicación. Agregue un nuevo módulo de texto y seleccione el título de publicación en la lista de contenido dinámico. Texo luego, acceda a la configuración de texto y realice algunos cambios.

Texto de fuente: Lato
El peso de la fuente de texto: en negrita
Color de texto: # 000000
Tamaño de texto: 58 PX (escritorio), 45 PX (tableta), 35 PX (teléfono)
La altura de la línea de texto: 1em
Orientación de texto: centro
Difundir el cambio y los valores de espaciado.

Margen inferior: 50 PX
Revestimiento superior: 10 px
Finamiento inferior: 10 PX
El módulo de texto para la fecha de publicación Seleccione el contenido dinámico para la fecha de publicación El segundo módulo que necesitamos es un módulo de texto que contiene la fecha de publicación. Continúe y agregue uno y seleccione Publique la 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 adicional.


El peso de la fuente de texto: luz
Color de texto: # 000000
Tamaño de texto: 30 PX (escritorio), 20 px (tableta), 16 px (teléfono)
Texto de la carta de espacio: 14 PX
Orientación de texto: centro
Espaciado Agregar un margen más bajo.

Margen inferior: 50 PX
Modo de texto para publicaciones de publicaciones Seleccione las categorías de dinámica contiene el último modo que agregaremos es un módulo de texto que contiene contenido dinámico en las categorías de publicaciones.

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

Orientación de texto: centro
Configuración del enlace de texto Luego aplique algunos cambios a la configuración del texto del enlace.

Enlace de peso de fuente: Ultra Bold
Enlace de estilo de fuente: mayúsculas
Color de texto de enlace: # 000000
Enlace de texto de tamaño: 15 PXSpatie Letter Enlace: 5 PX
Espacio Agregar el siguiente capítulo inferior.
Finamiento inferior: 20 PX

Borde y acabado con un borde inferior sutil.
Ancho de borde inferior: 1 PX

Color de borde inferior: # 000000
¡Se crea el ejemplo # 1, agregue una nueva sección de espacio para comenzar a crear el primer ejemplo! Incluso debajo de la sección anterior que creó, continúa y agregue una nueva. Abra la configuración y elimine todo el revestimiento personalizado predeterminado.
SUS Lingo: 0 PX

Finamiento inferior: 0 PX
Agregue una nueva estructura de columna de fila Continuar agregando una nueva fila con la siguiente estructura de columnas:
Dimensión Abra la configuración de tamaño de esta fila y cambie las cosas.

Haga esta fila ancho completo: sí

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
El espacio agregue algunos valores de espaciado personalizados.
SUS Lingo: 0 PX

Finamiento inferior: 0 PX
Columna 2 revestimiento superior: 130 px
Columna 2 revestimiento inferior: 130 px
Columna 2 Lineo izquierdo: 50 PX
Columna 2 Reinicio recto: 50 PX
Agregue el módulo de imagen a la columna 1 Seleccione Contenido dinámico para imágenes recomendadas Continúe agregando un módulo de imagen a la primera columna. En lugar de cargar una imagen, conecte el módulo a la imagen dinámica.
Valor predeterminado también agregue un borde recto al cursor. Para esto, primero elija el siguiente ancho de borde predeterminado:

El ancho del borde recto: 0 px

Border desplegable y agregue las siguientes configuraciones para pasar el cierre:
El ancho del borde recto: 24 PX

Color de borde derecho: #ffffff
Box Sombra predeterminada Lo mismo es válido para la sombra del cuadro, aplique la siguiente configuración predeterminada para la sombra del cuadro: Box Sombra Posición vertical: 0px
Poder de poco claro de la sombra de la caja: 0 px

Poder de extender la sombra de la caja: 80 PX
Color de la sombra: RGBA (255,255,255.0)
Box Shadow flota y cambia las cosas:
Posición horizontal de la sombra de la caja: 600 PX
Box Shadow Posición vertical: 0px

Poder de poco claro de la sombra de la caja: 0 px
Poder de extender la sombra de la caja: 80 PX
Color de la 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: 1200 ms
Coloque los módulos dinámicos en la columna 2 Lo único que queda para completar este ejemplo es colocar los módulos que creamos en la primera parte de este tutorial en la segunda columna.


Cree el ejemplo # 2 Agregue una nueva sección El lado predeterminado predeterminado al siguiente! Agregue una nueva sección con el siguiente separador superior:
Estilo divisor: encontrar en la lista

Color divisor: #ffffff

Altura del divisor: 50 PX
Acuerdo de división: en la parte superior del contenido de la sección
Hover Divider de SUS cambia la altura del separador durante el viaje.
Altura del divisor: 174px
El espacio elimina toda la tensión personalizada de la siguiente sección. Esto permitirá que la fila y la sección chocen en uno de los siguientes pasos.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX

Transiciones Para crear una transición suave del divisor, cambie la duración de la transición en la pestaña avanzada.
Duración de la transición: 500 ms
Agregue una nueva línea a la estructura de la columna ahora, continúe y agregue una fila a su sección utilizando la siguiente estructura de columnas: Color de fondo predeterminado Agregue el siguiente fondo:

Color de fondo: #ffffff
Coloque el color de fondo Cambiar el color de fondo al cursor.

Color de fondo: RGBA (255.255.255.0.56)

La imagen presentó el fondo dinámico de la imagen Cargue la imagen recomendada y como una imagen de fondo en la fila dinámica. Después de hacer esto, cambie la mezcla de imágenes de fondo.
Mezcla de imagen de fondo: pantalla

La dimensión permite que la fila ocupe todo el ancho de la pantalla cambiando la configuración de tamaño.
Haga esta fila ancho completo: sí

Use el ancho de la cuneta personalizada: sí
El ancho de la canaleta: 1

Espacio y agregue algunos valores personalizados para el espacio.
Revestimiento superior: 200 PX
Finamiento inferior: 200 PX
Revelaje izquierdo: 100 PX (escritorio), 50 px (tableta), 20 px (teléfono)

Llenado derecho: 100 PX (escritorio), 50 px (tableta), 20 px (teléfono)
Las transiciones por último, pero no menos importante, crean una transición suave cambiando la duración de la transición.
Duración de transición: 700 ms
¡Coloque los módulos dinámicos en la columna ahora puede colocar todos los módulos dinámicos en la columna de fila y ya está terminado con el segundo ejemplo!
Cree el ejemplo # 3 Agregue una nueva sección PRESENTACIÓN PRESENTACIÓN DE FENTRISTA DINÁMICA ¡Pasamos al último ejemplo! Agregue una nueva sección y seleccione la imagen presentada como la imagen de fondo de la sección.

Espacio predeterminado luego elimine todos los rellenos personalizados predeterminados de la sección.
SUS Lingo: 0 PX

Finamiento inferior: 0 PX

Distancia de desplazamiento Agregue un margen personalizado al cursor para crear un efecto de disminución. Cabeza izquierda: 150 px (escritorio), 50 px (tableta), 30 px (teléfono)

Revestimiento derecho: 150 px (escritorio), 50 px (tableta), 30 px (teléfono)
Transiciones modificadas y duración de la transición.
Duración de la transición: 500 ms

Agregue una nueva línea a la estructura de la columna después de haber terminado de cambiar 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

Coloque el color de fondo Cambiar el color de fondo al cursor.
Color de fondo: RGBA (255.255.255.0.46)

El fondo de gradiente también agrega un fondo de gradiente radial.

Color 1: RGBA (41.196.169.0)
Color 2: #ffffff

Tipo de gradiente: radial
Posición inicial: 29%

Posición final: 29%
Dimensión luego cambie la configuración de dimensionamiento de la fila.
Haga esta fila ancho completo: sí
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Espacio y agregue algunos valores de llenado personalizados.

Revestimiento superior: 200 PX
Finamiento inferior: 200 PX
Revelaje izquierdo: 100 PX (escritorio), 50 px (tableta), 20 px (teléfono)
Llenado derecho: 100 PX (escritorio), 50 px (tableta), 20 px (teléfono)

Las transiciones finales pero no menos importantes, cambian la duración de la transición para una transición suave.
Duración de la transición: 500 ms
Coloque los módulos dinámicos en la columna, vaya más lejos y coloque todos los módulos prefabricados en la columna de fila.
Cambie la orientación del texto de todos los módulos ¡Lo único que necesitará cambiar en conexión con estos módulos es la orientación del texto y ya está terminado!
Orientación de texto: izquierda

Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final a los tres ejemplos que creamos.Ejemplo no.1exemplul no.2
Ejemplo no.3

Pensamientos finales En esta publicación, le he mostrado cómo combinar el contenido dinámico con las opciones flotantes de Divi para crear secciones sorprendentes sobre los héroes de las publicaciones de blog.Estos ejemplos indudablemente lo inspirarán a crear sus propias variantes y personalizar la publicación de blog que pone allí.Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.