¿Te gustaría dar otra dimensión a tu sitio web con una máscara de fondo Divi ¿Pegajoso?
Las opciones adhesivas de Divi le permite crear una tonelada de diseños diferentes para sus sitios web. El tutorial de hoy agrega la lista de cosas que puede hacer. Esperemos que esto ayude a despertar su creatividad.
Le mostraremos cómo crear una máscara de fondo pegajosa.
Este tutorial combina las opciones adhesivas de Divi con modos de fusión de filtros.
vista
Antes de sumergirnos en este tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
oficina
Móvil
Crear un diseño en Divi
Añadir una nueva sección
Imagen de fondo
Comience agregando una nueva sección a la página en la que está trabajando.
- Cargue una imagen de fondo de su elección.
- Tamaño de la imagen de fondo: Portada
espaciamiento
Cambie a la pestaña Diseño de sección y elimine la configuración de espaciado predeterminada a continuación:
- Relleno (superior e inferior): 0 px
desbordamientos
Luego oculta los desbordamientos de la sección en la pestaña Avanzado.
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Agregar línea #1
Estructura de la columna
Continúe agregando una nueva fila usando la siguiente estructura de columnas:
apresto
Sin agregar ningún módulo, abra la configuración de línea y cambie la configuración de tamaño en consecuencia:
- Ancho: 100%
- Ancho máximo: 100%
espaciamiento
También elimine todos los márgenes predeterminados.
- Relleno (superior e inferior): 0 px
Filtres
También agregamos un modo de fusión a esta línea. Este modo de fusión nos ayudará a crear una máscara más adelante en el tutorial.
- Modo de fusión: Pantalla
índice Z
Para asegurarnos de que esta fila permanezca debajo de la segunda fila que agregaremos a la sección, cambiamos el índice z en la pestaña Avanzado.
- Índice Z: 9
Parámetros de la columna
A continuación, abriremos la configuración de la columna.
Color de fondo
Usamos un color de fondo completamente blanco.
- Color de fondo: #ffffff
Elemento principal CSS
También agregamos un valor de altura al elemento principal en la pestaña Avanzado.
height: 100vh;
Agregue un módulo de "Texto" a la línea
Deje el área de contenido vacía
Una vez que haya terminado con la configuración de la fila, agregue un módulo de texto a su columna.
Abandona el area contenido vacío. En lugar de eso, usamos este módulo para crear una forma que revela parte de la imagen de fondo de la sección.
Color de fondo
Vamos a utilizar un color de fondo más oscuro para este módulo.
- Color de fondo: #0b3835
apresto
A continuación accederemos a la pestaña Diseño y modifique los parámetros de tamaño de la siguiente manera:
- Ancho:
- Escritorio: 20vw
- Tableta y teléfono: 70 vw
- Altura:
- Escritorio: 30vh
- Tableta y Teléfono: 10vh
espaciamiento
También agregamos un margen superior.
- Margen (Superior): 3vh
Borde
Y vamos a incluir esquinas redondeadas.
- Esquinas redondeadas: 15px
Añadir línea 2
Estructura de la columna
Continúe agregando otra fila a la sección utilizando la siguiente estructura de columnas:
apresto
Abra la configuración de línea y realice los siguientes cambios en las opciones Guía de Tallas siguiente:
- Ancho: 100%
- Ancho máximo: 100%
índice Z
También aumente el índice z de la fila. Esto ayudará a garantizar que el contenido de la línea permanece por encima de la línea anterior.
- Índice Z: 12
Agregue un módulo de "Texto" a la línea
Añadir contenido H2
Es hora de agregar módulos, comenzando con un primer módulo de texto que contenga contenido H2 de tu elección.
Configuraciones de texto H2
Personalice la configuración de texto H2 de la siguiente manera:
- Fuente: Pantalla Playfair
- Alineación de texto: centrado
- Color del texto: #0b3835
- Talla :
- Escritorio: 150px
- Tableta y teléfono: 45px
- Altura de la línea: 1,2 cm
apresto
A continuación, navegue a la configuración de tamaño y aplique la siguiente configuración:
- Ancho máximo: 980px
- Módulo de alineación: Centro
espaciamiento
Incluya también un margen superior negativo.
Agregue un módulo "Botón" a la fila
Agregar contenido al botón
El siguiente y último módulo que necesitamos en esta fila es un módulo Botón. Agrega el contenido de tu elección.
Alineación de botones
Cambiar a pestaña Diseño del módulo y modificar la alineación del botón.
- Alineación de botones: Centro
Configuraciones de botones
A continuación, vaya a la configuración del botón y aplique los siguientes estilos:
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 15px
- Color del texto del botón: #ffffff
- Color de fondo del botón: #000000
- Ancho del borde del botón: 0 píxeles
- Radio del borde del botón: 100px
- Fuente del botón: Montserrat
- Peso de la fuente del botón: semi negrita
- Estilo de fuente: TT
espaciamiento
También agregamos márgenes personalizados y valores de relleno a la configuración de espaciado.
- Margen (inferior): 60vh
- Relleno (superior e inferior): 15px
- Relleno (izquierdo y derecho): 40px
Aplicar efectos pegajosos
línea abierta #1
Ahora que hemos construido la base de nuestro diseño, es hora de aplicar los estilos pegajosos. Abra la configuración de la primera línea.
Aplicar opciones pegajosas
Ir a la pestaña Avanzado y aplique la siguiente configuración persistente:
- Posición pegajosa: Stick To Top
- Límite pegajoso inferior: Sección
- Desplazamiento de los elementos pegajosos circundantes: SÍ
- Transición predeterminada y estilos pegajosos: SÍ
Opciones adhesivas del módulo de texto
Ahora que la línea es adhesiva, podemos aplicar estilos al módulo de texto dentro de la línea. Abra la configuración del módulo.
Tamaño adhesivo
A continuación, vaya a la configuración de tamaño y aplique los siguientes valores de tamaño:
- Ancho (pegajoso): 80 vw
- Altura (pegajoso): 90vh
Tiempo de transición
Finalmente, navegue a la pestaña Avanzado y aumentar la duración de la transición.
- Duración de la transición: 500ms
vista
Ahora que hemos seguido todos los pasos, echemos un vistazo final a cómo se ve en diferentes tamaños de pantalla.
oficina
¡¡¡Descarga DIVI ahora!!!
Móvil
¡¡¡Descarga DIVI ahora!!!
Conclusión
En este artículo, una vez más le mostramos cómo ser creativo con las opciones adhesivas de Divi.
Específicamente, le mostramos cómo combinar la configuración de filtro de Divi y las opciones adhesivas.
Esperamos que este tutorial lo inspire para sus próximos proyectos Divi. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
