5 ejemplos de diseños de sección de estilo editorial creados con Divi

Las nuevas opciones de Divi ofrecen toneladas de posibilidades. Los módulos, filas y columnas, más que nunca, se empoderan mutuamente en el camino hacia un diseño web sorprendente y fácil de usar. Una de las cosas que puede hacer es crear secciones de estilo editorial notables. Y eso es exactamente lo que les mostraremos en esta publicación; 5 diseños de sección de estilo editorial diferentes que puede utilizar en diferentes sitios web. ¿La mejor parte? La publicación se realiza utilizando la configuración correcta para cada módulo, fila y columna únicamente.

Echemos un vistazo a los cinco ejemplos que le mostraremos cómo crear.

Primer ejemplo

Escritorio

Móvil

Segundo ejemplo

Escritorio

Móvil

Tercer ejemplo

Escritorio

Móvil

Cuarto ejemplo

Escritorio

Móvil

Quinto ejemplo

Escritorio

Móvil

5 ejemplos de diseños de sección de estilo editorial creados con Divi

Suscríbete a nuestro canal de Youtube

Comience a crear el primer ejemplo

Comencemos creando nuestro primer diseño de estilo de editor.

Agregar nueva sección

Agregue una nueva página, habilite Divi Builder y cambie a Visual Builder. Una vez que esté en Visual Builder, agregue una sección estándar.

Agregar fila de tres columnas

Dentro de esa sección estándar, necesitaremos una fila de tres columnas.

Fondo degradado

Abra la configuración de la fila y agregue el siguiente fondo degradado:

• Primer color: # 636363
• Segundo color: rgba (255,255,255,0)
• Tipo de degradado: radial
• Dirección radial: centro
• Posición inicial: 0%
• Posición final: 47%

Color de fondo de la columna 2

También necesitaremos establecer '# d8d8d8' como Color de fondo de la Columna 2.

Dimensionamiento

Vaya a la pestaña Diseño y use la siguiente configuración para la subcategoría Tamaño:

• Usar ancho personalizado: Sí
• Ancho personalizado: 100%
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Espaciado

Abra la subcategoría Espaciado y agregue '50px' al relleno superior, derecho, inferior e izquierdo de la segunda columna.

Módulo de imagen de primera columna

Fondo degradado

Agregue una imagen a la primera columna de la fila y use el siguiente fondo degradado para ella:

• Primer color: rgba (255,255,255,0)
• Segundo color: # 086191
• Tipo de degradado: lineal
• Dirección del gradiente: 107 grados
• Posición inicial: 60%
• Posición final: 60%

Alineación

Vaya a la pestaña Diseño, use la alineación de imagen izquierda y habilite la opción 'Siempre centrar la imagen en el móvil'.

Espaciado

Luego, abra la subcategoría Espaciado y use la siguiente configuración de margen y relleno:

• Margen superior: 100 px (escritorio), 0 px (tableta y teléfono)
• Acolchado superior: 20px
• Acolchado inferior: 20px

Módulo de texto de la segunda columna

Configuración de texto

A continuación, agregue un módulo de texto a la segunda columna de la fila. Vaya a la pestaña Diseño y use la siguiente configuración para la subcategoría Texto:

• Tamaño de fuente de texto: 12px
• Color del texto: # 000000
• Orientación del texto: centro

Dimensionamiento

Abra la subcategoría Tamaño, use un Ancho de '84% 'y seleccione la Alineación del módulo central.

Espaciado

Por último, agregue '50px' al margen superior e inferior.

Módulo de imagen de tercera columna

Fondo degradado

Agregue otro módulo de imagen a la tercera columna y use el siguiente fondo degradado:

• Primer color: # a36100
• Segundo color: rgba (255,255,255,0)
• Tipo de degradado: lineal
• Dirección del gradiente: 73 grados
• Posición inicial: 40%
• Posición final: 40%

Alineación

Vaya a la pestaña Diseño, seleccione la alineación de imagen izquierda y habilite la opción 'Siempre centrar la imagen en el móvil'.

