Cada semana, le proporcionamos paquetes de diseño Divi nuevos y gratuitos que puede usar para su próximo proyecto. Para uno de los paquetes de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel.
Esta semana, como parte de nuestra iniciativa de diseño Divi en curso , le mostraremos cómo crear y colocar información sobre herramientas flotante en cualquier lugar de su página con Divi. Esta es una excelente manera de compartir información adicional con sus visitantes sin incluirla directamente en la página de inmediato.
¡Hagámoslo!
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descargue el diseño Hover Tooltips GRATIS
Para poner sus manos en el diseño gratuito de información sobre herramientas, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Crear nueva página usando el diseño de la página de inicio de Dog Walker
Agregar nueva página
Lo primero que deberá hacer es crear una nueva página yendo a Páginas > Agregar nuevo . Continúe dando un título a su página, publicando la página y cambiando a Visual Builder.
Cargar la página de destino del paseador de perros
Cargue el diseño de la página de destino en su página a continuación. Aunque usaremos este paquete de diseño para pasar por la técnica de información sobre herramientas flotante, puede hacer que este enfoque se aplique a cualquier tipo de diseño en el que esté trabajando.
Crear diseño de información sobre herramientas flotante
Agregar nueva fila al final de la sección
Estructura de la columna (decida cuánta información sobre herramientas necesita)
Una vez que haya cargado el diseño de la página de destino, es hora de comenzar a crear la información sobre herramientas flotante. Los agregaremos a un lugar específico de la página, pero puede colocarlos en cualquier lugar usando las opciones de transformación y traducción. Ubique la siguiente sección en su página y agregue una fila de tres columnas al final:
Ancho máximo de fila
Para asegurarnos de que los diseños de información sobre herramientas aparezcan en el lugar correcto, vamos a usar el mismo ancho máximo de fila que se usó para la fila que se encuentra arriba. Vaya a la configuración de tamaño de la fila y ajuste el ancho máximo en consecuencia:
- Ancho máximo: 1280px
Espaciado
Para reducir el espacio que ocupa el contenedor de filas, vamos a eliminar el relleno superior e inferior predeterminado en la configuración de espaciado.
- Relleno superior: 0px
- Relleno inferior: 0px
desbordamientos
También nos estamos asegurando de que los desbordamientos de la fila estén visibles en la pestaña avanzada.
- Desbordamiento horizontal: visible
- Desbordamiento vertical: visible
Agregue el módulo de texto de información sobre herramientas a la columna 1
Agregar contenido al cuadro de contenido
Rango de signo de interrogación
¡Es hora de comenzar a crear el primer diseño de información sobre herramientas! Usaremos un módulo de texto. Agregaremos un lapso (para el icono de información sobre herramientas) y un div (para el contenido de la información sobre herramientas) dentro del cuadro de contenido. Esto nos dará más libertad para diseñar el icono de información sobre herramientas flotante y el contenido de información sobre herramientas de forma individual. Comience agregando el lapso y asignándole la clase ‘signo de interrogación’.
División de información sobre herramientas
Continúe agregando un div al cuadro de contenido con la clase ‘tooltip-content’. Agregue el contenido de información sobre herramientas de su elección en este div.
Configuración de texto
Pase a la pestaña de diseño y cambie la configuración del texto en consecuencia:
- Fuente de texto: Open Sans
- Color del texto: #ffffff
Configuración de texto H3
Modifique también la configuración de texto H3.
- Título 3 Fuente: Amatic SC
- Título 3 Color del texto: #ffffff
- Título 3 Tamaño del texto: 30px
Dimensionamiento
También estamos jugando con el ancho y la altura del módulo para crear el efecto de desplazamiento.
- Ancho: 300px
- Altura: 42px
Espaciado
Agregue un poco de relleno superior también.
- Relleno superior: 10px
Visibilidad predeterminada
Ahora, en el estado predeterminado, queremos que se oculte todo lo que se encuentra debajo del ícono de información sobre herramientas. Es por eso que ocultaremos los desbordamientos en la pestaña avanzada.
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Visibilidad de desplazamiento
Al pasar el mouse, sin embargo, queremos que todo aparezca. Lo haremos haciendo que los desbordamientos sean visibles al pasar el mouse.
- Desbordamiento horizontal: visible
- Desbordamiento vertical: visible
Agregar módulo de código debajo del módulo de texto
Ahora que hemos aplicado estilo al módulo, todavía tenemos que aplicar estilo al intervalo y div dentro del cuadro de contenido usando las clases CSS que le hemos asignado. Agregue un módulo de código justo debajo del módulo de texto de información sobre herramientas.
Agregar código CSS a divisiones de estilo en el módulo de texto
Agregue las siguientes líneas de código CSS para diseñar las diferentes partes del módulo de texto:
|
01
02
03
04
05
06
07
08
09
10
11
12
|
<style>.question-mark {background-color: #000;padding: 10px 16px 10px 16px;border-radius: 500px;}.tooltip-content {background-color: #ee6a5b;padding: 20px;border-radius: 5px;}</style> |
Clonar módulo de texto de información sobre herramientas dos veces y colocar en las columnas restantes
Una vez que haya completado la primera columna, puede clonar el módulo de texto de información sobre herramientas dos veces y colocar los duplicados en las dos columnas restantes de la fila.
Cambiar el contenido de la información sobre herramientas
Asegúrese de cambiar el contenido de información sobre herramientas de cada duplicado.
Cambiar la posición de la información sobre herramientas (usando Transform Translate)
Información sobre herramientas n.º 1
Por último, pero no menos importante, necesitaremos reposicionar la información sobre herramientas donde queramos en la página. Para lograr exactamente el mismo resultado que se mostró en la vista previa de esta publicación, abra el primer módulo de texto de información sobre herramientas y aplique los siguientes valores de transformación y traducción:
- Derecha: -450px (Escritorio), -2000px (Tableta), -1900px (Teléfono)
Información sobre herramientas n.º 2
Pase al módulo de texto de información sobre herramientas en la segunda columna y cambie los valores de traducción de transformación de la siguiente manera:
- Derecha: -400px (Escritorio), -1300px (Tableta), -1250px (Teléfono)
Información sobre herramientas #3
Haga lo mismo para el módulo de texto de información sobre herramientas en la columna 3 y ¡listo!
- Derecha: -500px (Escritorio), -600px (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
En esta publicación, le mostramos cómo crear y colocar información sobre herramientas flotante en cualquier lugar de su página sin la necesidad de un complemento adicional. Esta es una excelente manera de agregar información adicional sin incluirla directamente en su página. Este tutorial de caso de uso es parte de nuestra iniciativa de diseño Divi en curso, donde tratamos de poner algo extra en su caja de herramientas de diseño cada semana. Si tiene alguna pregunta, ¡asegúrese de dejar una pregunta en la sección de comentarios a continuación!
Si está ansioso por aprender más sobre Divi y obtener más regalos de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.