Cómo crear capítulos de sección usando las nuevas opciones de diseño de Divi

En el tutorial Divi de hoy , le mostraremos cómo puede crear impresionantes capítulos de sección para su sitio web. Estos capítulos sirven como guía para sus visitantes. Les mostrará cuando estén ingresando a otra sección de una página. Por lo general, los capítulos se usan en combinación con un color de fondo específico en todas las secciones.

Si está considerando usar capítulos de sección en su sitio web, esta publicación podría ser un buen lugar para inspirarse. Le mostraremos 4 estilos de capítulos de sección que puede recrear fácilmente siguiendo esta publicación.

Resultado

Antes de entrar en el lado práctico de los estilos de capítulo de cuatro secciones, echemos un vistazo a lo que puede esperar del resultado final.

Sección Capítulo Estilo #1

Sección Capítulo Estilo #2

Sección Capítulo Estilo #3

Sección Capítulo Estilo #4

Cómo crear capítulos de sección usando las nuevas opciones de diseño de Divi

Suscríbete a nuestro canal de Youtube

Sección Capítulo Estilo #1

Opciones de fila

Comience agregando una fila de dos columnas a la página en la que está trabajando y seleccionando la Alineación de fila izquierda dentro de la pestaña Diseño.

Desplácese hacia abajo en la misma pestaña y asegúrese de seleccionar ‘0px’ para el relleno superior, derecho, inferior e izquierdo. La razón por la que hacemos esto es para que la fila sea lo más pequeña posible para que no ocupe mucho espacio en la sección.

Módulo divisor

En todos nuestros ejemplos, solo usaremos una de las dos columnas (dependiendo de la alineación de la fila). Si está colocando su capítulo en el lado izquierdo de su página, elija la columna izquierda. Luego, agregue un Módulo divisor y habilite la opción ‘Mostrar divisor’ dentro de la pestaña Contenido.

Pase a la pestaña Diseño y use ‘#000000’ como su color divisor.

A continuación, abra la subcategoría Estilos y elija ‘Puntos’ como Estilo de división y ‘Superior’ como Posición de división.

A continuación, asegúrese de que la siguiente configuración se aplique a la subcategoría Tamaño:

  • Peso del divisor: 3px
  • Altura: 23px
  • Ancho: 62%
  • Alineación del módulo: Izquierda

Primer módulo de texto

Una vez que haya agregado el módulo divisor, es hora de agregar el primer módulo de texto justo debajo de él. Después de elegir el número de capítulo, use el siguiente fondo degradado:

  • Primer color: rgba(96,150,193,0.16)
  • Segundo Color: rgba(255,255,255,0)
  • Tipo de gradiente: Radial
  • Dirección radial: Centro
  • Posición inicial: 51%
  • Posición final: 51%

Luego, vaya a la pestaña Diseño y realice los siguientes cambios en la subcategoría Texto:

  • Fuente del texto: mono feliz
  • Tamaño de fuente de texto: 53 (computadora de escritorio y tableta), 25 (teléfono)
  • Color del texto: #000000
  • Altura de línea de texto: 1em
  • Orientación del texto: Centro

Abra la subcategoría Tamaño, elija un ancho de ‘40%’ y seleccione la Alineación del módulo central.

Lo último que necesita este módulo de texto es el siguiente margen y relleno personalizados:

  • Margen superior: -40px
  • Relleno superior: 40px
  • Relleno derecho: 50px
  • Relleno inferior: 40px
  • Relleno izquierdo: 50px

Segundo módulo de texto

Agregue otro módulo de texto con la siguiente configuración de subcategoría de texto:

  • Fuente del texto: Arimo
  • Tamaño de fuente de texto: 19px
  • Color del texto: #000000
  • Altura de línea de texto: 1em
  • Orientación del texto: Centro

Desplácese hacia abajo en la misma pestaña, use un ancho de ‘97%’ y habilite la opción Alineación del módulo central.

Por último, agregue un margen superior de ‘-15px’ también.

Tercer módulo de texto

El último módulo de texto del capítulo de la sección tiene la siguiente configuración de subcategoría de texto:

  • Fuente del texto: Arimo
  • Estilo de fuente de texto: Negrita
  • Tamaño de fuente de texto: 19px
  • Color del texto: #000000
  • Altura de línea de texto: 1em
  • Orientación del texto: Centro

Dentro de la subcategoría Tamaño, use un ancho de ‘99%’ y seleccione la Alineación del módulo central.

Lo último que deberá hacer para este capítulo de la sección es agregar un margen superior de ‘-20px’.