Espaciado

Por último, agregue el siguiente margen y relleno personalizados:

• Margen superior: 300 px (escritorio), 0 px (tableta y teléfono)
• Acolchado superior: 20px
• Acolchado inferior: 20px

Resultado

Echemos otro vistazo al resultado en el escritorio:

Y en el móvil:

Comience a crear el segundo ejemplo

El segundo ejemplo se ve así en el escritorio:

Agregar nueva sección

En primer lugar, agregue una nueva sección estándar.

Agregar fila de dos columnas

Luego, agréguele una fila de dos columnas.

Color de fondo de la columna 2

Abra la configuración de la fila y agregue '#ededed' como Color de fondo de la Columna 2.

Dimensionamiento

Vaya a la pestaña Diseño y haga que los siguientes cambios se apliquen a la subcategoría Tamaño:

• Usar ancho personalizado: Sí
• Ancho personalizado: 100%
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Módulo de imagen de primera columna

Alineación

Agregue un módulo de imagen a la primera columna, use la alineación de imagen izquierda y habilite la opción "Centrar siempre la imagen en el dispositivo móvil".

Espaciado

Abra la subcategoría Espaciado y use la siguiente configuración:

• Margen superior: 100 px (escritorio), 0 px (tableta y teléfono)
• Relleno superior: 0px
• Acolchado inferior: 0px

Módulo de texto de la segunda columna

Configuración de texto

Luego, agregue un módulo de texto a la segunda columna y aplique la siguiente configuración a la subcategoría de texto:

• Fuente de texto: Lato
• Tamaño de fuente de texto: 12px
• Color del texto: # 000000
• Altura de la línea de texto: 2.2em
• Orientación del texto: centro

Dimensionamiento

Abra la subcategoría Tamaño y aplique un Ancho de '75% '.

Espaciado

Por último, asegúrese de que la siguiente configuración se aplique a la subcategoría Espaciado:

• Margen superior: 120 px (escritorio), -80 (tableta y teléfono)
• Margen izquierdo: -240px (escritorio), 80 (tableta), 45 (teléfono)
• Relleno superior, derecho, inferior e izquierdo: 50 px (escritorio y tableta), 20 px (teléfono)

Resultado

Una vez hecho esto, notará el siguiente diseño en el escritorio:

Y en el móvil:

Comience a crear el tercer ejemplo

A continuación, tenemos el siguiente ejemplo que se ve así:

Agregar nueva sección

Una vez más, agregue una nueva sección estándar.

Agregar fila de dos columnas

La estructura de columna que necesitaremos para esta fila es la siguiente:

Color de fondo de la columna 1

Abra la configuración de la fila y use '# e8e8e8' como Color de fondo de la Columna 1.

Fondo degradado de la columna 2

El fondo degradado necesario para la segunda columna es el siguiente:

• Primer color: # e8e8e8
• Segundo color: rgba (255,255,255,0)
• Columna 2 Tipo de degradado: lineal
• Dirección del gradiente de la columna 2: 147 grados
• Posición inicial de la columna 2: 25%
• Posición final de la columna 2: 9%

Dimensionamiento

Abra la subcategoría Tamaño y use la siguiente configuración:

• Usar ancho personalizado: Sí
• Ancho personalizado: 100%
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Espaciado

Por último, agregue '70px' al relleno superior e inferior de la primera columna.

Módulo de imagen de primera columna

Alineación

Agregue un módulo de imagen a la primera columna, use la alineación de imagen izquierda y habilite la opción "Centrar siempre la imagen en el dispositivo móvil".

Espaciado

Abra la subcategoría Espaciado y agregue '-300px' al margen izquierdo.

Módulo de texto de la segunda columna

Color de fondo

Agregue un módulo de texto a la segunda columna y use '# 3d3d3d' como color de fondo.

Configuración de texto

Vaya a la pestaña Diseño y use la siguiente configuración para la subcategoría Texto:

• Fuente de texto: Lato
• Tamaño de fuente de texto: 12px
• Color del texto: #FFFFFF
• Altura de la línea de texto: 2.2em
• Orientación del texto: centro

