Cómo etiquetar una imagen de fondo con consejos útiles en la división

Agregar consejos para etiquetar una imagen de fondo es una forma creativa de atraer a los visitantes con información valiosa sobre su producto. La idea básica es posicionar iconos (o texto) ubicaciones específicas (tales con puntos de identificación). Y si aprovecha los efectos flotantes de DIV, puede revelar texto adicional cuando pasa con el mouse sobre un icono para crear consejos útiles. En este tutorial, le mostraré cómo etiquetar una imagen de fondo borrosa que servirá como consejos informativos sobre la calidad.
Vamos a empezar. Una breve mirada es un consejo del diseño que construiremos en este tutorial.

¿Qué necesitas para este tutorial? Necesitarás lo siguiente:
El tema de Div
Página de destino del gimnasio de fitness en Layout Fitness Gym (disponible en Divi Builder)
Una imagen para usar para la imagen de fondo, que es exactamente 320px en 507px. Siéntase libre de tirar del escritorio y usarlo para este tutorial.

Preparando el aspecto prefabricado para comenzar, crear una nueva página, agregar un título y luego implementar Visual Builder. Luego seleccione “Elija un aspecto prefabricado”. Desde la ventana de carga emergente en la biblioteca, seleccione la página del gimnasio de fitness y haga clic en “Usar esto”.

Una vez que la aparición se carga en la página, desplácese hacia abajo hasta la cuarta sección en una fila con dos columnas que tiene el título “Programas recomendados” en la columna derecha. Agregaremos la imagen de fondo con consejos de herramientas en la columna izquierda de esta fila. Reutilice el editor en línea para cambiar el texto de la columna derecha a “Fitness inteligente”. Agregar imagen de fondo y personalizar la configuración ordinaria con este diseño, dimensionamiento y distancia son cruciales y tendrán que 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 con 507 PX. Debido a que un ancho de 320 PX es un buen punto de partida para los dispositivos móviles, esto nos permitirá hacer el diseño móvil sin tener que cambiar el tamaño de nuestra imagen.

Abra la configuración de la fila y agregue la imagen de fondo en la columna 1. luego actualice lo siguiente: Columna 1 Tamaño de fondo Imagen: Dimensión real Columna 1 Posición del fondo: Centro izquierdo 1 Repita de fondo: Sin repetición
Luego debemos agregar un ancho personalizado en una fila y eliminar el espacio superior e inferior. Ancho personalizado: 700 PX Trenza personalizada: 0 PX hacia arriba, 0 PX hacia abajo la configuración de ancho a 700 PX asegurará que la fila no se reduzca en un tamaño más pequeño de la pantalla antes de la interrupción de la tableta.

En este momento, creo que es una buena idea ir más allá y establecer una altura específica para la columna 1 igual a la altura del fondo. Por lo tanto, sabemos que la imagen permanecerá visible si el contenido de la columna no expone toda la imagen. Para hacer esto, vaya a la pestaña avanzada y agregue los siguientes CSS personalizados en el elemento principal de la columna 1: Altura: 507px;

Ahora la altura de la columna es igual a la altura de su imagen y no dependerá del contenido (o módulos) que agregamos en una fila. Agregando las etiquetas de ToolTip sobre el fondo utilizando borrones que tienen la imagen de fondo en posición, podemos comenzar a agregar nuestro desenfoque, que se posicionará y se pondrá elegante para funcionar como consejos. Continúe y agregue un módulo de propaganda en la columna 1 y actualice la siguiente configuración de la propaganda: Título: Contenido “Enfoque”: “Clave para el éxito!” Use el icono: Sí Icono: consulte la captura de pantalla Es importante mantener el título y el contenido por unas pocas palabras, porque queremos poder adaptarse a todo el texto dentro de la imagen de fondo.
Luego actualizará la configuración de diseño. Este es un diseño más avanzado de una propaganda, por lo que hay muchas opciones de modificación, junto con algunos efectos flotantes que revelarán el contenido de la propaganda en el flotador. Actualice las siguientes configuraciones de diseño para la propaganda: Color del icono: # EDF000 Círculo de icono: Sí Circle Color: RGBA (0.0,0,0) Muestre el borde del círculo: Sí, el borde del color (predeterminado): RGBA (0.0.0 0) Color color del círculo (flotante): # edf000 imagen / ubicación del icono: izquierda Use el tamaño de la fuente del icono: DA Fuente Tamaño del tamaño: 40 PX
Continúe ajustando la configuración de diseño de la siguiente manera: El peso de la fuente del título: Título del color del texto en negrita (predeterminado): RGBA (0.0,0,0) Texto del título (predeterminado): # EDF000 El cuerpo del cuerpo (predeterminado): RGBA (0.0,0,0) El color del texto del cuerpo (predeterminado): #fffff (observe que los colores implícitos del texto son completamente transparentes para ocultarlos hasta que pases sobre la propaganda) Margen personalizado: 15 PX hacia arriba, 0 PX ABAJO, 90 PX IZQUIERDA FRAVE PERSONALIZADO: 5 PX hacia arriba, 5 px hacia abajo, 5 px a la derecha (el margen personalizado es cómo coloca el icono de la propaganda en un lugar determinado sobre la imagen).

