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

Publicado: 2017-09-26

En el tutorial de Divi de hoy, vamos a compartir contigo un vistazo de lo que puedes hacer con las nuevas opciones que se han agregado a Divi en las actualizaciones anteriores. Más precisamente; vamos a compartir 10 formas interesantes en las que puede 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 dentro del Módulo Divisor. Echemos un vistazo rápido a los divisores que construiremos antes de mostrarte cómo crear cada uno paso a paso:

módulo divisor

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 panel 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 utilizado '# f4f4f4' como color de fondo de la sección.

módulo divisor

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 de texto: langosta
  • Tamaño de fuente de texto: 35
  • Color del texto: # 000000
  • Altura de la línea de texto: 1.7em
  • Orientación del texto: centro

módulo divisor

Agregar segundo módulo de texto

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

  • Fuente de texto: Roboto
  • Tamaño de fuente de texto: 14
  • Altura de la línea de texto: 1.7em
  • Orientación del texto: centro

módulo divisor

Clonar módulos de texto y colocarlos 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.

módulo divisor

Antes de empezar

Vamos a compartir 10 formas divertidas en las que puedes 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 mostrando los cambios que necesita hacer en los otros dos divisores. Entonces, cada vez que termine el primer divisor, clónelo y colóquelo en las otras dos columnas. Una vez que haya hecho eso, puede realizar las modificaciones en los otros dos divisores.

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

módulo divisor

1. El triángulo borroso

módulo divisor

Configuración del primer módulo divisor

Pestaña de contenido

Dentro de la pestaña de contenido, usaremos las siguientes configuraciones de fondo:

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

módulo divisor

Ficha Diseño

Vaya 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
  • Alto: 25px
  • Ancho: 35%
  • Alineación del módulo: centro

módulo divisor

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 la animación: 80%

módulo divisor

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 de 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.

módulo divisor

Configuración del tercer módulo divisor

Pestaña de contenido

Cambie el primer color de degradado a '# 8300e9' para el último divisor.

módulo divisor

Ficha Diseño

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

módulo divisor

2. La sombra de color

módulo divisor

Configuración del primer módulo divisor

Pestaña de contenido

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

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

módulo divisor

Ficha Diseño

Lo primero que deberá hacer dentro de la pestaña Diseño es cambiar el color del divisor a '# 000000'.

módulo divisor

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

módulo divisor

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

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

módulo divisor

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: 2000 ms

módulo divisor

Configuración del segundo módulo divisor

Pestaña de contenido

Cambie el primer color de degradado del fondo degradado a '# 0c71c3'.

módulo divisor

Ficha Diseño

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

módulo divisor

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.

módulo divisor

Ficha Diseño

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

módulo divisor

3. La serie de degradados

módulo divisor

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 degradado: lineal
  • Dirección del gradiente: 119 grados
  • Posición inicial: 0%
  • Posición final: 86%

módulo divisor

Ficha Diseño

Dentro de la pestaña Diseño, elija '#FFFFFF' como el color de su divisor.

módulo divisor

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

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

módulo divisor

Mientras todavía está en la misma pestaña, asegúrese de que la siguiente configuración se aplique a la subcategoría Tamaño:

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

módulo divisor

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

módulo divisor

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: 2000 ms
  • Intensidad de animación: 100%

módulo divisor

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 degradado: radial
  • Dirección radial: centro
  • Posición inicial: 0%
  • Posición final: 100%

módulo divisor

Ficha Diseño

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

módulo divisor

Por último, centralice también la Dirección de animación.

módulo divisor

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 degradado: lineal
  • Dirección del gradiente: 119 grados
  • Posición inicial: 14%
  • Posición final: 100%

módulo divisor

Ficha Diseño

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

módulo divisor

módulo divisor

4. El círculo rodante

módulo divisor

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 degradado: radial
  • Dirección radial: centro
  • Posición inicial: 20%
  • Posición final: 21%

módulo divisor

Ficha Diseño

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

módulo divisor

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

módulo divisor

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

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

módulo divisor

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
  • Retraso de animación: 850 ms
  • Intensidad de animación: 60%

módulo divisor

Configuración del segundo módulo divisor

Pestaña de contenido

Cambie el primer color de degradado a '# 0c71c3'.

módulo divisor

Ficha Diseño

Y cambie el Retardo de animación a '0ms'.

módulo divisor

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'.

módulo divisor

5. El soporte

módulo divisor

Configuración del primer módulo divisor

Pestaña de contenido

