Cómo etiquetar una imagen de fondo con información sobre herramientas atractiva en Divi

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 borrones que servirán como información sobre herramientas informativas sobre su producto. Para hacer esto, usaré la página de inicio de Fitness Gym para etiquetar una imagen de fondo con información sobre fitness de calidad.

Empecemos.

Un pequeño vistazo

Aquí hay un adelanto del diseño que crearemos en este tutorial.

Que necesitas

Para este tutorial, necesitará lo siguiente:

• El tema Divi
• La página de inicio de Fitness Gym del paquete de diseño de Fitness Gym (disponible en Divi Builder)
• Una imagen para usar como imagen de fondo que es exactamente de 320 px por 507 px. Siéntase libre de arrastrar este a su escritorio y usarlo para este tutorial.
  

Preparación del diseño prediseñado

Para comenzar, cree una nueva página, agregue un título y luego implemente Visual Builder. A continuación, seleccione "Elegir un diseño predefinido". Desde la ventana emergente de carga desde la biblioteca, seleccione el diseño de la página de inicio de Fitness Gym y haga clic en "Usar este diseño".

Una vez que el diseño esté cargado 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 de la 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".

Agregar la imagen de fondo y personalizar la configuración de la fila

Con este diseño, el tamaño y el espaciado son cruciales y deberán ser precisos. Y todo comienza con el tamaño de nuestra imagen de fondo. Como se mencionó anteriormente, la imagen que usamos para el fondo debe ser de 320 px por 507 px. Dado que un ancho de 320px es un buen punto de partida para dispositivos móviles, esto nos permitirá hacer el diseño amigable para 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
Repetición de la imagen de fondo de la columna 1: Sin repetición

A continuación, debemos agregar un ancho personalizado a la fila y eliminar el espaciado superior e inferior.

Ancho personalizado: 700px
Relleno personalizado: 0px arriba, 0px abajo

Establecer el ancho en 700px asegurará que la fila no se vuelva más pequeña 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 forma 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:

height: 507px;

Ahora la altura de la columna es igual a la altura de su 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 mediante desenfoques

Con nuestra imagen de fondo en su lugar, podemos comenzar a agregar nuestros desenfoques que se colocarán y se diseñarán para que funcionen como información sobre herramientas. Continúe y agregue un módulo de propaganda a la columna 1 y actualice la siguiente configuración de propaganda:

Título: "Focus"
Contenido: "¡La clave del éxito!"
Usar icono: Sí
Icono: ver captura de pantalla

Es importante mantener el título y el contenido en 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 propaganda:

Color del icono: # edf000
Icono de círculo: SÍ
Color del círculo: rgba (0,0,0,0)
Mostrar borde circular: SÍ
Color del borde del círculo (predeterminado): rgba (0,0,0,0)
Color del borde del círculo (desplazamiento): # edf000
Ubicación de la imagen / icono: Izquierda
Usar tamaño de fuente de icono: SÍ
Tamaño de fuente del icono: 40px

Continúe ajustando la configuración del 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 cuerpo del texto (predeterminado): rgba (0,0,0,0)
Color del texto del cuerpo (predeterminado): #ffffff

(Tenga en cuenta que los colores de texto predeterminados son completamente transparentes para ocultarlos hasta que pase el mouse sobre la propaganda).

Margen personalizado: 15 píxeles en la parte superior, 0 píxeles en la parte inferior, 90 píxeles a la izquierda
Relleno personalizado: 5 píxeles en la parte superior, 5 píxeles en la parte inferior, 5 píxeles en la derecha

(El margen personalizado es cómo coloca el icono de la propaganda en una ubicación específica sobre la imagen).

Box Shadow: ver captura de pantalla
Posición horizontal de la sombra del cuadro: -154px
Posición vertical de la sombra del cuadro: 0px
Color de sombra (predeterminado): rgba (0,0,0,0)
Color de sombra (flotar): # 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 ve y mira el resultado final de tu primera propaganda para asegurarte de que el efecto de desplazamiento y el diseño sean correctos.

A continuación, podemos duplicar el módulo de propaganda para crear nuestra segunda etiqueta de información sobre herramientas. Después de duplicar la propaganda, puede actualizar el contenido al texto que desee (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 propaganda, puede duplicar la segunda propaganda.

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 un margen negativo para extender la propaganda fuera de la imagen, pero esto también se extendería más allá del tamaño de pantalla de 320 px en el móvil. Entonces, vamos a introducir algunos pequeños fragmentos de código para darle la vuelta al contenido de nuestra propaganda de modo que el ícono esté a la derecha y el texto a la izquierda. Para hacer esto, abra la configuración de propaganda y, en la pestaña Avanzado, agregue el siguiente CSS personalizado.

CSS del elemento principal:

direction: rtl;

CSS de la imagen de Blurb:

padding-left: 15px;

Si no lo ha notado, el icono 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 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: 150px

Ahora mira la información sobre herramientas invertida en el sitio en vivo.

Para la última propaganda, copie la primera propaganda en la parte superior de la columna y péguela debajo de la tercera propaganda.

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!

¿Responde?

Este diseño se construyó pensando en los dispositivos móviles desde el principio. La imagen tiene un ancho de 320px, que es el ancho de la mayoría de los teléfonos inteligentes pequeños. Y debido a que dimensionamos y posicionamos todo usando 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 las pantallas de teléfonos pequeños. De forma predeterminada, su fila tendrá un ancho del 80% en el dispositivo móvil, por lo que para hacer esto al 100%, puede agregarlo como CSS personalizado al elemento principal de su fila de la siguiente manera:

width: 100%;

Su 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 varias formas de utilizar este concepto para otros casos de uso. Pero también presenta desafíos si planea mantener el diseño en dispositivos móviles. El truco consiste en pensar primero en los dispositivos móviles y planificar el futuro. Espero que esto sirva de inspiración para proyectos futuros en el futuro. En todo caso, al menos sabes cómo crear una propaganda con un icono o la derecha :).

Espero tener noticias tuyas en los comentarios a continuación.

¡Salud!