Dimensionamiento

Abra la subcategoría Tamaño y use '75% 'para el Ancho.

Espaciado

Por último, utilice la siguiente configuración para la subcategoría Espaciado:

• Margen superior: 130px (escritorio), -200 (tableta y teléfono)
• Margen izquierdo: -180px (escritorio), 80 (tableta), 50 (teléfono)
• Relleno superior, derecho, inferior e izquierdo: 50 px (escritorio y tableta), 20 px (teléfono)

Resultado

Una vez terminado, el resultado en el escritorio se verá así:

Y así en el móvil:

Comience a crear el cuarto ejemplo

El cuarto ejemplo que crearemos se ve así:

Agregar nueva sección

Comience agregando una sección estándar a la página en la que está trabajando.

Agregar fila de dos columnas

Luego, agréguele una fila de dos columnas.

Dimensionamiento

Abra la subcategoría Tamaño y realice los siguientes cambios:

• Usar ancho personalizado: Sí
• Ancho personalizado: 60%
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Módulo de primera imagen de primera columna

Alineación

Agregue un módulo de imagen a la primera columna, use la alineación de imagen correcta y habilite la opción "Centrar siempre la imagen en el dispositivo móvil".

Dimensionamiento

Vaya a la subcategoría Tamaño de ese Módulo de imagen, use un Ancho de '89% 'y seleccione la Alineación del módulo correcta.

Visibilidad

Vaya a la pestaña Avanzado y desactive el Módulo de imagen en el teléfono y la tableta. Haremos esto para 3 de los módulos de imagen que se están utilizando. Puede decidir por sí mismo cuál desea que aparezca en la tableta y el teléfono, en nuestro caso, esa será la imagen en la esquina superior derecha.

Módulo de segunda imagen de primera columna

Alineación

Agregue otro módulo de imagen, use la alineación de imagen correcta y habilite la opción "Centrar siempre la imagen en el dispositivo móvil".

Frontera

Desplácese hacia abajo y utilice el siguiente borde:

• Usar borde: sí
• Color del borde: #FFFFFF
• Ancho del borde: 5px
• Estilo de borde: sólido

Visibilidad

Por último, vaya a la pestaña Avanzado y desactive el Módulo de imagen en el teléfono y la tableta.

Módulo de primera imagen de la segunda columna

Alineación

Agregue el siguiente módulo de imagen a la segunda columna, use la alineación de imagen izquierda y habilite la opción 'Siempre centrar la imagen en el dispositivo móvil'.

Frontera

Desplácese hacia abajo, abra la subcategoría Borde y aplique la siguiente configuración:

• Usar borde: sí
• Color del borde: #FFFFFF
• Ancho del borde: 4px
• Estilo de borde: sólido

Módulo de segunda imagen de segunda columna

Alineación

Agregue el último módulo de imagen a la segunda columna, use la alineación de imagen izquierda y habilite la opción 'Siempre centrar la imagen en el móvil'.

Dimensionamiento

Luego, abra la subcategoría de tamaño, use un Ancho de '89% 'y seleccione la alineación del módulo de la izquierda.

Visibilidad

Desactive este módulo de imagen en el teléfono y la tableta también.

Agregar fila de una columna

Una vez que haya terminado la fila anterior, continúe y agregue otra. Esta vez, la fila solo necesitará una columna.

Dimensionamiento

Vaya a la pestaña Diseño de la configuración de la fila, habilite la opción 'Usar ancho personalizado' y use '581px' como Ancho personalizado.

Módulo de texto

Color de fondo

Agregue un módulo de texto a esa nueva fila y seleccione 'rgba (255,255,255,0.92)' como color de fondo.

Configuración de texto

Vaya a la pestaña Diseño y haga que las siguientes configuraciones se apliquen a la subcategoría Texto:

• Fuente de texto: Lato
• Tamaño de fuente de texto: 12px
• Color del texto: # 000000
• Altura de la línea de texto: 2.2em
• Orientación del texto: centro

