10 formas divertidas de usar el módulo divisor con las nuevas opciones Divi

En el tutorial de Divi de hoy , vamos a compartir contigo un vistazo de lo que puedes hacer con las nuevas opciones que se agregaron a Divi en las actualizaciones anteriores. Más precisamente; vamos a compartir 10 formas interesantes de diseñar el módulo divisor con estos nuevos cambios. Las posibilidades son realmente infinitas, pero esta publicación puede ayudarte a encontrar la inspiración que necesitas para tu próximo proyecto.

Vistazo

Una de las mejores cosas de este tutorial es el hecho de que no usaremos ningún CSS adicional (o código de ningún tipo). Todos los ejemplos que crearemos solo usarán las opciones que se incluyen en el módulo divisor. Echemos un vistazo rápido a los divisores que construiremos antes de mostrarle cómo crear cada uno paso a paso:

10 formas divertidas de usar el módulo divisor con las nuevas opciones Divi

Suscríbete a nuestro canal de Youtube

Crear sección reutilizable

Lo primero que deberá hacer es crear la sección que usaremos en los 10 ejemplos. Por supuesto, también puede usar los divisores en otros contextos, pero al hacer esta sección primero, tendrá la oportunidad de jugar con su propio Divi Builder y ver cuál prefiere.

Crear nueva página

Comience creando una nueva página en su tablero de WordPress, habilitando Divi Builder y abriendo Visual Builder.

Crear sección con fila de tres columnas

Una vez que esté en su nueva página, cree una sección estándar y use una fila de tres columnas dentro de esa sección estándar. Hemos usado ‘#f4f4f4’ como color de fondo de la sección.

Agregar primer módulo de texto

Luego, agregue el primer módulo de texto a la primera columna de la fila. Abra la configuración, escriba el texto que desea que aparezca y vaya a la pestaña Diseño. Dentro de la pestaña Diseño, realice los siguientes cambios en la subcategoría Texto:

  • Fuente del texto: Langosta
  • Tamaño de fuente de texto: 35
  • Color del texto: #000000
  • Altura de línea de texto: 1,7 em
  • Orientación del texto: Centro

Agregar segundo módulo de texto

Una vez que haya agregado el primer módulo de texto, puede agregar otro justo debajo. Agregue el texto que desea que aparezca y vaya a la pestaña Diseño. Dentro de la pestaña Diseño, asegúrese de que se apliquen las siguientes modificaciones:

  • Fuente del texto: Roboto
  • Tamaño de fuente de texto: 14
  • Altura de línea de texto: 1,7 em
  • Orientación del texto: Centro

Clonar módulos de texto y colocar en otras dos columnas

Una vez que haya creado estos dos módulos de texto, también puede colocarlos en las otras dos columnas de la fila.

Antes de comenzar

Vamos a compartir 10 formas divertidas de diseñar el módulo divisor de Divi. Cada uno de los ejemplos tendrá tres divisores que están en armonía entre sí. La mayoría de las configuraciones son las mismas para los tres módulos. Comenzaremos mostrándole las configuraciones que cuentan para cada uno de ellos y continuaremos mostrándole los cambios que necesita hacer en los otros dos divisores. Entonces, cada vez que termines el primer divisor, clónalo y colócalo en las otras dos columnas. Una vez que haya hecho eso, puede hacer las modificaciones a los otros dos divisores.

Nota: para cada uno de los divisores, deberá habilitar la opción ‘Mostrar divisor’ dentro de la pestaña Contenido.

1. El triángulo borroso

Configuración del primer módulo divisor

Pestaña de contenido

Dentro de la pestaña de contenido, vamos a hacer uso de la siguiente configuración de fondo:

  • Primer color: #e09900
  • Segundo Color: rgba(255,255,255,0)
  • Tipo de gradiente: lineal
  • Dirección del gradiente: 176 grados
  • Posición inicial: 13%
  • Posición final: 31%

