Creación de descripciones de servicios emergentes al pasar el mouse con Divi
Publicado: 2019-07-20La 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 constructor Divi 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 consiste en 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!
Vistazo
Descarga el diseño GRATIS
Para poner sus manos sobre 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 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!
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 al Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, necesitará 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á un lienzo en blanco para comenzar a diseñar en Divi.
Creación de descripciones de servicios emergentes en Hover con Divi
Crea la sección y la fila
Primero, cree una nueva sección regular con una fila de una columna.
Antes de agregar módulos, actualice la configuración de la fila de la siguiente manera:
Agregue una imagen de fondo oscura 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, puede simplemente agregar un color de fondo de # 161c29.
- Ancho de la canaleta: 1
- Ancho: 100%
- Alto: 320px (escritorio), automático (tableta y teléfono) \
- Relleno: 0px arriba, 0px abajo
Agregar un módulo Blurb
A continuación, agregue un módulo de propaganda a su fila.
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.
- Imagen de fondo: agregue una imagen de aproximadamente 320 px por 215 px
- Tamaño de la imagen de fondo: Ajustar
- Posición de la imagen de fondo: Centro superior
- Color de degradado de fondo a la izquierda: rgba (31,72,192,0.61)
- Gradiente de fondo Color derecho: # 161c29
- Posición inicial: 34%
- Posición final: 71%
- Colocar 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
- Espacio entre letras del título: 4px
- Ancho máximo: 320px
- Alineación del módulo: centro
- Alto: 320px
- Acolchado: 68px superior
- Esquinas redondeadas: 10px
- Índice Z: 1
Agregar el valor del índice z 1 es crucial para asegurarse de que el módulo de propaganda se mantenga por encima de los otros módulos que eventualmente se apilarán detrás de él.
Agregar un módulo de llamado 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 propaganda.
Esta será la primera de las dos áreas de contenido que eventualmente aparecerán al pasar el mouse.
Ahora debemos eliminar el color de fondo predeterminado y actualizar la configuración del 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: 40px arriba, 40px a la izquierda, 40px 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 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.
Así es como debería verse el diseño hasta ahora.
Creando el Botón
El último elemento 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 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
- Espacio entre letras del botón: 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): 25px superior, 50px inferior
- Índice Z: 2
El valor del índice z de 2 asegurará que el botón permanezca por encima del módulo de propaganda (que tiene un índice az de 1).
Creando el efecto de desplazamiento emergente
El efecto de desplazamiento principal que necesitamos para lograr las descripciones del servicio emergente implica cambiar el ancho de la fila al desplazar el cursor. 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 de propaganda. 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): 1080px
- 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 de los servicios emergentes hasta ahora.
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 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 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 propaganda 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 propaganda con una alineación del módulo izquierdo.
- Alineación del módulo: izquierda (escritorio), centro (tableta)
Finalmente, disminuya el ancho máximo de la fila al pasar el mouse para hacerla más compacta. Abra la configuración de la fila y actualice lo siguiente:
- Ancho máximo (desplazamiento): 700px
- 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 sugerencia de herramienta elegante e informativa con todas las capacidades de diseño de Divi. Y es bastante fácil de hacer. Una vez que tenga los módulos dimensionados y colocados, 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 tuyas en los comentarios.
¡Salud!