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 Divi Builder para crear impresionantes diseños emergentes sin ningún CSS personalizado adicional.
En este tutorial, le mostraremos lo fácil que es crear descripciones de servicios emergentes en su sitio web Divi. El truco es colocar los 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!
Descarga 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 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!
Suscríbete a nuestro canal de Youtube
Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json a Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, necesitará tener lo siguiente:
- El tema Divi instalado y activo
- Una nueva página creada para construir desde cero en el front-end (constructor visual)
- Imágenes que se utilizarán para contenido simulado. Usaremos un par de nuestro paquete de diseño de Investment Company para este tutorial.
Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.
Crear las descripciones de servicios emergentes en Hover with Divi
Crear la sección y la fila
Primero, cree una nueva sección regular con una fila de una columna.
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 del paquete de diseño de la compañía de inversión . Pero si no quiere usar ese, simplemente puede agregar un color de fondo de #161c29.
- Ancho del canalón: 1
- Ancho: 100%
- Altura: 320px (escritorio), automático (tableta y teléfono)
- Relleno: 0px arriba, 0px abajo
Agregar un módulo de Blurb
A continuación, agregue un módulo de publicidad a su fila.
Y actualice la configuración del módulo de publicidad de la siguiente manera:
- Título: Servicio
- Icono: ver captura de pantalla
Elimine también el contenido del cuerpo predeterminado.
- Imagen de fondo: agregue una imagen de aproximadamente 320 px por 215 px
- Tamaño de la imagen de fondo: Ajuste
- Posición de la imagen de fondo: centro superior
- Gradiente de fondo Color izquierdo: rgba(31,72,192,0.61)
- Degradado de fondo Color derecho: #161c29
- Posición inicial: 34%
- Posición final: 71%
- Coloque el degradado sobre la imagen de fondo: SÍ
- 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: 38px
- título Espaciado entre letras: 4px
- Ancho máximo: 320px
- Alineación del módulo: centro
- Altura: 320px
- Relleno: 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 publicidad se mantenga por encima de los otros módulos que eventualmente se apilarán detrás de él.
Agregar un módulo de llamada a la 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.
Esta será la primera de dos áreas de contenido que eventualmente aparecerán al pasar el mouse sobre ellas.
Ahora debemos 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: 22px
- Ancho: 320px
- 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: 40 px arriba, 40 px a la izquierda, 40 px a la derecha
Duplique el módulo de llamada a la acción y alinéelo a la derecha
Para crear el segundo bloque de contenido que aparecerá a la derecha de la publicidad, 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.
Así es como debería verse el diseño hasta ahora.
El elemento final que debemos 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.
Abra la configuración del módulo de botones y luego cambie el modo de vista de escritorio para que pueda editar el botón visualmente.
Agregue el texto del botón «Más información».
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: 10px
- Espaciado entre letras de botones: 4px
- Fuente del botón: Archivo
Ahora todo lo que tenemos que hacer es posicionar nuestro botón.
- Margen (escritorio): -25px superior
- Margen (tableta y teléfono): 25 px arriba, 50 px abajo
- Índice Z: 2
El valor de índice z de 2 asegurará que el botón permanezca sobre el módulo de publicidad (que tiene un índice z de 1).
Creando el efecto emergente emergente
El principal efecto de desplazamiento que necesitamos para lograr las descripciones de servicios emergentes implica cambiar el ancho de la fila al pasar el mouse. Para hacer esto, necesitaremos darle a nuestra fila un ancho estrecho 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 de llamada a la acción ocultos.
Abra la configuración de la fila y actualice el ancho de la siguiente manera:
- Ancho máximo (escritorio): 320px
- Ancho máximo (desplazamiento): 1080 px
- Ancho máximo (tableta y teléfono) 1080px
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
Resultado final
Consulte las descripciones emergentes de los servicios hasta el momento.
Y aquí está en la pantalla de la tableta y el teléfono.
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 en su lugar. Aquí hay algunas sugerencias que puede probar para sus descripciones de 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 o la imagen de fondo de la fila para obtener un diseño emergente único.
Vaya a la configuración de la fila y actualice lo siguiente:
- Color de fondo: #161c29
Entonces mira el resultado.
Usando solo dos módulos
Si desea una ventana emergente más compacta con solo dos módulos, puede eliminar uno de los módulos de llamada a la acción y luego alinear el módulo de publicidad a la izquierda para que los dos se vuelvan visibles al pasar el mouse.
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 propaganda.
Después de eso, actualice el módulo de publicidad con una alineación de módulo izquierda.
- Alineación del módulo: Izquierda (escritorio), Centro (tableta)
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 (desplazamiento): 700 px
- Ancho máximo (tableta): 700px
Aquí esta el resultado final.
Y aquí está sobre un fondo blanco.
Pensamientos finales
Crear descripciones de servicios emergentes al pasar el mouse es una forma única de involucrar a los visitantes con su contenido. Esta funcionalidad funciona de manera muy similar a una información sobre herramientas 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 escuchar de usted en los comentarios.
¡Salud!