Uso de sombras de texto flotante para crear contenido interactivo con Divi

Hacer que su sitio web se destaque de otros sitios web similares puede ser difícil, pero una vez que lo logra, casi siempre vale la pena el esfuerzo y el pensamiento que se ha puesto en él. Para ayudarlo a inspirarse, le mostraremos cómo crear contenido interactivo al crear sitios web con Divi.

El ejemplo que recrearemos en este tutorial funcionará particularmente bien para cualquier página sobre la que esté trabajando. Podrá compartir hechos o información de la empresa al pasar el mouse utilizando las opciones de sombra de texto integradas de Divi. También nos aseguramos de que estos efectos de desplazamiento no se apliquen en tamaños de pantalla más pequeños para que la información y la experiencia móvil no se pierdan.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado que puede esperar.

Escritorio

Móvil

Nos aseguramos de que todas estas interacciones de desplazamiento no se apliquen en tamaños de pantalla más pequeños. Mientras usamos la misma sección y módulos, obtendremos el siguiente resultado simple en su lugar:

Acercarse

• El ejemplo que recrearemos es excelente para aproximadamente páginas, pero puede hacerlo funcionar con cualquier palabra de 5 o 6 caracteres (combínela con la estructura de la columna)
• Cada uno de los personajes estará dedicado a un módulo de texto individual
• Estamos usando una fila con una cantidad suficiente de columnas para conectar los diferentes caracteres de la palabra y hacer que parezcan creados en el mismo módulo.
• De forma predeterminada, haremos que el color del texto del módulo de texto coincida con el color de fondo de la sección.
• Para asegurarnos de que el personaje siga siendo legible, también aplicaremos una sombra de texto blanca al personaje.
• Una vez que coloques el cursor sobre el personaje, la sombra del texto desaparecerá y el color del texto cambiará, lo que te dará la sensación de que el texto se está llenando.
• Mientras se desplaza sobre un personaje, también se mostrará información adicional.
• En tamaños de pantalla más pequeños, los hechos y / o la información de la empresa estarán allí desde el principio.

¡Empecemos a recrear!

Suscríbete a nuestro canal de Youtube

Agregar nueva sección

Color de fondo

Abra una página nueva o existente y agréguele una sección regular. Abra la configuración de la sección y cambie el color de fondo.

• Color de fondo: # 03006d

Espaciado

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

• Relleno superior: 50px
• Acolchado inferior: 50px

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas.

Dimensionamiento

Luego, vaya a la configuración de tamaño y permita que la fila ocupe todo el ancho de la pantalla. Este es un paso importante porque nos permitirá determinar la distancia manualmente, utilizando unidades de visualización.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Espaciado

En el paso anterior, nos hemos deshecho de todas las configuraciones de tamaño predeterminadas que vienen con una nueva fila. Sin embargo, necesitamos agregar algo de relleno manualmente. Aquí, estamos usando unidades de ventana gráfica para asegurarnos de que el resultado sea el mismo en todos los tamaños de pantalla de escritorio.

• Acolchado izquierdo: 9vw (escritorio), 5vw (tableta y teléfono)
• Acolchado derecho: 5vw (tableta y teléfono)

Agregar módulo de texto a la columna 1

Agregar contenido

Una vez que haya terminado de modificar la configuración de la fila, puede continuar y agregar el primer módulo de texto a la columna 1. Agregue el primer carácter como texto de párrafo y el contenido en el que desea que aparezca flotando como texto de lista.

Configuración de texto predeterminada

Luego, vaya a la pestaña de diseño y modifique la configuración predeterminada del texto del párrafo. Asegúrese de utilizar el mismo color tanto para el texto como para el fondo de la sección.

• Peso de la fuente del texto: Ultra Bold
• Color del texto: # 03006d
• Tamaño del texto: 27vw (escritorio), 0vw (tableta y teléfono)
• Altura de la línea de texto: 1.1em
• Intensidad del desenfoque de la sombra del texto: 0.01em
• Color de la sombra del texto: #ffffff
• Orientación del texto: izquierda

Configuración de texto flotante

Para crear el agradable efecto de desplazamiento, necesitaremos modificar esta configuración de texto de párrafo al desplazar el cursor. Observe cómo ahora estamos usando un color de sombra de texto completamente transparente para hacerlo desaparecer.

