Creación de descripciones de servicios emergentes en Hover con Divi


La creación de descripciones de servicios emergentes al pasar el mouse puede ser una forma efectiva de informar e involucrar a los usuarios con información adicional. Al igual que una información sobre herramientas, estas descripciones emergentes revelarán más información sobre su servicio al pasar el mouse. Pero con Divi, tiene el conjunto completo de herramientas de diseño disponibles en el generador de Divi para crear impresionantes diseños emergentes sin ningún CSS adicional personalizado.

En este tutorial, le mostraremos lo fácil que es crear descripciones de servicios emergentes en su sitio web Divi. El truco consiste en colocar sus módulos de tal manera que se deslicen uno detrás del otro y salgan cada vez que ajuste el ancho de la fila al pasar el mouse.

¡Empecemos!

Vistazo

descripciones del servicio divi pop out

descripciones del servicio divi pop out

descripciones del servicio divi pop out

descripciones del servicio divi pop out

Descargar el diseño GRATIS

Para poner sus manos en los diseños de este tutorial, 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.

(incrustar) https://www.youtube.com/watch?v=V3aDW8WO0Ag (/ incrustar)

Suscríbase a nuestro canal de Youtube

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json al Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá tener lo siguiente:

  1. El tema Divi instalado y activo
  2. Una nueva página creada para construir desde cero en el front-end (generador visual)
  3. Imágenes para ser utilizadas como contenido simulado. Usaremos una pareja de afuera Paquete de diseño de la compañía de inversión para este tutorial

Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.

Creación de las descripciones de servicio emergentes al pasar el mouse por Divi

Crea la sección y la fila

Primero, cree una nueva sección regular con una fila de una columna.

descripciones del servicio divi pop out

Antes de agregar cualquier módulo, actualice la configuración de la fila de la siguiente manera:

Agregue una imagen de fondo oscuro o un color de fondo oscuro. Estoy usando una imagen de fondo abstracta de Paquete de diseño de la compañía de inversión. Pero si no desea utilizarlo, puede agregar un color de fondo de # 161c29.

descripciones del servicio divi pop out

  • Ancho de canal: 1
  • Ancho: 100%
  • Altura: 320 px (escritorio), automático (tableta y teléfono)
  • Acolchado: 0px arriba, 0px abajo

descripciones del servicio divi pop out

Agregar un módulo de publicidad

A continuación, agregue un módulo de propaganda a su fila.

descripciones del servicio divi pop out

Y actualice la configuración del módulo de propaganda de la siguiente manera:

  • Título: Servicio
  • Icono: ver captura de pantalla

Elimine también el contenido del cuerpo predeterminado.

descripciones del servicio divi pop out

  • Imagen de fondo: agregue una imagen de aproximadamente 320 px por 215 px
  • Tamaño de imagen de fondo: ajuste
  • Posición de la imagen de fondo: centro superior

descripciones del servicio divi pop out

  • Gradiente de fondo Color izquierdo: rgba (31,72,192,0.61)
  • Gradiente de fondo Color correcto: # 161c29
  • Posición de inicio: 34%
  • Posición final: 71%
  • Coloque el gradiente sobre la imagen de fondo: SÍ

descripciones del servicio divi pop out

  • Color del icono: #ffffff
  • Alineación de texto: centro
  • Fuente del título: Archivo
  • Color del texto del título: #ffffff
  • Tamaño del texto del título: 38 px
  • espacio entre letras de título: 4px
  • Ancho Máx .: 320px
  • Alineación del módulo: centro
  • Altura: 320 px

descripciones del servicio divi pop out

  • Acolchado: 68px arriba
  • Esquinas redondeadas: 10px
  • Índice Z: 1

Agregar el valor del índice z 1 es crucial para asegurarse de que el módulo de difusión permanezca por encima de los otros módulos que eventualmente se apilarán detrás de él.

descripciones del servicio divi pop out

Agregar una llamada al módulo de acción

A continuación, debemos agregar un módulo de llamada a la acción que se colocará a la izquierda del módulo de publicidad.

descripciones del servicio divi pop out

Esta será nuestra primera de las dos áreas de contenido que eventualmente aparecerán al pasar el mouse por encima.

Ahora necesitamos eliminar el color de fondo predeterminado y actualizar la configuración de diseño de la siguiente manera:

  • Alineación de texto: izquierda
  • Fuente del título: Archivo
  • Tamaño del texto del título: 22 px
  • Ancho: 320 px
  • Alineación del módulo: izquierda (escritorio), centro (tableta y teléfono)
  • Altura: 320 px (escritorio), automático (tableta y teléfono)
  • Margen: -320px (escritorio), 0px (tableta y teléfono)
  • Relleno: 40px arriba, 40px izquierda, 40px derecha

descripciones del servicio divi pop out

Duplique el módulo de Llamado a la acción y alinéelo a la derecha

Para crear el segundo bloque de contenido que aparecerá a la derecha de la propaganda, podemos implementar el modo de vista de estructura alámbrica y duplicar el módulo de llamada a la acción. Luego abra la configuración del duplicado y actualice la alineación del módulo a la derecha.

descripciones del servicio divi pop out

Así es como debería verse el diseño hasta ahora.

descripciones del servicio divi pop out

