Ocultación elegante de su copia debajo de los divisores de sección en un diseño impresionante con Divi

Las opciones integradas de Divi le permiten utilizar una configuración de diseño en particular para múltiples propósitos, lo que a su vez ayuda a estimular la creatividad. Hoy, usaremos divisores de sección de una manera única para ocultar elegantemente la copia de su sitio web. Esta es una excelente manera de agregar interacción adicional a su página sin la necesidad de un código personalizado. Recrearemos un hermoso ejemplo desde cero y también podrá descargar el archivo JSON del ejemplo de forma gratuita.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descarga el diseño GRATIS

Para poner sus manos en el diseño gratuito, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

¡Empecemos a recrear!

Agregar la sección n. ° 1

Lo primero que deberá hacer es agregar una nueva sección regular a la página en la que está trabajando.

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Agregar módulo de texto a la columna

Agregar contenido H2

El primer módulo que necesitamos en esta fila es un módulo de texto con algo de contenido H2.

Configuración de texto H2

Vaya a la pestaña de diseño y cambie la configuración del texto H2.

• Fuente del título 2: Playfair Display
• Peso de fuente del encabezado 2: Regular
• Alineación del texto del encabezado 2: centro
• Tamaño del texto del encabezado 2: 70 px (escritorio), 40 px (tableta), 30 px (teléfono)

Agregar módulo divisor a la columna

Visibilidad

El segundo y último módulo que necesitamos en esta fila es un módulo divisor. Asegúrese de que la opción 'Mostrar divisor' esté habilitada.

• Mostrar divisor: Sí

Línea

También estamos cambiando el color de la línea en la pestaña de diseño.

• Color de línea: # 000000

Dimensionamiento

Pase a la configuración de tamaño y aplique la siguiente configuración:

• Peso del divisor: 5px
• Ancho: 27%
• Alineación del módulo: centro

Agregar sección n. ° 2

Color de fondo

Agregue la segunda sección regular a su página, abra la configuración de la sección y cambie el color de fondo.

• Color de fondo: # f7f7f7

Desbordamiento

Asegúrese de ocultar el desbordamiento de la sección también en la pestaña avanzada. Esto asegurará que nada supere el contenedor de la sección.

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto

Transiciones

Más adelante en esta publicación, crearemos una transición de desplazamiento. Para asegurarnos de que esto funcione sin problemas, aumentaremos la duración de la transición en la pestaña avanzada.

• Duración de la transición: 800 ms

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho del contenedor de la sección aplicando la siguiente configuración:

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

Agregar el módulo de texto n. ° 1 a la columna

Agregar contenido H3

Es hora de comenzar a agregar módulos, comenzando con un módulo de texto. Ingrese algún contenido H3 de su elección.

Configuración de texto H3

Vaya a la pestaña de diseño y cambie la configuración del texto H3.

• Fuente del título 3: Playfair Display
• Alineación del texto del encabezado 3: centro
• Título 3 Color del texto: # 000000
• Encabezado 3 Tamaño del texto: 3vw (escritorio), 6vw (tableta), 7vw (teléfono)

Agregar módulo divisor a la columna

Visibilidad

El segundo módulo que necesitamos en esta fila es un módulo divisor. Asegúrese de que la opción 'Mostrar divisor' esté habilitada.

• Mostrar divisor: Sí

Línea

Cambia también el color del divisor.

• Color de línea: # 000000

Espaciado

Y agregue un margen superior e inferior personalizado para crear espacio.

• Margen superior: 2vw
• Margen inferior: 2vw

Agregar módulo de texto a la columna

Agregar contenido

El siguiente módulo que necesitamos es otro módulo de texto. Agregue algún contenido de párrafo de su elección.

Configuración de texto

Vaya a la pestaña de diseño y cambie la configuración del texto.

• Fuente de texto: Open Sans
• Alineación de texto: centro
• Color del texto: # 777777
• Tamaño del texto: 0.8vw (escritorio), 1.7vw (tableta), 2.2vw (teléfono)
• Altura de la línea de texto: 1.8em

Espaciado

A continuación, agregue algunos valores de margen personalizados.

• Margen izquierdo: 3vw (escritorio), 7vw (tableta), 10vw (teléfono)
• Margen derecho: 3vw (escritorio), 7vw (tableta y teléfono)

Agregar módulo de botones a la columna

Agregar copia

El siguiente y último módulo que necesitamos en esta fila es un módulo de botones. Ingrese alguna copia de su elección.

Alineación