Sección Capítulo Estilo #2

Opciones de fila

El segundo ejemplo se encuentra en el lado derecho de la pantalla. Una vez más, agregue una fila de dos columnas, pero elija la Alineación de fila correcta en su lugar.

Abra la subcategoría Espaciado y asigne ‘0px’ al relleno superior, derecho, inferior e izquierdo.

Módulo divisor

Agregue un módulo divisor a la columna de la derecha y habilite la opción ‘Mostrar divisor’.

Vamos a utilizar el siguiente fondo degradado para el divisor:

  • Primer color: rgba(132,132,132,0.61)
  • Segundo Color: rgba(224,43,32,0.86)
  • Tipo de gradiente: lineal
  • Dirección del gradiente: 180 grados
  • Posición inicial: 43%
  • Posición final: 100%

Pase a la pestaña Diseño y seleccione ‘rgba(0,0,0,0.26)’ como el color divisor.

A continuación, utilice ‘Sólido’ como Estilo de división y ‘Superior’ como Posición de división.

Luego, abra la subcategoría Tamaño y haga que se apliquen las siguientes configuraciones:

  • Peso del divisor: 3px
  • Altura: 11px
  • Ancho: 68%
  • Alineación del módulo: Derecha

Primer módulo de texto

El primer módulo de texto tiene la siguiente configuración de subcategoría de texto:

  • Fuente del texto: Cantata One
  • Tamaño de fuente de texto: 100px
  • Color del texto: #000000
  • Altura de línea de texto: 1,7 em
  • Orientación del texto: Derecha

Abra la subcategoría Espaciado y use el siguiente margen y relleno personalizados:

  • Margen superior: -95px
  • Relleno superior: 40px
  • Relleno derecho: 50px
  • Relleno inferior: 40px
  • Relleno izquierdo: 50px

Segundo módulo de texto

Agregue otro módulo de texto y use la siguiente configuración de subcategoría de texto en su lugar:

  • Fuente del texto: Arimo
  • Tamaño de fuente de texto: 20px
  • Color del texto: #000000
  • Altura de línea de texto: 1em
  • Orientación del texto: Centro

A continuación, agregue un margen superior de ‘-50px’.

Tercer módulo de texto

El tercer y último módulo de texto de este ejemplo tiene la siguiente configuración de subcategoría de texto:

  • Fuente del texto: langosta dos
  • Tamaño de fuente de texto: 43px
  • Color del texto: #000000
  • Altura de línea de texto: 1em
  • Orientación del texto: Centro

Por último, agregue un margen superior de ‘-30px’.

Sección Capítulo Estilo #3

Opciones de fila

Para el tercer ejemplo, vamos a utilizar una fila de dos columnas con el siguiente fondo degradado de la Columna 1:

  • Primer color: #edf000
  • Segundo Color: rgba(255,255,255,0)
  • Columna 1 Tipo de gradiente: Lineal
  • Dirección del gradiente de la columna 1: 139 grados
  • Columna 1 Posición inicial: 11%
  • Columna 1 Posición final: 36%

Vaya a la pestaña Diseño y seleccione la Alineación de fila izquierda.

Una vez más, vamos a usar ‘0px’ para los márgenes superior, derecho, inferior e izquierdo.

Módulo divisor

Ahora, agregue un módulo divisor a la columna de la izquierda y habilite la opción ‘Mostrar divisor’.

Abra la subcategoría Fondo y use el siguiente fondo degradado:

  • Primer color: #4b61af
  • Segundo Color: rgba(255,255,255,0)
  • Tipo de gradiente: lineal
  • Dirección del gradiente: 161 grados
  • Posición inicial: 18%
  • Posición final: 38%

Abra la pestaña Diseño y elija ‘#000000’ como el color del divisor.

Dentro de la subcategoría Estilos, use ‘Sólido’ como Estilo de división y ‘Superior’ como Posición de división.

Luego, asegúrese de que las siguientes configuraciones se apliquen a la subcategoría Tamaño:

  • Peso del divisor: 6px
  • Altura: 100px
  • Ancho: 70%
  • Alineación del módulo: Izquierda

Primer módulo de texto

Continúe agregando el primer Módulo de texto justo debajo del Módulo divisor y eligiendo el siguiente fondo degradado:

  • Primer color: rgba(131,0,233,0.58)
  • Segundo Color: rgba(255,255,255,0)
  • Tipo de gradiente: lineal
  • Dirección del gradiente: 151 grados
  • Posición inicial: 20%
  • Posición final: 40%

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

  • Fuente del texto: Poiret One
  • Estilo de fuente de texto: Negrita
  • Tamaño de fuente de texto: 69px
  • Color del texto: #000000
  • Altura de línea de texto: 1,7 em
  • Orientación del texto: Centro

