¿Quieres usar efectos de sombra y desplazamiento en Divi crear contenido interactivo y destaca tu Sitio web ?
Asegúrese de que su Sitio web destacarse de sitios web similares puede ser difícil. Pero una vez que llegas allí, casi siempre vale la pena el esfuerzo y el pensamiento que se dedicó a ello.
Le mostraremos cómo crear contenido interactivo al crear sitios web con Divi.
¡Vamos!
vista
Antes de sumergirnos en este tutorial, echemos un vistazo rápido al resultado que puede esperar.
Ordenador de oficina
Móvil
¡Comencemos la realización con Divi!
Ver también: Divi: cómo crear un menú de rueda giratoria al pasar el mousel
Añadir una nueva sección
Color de fondo
Cree una nueva página o abra una existente y agréguele una sección regular. Abra la configuración de la sección y cambie el color de fondo.
- Fondo: #03006d
espaciamiento
Luego vaya a la configuración de espaciado de sección y cambie de la siguiente manera:
- Relleno (superior e inferior): 50px
Añadir una nueva linea
Estructura de la columna
Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas.
apresto
Luego vaya a la configuración de tamaño y deje que la línea llene todo el ancho de la pantalla.
- Usar ancho de canalón personalizado: SÍ
- Ancho del canalón: 1
- Ancho: 100%
espaciamiento
También cambiemos la siguiente configuración de espaciado:
- Relleno (derecha): 9vw (escritorio), 5vw (tableta y teléfono)
- Acolchado (Derecho): 5vw (Tablet y Teléfono)
Agregue un módulo de texto a la columna 1
Agregar contenido
Una vez que haya terminado de editar la configuración de la fila, agregue el primer módulo de texto a la columna 1.
Agregue el primer carácter como texto de párrafo. Entonces el contenido que desea que aparezca como texto de lista.
Configuración de texto (escritorio)
Luego ve a la pestaña Diseñoy cambie la configuración de texto de párrafo predeterminada. Asegúrate de usar el mismo color para el texto y el fondo de la sección.
- Peso de fuente: ultra negrita
- Color del texto: #03006d
- Tamaño del texto: 27vw (escritorio), 0vw (tableta y teléfono)
- Altura de la línea: 1,1 cm
- Sombra de texto: Ver captura
- Fuerza de desenfoque de sombra: 0,01em
- Color de sombra: #ffffff
- Alineación de texto: Izquierda
Configuración de texto flotante
Para crear el agradable efecto de desplazamiento, necesitaremos cambiar esta configuración de texto de párrafo de desplazamiento.
- Color del texto (pasar el cursor): #ffffff
- Color de sombra (Hover): rgba (255,255,255,0)
Configuración de lista (escritorio)
Continúe yendo a la configuración de la lista.
- Peso de fuente: ligero
- Color del texto de la lista: #ffffff
- Tamaño del texto de la lista: 0px (escritorio), 18px (tableta y teléfono)
- Posición de estilo: Círculo
- Posición de estilo de lista desordenada: exterior
- Sangría de elemento de lista desordenada: 0px
Enumere la configuración de texto al pasar el mouse (Hover)
Queremos que el texto de la lista aparezca al pasar el mouse. Es por eso que cambiaremos el tamaño del texto al pasar el mouse.
- Tamaño de texto de lista desordenada (desplazamiento): 18 px
espaciamiento
Continúe yendo a la configuración de espaciado del módulo y realice algunos cambios allí también.
- Margen (inferior): 50 px (tableta y teléfono)
- Margen (Derecho): -4vw (Escritorio), 0vw (Tableta y Teléfono)
Clone el módulo de texto 4 veces y coloque duplicados en las columnas restantes
Ahora que hemos terminado de modificar el primer módulo en la columna 1, clone el módulo cuatro veces. Luego coloque cada uno de los duplicados en las columnas restantes. Modificaremos cada uno de los duplicados para que coincidan con lo que queremos.
Cambiar el módulo de texto en la columna 2
editar contenido
Abra el duplicado en la columna 2 y edite el contenido.
Cambiar espaciado
A continuación, vaya a la configuración de espaciado y cambie los valores de margen personalizados.
- Margen (inferior): 50 px (tableta y teléfono)
- Margen (izquierdo y derecho): -2vw (escritorio), 0vw (tableta y teléfono)
- Margen derecho: -2vw (escritorio), 0vw (tableta y teléfono)
Cambiar el módulo de texto en la columna 3
editar contenido
También cambie el contenido del duplicado en la columna 3.
Cambiar espaciado
Con ajustes de espaciado en la pestaña de diseño.
- Margen (izquierda): 2,5 vw
- Margen (Derecho): 1,5 vw
Modifique el módulo de texto en la columna 4
editar contenido
Continúe abriendo la configuración del módulo de texto en la columna 4 y edite el contenido allí también.
Cambiar espaciado
A continuación, vaya a la pestaña Diseño y cambie los valores de margen personalizados en la configuración de Espaciado.
- Margen (izquierda): -6vw
- Margen (Derecho): 2vw
Modifique el módulo de texto en la columna 5
Contenido
Abran paso al último duplicado. Edite el contenido en el área de contenido.
Cambiar espaciado
Con ajustes de espaciado personalizados.
- Margen (izquierda): -7vw
- Margen (Derecho): 3vw
vista
Ahora que hemos seguido todos los pasos, echemos un vistazo final a cómo se ve en diferentes tamaños de pantalla.
Lea también: Divi : Cómo personalizar los íconos de carrito y búsqueda del módulo “Menú de ancho completo”
oficina
Móvil
¡¡¡Descarga DIVI ahora!!!
Conclusión
Sabemos lo importante que es garantizar que su Sitio web se destaca de otros sitios web. Con las opciones integradas de Divi, puedes ser tan creativo como quieras.
Este artículo es un ejemplo de cómo puede crear contenido flotante interactivo.
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.
...