Dimensionamiento

Luego, abra la subcategoría Tamaño, agregue '75% 'al Ancho y seleccione la Alineación del módulo central.

Espaciado

Por último, haga que las siguientes configuraciones se apliquen a la subcategoría Espaciado:

• Margen superior: -580px (escritorio), -200 (tableta y teléfono)
• Margen izquierdo: - 180px (escritorio), 80 (tableta), 50 (teléfono)
• Relleno superior, derecho, inferior e izquierdo: 50 px

Resultado

Una vez hecho esto, podrá presenciar el siguiente resultado en el escritorio:

Y lo siguiente en el móvil:

Comience a crear el quinto ejemplo

El último ejemplo que le mostraremos cómo recrear es el siguiente:

Agregar sección de ancho completo

Comience agregando una sección de ancho completo a su página.

Módulo de imagen de ancho completo

Dentro de esa sección de ancho completo, agregue un módulo de imagen de ancho completo.

Agregar nueva sección

Justo debajo de la sección anterior, agregue otra sección. Esta vez, la sección tiene que ser estándar en lugar de ancho completo.

Agregar fila de tres columnas

Agregue una fila de tres columnas a esa nueva sección estándar.

Color de fondo de las columnas 1, 2 y 3

Abra la configuración de la fila y asigne los siguientes colores de fondo a las columnas:

• Columna 1: #eaeaea
• Columna 2: rgba (12,113,195,0.17)
• Columna 3: rgba (131,0,233,0.09)

Dimensionamiento

Vaya a la pestaña Diseño y realice los siguientes cambios en la subcategoría Tamaño:

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

Espaciado

Luego abra la subcategoría Espaciado, agregue '-60px' al margen superior y '50px' al relleno inferior de cada columna.

Módulo de texto de la primera columna

Color de fondo

Continúe agregando un módulo de texto a la primera columna y usando 'rgba (255,255,255,0.89)' como color de fondo.

Configuración de texto

Vaya a la pestaña Diseño y haga que las siguientes configuraciones se apliquen a la subcategoría Texto:

• Fuente de texto: Lato
• Tamaño de fuente de texto: 12px
• Color del texto: # 000000
• Altura de la línea de texto: 2.2em
• Orientación del texto: centro

Frontera

Abra la subcategoría Borde y utilice la siguiente configuración:

• Usar borde: sí
• Color del borde: #FFFFFF
• Ancho del borde: 17px
• Estilo de borde: sólido

Dimensionamiento

Luego, use un Ancho de '75% 'y seleccione la Alineación del módulo central dentro de la subcategoría Tamaño.

Espaciado

Por último, abra la subcategoría Espaciado y aplique la siguiente configuración:

• Margen superior: -300px (escritorio), 0px (tableta y teléfono)
• Relleno superior, derecho, inferior, izquierdo: 50 px (escritorio y tableta), 20 px (teléfono)

Clonar el módulo de texto dos veces y colocarlo en otras dos columnas

Continúe y clone el módulo de texto dos veces. Luego, coloque cada uno de los clones en las dos columnas restantes.

Modificar el módulo de texto de la segunda columna de espaciado

Tendremos que cambiar el margen superior del módulo de texto colocado dentro de la segunda columna a '-220px'.

Modificar el módulo de texto de la tercera columna de espaciado

Lo mismo cuenta para el módulo de texto en la tercera columna, pero el valor es '-140px'.

Resultado

Y aquí tienes el resultado en el escritorio:

Y en el móvil:

Pensamientos finales

En esta publicación, le mostramos algunos diseños de sección de estilo editorial hermosos y divertidos que puede usar en su propio sitio web. Estos ejemplos muestran cuán flexibles son las opciones de Divi y cuán creativo puede ser. Si tiene alguna pregunta o sugerencia; ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!

¡Asegúrese de suscribirse a nuestro boletín informativo por correo electrónico y al canal de YouTube para que nunca se pierda un gran anuncio, un consejo útil o un obsequio de Divi!

Imagen destacada de Julia Tim / shutterstock.com