Uso de las opciones de transformación de Divi para crear contenido de sección desplegable al pasar el mouse

Avance

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

Escritorio

Móvil

¡Empecemos a Recrear!

Añadir Sección #1

Espaciado

Comience creando una nueva página. Agregue su primera sección regular a la página, abra la configuración de la sección y elimine todo el relleno superior e inferior predeterminado en la configuración de espaciado.

• Relleno superior: 0px
• Relleno inferior: 0px

Agregar nueva fila

Estructura de la columna

Continúe agregando la primera 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 de la pantalla.

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

Espaciado

Elimine también todo el relleno superior e inferior predeterminado. Estamos haciendo esto para limitar el espacio que ocupará la fila y la sección.

• Relleno superior: 0px
• Relleno inferior: 0px

Agregar módulo divisor

Visibilidad

El único módulo que necesitamos en esta fila es un módulo divisor. Al final de este tutorial, transformaremos el divisor en uno vertical que conectará todas las secciones siguientes. Una vez que haya agregado el módulo divisor, asegúrese de que la opción ‘Mostrar divisor’ esté habilitada.

• Mostrar divisor: Sí

Color

Luego, ve a la pestaña de diseño y cambia el color del divisor a negro.

• Color: #000000

Dimensionamiento

Modifique también los valores de tamaño.

• Peso del divisor: 1px
• Altura: 0px

Espaciado

Y aumente la longitud del divisor agregando algunos márgenes negativos izquierdo y derecho.

• Margen izquierdo: -135vw (escritorio), -300vw (tableta), -340vw (teléfono)
• Margen derecho: -135vw (escritorio), -300vw (tableta), -340vw (teléfono)

Añadir Sección #2

Color de fondo

¡A la siguiente sección regular! Una vez que haya agregado la nueva sección, abra la configuración de la sección y agregue un color de fondo completamente blanco.

• Color de fondo: #ffffff

Espaciado

Luego, vaya a la configuración de espaciado y agregue un relleno superior e inferior personalizado.

• Acolchado superior: 5vw
• Acolchado inferior: 5vw

Borde predeterminado

Agregue un borde a la sección también.

• Ancho del borde: 1px
• Color del borde: #000000

Borde flotante

Y elimine el ancho del borde al pasar el mouse.

• Ancho del borde: 0px

Sombra de cuadro predeterminada

También estamos agregando una sombra de cuadro al pasar el mouse. Para hacer eso, primero necesitaremos agregar uno predeterminado. Para asegurarnos de que la sombra del cuadro no se muestre de manera predeterminada, estamos usando un color de sombra completamente transparente.

• Fuerza de desenfoque de sombra de cuadro: 80px
• Color de sombra: rgba(0,0,0,0)

Sombra de caja flotante

Cambie el color de la sombra al pasar el mouse usando el siguiente código de color:

• Color de sombra: rgba(0,0,0,0.13)

Añadir Fila #1

Estructura de la columna

Continúe agregando la primera fila a la sección 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 de la sección.

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

Agregar módulo de texto

Agregar contenido H2

¡Es hora de comenzar a agregar módulos! El primer módulo que necesitamos 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 modifique la configuración de texto H2 según sus preferencias.

• Rúbrica 2 Fuente: Abril Fatface
• Encabezado 2 Alineación de texto: Centro
• Título 2 Color del texto: #000000
• Título 2 Tamaño del texto: 7vw

Espaciado

Agregue también algunos valores de margen personalizados.

• Margen inferior: 5vw
• Margen izquierdo: 5vw
• Margen derecho: 5vw

Agregar módulo divisor

Visibilidad

El siguiente 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í

Color

Luego, vaya a la pestaña de diseño y cambie el color del divisor a negro.

• Color: #000000

Añadir Fila #2

Estructura de la columna

¡A por la segunda fila! Utilice la siguiente estructura de columnas:

Dimensionamiento

Nuevamente, nos estamos asegurando de que la fila ocupe todo el ancho de la pantalla modificando la configuración de tamaño en la pestaña de diseño.

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

Espaciado

También estamos reduciendo ligeramente el tamaño de la fila agregando un relleno personalizado a la izquierda y a la derecha en la configuración de espaciado.

• Acolchado izquierdo: 10vw
• Acolchado derecho: 10vw

Mostrar

Para asegurarnos de que las tres columnas se muestren una al lado de la otra en tamaños de pantalla más pequeños, agregaremos una sola línea de código CSS al elemento principal de la fila.

