Cómo colocar información sobre herramientas de desplazamiento en cualquier lugar de su página con Divi


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 de Divi en curso, le mostraremos cómo crear y colocar información sobre herramientas en cualquier lugar de su página con Divi. Esta es una excelente manera de compartir información secundaria 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

sugerencias emergentes

Móvil

sugerencias emergentes

Descargar The Hover Tooltips Layout GRATIS

Para poner sus manos en el diseño de información sobre herramientas de desplazamiento libre, 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

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 nuevo. Continúe dando un título a su página, publicando la página y cambiando a Visual Builder.

sugerencias emergentes

Subir la página de inicio de Dog Walker

Cargue el diseño de la página de destino a su página siguiente. Aunque usaremos este paquete de diseño para pasar por la técnica de sugerencias de desplazamiento, puede hacer que este enfoque se aplique a cualquier tipo de diseño en el que esté trabajando.

sugerencias emergentes

Crear diseño de información sobre herramientas de desplazamiento

Agregar nueva fila a la parte inferior de la sección

Estructura de columna (decida cuántas informaciones 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 de desplazamiento. Los agregaremos a un lugar específico de la página, pero puede colocarlos en cualquier lugar utilizando las opciones de traducción de transformación. Busque la siguiente sección en su página y agregue una fila de tres columnas en la parte inferior:

sugerencias emergentes

Ancho máximo de fila

Para asegurarnos de que los diseños de la información sobre herramientas aparezcan en el lugar correcto, vamos a utilizar el mismo ancho máximo de fila que el utilizado 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áx .: 1280px

sugerencias emergentes

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

sugerencias emergentes

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: Visibile

sugerencias emergentes

Agregar módulo de texto de información sobre herramientas a la columna 1

Agregar contenido al cuadro de contenido

Signo de interrogación Span

¡Es hora de comenzar a crear el primer diseño de información sobre herramientas! Utilizaremos un módulo de texto. Agregaremos un espacio (para el icono de información sobre herramientas) y un div (para el contenido de información sobre herramientas) dentro del cuadro de contenido. Esto nos dará más libertad para diseñar el ícono de información sobre herramientas y el contenido de información sobre herramientas de forma individual. Comience agregando el lapso y asignándole la clase "signo de interrogación".

sugerencias emergentes

Tooltip Div

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.

sugerencias emergentes

Configuraciones de texto

Pase a la pestaña de diseño y cambie la configuración de texto en consecuencia:

  • Fuente de texto: Open Sans
  • Color del texto: #ffffff

sugerencias emergentes

Configuraciones de texto H3

Modifique la configuración de texto H3 también.

  • Título 3 Fuente: Amatic SC
  • Título 3 Color del texto: #ffffff
  • Encabezado 3 Tamaño del texto: 30px

sugerencias emergentes

Dimensionamiento

También estamos jugando con el ancho y la altura del módulo para crear el efecto de desplazamiento.

  • Ancho: 300 px
  • Altura: 42 px

sugerencias emergentes

Espaciado

Agregue un poco de relleno superior también.

  • Relleno superior: 10px

sugerencias emergentes

Visibilidad predeterminada

Ahora, en el estado predeterminado, queremos que todo lo que esté 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

sugerencias emergentes

Visibilidad de desplazamiento

Sin embargo, al pasar el mouse, queremos que todo aparezca. Lo haremos haciendo visibles los desbordamientos al pasar el mouse sobre ellos.

  • Desbordamiento horizontal: visible
  • Desbordamiento vertical: visible

sugerencias emergentes

Agregar módulo de código debajo del módulo de texto

Ahora que hemos diseñado el módulo, aún necesitamos diseñar el span y el div dentro del cuadro de contenido utilizando 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.

sugerencias emergentes

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:

sugerencias emergentes

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.

sugerencias emergentes

Cambiar contenido de información sobre herramientas

Asegúrese de cambiar el contenido de información sobre herramientas de cada duplicado.

sugerencias emergentes

Cambiar la posición de la información sobre herramientas (usando Transformar traducción)

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 de traducción:

  • Derecha: -450 px (escritorio), -2000 px (tableta), -1900 px (teléfono)

sugerencias emergentes

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: -400 px (Escritorio), -1300 px (Tableta), -1250 px (Teléfono)

sugerencias emergentes

Información sobre herramientas n. ° 3

¡Haga lo mismo para el Módulo de texto de información sobre herramientas en la columna 3 y ya está!

  • Derecha: -500px (escritorio), -600px (tableta y teléfono)

sugerencias emergentes

Avance

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

Escritorio

sugerencias emergentes

Móvil

sugerencias emergentes

Pensamientos finales

En esta publicación, le mostramos cómo crear y colocar información emergente sobre herramientas 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 regalos Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube así que siempre serás una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.