Cómo colocar información sobre herramientas flotantes en cualquier lugar de su página con Divi
Publicado: 2019-08-28Cada 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 flotantes en cualquier lugar de su página con Divi. Esta es una excelente manera de compartir información complementaria con sus visitantes sin incluirla directamente en la página de inmediato.
¡Hagámoslo!
Avance
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 de información sobre herramientas flotante GRATIS
Para poner sus manos en el diseño de información sobre herramientas flotante gratuito, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
Crear nueva página con 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 nueva . Continúe dando un título a su página, publicando la página y cambiando a Visual Builder.
Subir página de inicio de paseador de perros
Sube el diseño de la página de destino a tu página a continuación. Aunque usaremos este paquete de diseño para pasar por la técnica de información sobre herramientas flotantes, 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 flotantes
Agregar nueva fila al final de la sección
Estructura de la columna (decida cuántas descripciones emergentes necesita)
Una vez que haya subido 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 en la página, pero puede colocarlos en cualquier lugar usando las opciones de transformación de traducción. Busque la siguiente sección en su página y agregue una fila de tres columnas al final de la misma:
Ancho máximo de fila
Para asegurarnos de que los diseños de información sobre herramientas aparezcan en el lugar correcto, usaremos el mismo ancho máximo de fila que se usó para la fila que viene encima. 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
- Acolchado inferior: 0px
Desbordes
También nos aseguramos de que los desbordamientos de la fila sean visibles en la pestaña avanzada.
- Desbordamiento horizontal: visible
- Desbordamiento vertical: Visible
Agregar módulo de texto de información sobre herramientas a la columna 1
Agregar contenido al cuadro de contenido
Interrogación
¡Es hora de empezar a crear el primer diseño de información sobre herramientas! Usaremos un módulo de texto. Agregaremos un intervalo (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 la información sobre herramientas de forma individual. Comience agregando el intervalo y asignándole la clase 'signo de interrogación'.
Div. 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
Vaya 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 del texto H3.
- Fuente del título 3: Amatic SC
- Color del texto del encabezado 3: #ffffff
- Tamaño del texto del encabezado 3: 30px
Dimensionamiento
También estamos jugando con el ancho y la altura del módulo para crear el efecto de desplazamiento.
- Ancho: 300px
- Alto: 42px
Espaciado
Agregue un poco de relleno superior también.
- Acolchado superior: 10px
Visibilidad predeterminada
Ahora, en el estado predeterminado, queremos que todo lo que va debajo del icono de información sobre herramientas esté oculto. Es por eso que ocultaremos los desbordamientos en la pestaña avanzada.
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Visibilidad de desplazamiento
Sin embargo, al pasar el mouse, queremos que todo se muestre. 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 diseñado el módulo, todavía necesitamos diseñar el span y el 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 Divs 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:
<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 el módulo de texto de información sobre herramientas dos veces y colocarlo 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 la información sobre herramientas de cada duplicado.
Cambiar la posición de la información sobre herramientas (usando Transform Translate)
Descripción emergente n. ° 1
Por último, pero no menos importante, tendremos que 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 conversión de transformación:
- Derecha: -450px (escritorio), -2000px (tableta), -1900px (teléfono)
Descripción emergente n. ° 2
Vaya al Módulo de texto de información sobre herramientas en la segunda columna y cambie los valores de conversión de transformación de la siguiente manera:
- Derecha: -400px (escritorio), -1300px (tableta), -1250px (teléfono)
Descripción emergente n. ° 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 flotantes 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 casos 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 obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.