Ficha Diseño

Pase a la pestaña Diseño y asegúrese de que las siguientes configuraciones se apliquen a la subcategoría Tamaño:

  • Peso del divisor: 0
  • Altura: 25px
  • Ancho: 35%
  • Alineación del módulo: Centro

Desplácese hacia abajo en la misma pestaña y use la siguiente configuración de animación en la subcategoría Animación:

  • Estilo de animación: Diapositiva
  • Repetición de animación: una vez
  • Dirección de animación: Centro
  • Duración de la animación: 1200ms
  • Intensidad de animación: 80%

Configuración del segundo módulo divisor

Pestaña de contenido

En la pestaña de contenido, lo único que deberá hacer es cambiar el primer color del degradado a ‘#0c71c3’.

Ficha Diseño

A continuación, deberá agregar un retraso de animación de ‘250 ms’ a la subcategoría Animación.

Configuración del tercer módulo divisor

Pestaña de contenido

Cambie el primer color degradado a ‘#8300e9’ para el último divisor.

Ficha Diseño

El retraso de animación que deberá agregar a la subcategoría Animación del último divisor es ‘500 ms’.

2. La sombra de color

Configuración del primer módulo divisor

Pestaña de contenido

Use la siguiente configuración de fondo degradado en la pestaña Contenido:

  • Primer color: #e09900
  • Segundo Color: rgba(255,255,255,0)
  • Tipo de gradiente: lineal
  • Dirección del gradiente: 180 grados
  • Posición de inicio: 0%
  • Posición final: 72%

Ficha Diseño

Lo primero que deberá hacer en la pestaña Diseño es cambiar el color del divisor a ‘#000000’.

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

Continúe desplazándose hacia abajo y aplique los siguientes cambios a la subcategoría Tamaño:

  • Peso del divisor: 2
  • Altura: 20px
  • Ancho: 70%
  • Alineación del módulo: Centro

Y, por último, use la siguiente configuración de opciones para la subcategoría Animación:

  • Estilo de animación: Rebote
  • Repetición de animación: una vez
  • Dirección de animación: Centro
  • Duración de la animación: 2000ms

Configuración del segundo módulo divisor

Pestaña de contenido

Cambie el primer color degradado del fondo degradado a ‘#0c71c3’.

Ficha Diseño

Dentro de la subcategoría Animación, agregue ‘350 ms’ a la opción Retraso de animación.

Configuración del tercer módulo divisor

Pestaña de contenido

Realice el mismo cambio en el tercer divisor, pero use el color ‘#8300e9’ en su lugar.

Ficha Diseño

Y, por último, agregue un retraso de animación de ‘700ms’.

3. La serie de degradados

Configuración del primer módulo divisor

Pestaña de contenido

Para el primer divisor, use la siguiente configuración de fondo degradado:

  • Primer color: #0970a0
  • Segundo Color: rgba(255,255,255,0)
  • Tipo de gradiente: lineal
  • Dirección del gradiente: 119 grados
  • Posición de inicio: 0%
  • Posición final: 86%

Ficha Diseño

Dentro de la pestaña Diseño, elige ‘#FFFFFF’ como el color de tu separador.

A continuación, realice los siguientes cambios en la subcategoría Estilos:

  • Estilo divisor: Sólido
  • Posición del divisor: centrado verticalmente

Mientras aún está en la misma pestaña, asegúrese de que las siguientes configuraciones se apliquen a la subcategoría Tamaño:

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

Agregue ’15px’ al relleno inferior dentro de la subcategoría Espaciado también.

Y, por último, use la siguiente configuración para la subcategoría Animación:

  • Estilo de animación: Diapositiva
  • Repetición de animación: una vez
  • Dirección de animación: Izquierda
  • Duración de la animación: 2000ms
  • Intensidad de animación: 100%

Configuración del segundo módulo divisor

Pestaña de contenido

