La mayoría de los sitios web tienen una sección de "Héroes", que ya no necesita demostrar su valía. Su función no es sólo destacar, sino también dividirse en varios elementos que refuerzan el llamado a la acción que existe. El héroe secciona a contenido Los archivos divididos con una estructura fácil de entender son muy populares y se utilizan con frecuencia en diferentes tipos de sitios web.
Y aunque crear secciones de héroes para contenido Dividir para la oficina parece sencillo, no siempre hay que fiarse de las apariencias. Aquí es donde este tutorial te resultará útil. Vamos a recrear una sección de héroes divididos para dispositivos móviles altamente interactiva que no solo se verá genial en dispositivos móviles, sino también en cualquier tamaño de pantalla. También combinamos excelentes animaciones para combinar perfectamente con el estilo de diseño de 2019. Esperamos que este tutorial te inspire a crear tus propias secciones de héroes móviles para contenido dividir.
¡Vamos!
vista
Antes de sumergirnos en el tutorial, echemos un vistazo a lo que obtendrá de este tutorial.
Diseño de interfaz
Añadir una nueva sección
espaciamiento
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 todos los márgenes de relleno superior e inferior predeterminados.
- Mejor relleno: 0px
- Parte inferior de relleno: 0px
Añadir una nueva linea
Estructura de la columna
Continuaremos agregando una nueva línea y usando la siguiente estructura de columna:
Color de fondo
Sin agregar más módulos, abra la configuración de línea y agregue un color de fondo completamente negro.
- Color de fondo: #000000
Color de fondo de la columna 1
Agregue también un color de fondo negro a la primera columna.
- Color de fondo de la columna 1: #000000
Color de fondo de la columna 2
Lo mismo para la segunda columna.
- Color de fondo de la columna 2: #000000
apresto
A continuación, vaya a la configuración de tamaño y deje que la fila y sus columnas ocupen todo el ancho de la pantalla.
- Hacer esta línea de ancho completo: si
- Use un ancho de canal personalizado: Sí
- Ancho de canal: 1
- Ecualizar alturas de columna: Sí
espaciamiento
También eliminamos todos los márgenes superior e inferior predeterminados de la línea.
- Relleno en la parte superior: 0px
- Parte inferior de relleno: 0px
- Derecho de tapicería: 1vw
Visualización
Finalmente, nos aseguraremos de que las dos columnas aparezcan una al lado de la otra en pantallas más pequeñas. Para hacer esto, necesitaremos agregar una sola línea de código CSS a la pestaña Avanzado de la línea.
display: flex; |
Agregar un módulo de imagen a la columna 1
Deje el área de la imagen en blanco
¡Ahora vamos a utilizar todos los módulos que necesitamos! Tienes que comenzar con el módulo de imagen en la primera columna. En lugar de cargar una imagen en el área de la imagen, cargaremos la imagen en la configuración de fondo en los siguientes pasos, por lo que debemos eliminar la imagen agregada de forma predeterminada. Así, podemos jugar con la forma en que se posiciona la imagen y cuánto espacio ocupa en nuestra fila.
Añadir un color de fondo
Vaya a la configuración de fondo del módulo Imagen y agregue un color de fondo. En el siguiente paso, combinaremos este color de fondo y una imagen de fondo usando un efecto de mezcla para oscurecer la imagen.
- Color de fondo: #686868
Añadir una imagen de fondo
Agregue una imagen de fondo de su elección y cambie la configuración de fondo en consecuencia:
- Tamaño de la imagen de fondo: Portada
- Posición de la imagen de fondo: centro
- Repetir imagen de fondo: no repetir
- Mezcla de imágenes de fondo: multiplicar
apresto
Usamos dos columnas de igual tamaño para la fila en la que estamos trabajando, pero el resultado no es el mismo. Vamos a cambiar manualmente el tamaño de cada módulo agregado 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 responda.
en pantallas más pequeñas. Acceda a los parámetros de tamaño del módulo de imagen y cambie el ancho.
- Ancho: 88%
- Alineación del módulo: izquierda.
espaciamiento
Ahora debemos decidir el tamaño de nuestra imagen en la configuración de espaciado. También utilizamos una unidad de visualización para estos valores para asegurarnos de que nuestro diseño siga siendo totalmente receptivo, independientemente del tamaño de la pantalla.
- Acolchado superior: 26.3vw (escritorio), 48vw (tableta), 72vw (teléfono)
- Tapicería en la parte inferior: 26.3vw (escritorio), 48vw (tableta), 72vw (teléfono)
Animación
Finalmente, agregaremos una animación de diapositiva al módulo Imagen. Una vez que apliques la animación, notarás que la imagen no comenzará a aparecer hasta 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 arrastra hacia la izquierda.
- Estilo de animación: Slide
- Repita la animación: una vez
- Dirección de la animación: izquierda
- Duración de la animación: 1450ms
- Animación de intensidad: 60%
- Animación Opacidad inicial: 100%
Agregue un módulo de botones a la columna 1
Añadir una copia
El siguiente módulo que necesitamos en la columna 1 es un módulo de botones. Ingrese una copia de su elección.
Configuraciones de botones
Luego vaya a la pestaña Diseño y cambie la configuración del botón.
- Use estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 1.5vw (escritorio), 2.5vw (tableta), 4vw (teléfono)
- Color de 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: 1px
- Fuente de botón: Poppins
- Peso de la fuente: Negrita
espaciamiento
También cambie los valores de espaciado.
- Margen superior: -3.3vw (escritorio), -6vw (tableta), -9.1vw (teléfono)
- Relleno izquierdo: 8vw
- Derecho de tapicería: 8vw
Caja de sombra
Y agregue una sombra sutil para crear profundidad en la página.
- Box Shadow Blur Force: 20px
- Color de sombra: rgba (0,0,0,0.3)
Agregue el módulo de texto # 1 a la columna 2
Añadir contenido H1
¡En la segunda columna! El primer módulo que necesitaremos es un módulo de texto. Agregue cualquier contenido H1 de su elección.
Configuraciones de texto H1
Luego vaya a la pestaña Diseño y cambie la configuración de texto H1.
- Fuente: Poppins
- Color del texto del título: #ffffff
- Tamaño del título del texto: 4vw (escritorio), 5vw (tableta), 6vw (teléfono)
espaciamiento
Cambie también los valores de espaciado.
- Margen superior: 12vw
- Margen izquierdo: -20vw
- Margen derecho: 17vw (escritorio), 15vw (tableta), 1vw (teléfono)
Animación
Y añadir una animación sutil.
- Estilo de animación: Slide
- Repita la animación: una vez
- Dirección de animación: abajo
- Duración de la animación: 1450ms
- Animación de intensidad: 10%
- Animación Opacidad inicial: 100%
Agregue un módulo de división a la columna 2
visibilidad
El siguiente módulo que necesitamos en la segunda columna es un módulo de división. Asegúrese de que la opción "Mostrar separador" esté habilitada.
- Mostrar divisor: si
Color
Luego vaya a la pestaña Diseño y cambie el color del separador.
- Color: #e02b20
Animación
Agregue una animación al módulo de división siguiente.
- Estilo de animación: Slide
- Repita la animación: una vez
- Dirección de animación: derecha
- Duración de la animación: 1450ms
- Animación de intensidad: 83%
- Animación Opacidad inicial: 100%
Agregue el módulo de texto # 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.
Configuraciones de texto
Luego vaya a la configuración de texto en la pestaña 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.9vw (escritorio), 1.8vw (tableta), 2.2vw (teléfono)
- Espaciado de letras de texto: 0.1vw
- Altura de la línea de texto: 2.2em
espaciamiento
También cambie 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)
Animación
Y al final, agregue una animación de desvanecimiento al módulo y ¡listo!
- Estilo de animación: Fade
- Repita la animación: una vez
- Duración de la animación: 1400ms
- Retraso de animación: 1000 ms
- Animación Opacidad inicial: 0%
Consideraciones finales
En este tutorial, le mostramos cómo crear increíbles secciones de héroe de contenido dividido con Divi. Las secciones principales de contenido dividido son muy populares y se usan con frecuencia en la web, pero también es importante asegurarse de que respondan bien. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario y no dude en compartirlo en las redes sociales!