• Color del texto: #ffffff
• Color de la sombra del texto: rgba (255,255,255,0)

Configuración predeterminada de texto de lista

Continúe yendo a la configuración de texto de la lista. Una parte importante de esta configuración es asegurarse de que el tamaño del texto en el escritorio sea '0px', pero agregar '18px' como tamaño de texto para tamaños de pantalla más pequeños. Esto asegurará que el texto de la lista se muestre en tamaños de pantalla más pequeños, pero no en el escritorio sin estar suspendido.

• Peso de fuente de lista desordenada: Ligero
• Color de texto de lista desordenado: #ffffff
• Tamaño de texto de lista desordenado: 0px (escritorio), 18px (tableta y teléfono)
• Texto de lista desordenado Color de sombra: rgba (255,255,255,0)
• Tipo de estilo de lista desordenada: Círculo
• Posición de estilo de lista desordenada: Exterior
• Sangría de elemento de lista desordenado: 0px

Configuración del texto de la lista flotante

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. Asegúrese de que el tamaño del texto que usa al pasar el mouse sea el mismo que el tamaño del texto que usa en tamaños de pantalla más pequeños. Esto ayudará a garantizar que no haya efecto de desplazamiento en tamaños de pantalla más pequeños.

• Tamaño de texto de lista desordenado: 18px

Espaciado

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)

Clonar el módulo de texto 4 veces y colocar duplicados en las columnas restantes

Ahora que hemos terminado de modificar el primer módulo en la columna 1, podemos seguir adelante y clonar el módulo cuatro veces y colocar cada uno de los duplicados en las columnas restantes. En los próximos pasos, modificaremos cada uno de los duplicados para que coincida con el nuevo personaje.

Cambiar módulo de texto en la columna 2

Cambiar contenido

Abra el duplicado en la columna 2 y cambie el contenido.

Cambiar espaciado

Luego, vaya a la configuración de espaciado y cambie los valores de margen personalizados.

• Margen inferior: 50 px (tableta y teléfono)
• Margen izquierdo: -2vw (escritorio), 0vw (tableta y teléfono)
• Margen derecho: -2vw (escritorio), 0vw (tableta y teléfono)

Cambiar módulo de texto en la columna 3

Cambiar contenido

Cambie también el contenido del duplicado en la columna 3.

Cambiar espaciado

Junto con la configuración de espaciado en la pestaña de diseño.

• Margen inferior: 50 px (tableta y teléfono)
• Margen izquierdo: -5.5vw (escritorio), 0vw (tableta y teléfono)
• Margen derecho: 1.5vw (escritorio), 0vw (tableta y teléfono)

Cambiar módulo de texto en la columna 4

Cambiar contenido

Continúe abriendo el Módulo de texto en la columna 4 y cambie el contenido aquí también.

Cambiar espaciado

Luego vaya a la pestaña de diseño y cambie los valores de margen personalizados en la configuración de espaciado.

• Margen inferior: 50 px
• Margen izquierdo: -6vw (escritorio), 0vw (tableta y teléfono)
• Margen derecho: 2vw (escritorio), 0vw (tableta y teléfono)

Cambiar módulo de texto en la columna 5

Cambiar contenido

Vamos al último duplicado. Cambie el contenido en el cuadro de contenido.

Cambiar espaciado

Junto con la configuración de espaciado personalizado.

• Margen inferior: 50 px
• Margen izquierdo: -7vw (escritorio), 0vw (tableta y teléfono)
• Margen derecho: 3vw (escritorio), 0vw (tableta y teléfono)

Avance

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

Escritorio

Móvil

Pensamientos finales

Sabemos lo importante que es hacer que su sitio web se destaque de otros sitios web. Con las opciones integradas de Divi, puede ser tan creativo como desee. Esta publicación es un ejemplo de cómo puede crear contenido interactivo al pasar el mouse mientras se asegura de que todo sea sencillo en tamaños de pantalla más pequeños. Puede usar el ejemplo que hemos recreado para cualquier página sobre la que esté trabajando actualmente. Es una excelente manera de compartir algunos hechos e información adicional sobre su empresa mientras interactúa con sus visitantes. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!