Agregue el módulo Blurb a la columna 1

Agregar contenido

Continúe agregando un módulo de Blurb a la primera columna de la fila. Introduzca algún contenido de su elección.

Seleccionar icono

Seleccione un icono a continuación.

Configuración de iconos

Luego, ve a la pestaña de diseño y cambia el color del icono.

• Color del icono: #000000

Configuración del texto del título

Pase a la configuración del texto del título y cambie la configuración según sus preferencias.

• Fuente del título: Abril Fatface
• Alineación del texto del título: Centro
• Color del texto del título: #000000
• Tamaño del texto del título: 1.5vw (escritorio), 2.5vw (tableta), 3.5vw (teléfono)
• Altura de la línea del título: 2em

Configuración del texto del cuerpo

Haga lo mismo para la configuración del texto del cuerpo.

• Fuente del cuerpo: Open Sans
• Alineación del cuerpo del texto: Centro
• Color del cuerpo del texto: #666666
• Tamaño del cuerpo del texto: 0.8vw (escritorio), 1.5vw (tableta), 2vw (teléfono)
• Altura de la línea del cuerpo: 2em

Espaciado

Por último, pero no menos importante, agregue un margen izquierdo y derecho personalizado al módulo de Blurb.

• Margen izquierdo: 2vw
• Margen derecho: 2vw

Clonar módulo Blurb dos veces y colocar en las columnas restantes

Una vez que haya terminado de personalizar el módulo de Blurb, puede continuar y clonarlo dos veces. Coloque los duplicados en las dos columnas restantes de la fila.

Añadir Fila #3

Estructura de la columna

A la siguiente y última fila. Elija la siguiente estructura de columna para ello:

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 de la sección modificando la configuración de tamaño.

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

Agregar módulo de botones

Agregar contenido

El único módulo que necesitamos aquí es un módulo de botones. Agregue alguna copia de su elección.

Alineación

Luego, ve a la pestaña de diseño y cambia la alineación de los botones.

• Alineación de botones: Centro

Configuración de botones

Cambie la configuración del botón a continuación.

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 1.5vw (escritorio), 2.5vw (tableta y teléfono)
• Color del texto del botón: #000000
• Ancho del borde del botón: 1px
• Color del borde del botón: #000000
• Radio del borde del botón: 1px
• Fuente del botón: Open Sans
• Peso de fuente: ultra negrita

Espaciado

Y cree una forma para el botón usando algunos márgenes personalizados y valores de relleno.

• Margen superior: 5vw
• Acolchado superior: 2vw
• Acolchado inferior: 2vw
• Acolchado izquierdo: 10vw
• Acolchado derecho: 10vw

Agregue la configuración de transformación a la sección n.º 2

Agregar escala de transformación predeterminada a la sección n.º 2

Ahora que hemos terminado de crear y modificar las dos secciones que agregamos a nuestra página, podemos comenzar a aplicar las opciones de transformación . Abra la sección #2 y agregue algunos valores de escala de transformación personalizados.

• Abajo: 60 % (escritorio), 90 % (tableta y teléfono)
• Derecha: 60 % (escritorio), 90 % (tableta y teléfono)

Pase el cursor por la escala de transformación a la sección n.º 2

Modifique estos valores al pasar el mouse. Observe cómo estamos usando el mismo valor que usamos para tamaños de pantalla más pequeños. Al hacer esto, se asegurará de que el efecto de desplazamiento solo se produzca en pantallas de mayor tamaño.

• Fondo: 90%
• Derecha: 90%

Clonar sección dos veces

Luego, clona la segunda sección dos veces (o tantas veces como quieras).

Agregue Transform Rotate to Divider Module en la Sección #1

Y transforme el divisor que ha agregado a la primera sección jugando con el valor de rotación de transformación.

• Izquierda: 90 grados

Descarga el diseño de la sección desplegable GRATIS

Para poner sus manos en el diseño de la sección en expansión, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.

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 este tutorial, hemos resaltado la opción de escala de transformación que viene con las nuevas opciones de transformación de Divi. Además de eso, hemos recreado un diseño impresionante que permite que el efecto de desplazamiento tenga sentido y mejore la experiencia general del usuario cuando visita la página. Al final del tutorial, también pudo descargar el diseño completo de forma gratuita. Si tiene alguna pregunta o sugerencia, ¡no dude en dejar un comentario en la sección de comentarios a continuación!