Ocultando elegantemente su copia A continuación, separadores de sección en un diseño impresionante con Divi


Las opciones integradas de Divi le permiten usar una configuración de diseño particular para múltiples propósitos, lo que a su vez ayuda a despertar la creatividad. Hoy, vamos a utilizar divisores de sección de una manera única para ocultar con elegancia 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. Vamos a recrear un hermoso ejemplo desde cero y también podrás 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

escondiendo tu copia

Móvil

escondiendo tu copia

Descargar 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

¡Comencemos a recrearnos!

Agregar secció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 columna

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

Agregar módulo de texto a columna

Añadir contenido H2

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

Configuraciones de texto H2

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

  • Título 2 Fuente: Playfair Display
  • Título 2 Peso de fuente: Regular
  • Encabezado 2 Alineación de texto: centro
  • Título 2 Tamaño del texto: 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:

  • Divisor de peso: 5px
  • Ancho: 27%
  • Alineación del módulo: centro

Agregar Secció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 también el desbordamiento de la secció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 transición: 800 ms

Agregar nueva fila

Estructura de columna

Continúe agregando una nueva fila utilizando 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 personalizado: sí
  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho Máx .: 100%

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

Añadir 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.

Configuraciones de texto H3

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

  • Título 3 Fuente: Playfair Display
  • Encabezado 3 Alineación de texto: 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 el color del divisor también.

  • Color de línea: # 000000

Espaciado

Y agregue algunos márgenes superior e inferior personalizados para crear espacio.

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

Agregar módulo de texto a 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.

Configuraciones de texto

Pase 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

Agregue algunos valores de margen personalizados a continuación.

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

Agregar módulo de botón a 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 del botón en la pestaña de diseño.

  • Alineación de botones: centro

Configuraciones de botones

Continúe aplicando estilo a la configuración del botón.

  • 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: 1px
  • Radio del borde del botón: 0px
  • Fuente del botón: Playfair Display

Espaciado

Y agregue algunos valores de espaciado personalizados también.

  • Margen superior: 2vw
  • Relleno superior: 1vw
  • Relleno 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 divisor: Buscar en la lista
  • Color del divisor: # e8e8e8
  • Altura del divisor: 7000 px
  • Divisor Flip: Vertical
  • Disposición del divisor: encima del contenido de la sección

Hover Top Divider

Cambia la altura del divisor al desplazarte.

  • Altura del divisor: 0px

Divisor inferior

Agregue un divisor inferior también.

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

Divisor inferior flotante

Y quite la altura del divisor al pasar el mouse.

  • Altura del divisor: 0px

Espaciado

Como puede observar en la vista previa de esta publicación, estamos convirtiendo esta sección en un círculo. Para hacer eso, primero tendremos que agregar algunos márgenes personalizados y valores de relleno en diferentes tamaños de pantalla:

  • Margen izquierdo: 10vw (escritorio), 11vw (tableta), 0vw (teléfono)
  • Margen derecho: 47vw (escritorio), 11vw (tableta), 0vw (teléfono)
  • Relleno 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 con la siguiente configuración:

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

Hover Border

Cambia el color del borde al pasar el cursor.

  • Color del borde: # 000000

Clonar la 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 # 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 el color del divisor inferior también.

  • 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 # 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 el color del divisor inferior también.

  • 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

escondiendo tu copia

Móvil

escondiendo tu copia

Pensamientos finales

En esta publicación, le mostramos cómo ocultar elegantemente su copia debajo de los separadores 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ás acostumbrado. Esperamos que este tutorial lo inspire a crear sus propios diseños alternativos utilizando esta técnica también. 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 regalos Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube así que siempre serás una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.