La configuración del fondo degradado para el segundo divisor es ligeramente diferente:

  • Primer color: #0970a0
  • Segundo Color: rgba(255,255,255,0)
  • Tipo de gradiente: Radial
  • Dirección radial: Centro
  • Posición de inicio: 0%
  • Posición final: 100%

Ficha Diseño

Dentro de la subcategoría Tamaño, cambie la Alineación del módulo al centro.

Por último, centralizar también la Dirección de Animación.

Configuración del tercer módulo divisor

Pestaña de contenido

El tercer divisor también contiene otro fondo degradado:

  • Primer color: rgba(255,255,255,0)
  • Segundo Color: #0970a0
  • Tipo de gradiente: lineal
  • Dirección del gradiente: 119 grados
  • Posición inicial: 14%
  • Posición final: 100%

Ficha Diseño

Vamos a hacer los mismos cambios que hicimos en el segundo divisor, pero usaremos la derecha en lugar del centro.

4. El círculo rodante

Configuración del primer módulo divisor

Pestaña de contenido

Comience haciendo que se apliquen las siguientes configuraciones de fondo degradado:

  • Primer color: #e09900
  • Segundo Color: rgba(255,255,255,0)
  • Tipo de gradiente: Radial
  • Dirección radial: Centro
  • Posición inicial: 20%
  • Posición final: 21%

Ficha Diseño

Lo primero que deberá hacer en la pestaña Diseño es usar el color ‘#000000’ para el divisor.

Luego, seleccione ‘Sólido’ como su Estilo de divisor y ‘Centrado verticalmente’ como su Posición de divisor.

Continuando, realice los siguientes cambios en la subcategoría Tamaño:

  • Peso del divisor: 2
  • Altura: 50px
  • Ancho: 40%
  • Alineación del módulo: Centro

Por último, la subcategoría Animación necesitará la siguiente configuración:

  • Estilo de animación: rollo
  • Repetición de animación: una vez
  • Dirección de animación: Centro
  • Duración de la animación: 1500ms
  • Retardo de animación: 850ms
  • Intensidad de animación: 60%

Configuración del segundo módulo divisor

Pestaña de contenido

Cambie el primer color degradado a ‘#0c71c3’.

Ficha Diseño

Y cambia el Retardo de Animación a ‘0ms’.

Configuración del tercer módulo divisor

Pestaña de contenido

Para el último divisor, solo necesitará cambiar el primer color de fondo degradado a ‘#8300e9’.

5. El soporte

Configuración del primer módulo divisor

Pestaña de contenido

Use la siguiente configuración de fondo degradado:

  • Primer color: #e0d1b1
  • Segundo Color: #e09900
  • Tipo de gradiente: Radial
  • Dirección radial: Centro
  • Posición inicial: 36%
  • Posición final: 100%

Ficha Diseño

Asegúrese de que el color del divisor sea el mismo que el color de fondo de la sección. En este caso, eso es ‘#f4f4f4’.

Desplácese hacia abajo en la pestaña de diseño y use ‘Discontinua’ como su Estilo de divisor y ‘Superior’ como su Posición de divisor.

Haga que las siguientes configuraciones se apliquen a la subcategoría Tamaño:

  • Peso del divisor: 100
  • Altura: 18px
  • Ancho: 60%
  • Alineación del módulo: Centro

También deberá agregar ’15px’ al relleno superior, derecho e izquierdo.

Por último, use la siguiente configuración de animación:

  • Estilo de animación: Zoom
  • Repetición de animación: una vez
  • Dirección de animación: Centro
  • Duración de la animación: 1000ms
  • Intensidad de animación: 80%

Configuración del segundo módulo divisor

Pestaña de contenido

Cambie los colores del fondo degradado a ‘#87acc1’ y ‘#0c71c3’.

Ficha Diseño

A continuación, cambie la Duración de la animación a ‘1300 ms’ y el Retraso de la animación a ‘250 ms’.

