Cómo crear una sección Hero animada de contenido dividido para dispositivos móviles con Divi


Crear una sección de héroe que se destaque es realmente importante. Y no solo debe destacarse, sino que también debe dividirse en múltiples elementos que potencien el llamado a la acción que existe. La estructura fácil de entender que tienen las secciones de héroe de contenido dividido las hace muy populares y de uso frecuente entre diferentes tipos de sitios web.

Y aunque crear secciones de héroe de contenido dividido para escritorio es sencillo, es posible que hacerlo para tamaños de pantalla más pequeños no lo sea. Ahí es donde este tutorial será útil. Vamos a recrear una sección de héroe dividida en dispositivos móviles altamente interactiva que no solo se verá bien en dispositivos móviles, sino en todos los tamaños de pantalla. También estamos combinando algunas animaciones geniales para que el estilo de diseño coincida perfectamente con 2019. Esperamos que este tutorial lo inspire a crear sus propias secciones de héroe de contenido dividido para dispositivos móviles.

¡Hagámoslo!

Avance

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

Móvil

contenido dividido móvil

Escritorio

contenido dividido móvil

¡Empecemos a recrear!

Agregar nueva sección

Espaciado

Empiece por crear una nueva página o abrir una existente. Agregue una nueva sección regular, vaya a la configuración de espaciado y elimine todo el relleno superior e inferior predeterminado.

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

contenido dividido móvil

Agregar nueva fila

Estructura de columna

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

contenido dividido móvil

Color de fondo

Sin agregar ningún módulo todavía, abra la configuración de fila y agregue un color de fondo completamente negro.

  • Color de fondo: # 000000

contenido dividido móvil

Color de fondo de la columna 1

Agrega también un color de fondo negro a la primera columna.

  • Color de fondo de la columna 1: # 000000

contenido dividido móvil

Color de fondo de la columna 2

Lo mismo para la segunda columna.

  • Color de fondo de la columna 2: # 000000

contenido dividido móvil

Dimensionamiento

Luego, vaya a la configuración de tamaño y permita que la fila y sus columnas ocupen todo el ancho de la pantalla.

  • Hacer esta fila de ancho completo: Sí
  • Usar ancho de canalón personalizado: Sí
  • Ancho del canal: 1
  • Ecualizar alturas de columna: Sí

contenido dividido móvil

Espaciado

También eliminaremos todo el relleno predeterminado superior e inferior de la fila.

  • Relleno superior: 0px
  • Acolchado inferior: 0px
  • Acolchado derecho: 1vw

contenido dividido móvil

Monitor

Por último, pero no menos importante, también nos aseguraremos de que ambas columnas aparezcan una junto a la otra en pantallas de menor tamaño. Para hacer eso, necesitaremos agregar una sola línea de código CSS a la pestaña avanzada de la fila.

display: flex;

contenido dividido móvil

Agregar módulo de imagen a la columna 1

Dejar el cuadro de imagen vacío

¡Es hora de agregar todos los diferentes módulos que necesitamos! Comience con el Módulo de imagen en la primera columna. En lugar de cargar una imagen en el cuadro de imagen, la cargaremos en la configuración de fondo en los próximos pasos. Esto nos permitirá jugar con cómo se coloca la imagen y cuánto espacio ocupa en nuestra fila.

contenido dividido móvil

Agregar color de fondo

Vaya a la configuración de fondo del Módulo de imagen y agregue un color de fondo. En el siguiente paso, combinaremos este color de fondo y una imagen de fondo con un efecto de fusión para oscurecer la imagen.

  • Color de fondo: # 686868

contenido dividido móvil

Agregar imagen de fondo

Agregue una imagen de fondo de su elección y modifique la configuración de fondo en consecuencia:

  • Tamaño de la imagen de fondo: Portada
  • Posición de la imagen de fondo: Centro
  • Repetición de imagen de fondo: sin repetición
  • Mezcla de imagen de fondo: multiplicar

contenido dividido móvil

Dimensionamiento

Hemos utilizado dos columnas de igual tamaño para la fila en la que estamos trabajando, pero el resultado no se ve así. Vamos a cambiar manualmente el tamaño de cada módulo que agreguemos para que parezca que estamos usando una estructura de columna diferente. La razón por la que estamos haciendo esto (en lugar de simplemente elegir otra estructura de columna) es para que todo se vea bien y responda también en tamaños de pantalla más pequeños. Vaya a la configuración de tamaño del Módulo de imagen y modifique el ancho.

  • Ancho: 88%
  • Alineación del módulo: izquierda

contenido dividido móvil

Espaciado

Ahora podemos decidir el tamaño de nuestra imagen en la configuración de espaciado. También usamos una unidad de ventana gráfica para estos valores a fin de asegurarnos de que nuestro diseño siga respondiendo completamente en todos los tamaños de pantalla.

  • Acolchado superior: 26.3vw (escritorio), 48vw (tableta), 72vw (teléfono)
  • Acolchado inferior: 26.3vw (escritorio), 48vw (tableta), 72vw (teléfono)

contenido dividido móvil

Animación