Utilice la siguiente configuración de fondo degradado:

  • Primer color: # e0d1b1
  • Segundo color: # e09900
  • Tipo de degradado: radial
  • Dirección radial: centro
  • Posición inicial: 36%
  • Posición final: 100%

módulo divisor

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, es '# f4f4f4'.

módulo divisor

Desplácese hacia abajo en la pestaña de diseño y use 'Punteado' como su Estilo de divisor y 'Arriba' como su Posición de divisor.

módulo divisor

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

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

módulo divisor

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

módulo divisor

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 la animación: 80%

módulo divisor

Configuración del segundo módulo divisor

Pestaña de contenido

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

módulo divisor

Ficha Diseño

A continuación, cambie la Duración de la animación a '1300ms' y el Retardo de animación a '250ms'.

módulo divisor

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'.

módulo divisor

Ficha Diseño

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

módulo divisor

6. Las líneas dobles

módulo divisor

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 degradado: lineal
  • Dirección del gradiente: 179 grados
  • Posición inicial: 0%
  • Posición final: 45%

módulo divisor

Ficha Diseño

Elija '# 000000' como su color divisor.

módulo divisor

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

módulo divisor

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

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

módulo divisor

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%

módulo divisor

Configuración del segundo módulo divisor

Pestaña de contenido

Cambie el primer color de degradado a '# 0c71c3'.

módulo divisor

Ficha Diseño

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

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

módulo divisor

Configuración del tercer módulo divisor

Pestaña de contenido

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

módulo divisor

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'.

módulo divisor

7. El Puente

módulo divisor

Configuración del primer módulo divisor

Pestaña de contenido

Comience asignando '# 8300e9' al fondo.

módulo divisor

Ficha Diseño

Continúe usando el color de fondo de la sección como su color divisor, que en este caso es '# f4f4f4'.

módulo divisor

A continuación, use 'Punteado' como su Estilo de divisor y 'Superior' como su Posición de divisor.

módulo divisor

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

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

módulo divisor

También necesitaremos algo de relleno personalizado:

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

módulo divisor

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
  • Retraso de animación: 400 ms
  • Intensidad de animación: 30%

módulo divisor

Configuración del segundo módulo divisor

Pestaña de contenido

Para el segundo divisor, cambie el fondo a '# 0c71c3'.

módulo divisor

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%

módulo divisor

Configuración del tercer módulo divisor

Pestaña de contenido

El tercer divisor utilizará '# 8300e9' como color de fondo.

módulo divisor

Ficha Diseño

La animación del 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
  • Retraso de animación: 400 ms
  • Intensidad de animación: 30%

módulo divisor

8. La elegancia

módulo divisor

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 degradado: radial
  • Dirección radial: centro
  • Posición inicial: 20%
  • Posición final: 20%

módulo divisor

Ficha Diseño

Use el color '# 8300e9' para su divisor.

módulo divisor

A continuación, use 'punteado' como su Estilo de divisor 'y' Centrado verticalmente 'como su Posición de divisor.

módulo divisor

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

módulo divisor

Y una animación con la siguiente configuración:

  • 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

módulo divisor

Configuración del segundo módulo divisor

Ficha Diseño

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

módulo divisor

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.

módulo divisor

Y tendrá 'Up' como su dirección de animación.

módulo divisor

9. La Sutileza

módulo divisor

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 degradado: radial
  • Dirección radial: centro
  • Posición inicial: 0%
  • Posición final: 38%

módulo divisor

Ficha Diseño

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

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

módulo divisor

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

módulo divisor

Configuración del segundo módulo divisor

Pestaña de contenido

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

módulo divisor

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.

módulo divisor

10. El resplandor

módulo divisor

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 degradado: radial
  • Dirección radial: centro
  • Posición inicial: 0%
  • Posición final: 38%

módulo divisor

Ficha Diseño

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

módulo divisor

A continuación, use 'Guiones' como su Estilo de divisor y 'Centrado verticalmente' como su Posición de divisor.

módulo divisor

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

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

módulo divisor

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

  • Estilo de animación: Fade
  • Repetición de animación: una vez
  • Duración de la animación: 1800ms
  • Retraso de animación: 800ms

módulo divisor

Configuración del segundo módulo divisor

Pestaña de contenido

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

módulo divisor

Ficha Diseño

Y agregue un retardo 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'.

módulo divisor

Ficha Diseño

Y termine poniendo el retardo de animación en '0ms'.

módulo divisor

Pensamientos finales

Con las nuevas opciones de Divi, son posibles muchas cosas nuevas y creativas con la configuración incorporada 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ú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 VikiVector / shutterstock.com