Configuración del tercer módulo divisor

Pestaña de contenido

Los colores degradados que se utilizan en el tercer divisor son ‘#c9a4e8’ y ‘#8300e9’.

Ficha Diseño

Cambie la Duración de la animación a ‘1300ms’ y el Retraso de la animación a ‘500ms’.

6. Las líneas dobles

Configuración del primer módulo divisor

Pestaña de contenido

Aplique la siguiente configuración de fondo degradado:

  • Primer color: #e09900
  • Segundo Color: rgba(255,255,255,0)
  • Tipo de gradiente: lineal
  • Dirección del gradiente: 179 grados
  • Posición de inicio: 0%
  • Posición final: 45%

Ficha Diseño

Elija ‘#000000’ como color de su divisor.

Dentro de la subcategoría Estilos, use ‘Doble’ como su Estilo de divisor y ‘Centrado verticalmente’ como su Posición de divisor.

Continuando, use la siguiente configuración para la subcategoría Tamaño:

  • Peso del divisor: 5
  • Altura: 25px
  • Ancho: 35%
  • Alineación del módulo: Izquierda

Por último, use la siguiente configuración de animación:

  • Estilo de animación: rollo
  • Repetición de animación: una vez
  • Dirección de animación: Izquierda
  • Duración de la animación: 1000ms
  • Intensidad de animación: 50%

Configuración del segundo módulo divisor

Pestaña de contenido

Cambie el primer color degradado a ‘#0c71c3’.

Ficha Diseño

A continuación, utilice una animación diferente para el segundo divisor:

  • Estilo de animación: Fundido
  • Repetición de animación: una vez
  • Duración de la animación: 1400ms

Configuración del tercer módulo divisor

Pestaña de contenido

Para el tercer divisor, use ‘#8300e9’ como primer color de fondo degradado.

Ficha Diseño

Lo único que deberá cambiar en la pestaña Diseño es la Dirección de animación, que en este caso es ‘Derecha’.

7. El puente

Configuración del primer módulo divisor

Pestaña de contenido

Comience asignando ‘#8300e9’ al fondo.

Ficha Diseño

Continúe utilizando el color de fondo de la sección como color de división, que en este caso es ‘#f4f4f4’.

A continuación, utilice ‘Punteado’ como su Estilo de divisor y ‘Superior’ como su Posición de divisor.

Dentro de la subcategoría Tamaño, use la siguiente configuración:

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

También necesitaremos un relleno personalizado:

  • Relleno superior: 7px
  • Relleno derecho: -7px
  • Relleno izquierdo: -7px

La animación que usaremos tiene la siguiente configuración:

  • Estilo de animación: Diapositiva
  • Repetición de animación: una vez
  • Dirección de animación: Izquierda
  • Duración de la animación: 800ms
  • Retardo de animación: 400ms
  • Intensidad de animación: 30%

Configuración del segundo módulo divisor

Pestaña de contenido

Para el segundo divisor, cambia el fondo a ‘#0c71c3’.

Ficha Diseño

También usaremos una animación diferente:

  • Estilo de animación: Zoom
  • Repetición de animación: una vez
  • Dirección de animación: Centro
  • Duración de la animación: 800ms
  • Intensidad de animación: 30%

Configuración del tercer módulo divisor

Pestaña de contenido

El tercer divisor usará ‘#8300e9’ como color de fondo.

Ficha Diseño

La animación para el tercer divisor también es ligeramente diferente:

  • Estilo de animación: Zoom
  • Repetición de animación: una vez
  • Dirección de animación: Derecha
  • Duración de la animación: 800ms
  • Retardo de animación: 400ms
  • Intensidad de animación: 30%

8. La elegancia

Configuración del primer módulo divisor

Pestaña de contenido