Sombra de la caja: ver Captura de pantalla Posición horizontal de la caja: -154px Box Shadow Publicación vertical: 0px Color de sombra (predeterminado): RGBA (0.0,0,0) sombra (caminar): # 1e2441 (la sombra de la caja es o o o de manera creativa Para agregar un color de fondo detrás del contenido de la propaganda. Por defecto, la sombra de la caja es completamente transparente pero mostrará un hermoso color azul).

Ahora vaya y verifique el resultado final de su primera señalización para asegurarse de que el efecto de desplazamiento y el diseño sean correctos.

Luego podemos duplicar el módulo de la propaganda para crear nuestra segunda etiqueta de tipo de información para herramientas. Después de copiar el texto, puede actualizar el contenido al texto deseado (manténgalo corto). Entonces, todo lo que tiene que hacer es posicionar el consejo de la herramienta utilizando un margen personalizado diferente, de la siguiente manera:
Margen personalizado: 0 px arriba, 0 px abajo, 15 px 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, para que no tengamos mucho espacio para el contenido. Podríamos usar un margen negativo para expandir la propaganda fuera de la imagen, pero esto se extendería más allá del tamaño de la pantalla 320 PX en el móvil. Por lo tanto, ingresaremos algunos fragmentos de código pequeño para convertir nuestro contenido de propaganda para que el icono sea a la derecha y el texto esté a la izquierda. Para hacer esto, abra la configuración de la propaganda y, en la pestaña avanzada, agregue el siguiente CSS personalizado. CSS principal: Dirección: RTL; Imagen de propaganda CSS: Pading-izquierda: 15px;

Si no lo ha notado, el ícono ahora está a la derecha. Ahora todo lo que tiene que hacer es colocar la propaganda utilizando el siguiente margen personalizado: Margen personalizado: 35 px arriba, 0 px abajo, 0 px izquierda
También debemos ajustar la sombra de la caja para que venga de la izquierda en lugar de la derecha, de la siguiente manera: posición horizontal de la sombra de la caja: 150 px

Ahora consulte el consejo de trabajo invertido en el sitio en vivo.
Para la última propaganda, copie la primera propaganda en la parte superior de la columna y peguela debajo de la tercera propaganda.

Luego actualice el margen de la siguiente manera: Margen personalizado: 0 px en la parte superior, 100 px a la izquierda

¡Ahora revise el resultado final del diseño!

¡Y revise esos efectos de planificación de consejos de herramientas!

¿Es receptivo? Este diseño fue construido fue construido con la idea de móvil desde el principio. La imagen tiene un ancho de 320 PX, que es el ancho de la mayoría de los pequeños teléfonos inteligentes. Y debido a que hemos dimensionado y colocado todo usando unidades de longitud de píxeles, el diseño (incluidas las puntas de la herramienta) no se mueve cuando ajustamos el tamaño del navegador. Todo esto, debe hacer algo para asegurar y maximizar el ancho del teléfono pequeño pantallas. Por defecto, su turno será del 80%de ancho en el móvil, por lo que para hacerlo al 100%, puede agregarlo como un CSS personalizado a su elemento de línea.
Su ancho personalizado de 700 PX continuará sirviendo como ancho máximo en el escritorio, pero ahora estará al 100% en su dispositivo móvil. Pensamientos finales que etiquetan una imagen de fondo con herramienta flotante: consejos para la pizca, ya que puede agregar un elemento de diseño profesional que involucra a su audiencia con información útil. Y estoy seguro de que hay varias formas de usar este concepto para otros casos de uso. Pero viene con desafíos si tiene la intención de mantener su diseño en su móvil. El truco es pensar primero en el móvil y planificar de antemano. Espero que esto sirva como una inspiración para futuros proyectos en el camino. Si hay algo, al menos sabes cómo crear una propaganda con un icono o derecho :). Espero tener noticias suyas en los comentarios a continuación. ¡Suerte!