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


Hoy, vamos a destacar la opción de diseño de escala de transformación que viene con las nuevas opciones de transformación de Divi. Más aún, vamos a recrear un diseño impresionante que permite que las secciones se expandan al desplazarse de una manera elegante.

Puede utilizar este diseño para cualquier tipo de sitio web que esté creando. Te ayudará a compartir contenido relevante de una manera estructurada y mínima. Al final de este tutorial, podrá descargar el diseño de página completo 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

expandiendo el contenido de la sección

Móvil

expandiendo el contenido de la sección

¡Empecemos a recrear!

Agregar sección n. ° 1

Espaciado

Empiece por crear 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
  • Acolchado inferior: 0px

expandiendo el contenido de la sección

Agregar nueva fila

Estructura de columna

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

expandiendo el contenido de la sección

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 de la canaleta: 1
  • Ancho: 100%
  • Ancho máximo: 100%

Espaciado

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

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

expandiendo el contenido de la sección

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í

expandiendo el contenido de la sección

Color

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

  • Color: # 000000

expandiendo el contenido de la sección

Dimensionamiento

Modifique también los valores de tamaño.

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

expandiendo el contenido de la sección

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)

expandiendo el contenido de la sección

Agregar 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

expandiendo el contenido de la sección

Espaciado

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

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

expandiendo el contenido de la sección

Borde predeterminado

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

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

expandiendo el contenido de la sección

Borde flotante

Y elimine el ancho del borde al pasar el mouse.

  • Ancho del borde: 0px

expandiendo el contenido de la sección

Sombra de cuadro predeterminada

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

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

expandiendo el contenido de la sección

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)

expandiendo el contenido de la sección

Agregar fila n. ° 1

Estructura de columna

Continúe agregando la primera fila a la sección usando la siguiente estructura de columnas:

expandiendo el contenido de la sección

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 de la canaleta: 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.

expandiendo el contenido de la sección

Configuración de texto H2

Vaya a la pestaña de diseño y modifique la configuración del texto H2 según sus preferencias.

  • Fuente del encabezado 2: Abril Fatface
  • Alineación del texto del título 2: centro
  • Color del texto del título 2: # 000000
  • Tamaño del texto del encabezado 2: 7vw

expandiendo el contenido de la sección

Espaciado

Agregue también algunos valores de margen personalizados.

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

expandiendo el contenido de la sección

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í

expandiendo el contenido de la sección

Color

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

  • Color: # 000000

expandiendo el contenido de la sección

Agregar fila n. ° 2

Estructura de columna

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

expandiendo el contenido de la sección

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 de la canaleta: 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

expandiendo el contenido de la sección

Monitor

Para asegurarnos de que las tres columnas aparezcan 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.

display: flex;

expandiendo el contenido de la sección

Agregar módulo Blurb a la columna 1

Agregar contenido

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

expandiendo el contenido de la sección

Seleccionar icono

Seleccione un icono a continuación.

expandiendo el contenido de la sección

Configuración de iconos

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

  • Color del icono: # 000000

expandiendo el contenido de la sección

Configuración del texto del título

Vaya 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 de título: 2em

expandiendo el contenido de la sección

Configuración del texto del cuerpo

Haz lo mismo con la configuración del texto del cuerpo.

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

expandiendo el contenido de la sección

Espaciado

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

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

expandiendo el contenido de la sección

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

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

expandiendo el contenido de la sección

Agregar fila n. ° 3

Estructura de columna

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

expandiendo el contenido de la sección

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de 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 de la canaleta: 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 una copia de su elección.

expandiendo el contenido de la sección

Alineación

Luego, vaya a la pestaña de diseño y cambie la alineación del botón.

  • Alineación de botones: centro

expandiendo el contenido de la sección

Configuración de botones

A continuación, cambie la configuración del botó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: 1 px
  • Color del borde del botón: # 000000
  • Radio del borde del botón: 1 px
  • Fuente del botón: Open Sans
  • Peso de fuente: Ultra Bold

expandiendo el contenido de la sección

expandiendo el contenido de la sección

Espaciado

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

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

expandiendo el contenido de la sección

Agregar configuración de transformación a la sección 2

Agregar escala de transformación predeterminada a la secció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)

expandiendo el contenido de la sección

Hover Transformar escala a la sección # 2

Modifique estos valores al pasar el mouse. Observe cómo usamos el mismo valor que usamos para tamaños de pantalla más pequeños. Hacer esto asegurará que el efecto de desplazamiento solo se lleve a cabo en tamaños de pantalla más grandes.

  • Inferior: 90%
  • Derecha: 90%

expandiendo el contenido de la sección

Clonar sección dos veces

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

expandiendo el contenido de la sección

Agregue Transformar Girar al Módulo Divisor en la Sección # 1

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

  • Izquierda: 90 grados

expandiendo el contenido de la sección

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

Avance

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

Escritorio

expandiendo el contenido de la sección

Móvil

expandiendo el contenido de la sección

Pensamientos finales

En este tutorial, hemos destacado 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 que las personas tienen cuando visitan 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!