Comience agregando el siguiente fondo degradado al primer Divisor:

  • Primer color: #000000
  • Segundo Color: rgba(255,255,255,0)
  • Tipo de gradiente: Radial
  • Dirección radial: Centro
  • Posición inicial: 20%
  • Posición final: 20%

Ficha Diseño

Use el color ‘#8300e9’ para su separador.

Luego, use ‘punteado’ como su estilo de divisor y ‘centrado verticalmente’ como su posición de divisor.

También necesitaremos un relleno superior de ’40px’.

Y una animación con los siguientes ajustes:

  • Estilo de animación: Rebote
  • Repetición de animación: una vez
  • Dirección de animación: Abajo
  • Duración de la animación: 1000ms

Configuración del segundo módulo divisor

Ficha Diseño

Para el segundo divisor, cambie el color a ‘#0c71c3’.

La animación también necesitará algunos cambios:

  • Dirección de animación: Centro
  • Duración de la animación 1500ms

Configuración del tercer módulo divisor

Ficha Diseño

El tercer divisor usará ‘#8300e9’ como su color.

Y tendrá ‘Up’ como Dirección de Animación.

9. La sutileza

Configuración del primer módulo divisor

Pestaña de contenido

Elija la siguiente configuración para el fondo degradado:

  • Primer color: #8300e9
  • Segundo Color: rgba(255,255,255,0)
  • Tipo de gradiente: Radial
  • Dirección radial: Centro
  • Posición de inicio: 0%
  • Posición final: 38%

Ficha Diseño

Dentro de la subcategoría Tamaño, necesitará la siguiente configuración:

  • Peso del divisor: 0
  • Altura: 4px
  • Ancho: 100%

Por último, la animación que usaremos tiene la siguiente configuración:

  • Estilo de animación: Rebote
  • Repetición de animación: una vez
  • Dirección de animación: Arriba
  • Duración de la animación 1800ms

Configuración del segundo módulo divisor

Pestaña de contenido

Para el segundo divisor, cambie el primer color de fondo degradado a ‘#0c71c3’.

Configuración del tercer módulo divisor

Pestaña de contenido

Realice el mismo cambio en el tercer divisor, pero use el color púrpura ‘#8300e9’ en su lugar.

10. El resplandor

Configuración del primer módulo divisor

Pestaña de contenido

Utilice la siguiente configuración de fondo degradado para la última serie de divisores:

  • primer color:
  • Segundo Color:
  • Tipo de gradiente: Radial
  • Dirección radial: Centro
  • Posición de inicio: 0%
  • Posición final: 38%

Ficha Diseño

Elija el color de fondo de la sección como su color divisor también, en este caso, es ‘#f4f4f4’.

Luego, use ‘Discontinua’ como su Estilo de divisor y ‘Centrado verticalmente’ como su Posición de divisor.

Dentro de la subcategoría Tamaño, use la siguiente configuración:

  • Peso del divisor: 70
  • Altura: 20px
  • Ancho: 100%

Por último, usaremos una animación con las siguientes opciones:

  • Estilo de animación: Fundido
  • Repetición de animación: una vez
  • Duración de la animación: 1800ms
  • Retardo de animación: 800ms

Configuración del segundo módulo divisor

Pestaña de contenido

Para el segundo divisor, cambie el segundo color de fondo degradado a ‘#0c71c3’.

Ficha Diseño

Y agregue un Retraso de animación de ‘250ms’.

Configuración del tercer módulo divisor

Pestaña de contenido

Para el último divisor, cambie el segundo color de fondo degradado a ‘#8300e9’.

Ficha Diseño

Y termina poniendo el Retardo de Animación a ‘0ms’.

Pensamientos finales

Con las nuevas opciones de Divi, muchas cosas creativas nuevas son posibles con la configuración integrada de cada módulo. En esta publicación, le mostramos específicamente cómo estas opciones pueden ayudarlo a mejorar su diseño a través del Módulo divisor. 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 por VikiVector / shutterstock.com