Cambie la alineación de los botones en la pestaña de diseño.

• Alineación de botones: centro

Configuración de botones

Continúe diseñando la configuración de los botones.

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Color del texto del botón: # 000000
• Ancho del borde del botón: 1 px
• Radio del borde del botón: 0px
• Fuente del botón: Playfair Display

Espaciado

Y agregue también algunos valores de espaciado personalizados.

• Margen superior: 2vw
• Acolchado superior: 1vw
• Acolchado inferior: 1vw
• Acolchado izquierdo: 3vw (escritorio), 6vw (tableta), 8vw (teléfono)
• Relleno derecho: 3vw (escritorio), 6vw (tableta), 8vw (teléfono)

Configuración de sección adicional

Divisor superior predeterminado

Una vez que haya terminado de agregar todos los módulos a la sección, es hora de pasar por algunas configuraciones de sección adicionales. Abra la configuración de la sección, vaya a la pestaña de diseño y agregue el siguiente divisor superior:

• Estilo de divisor: Buscar en la lista
• Color del divisor: # e8e8e8
• Altura del divisor: 7000px
• Flip divisor: Vertical
• Disposición del divisor: encima del contenido de la sección

Divisor superior flotante

Cambia la altura del divisor al pasar el mouse.

• Altura del divisor: 0px

Divisor inferior

Agrega también un divisor inferior.

• Estilo de divisor: Buscar en la lista
• Color del divisor: # 5c26ff
• Altura del divisor: 600px
• Disposición del divisor: encima del contenido de la sección

Divisor inferior flotante

Y elimine la altura del divisor al pasar el mouse.

• Altura del divisor: 0px

Espaciado

Como puede notar en la vista previa de esta publicación, estamos girando esta sección en un círculo. Para hacer eso, primero necesitaremos agregar algunos valores de margen y relleno personalizados en diferentes tamaños de pantalla:

• Margen izquierdo: 10vw (escritorio), 11vw (tableta), 0vw (teléfono)
• Margen derecho: 47vw (escritorio), 11vw (tableta), 0vw (teléfono)
• Acolchado superior: 8vw (escritorio), 15vw (tableta), 16vw (teléfono)
• Acolchado inferior: 8vw (escritorio), 15vw (tableta), 16vw (teléfono)

Frontera

Continúe agregando '50vw' a cada una de las esquinas para transformar la sección en un círculo. También estamos agregando un borde usando la siguiente configuración:

• Ancho del borde: 1 px
• Color del borde: rgba (255,255,255,0)

Borde flotante

Cambie el color del borde al pasar el mouse.

• Color del borde: # 000000

Clonar sección dos veces

Una vez que haya completado todas las configuraciones de la sección, puede continuar y clonar la sección dos veces.

Modificar duplicado n. ° 1

Cambiar el color del divisor superior

Vamos a modificar los duplicados de ambas secciones, comenzando por la primera. Abra la configuración de la sección y cambie el color del divisor superior.

• Color del divisor: # 5c26ff

Cambiar el color del divisor inferior

Modifique también el color del divisor inferior.

• Color del divisor: # ff3a5e

Cambiar espaciado

Luego, vaya a la configuración de espaciado y asegúrese de que se apliquen los siguientes valores:

• Margen superior: -20vw (escritorio), 0vw (tableta y teléfono)
• Margen izquierdo: 47vw (escritorio), 11vw (tableta), 0vw (teléfono)
• Margen derecho: 10vw (escritorio), 11vw (tableta), 0vw (teléfono)

Modificar duplicado n. ° 2

Cambiar el color del divisor superior

Abra la configuración del segundo duplicado y cambie el color del divisor superior.

• Color del divisor: # ff3a5e

Cambiar el color del divisor inferior

Cambie también el color del divisor inferior.

• Color del divisor: # e8e8e8

Cambiar espaciado

Y modifique los valores de espaciado aquí también.

• Margen superior: -20vw (escritorio), 0vw (tableta y teléfono)
• Margen inferior: 7vw
• Margen izquierdo: 10vw (escritorio), 11vw (tableta), 0vw (teléfono)
• Margen derecho: 47vw (escritorio), 11vw (tableta), 0vw (teléfono)

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo ocultar elegantemente su copia debajo de los divisores de secciones. Esta es una excelente manera de usar algunas de las opciones integradas intuitivas de Divi de una manera diferente a la que está acostumbrado. Esperamos que este tutorial lo inspire a crear sus propios diseños alternativos utilizando también esta técnica. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.