Abra la subcategoría Dimensionamiento, use un ancho de ‘70%’ y seleccione la Alineación del módulo de la izquierda.

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

  • Margen superior: 124px
  • Relleno superior: 60px
  • Relleno inferior: 150px
  • Relleno izquierdo: 50px

Segundo módulo de texto

Continúe y agregue otro módulo de texto con la siguiente configuración de subcategoría de texto:

  • Fuente del texto: Arimo
  • Tamaño de fuente de texto: 20px
  • Color del texto: #000000
  • Altura de línea de texto: 1em
  • Orientación del texto: Centro

Abra la subcategoría Tamaño, seleccione un ancho de ‘80%’ y elija la Alineación del módulo de la izquierda.

Por último, agregue un margen superior de ‘-150px’.

Tercer módulo de texto

Agregue el último módulo de texto a la primera columna y asegúrese de que se apliquen las siguientes configuraciones de subcategoría de texto:

  • Fuente del texto: Arimo
  • Estilo de fuente de texto: Negrita
  • Tamaño de fuente de texto: 20px
  • Color del texto: #000000
  • Altura de línea de texto: 1em
  • Orientación del texto: Centro

Abra la subcategoría Tamaño, use un ancho de ‘80%’ y elija la Alineación del módulo de la izquierda.

Por último, elija un margen superior de ‘-20px’ y un relleno inferior de ’50px’.

Sección Capítulo Estilo #4

Opciones de fila

Para el último ejemplo, vamos a utilizar de nuevo la Alineación de filas derecha.

Luego, abra la subcategoría Espaciado y asigne ‘0px’ al relleno superior, derecho, inferior e izquierdo.

Primer módulo de texto

Este último ejemplo no contiene un módulo divisor, así que continúe y agregue un módulo de texto a la columna de la izquierda. Una vez que hayas hecho eso, elige el siguiente fondo degradado:

  • Primer color: rgba(255,255,255,0)
  • Segundo Color: #92d84b
  • Tipo de gradiente: lineal
  • Dirección del gradiente: 55 grados
  • Posición inicial: 25%
  • Posición final: 100%

Luego, vaya a la pestaña Diseño y asegúrese de que se apliquen las siguientes configuraciones de subcategoría de Texto:

  • Fuente del texto: Cantata One
  • Tamaño de fuente de texto: 220 (computadora de escritorio y tableta), 100 px (teléfono)
  • Color del texto: #f2f2f2 (Coincide con el color de fondo de la sección)
  • Altura de línea de texto: 1,7 em
  • Orientación del texto: Derecha

Abra la subcategoría Tamaño, use un ancho de ‘82%’ y seleccione la Alineación de módulo correcta.

Por último, utilice el siguiente relleno personalizado:

  • Superior: 60px
  • Derecha: 50px
  • Abajo: 60px
  • Izquierda: 50px

Segundo módulo de texto

Agregue otro módulo de texto y use la siguiente configuración dentro de la subcategoría de texto:

  • Fuente del texto: Arimo
  • Tamaño de fuente de texto: 20px
  • Color del texto: #000000
  • Altura de línea de texto: 1em
  • Orientación del texto: Derecha

Abra la subcategoría Tamaño, elija un ancho de ‘39%’ y elija la Alineación del módulo central.

Por último, agregue ‘-130px’ al margen superior.

Tercer módulo de texto

El último módulo de texto de este ejemplo de capítulo tiene la siguiente configuración de subcategoría de texto:

  • Fuente de texto: guión de baile
  • Tamaño de fuente de texto: 45px
  • Color del texto: #000000
  • Altura de línea de texto: 1em
  • Orientación del texto: Derecha

Abra la subcategoría Tamaño, elija un ancho de ‘50%’ y seleccione la Alineación del módulo central.

Por último, pero no menos importante, elija un relleno superior de ‘-30px’ y ¡listo!

Pensamientos finales

En esta publicación, le mostramos cómo puede crear y diseñar de forma creativa capítulos de sección en su sitio web. Estas secciones de capítulo le permiten crear una división entre secciones utilizando el mismo color de fondo para cada una de las secciones. Si tiene preguntas o sugerencias; ¡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 Kwok Design / shutterstock.com