Agregar información sobre herramientas para etiquetar una imagen de fondo es una forma creativa de atraer a los visitantes con información valiosa sobre su producto o servicio. La idea básica es colocar iconos (o texto) en ubicaciones específicas en la imagen (como un mapa de Google con puntos). Y si aprovecha los efectos de desplazamiento de Divi, puede revelar texto adicional al pasar el cursor sobre un icono para crear información sobre herramientas atractiva.
En este tutorial, le mostraré cómo etiquetar una imagen de fondo con notas publicitarias que servirán como información sobre herramientas informativas sobre su producto. Para hacer esto, usaré la página de inicio del gimnasio Fitness para etiquetar una imagen de fondo con información sobre el estado físico de calidad.
Empecemos.
Aquí hay un adelanto del diseño que construiremos en este tutorial.
Que necesitas
Para este tutorial, necesitará lo siguiente:
- El tema Divi
- La página de inicio del Fitness Gym del paquete de diseño Fitness Gym (disponible en Divi Builder)
- Una imagen para usar como imagen de fondo que tenga exactamente 320 px por 507 px. Siéntase libre de arrastrar este a su escritorio y usarlo para este tutorial.
Preparación del diseño prefabricado
Para comenzar, cree una nueva página, agregue un título y luego implemente Visual Builder. Luego seleccione «Elegir un diseño prefabricado». En la ventana emergente Cargar desde la biblioteca, seleccione el diseño de la página de destino del gimnasio y haga clic en «Usar este diseño».
Una vez que el diseño se carga en la página, desplácese hacia abajo hasta la cuarta sección con la fila de dos columnas que tiene el título «Programas destacados» en la columna derecha. Vamos a agregar nuestra imagen de fondo con información sobre herramientas en la columna izquierda de esta fila.
Utilice el editor en línea para cambiar el texto del título en la columna de la derecha a «Smart Fitness».
Adición de la imagen de fondo y personalización de la configuración de la fila
Con este diseño, el tamaño y el espacio son cruciales y deberán ser precisos. Y todo comienza con el tamaño de nuestra imagen de fondo. Como se mencionó antes, la imagen que usamos para el fondo debe ser de 320 px por 507 px. Dado que un ancho de 320 px es un buen punto de partida para dispositivos móviles, esto nos permitirá hacer que el diseño sea compatible con dispositivos móviles sin tener que cambiar el tamaño de nuestra imagen.
Abra la configuración de la fila y agregue la imagen de fondo a la columna 1. Luego actualice lo siguiente:
Columna 1 Tamaño de la imagen de fondo: Tamaño real
Columna 1 Posición de la imagen de fondo: Centro izquierda
Columna 1 Imagen de fondo Repetir: No repetir
A continuación, debemos agregar un ancho personalizado a la fila y eliminar el espacio superior e inferior.
Ancho personalizado: 700 px
Relleno personalizado: 0 px arriba, 0 px abajo
Si establece el ancho en 700 px, se asegurará de que la fila no se reduzca en tamaños de pantalla más pequeños antes del punto de interrupción de la tableta.
En este punto, creo que es una buena idea seguir adelante y establecer una altura específica para la columna 1 igual a la altura de la imagen de fondo. De esta manera sabemos que la imagen permanecerá visible si el contenido de la columna no expone la imagen completa. Para hacer esto, vaya a la pestaña avanzada y agregue el siguiente CSS personalizado en el elemento principal de la columna 1:
|
01
|
height: 507px; |
Ahora la altura de la columna es igual a la altura de tu imagen y no dependerá del contenido (o módulos) que agreguemos a la fila.
Adición de etiquetas de información sobre herramientas sobre la imagen de fondo utilizando Blurbs
Con nuestra imagen de fondo en su lugar, podemos comenzar a agregar nuestras notas publicitarias que se colocarán y diseñarán para que funcionen como información sobre herramientas. Continúe y agregue un módulo de publicidad a la columna 1 y actualice la siguiente configuración de publicidad:
Título: “Enfoque”
Contenido: “¡La clave del éxito!”
Icono de uso: Sí
Icono: ver captura de pantalla
Es importante mantener el título y el contenido en solo unas pocas palabras porque queremos poder incluir toda la propaganda dentro de la imagen de fondo.
A continuación, actualizará la configuración de diseño. Este es un diseño más avanzado de una propaganda, por lo que hay muchas opciones para cambiar junto con algunos efectos de desplazamiento que revelarán el contenido de la propaganda al pasar el mouse. Actualice la siguiente configuración de diseño de publicidad:
Color del icono: #edf000
Icono del círculo: SÍ
Color del círculo: rgba(0,0,0,0)
Mostrar borde del círculo: SÍ
Color del borde del círculo (predeterminado): rgba(0,0,0,0)
Color del borde del círculo (pasar el cursor) : #edf000
Colocación de imagen/icono: Izquierda
Usar tamaño de fuente de icono: SÍ
Tamaño de fuente de icono: 40px
Continúe ajustando la configuración de diseño de la siguiente manera:
Peso de la fuente del título: Negrita
Color del texto del título (predeterminado): rgba(0,0,0,0)
Color del texto del título (predeterminado): #edf000
Color del texto del cuerpo (predeterminado): rgba(0,0,0,0)
Texto del cuerpo Color (predeterminado): #ffffff
(Tenga en cuenta que los colores de texto predeterminados son completamente transparentes para ocultarlos hasta que pase el cursor sobre la propaganda).
Margen personalizado: 15 px arriba, 0 px abajo, 90 px a la izquierda
Relleno personalizado: 5 px arriba, 5 px abajo, 5 px a la derecha
(El margen personalizado es la forma en que coloca el ícono de publicidad en una ubicación específica sobre la imagen).
Sombra de cuadro: vea la captura de pantalla
Posición horizontal de sombra de cuadro: -154 px
Posición vertical de sombra de cuadro: 0 px
Color de sombra (predeterminado): rgba (0,0,0,0)
Color de sombra (desplazamiento): #1e2441
(La sombra del cuadro es una forma creativa de agregar un color de fondo detrás del contenido de la propaganda. De forma predeterminada, la sombra del cuadro es completamente transparente, pero mostrará un bonito color azul al pasar el mouse).
Ahora vaya y compruebe el resultado final de su primera publicidad para asegurarse de que el efecto de desplazamiento y el diseño sean correctos.
A continuación, podemos duplicar el módulo de publicidad para crear nuestra segunda etiqueta de información sobre herramientas. Después de duplicar la propaganda, puede actualizar el contenido al texto que desee (que sea breve). Luego, todo lo que necesita hacer es colocar la información sobre herramientas usando un margen personalizado diferente de la siguiente manera:
Margen personalizado: 0px arriba, 0px abajo, 15px a la izquierda
Para crear la tercera publicidad, puede duplicar la segunda publicidad.
Para esta tercera propaganda, nos quedaremos sin espacio en el lado derecho de nuestra imagen, por lo que realmente no tendremos mucho espacio para el contenido. Podríamos usar el margen negativo para extender la publicidad fuera de la imagen, pero esto también se extendería más allá del tamaño de pantalla de 320px en el móvil. Por lo tanto, vamos a introducir algunos pequeños fragmentos de código para voltear nuestro contenido publicitario de modo que el icono esté a la derecha y el texto a la izquierda. Para hacer esto, abra la configuración de publicidad y, en la pestaña Avanzado, agregue el siguiente CSS personalizado.
Elemento principal CSS:
|
01
|
direction: rtl; |
Imagen de Blurb CSS:
|
01
|
padding-left: 15px; |
Si no lo ha notado, el ícono ahora está a la derecha. Ahora todo lo que necesita hacer es colocar la propaganda usando el siguiente margen personalizado:
Margen personalizado: 35 px arriba, 0 px abajo, 0 px a la izquierda
También necesitamos ajustar la sombra del cuadro para que venga de la izquierda en lugar de la derecha de la siguiente manera:
Posición horizontal de la sombra del cuadro: 150 px
Ahora echa un vistazo a la información sobre herramientas invertida en el sitio en vivo.
Para la última publicidad, copie la primera publicidad en la parte superior de la columna y péguela debajo de la tercera publicidad.
Luego actualice el margen de la siguiente manera:
Margen personalizado: 0px arriba, 100px a la izquierda
¡Ahora mira el resultado final del diseño!
¡Y echa un vistazo a esos efectos de desplazamiento de información sobre herramientas!
¿Es receptivo?
Este diseño se creó pensando en los dispositivos móviles desde el principio. La imagen tiene un ancho de 320 px, que es el ancho de la mayoría de los teléfonos inteligentes pequeños. Y debido a que ajustamos el tamaño y colocamos todo utilizando unidades de longitud de píxel, el diseño (incluida la información sobre herramientas) no se mueve cuando ajustamos el tamaño del navegador.
Sin embargo, es posible que deba hacer una cosa más para asegurarse y maximizar el ancho de la imagen en pantallas de teléfonos pequeños. De forma predeterminada, su fila tendrá un ancho del 80 % en dispositivos móviles, por lo que para que sea del 100 %, puede agregarlo como CSS personalizado al elemento principal de su Fila de la siguiente manera:
|
01
|
width: 100%; |
Tu ancho personalizado de 700 px seguirá sirviendo como ancho máximo en el escritorio, pero ahora será del 100 % en el móvil.
Pensamientos finales
Etiquetar una imagen de fondo con información sobre herramientas y efectos de desplazamiento como este puede agregar un elemento de diseño profesional que atraiga a su audiencia con información útil. Y estoy seguro de que hay múltiples formas de usar este concepto para otros casos de uso. Pero viene con desafíos si planeas mantener el diseño en el móvil también. El truco es pensar primero en dispositivos móviles y planificar con anticipación. Espero que esto sirva de inspiración para futuros proyectos en el futuro. En todo caso, al menos sabes cómo crear una propaganda con un icono o la derecha :).
Espero escuchar de usted en los comentarios a continuación.
¡Salud!