Las nuevas opciones de Divi ofrecen toneladas de posibilidades. Los módulos, las filas y las columnas, más que nunca, se fortalecen mutuamente en el camino hacia un diseño web sorprendente y fácil de usar. Una de las cosas que puede hacer es crear notables secciones de estilo editorial. Y eso es exactamente lo que le mostraremos en esta publicación; 5 diseños de sección de estilo editorial diferentes que puede usar 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 agréguele el siguiente fondo degradado:
- Primer color: #636363
- Segundo Color: rgba(255,255,255,0)
- Tipo de gradiente: Radial
- Dirección radial: Centro
- Posición de inicio: 0%
- Posición final: 47%
Color de fondo de la columna 2
También necesitaremos establecer ‘#d8d8d8’ como el color de fondo de la columna 2.
Dimensionamiento
Pase 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 del canalón: 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 la primera columna
Fondo degradado
Agregue una imagen a la primera columna de la fila y use el siguiente fondo degradado para ello:
- Primer color: rgba(255,255,255,0)
- Segundo Color: #086191
- Tipo de gradiente: 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 ‘Centrar siempre 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)
- Relleno superior: 20px
- Relleno inferior: 20px
Módulo de texto de 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 la 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 gradiente: 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 ‘Centrar siempre la imagen en el móvil’.
Espaciado
Por último, agregue el siguiente margen personalizado y relleno:
- Margen superior: 300 px (escritorio), 0 px (tableta y teléfono)
- Relleno superior: 20px
- Relleno 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, agregue 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 aplique los siguientes cambios a la subcategoría Tamaño:
- Usar ancho personalizado: Sí
- Ancho personalizado: 100%
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
Módulo de imagen de la 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 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
- Relleno inferior: 0px
Módulo de texto de 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 del texto: Lato
- Tamaño de fuente de texto: 12px
- Color del texto: #000000
- Altura de línea de texto: 2,2 em
- 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 (computadora de 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 columnas 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 gradiente: Lineal
- Dirección del gradiente de la columna 2: 147 grados
- Columna 2 Posición inicial: 25%
- Columna 2 Posición final: 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 del canalón: 1
Espaciado
Por último, agregue ’70px’ al relleno superior e inferior de la primera columna.
Módulo de imagen de la 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 móvil’.
Espaciado
Abra la subcategoría Espaciado y agregue ‘-300px’ al margen izquierdo.
Módulo de texto de 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 del texto: Lato
- Tamaño de fuente de texto: 12px
- Color del texto: #FFFFFF
- Altura de línea de texto: 2,2 em
- 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: 130 px (escritorio), -200 (tableta y teléfono)
- Margen izquierdo: -180px (Escritorio), 80 (Tableta), 50 (Teléfono)
- Relleno superior, derecho, inferior e izquierdo: 50 px (computadora de 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, agregue una fila de dos columnas.
Dimensionamiento
Abra la subcategoría Dimensionamiento y realice los siguientes cambios:
- Usar ancho personalizado: Sí
- Ancho personalizado: 60%
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
Módulo Primera Columna Primera Imagen
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 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 de módulo correcta.
Visibilidad
Vaya a la pestaña Avanzado y deshabilite 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. Puedes decidir por ti mismo cuál quieres que aparezca en la tableta y en el teléfono, en nuestro caso, esa será la imagen en la esquina superior derecha.
Primera Columna Segunda Imagen Módulo
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 móvil’.
Borde
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 deshabilite 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 ‘Centrar siempre la imagen en el móvil’.
Borde
Desplácese hacia abajo, abra la subcategoría Borde y aplique las siguientes configuraciones:
- Usar borde: Sí
- Color del borde: #FFFFFF
- Ancho del borde: 4px
- Estilo de borde: Sólido
Módulo Segunda Columna Segunda Imagen
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 ‘Centrar siempre 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 izquierdo.
Visibilidad
Deshabilite 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
Pase a la pestaña Diseño y aplique las siguientes configuraciones a la subcategoría Texto:
- Fuente del texto: Lato
- Tamaño de fuente de texto: 12px
- Color del texto: #000000
- Altura de línea de texto: 2,2 em
- 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: -580 px (escritorio), -200 (tableta y teléfono)
- Margen izquierdo: – 180px (Escritorio), 80 (Tableta), 50 (Teléfono)
- Relleno superior, derecho, inferior e izquierdo: 50px
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 sobre 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 del canalón: 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 aplique los siguientes ajustes a la subcategoría Texto:
- Fuente del texto: Lato
- Tamaño de fuente de texto: 12px
- Color del texto: #000000
- Altura de línea de texto: 2,2 em
- Orientación del texto: Centro
Borde
Abra la subcategoría Borde y haga uso de las siguientes configuraciones:
- 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 las siguientes configuraciones:
- Margen superior: -300 px (escritorio), 0 px (tableta y teléfono)
- Relleno superior, derecho, inferior, izquierdo: 50 px (computadora de escritorio y tableta), 20 px (teléfono)
Clonar módulo de texto dos veces y colocar en otras dos columnas
Continúe y clone el módulo de texto dos veces. Luego, coloca cada uno de los clones en las dos columnas restantes.
Cambiar 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’.
Cambiar el espaciado del módulo de texto de la tercera columna
Lo mismo cuenta para el módulo de texto en la tercera columna, pero el valor es ‘-140px’.
Resultado
Y aquí tenéis el resultado en 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úrate de dejar un comentario en la sección de comentarios a continuación!
¡Asegúrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!
Imagen destacada de Julia Tim / shutterstock.com