Por último, pero no menos importante, agregaremos una animación de diapositiva a nuestro Módulo de imagen. Una vez que aplique la animación, notará que la imagen solo comenzará a aparecer desde el momento en que ingrese a la primera columna. El color de fondo de la segunda columna permanece en la parte superior del módulo de imagen mientras se desliza hacia la izquierda.

  • Estilo de animación: diapositiva
  • Repetición de animación: una vez
  • Dirección de animación: izquierda
  • Duración de la animación: 1450ms
  • Intensidad de animación: 60%
  • Opacidad inicial de la animación: 100%

contenido dividido móvil

Agregar módulo de botones a la columna 1

Agregar copia

El siguiente módulo que necesitamos en la columna 1 es un módulo de botones. Ingrese alguna copia de su elección.

contenido dividido móvil

Configuración de botones

Luego, vaya a la pestaña de diseño y 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), 4vw (teléfono)
  • Color del texto del botón: #ffffff
  • Color de fondo del botón: # e02b20
  • Ancho del borde del botón: 0px
  • Radio del borde del botón: 1 px
  • Fuente del botón: Poppins
  • Peso de fuente: pesado

contenido dividido móvil

contenido dividido móvil

Espaciado

Modifique también los valores de espaciado.

  • Margen superior: -3.3vw (escritorio), -6vw (tableta), -9.1vw (teléfono)
  • Acolchado izquierdo: 8vw
  • Acolchado derecho: 8vw

contenido dividido móvil

Sombra de la caja

Y agregue una sombra de cuadro sutil para crear algo de profundidad en la página.

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

contenido dividido móvil

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

Agregar contenido H1

¡A la segunda columna! El primer módulo que necesitaremos es un módulo de texto. Agregue algo de contenido H1 de su elección.

contenido dividido móvil

Configuración de texto H1

Luego, vaya a la pestaña de diseño y modifique la configuración de texto H1.

  • Fuente de encabezado: Poppins
  • Color del texto del encabezado: #ffffff
  • Tamaño del texto del encabezado: 4vw (escritorio), 5vw (tableta), 6vw (teléfono)

contenido dividido móvil

Espaciado

Cambie también los valores de espaciado.

  • Margen superior: 12vw
  • Margen izquierdo: -20vw
  • Margen derecho: 17vw (escritorio), 15vw (tableta), 1vw (teléfono)

contenido dividido móvil

Animación

Y agrega una animación sutil.

  • Estilo de animación: diapositiva
  • Repetición de animación: una vez
  • Dirección de animación: Abajo
  • Duración de la animación: 1450ms
  • Intensidad de animación: 10%
  • Opacidad inicial de la animación: 100%

contenido dividido móvil

Agregar módulo divisor a la columna 2

Visibilidad

El siguiente módulo que necesitamos en la segunda columna es un módulo divisor. Asegúrese de que la opción "Mostrar divisor" esté habilitada.

  • Mostrar divisor: Sí

contenido dividido móvil

Color

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

  • Color: # e02b20

contenido dividido móvil

Animación

A continuación, agregue una animación al módulo divisor.

  • Estilo de animación: diapositiva
  • Repetición de animación: una vez
  • Dirección de animación: Derecha
  • Duración de la animación: 1450ms
  • Intensidad de la animación: 83%
  • Opacidad inicial de la animación: 100%

contenido dividido móvil

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

Agregar contenido

¡Pasemos al siguiente y último módulo que necesitamos en la segunda columna! Agregue una descripción de su elección.

contenido dividido móvil

Configuración de texto

Luego, vaya a la configuración de texto en la pestaña de diseño y realice algunos cambios en consecuencia:

  • Fuente de texto: Poppins
  • Peso de la fuente del texto: ligero
  • Color del texto: # 919191
  • Tamaño del texto: 0.7vw (escritorio), 1.8vw (tableta), 2.2vw (teléfono)
  • Espaciado de letras de texto: 0.1vw
  • Altura de la línea de texto: 2.2em

contenido dividido móvil

Espaciado

Modifique también los valores de espaciado.

  • Margen superior: 9vw (escritorio), 19vw (tableta), 23vw (teléfono)
  • Margen inferior: 12vw (escritorio), 19vw (tableta), 23vw (teléfono)
  • Margen izquierdo: -3vw
  • Margen derecho: 20vw (escritorio), 6vw (tableta), 3vw (teléfono)

contenido dividido móvil

Animación

Por último, pero no menos importante, agregue una animación de fundido al módulo y ¡listo!

  • Estilo de animación: Fundido
  • Repetición de animación: una vez
  • Duración de la animación: 1450ms
  • Retraso de animación: 1000 ms
  • Opacidad inicial de la animación: 0%

contenido dividido móvil

Avance

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

Móvil

contenido dividido móvil

Escritorio

contenido dividido móvil

Pensamientos finales

En esta publicación, le mostramos cómo crear impresionantes secciones de héroes de contenido dividido usando Divi. Las secciones de héroe de contenido dividido son muy populares y se usan con frecuencia en la Web, pero es importante asegurarse de que también sean muy receptivas. Esperamos que este tutorial lo ayude a crear secciones de héroe de contenido dividido para dispositivos móviles para los próximos sitios web que cree. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!