Crear el botón

El elemento final que necesitamos agregar a nuestro diseño es el botón. Puede agregar un botón dentro de cualquiera de los módulos de llamada a la acción si lo desea. Pero para este diseño, pensé que sería mejor agregar un botón que permanezca visible en la parte inferior de nuestra fila.

Para crear el botón, implemente el módulo de vista de estructura alámbrica y agregue un módulo de botón directamente debajo del segundo módulo de llamada a la acción para que sea el último módulo en la fila / columna.

descripciones del servicio divi pop out

Abra la configuración del módulo de botones y luego cambie el modo de vista de escritorio para editar el botón visualmente.

Agregue el texto del botón "Más información".

descripciones del servicio divi pop out

Luego actualice el estilo del botón de la siguiente manera:

  • Alineación de botones: centro
  • Color del texto del botón: #ffffff
  • Color de fondo del botón: # 1f48c0
  • Ancho del borde del botón: 0px
  • Radio del borde del botón: 10 px
  • Espacio entre letras de botones: 4px
  • Fuente del botón: Archivo

descripciones del servicio divi pop out

Ahora todo lo que tenemos que hacer es colocar nuestro botón.

  • Margen (escritorio): -25px arriba
  • Margen (tableta y teléfono): 25px arriba, 50px abajo
  • Índice Z: 2

El valor del índice z de 2 asegurará que el botón permanezca por encima del módulo de publicidad (que tiene un índice z de 1).

descripciones del servicio divi pop out

Crear el efecto emergente de desplazamiento

El principal efecto de desplazamiento que necesitamos para realizar las descripciones del servicio emergente implica cambiar el ancho de la fila al pasar el cursor. Para hacer esto, necesitaremos darle a nuestra fila un ancho angosto por defecto. Esto hará que los módulos se apilen uno detrás del otro y permanezcan ocultos detrás del módulo publicitario. Luego expandiremos el ancho de la fila al pasar el mouse para exponer los dos módulos ocultos de llamada a la acción.

Abra la configuración de la fila y actualice el ancho de la siguiente manera:

  • Ancho máximo (escritorio): 320 px
  • Ancho máximo (desplazamiento): 1080px
  • Ancho máximo (tableta y teléfono) 1080px

descripciones del servicio divi pop out

descripciones del servicio divi pop out

Luego, para un toque final, agregue un radio de borde a la fila y actualice la opción de desbordamiento de visibilidad a visible para que el botón no se oculte.

  • Esquinas redondeadas: 10px
  • Desbordamiento horizontal: visible
  • Desbordamiento vertical: visible

descripciones del servicio divi pop out

Resultado final

Consulte las descripciones del servicio emergente hasta el momento.

descripciones del servicio divi pop out

Y aquí está en la pantalla de la tableta y el teléfono.

descripciones del servicio divi pop out

descripciones del servicio divi pop out

Más opciones de diseño para probar

Siempre es divertido experimentar con más opciones de diseño ahora que tenemos la configuración básica. Aquí hay algunas sugerencias que puede probar para las descripciones de sus servicios emergentes.

Agregar un color de fondo de sección

Si lo desea, puede agregar un color de fondo a la sección que coincida con el color / imagen de fondo de la fila para un diseño emergente único.

Vaya a la configuración de fila y actualice lo siguiente:

  • Color de fondo: # 161c29

descripciones del servicio divi pop out

Entonces mira el resultado.

descripciones del servicio divi pop out

Usando solo dos módulos

Si desea una ventana emergente más compacta utilizando solo dos módulos, puede eliminar uno de los módulos de llamada a la acción y luego alinear el módulo de propagación a la izquierda para que los dos se vuelvan visibles al pasar el mouse sobre ellos.

Para hacer esto, implemente el modo de vista de estructura alámbrica. Luego, elimine el primer módulo de llamada a la acción directamente debajo del módulo de publicidad.

descripciones del servicio divi pop out

Después de eso, actualice el módulo de difusión con una alineación izquierda del módulo.

  • Alineación del módulo: izquierda (escritorio), centro (tableta)

descripciones del servicio divi pop out

Finalmente, disminuya el ancho máximo de la fila al pasar el mouse para hacerlo más compacto. Abra la configuración de la fila y actualice lo siguiente:

  • Ancho máximo (flotar): 700 px
  • Ancho máximo (tableta): 700px

descripciones del servicio divi pop out

Aquí esta el resultado final.

descripciones del servicio divi pop out

Y aquí está sobre un fondo blanco.

descripciones del servicio divi pop out

Pensamientos finales

Crear descripciones de servicios emergentes al pasar el mouse es una forma única de atraer a los visitantes con su contenido. Esta funcionalidad funciona de manera muy parecida a una sugerencia de información sofisticada e informativa repleta de todas las capacidades de diseño de Divi. Y es bastante fácil de hacer. Una vez que tenga los módulos dimensionados y posicionados, todo lo que necesita hacer es ajustar el ancho de la fila al pasar el mouse. Siéntase libre de experimentar con diferentes módulos y contenido para aún más aplicaciones. En todo caso, espero que esto te dé un poco más de inspiración para hacer más con Divi.

Espero tener noticias suyas en los comentarios.

¡Salud!