Cómo agregar marcas de imagen con div Div

Los anotadores de imágenes son una excelente manera de presentar las características especiales de un producto. En esta publicación, le mostraremos cómo crear marcadores de imágenes usando un texto y un divisor vertical. Debido a la configuración de transformación de las columnas, se puede colocar un anotador de imagen donde lo necesite. Para mostrarle cuán versátil es esta técnica, le mostraremos dos ejemplos de diseño diferentes. ¡Podrá descargar el archivo JSON de forma gratuita! ¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla.
Ejemplo no. 1 escritorio

Móvil

Ejemplo no. 2 escritorio

Móvil

Descargue la imagen de los marcadores gratuitos para poner su mano en el aspecto gratuito de los marcadores de imagen, primero debe descargarla con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Suscríbase a nuestro canal de YouTube recreos Ejemplo no. ¡Comencemos a recrear el primer ejemplo de diseño!
Agregue una nueva sección Agregue una nueva sección a la página a la que trabaje. Antes de agregar una fila, primero ajuste la configuración de la sección. Fondo de pantalla Agregue un gradiente y luego una imagen con un modo de mezcla de pantalla.

Antecedentes: gradiente + imagen
Color degradado 1: blanco #ffffff
Color degradado 2: Gris medio # 666666
Iniciar posición en el gradiente: 22%
Mezcla de imagen de fondo: pantalla
El espacio elimina el llenado predeterminado e inferior de la siguiente sección.


Revestimiento superior e inferior: 0VW
Visibilidad Complete la configuración de la sección ocultando la salida de la sección.

Desbordamiento vertical y horizontal: oculto
Agregue la fila # 1 ahora, agregue una nueva fila con tres columnas.

Antes de agregar cualquier módulo, ajuste la configuración de la fila. Dimensión primero, ajuste el tamaño de la fila.

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%
CSS personalizado entonces, agregue una sola línea de código CSS al elemento principal de la fila. Esto permitirá que las columnas aparezcan una al lado de la otra y en dimensiones de pantalla más pequeñas. CSS principal: Display: Flex;

Pantalla: Flex;
Traducción de transformación de la columna 1 Aplicar un efecto de transformación personalizado a la primera columna para reposicionar la columna. Este paso tendrá sentido una vez que agregue los módulos de marcado de imagen más adelante a la publicación. Si usa esta técnica en otro diseño, deberá cambiar estos valores en consecuencia.
Transformación Transformación: eje x 2vw, eje y 16VW

El índice Z agrega un valor de índice más alto a la pestaña Visibilidad.
IND ÍNDICE: 10

La columna 2 transforma la traducción Aplicar un efecto de traducción a la segunda columna.
Traducción de transformación: eje x -11vw, eje y 6VW

IND El índice aumenta el valor del índice Z.
IND ÍNDICE: 10

La columna 3 transforma la traducción modifica los valores transformados de la tercera columna.
Transformación Transformación: eje x -11vw, eje y 8VW

IND ÍNDICE Y CAMBIO VALOR DE INDEX Z.
IND ÍNDICE: 10

Agregue la fila # 2 antes de agregar cualquier módulo en la primera fila, agregue una nueva fila con una sola columna. Haga esto antes de agregar marcas de imagen para que pueda ver qué sucede en la pantalla mientras se diseña.
Dimensión Cambiar la configuración de tamaño de la fila.

Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%
Agregue un módulo de imagen Agregue un módulo de imagen adicional.
La dimensión obliga al ancho completo en el módulo de imagen para garantizar que el diseño permanezca receptivo a todo el tamaño de la pantalla. Completo el ancho completo: Sí

Espacio y luego, agregue algunos rellenos a la izquierda y a la derecha para reducir la imagen.


Junta izquierda y derecha: 10 VW
Agregue 3 módulos de texto ahora, vuelva a la primera fila con 3 columnas y agregue 3 módulos de texto. Use la vista de estructura alámbrica para un acceso más fácil. Agregue un módulo de texto a la primera columna, clone dos veces y dibuje duplicados en las otras columnas.

Comience a cambiar el módulo de texto en la columna 1. Ingrese un contenido de su elección y cambie la configuración de la siguiente manera. Fondo Agregar un fondo negro.
Color de fondo: negro # 000000

El texto estiliza el texto.


Texto de fuente: Aldrich
Color de texto: blanco #ffffff

Alineación de texto: centrado
Tamano del texto:
Escritorio: 1.2VW
Tableta: 2VW
Teléfono: 2.4VW
Título Fuente de peso: Bold
Dimensión Ajuste el tamaño del módulo de texto.
Ancho:
Escritorio: 17 VW

Tableta: 23VW
Teléfono: 30VW
Alineación del módulo: centro
Espacio agregue el relleno superior e inferior.
Revestimiento superior e inferior: 0.9VW
Border cambia la configuración del borde.

Esquinas redondeadas: 14 px en todas las esquinas
Estilos de abajo: borde inferior

Ancho de borde inferior: 4 PX
Color de borde inferior: rojo # e02b20
Box Shadow Aplica un tono de caja.
Box Shadow: tercera opción
Extienda los estilos de texto para ahorrar tiempo, use la opción de expansión de estilo para estilizar los otros módulos de texto en la sección.

Primero, haga clic en los tres puntos en el borde derecho del módulo de texto y seleccione “Extender los estilos de texto”.
Luego, en el cuadro emergente, haga clic en “A lo largo” y seleccione “Esta sección” cuando desciende el menú. Cambie el contenido en cada módulo de texto.

Agregue 3 módulos divisores Agregue un divisor debajo del módulo de texto en la columna 1. luego clone dos veces y dibuje duplicados en las otras columnas.
Abra el módulo divisor en la columna 1 y haga algunos cambios. La línea hace el divisor negro.
Color de línea: Negro # 000000
Dimensión Ajuste el grosor del separador.


Peso del divisor: 3 PX


Ancho: 20VW
Alineación del módulo: centro

Extienda ajuste el borde superior.
Margen superior: 7VW
Transformar agregue un efecto de giro de transformarse para hacer el divisor vertical.
Transformación de rotación: primera opción a 90 grados

Extienda la configuración del divisor Guardar tiempo y use la opción Expandir estilos.
Primero, haga clic en los tres puntos en el lado derecho del módulo divisor y seleccione “Extienda los estilos del divisor”.

Luego, en el cuadro emergente, haga clic en “In Everything” y seleccione “Esta sección” en el menú desplegable.
El diseño debería verse ahora:

Agregue la fila # 3 Agregue una tercera fila a la sección utilizando la siguiente estructura de columnas:
Ahora, antes de agregar módulos, ajuste la configuración de la fila en consecuencia. Dimensión Cambiar la configuración de tamaño.
Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1

Ancho: 100%

Ancho máximo: 100%
La columna 1 transforma aplicar un efecto de transformación en la primera columna.
Translación de transformación: eje y -8VW
D índice ajustado y valor de índice Z.
IND ÍNDICE: 10

La transformación de la columna 2 reposicionó la segunda columna utilizando algunas configuraciones de traducción personalizada. Translación de transformación: eje x -17VW, eje y -14VW

IND ÍNDICE Ajuste el valor del índice Z.

IND ÍNDICE: 10
Agregue 2 divisores Agregue dos separadores, uno en cada columna.

Extienda los estilos de división Después de agregar los separadores, use los separadores anteriores para expandir los estilos a los nuevos.
Primero, haga clic en los tres puntos en el módulo divisor primero y seleccione “Extienda los estilos del divisor”.

Luego, en la ventana emergente, seleccione “En esta página”.
Ahora, haremos algunos cambios en el divisor en la primera columna de la tercera fila. Dimensión Retire el borde.

Marja de sus: predeterminado

IND Cambio de índice e índice z.
IND ÍNDICE: -2
Agregue 2 módulos de texto Agregue un módulo de texto a cada columna.


Extienda los estilos de texto Después de agregar nuevos módulos de texto, extienda primero los estilos de texto desde el módulo de texto.
Primero, haga clic en los tres puntos en el primer módulo de texto en la fila superior y seleccione “Extender los estilos de texto”.

Luego, en la ventana emergente, seleccione “En esta página”.
Ahora cambie el texto para que coincida con el diseño. Además, agregue un borde superior a ambos módulos de texto desde el tercero. sangría

Margen superior: 7VW

Recrear el ejemplo no. 2 Pasamos al siguiente ejemplo!
Agregue una nueva sección Agregue una nueva sección a la página a la que trabaje. Antes de agregar una fila, ajuste la configuración de la sección. La visibilidad oculta las chispas de la sección en la configuración de visibilidad.
Superación horizontal y vertical: Hidden


Agregue la fila # 1 ahora, agregue una fila de cinco columnas. Antes de agregar módulos, ajuste la configuración de la fila de la siguiente manera. Dimensión Primero, cambie la configuración de tamaño. Use el ancho de canaleta personalizado: Sí
El ancho de la canaleta: 1

Ancho: 100%

Ancho máximo: 100%
Espacio y luego ajusta la distancia.

Junta izquierda y derecha: 19.5VW
CSS personalizado permite que las columnas aparezcan una al lado de la otra agregando una línea de código CSS al elemento principal de la fila.
Artículo principal CSS: Pantalla: Flex;
Pantalla: Flex;
Todas las configuraciones de la columna luego realizan algunos cambios en cada una de las columnas. CSS personalizado

Elemento principal: Ancho: 20%! Importante;
Ancho: 20%! Importante;

D índice ajustado y valor de índice Z.
IND ÍNDICE: 10
Agregue 5 módulos de texto Agregue un módulo de texto a cada columna.

Agregue un contenido relevante al cuadro de contenido y continúe modificando la configuración del módulo de texto en la columna 1. Fondo Agregue un color de fondo.
Color de fondo: verde # 2f7713
TEXTO DEL CONTENIDO DEL STILET DE LA SIGUIENTE.

Texto de fuente: Allerta
Alineación de texto: Centro

Color de texto: blanco #ffffff


Tamano del texto:
Escritorio: 1.3VW

Tableta: 2VW
Teléfono: 2.4VW
Altura de la línea de texto: 2.9em
Dimensión Ajuste el tamaño.
Ancho:
Escritorio: 6VW
Tableta: 8VW
Teléfono: 9VW
Alineación del módulo: centro

Extienda el espacio ajustado para convertir el módulo en un cuadrado.
Margen inferior: -2VW
Revestimiento superior e inferior: 1 VW
Junta izquierda y derecha: 1 VW
Border Convierta el módulo de texto en un círculo en la configuración del borde.
Esquinas redondeadas: 50VW los cuatro lados

Box Shadow Seleccione una sombra de caja.
Sombra de la caja: la tercera opción Salir de los estilos de texto Use la opción extiende los estilos para ajustar la configuración de todos los módulos de texto.
Primero, haga clic en los puntos a la derecha del módulo de texto y elija “Extienda los estilos de texto”.
Luego, en la ventana emergente, haga clic en “A lo largo” y elija “esta página”.

Finalmente, cambie el texto en el cuadro de contenido de cada módulo.
El diseño debería verse así ahora.

Módulo de texto 2 Haga el segundo círculo amarillo.
Color de fondo: Amarillo # F2E200

Módulo de texto 3 Haga el tercer círculo naranja.
Color de fondo: naranja # f2b100
Módulo de texto 4 Haga el cuarto círculo rojo naranja.
Color de fondo: rojo naranja


Módulo de texto 5 Haga el quinto módulo morado.

Color de fondo: Violet # 8E008C
Agregue 5 módulos divisor ahora, en cada módulo de texto, agregue un módulo divisor.

Ajuste la configuración al primer divisor en consecuencia. Línea Dale un color al separador.
Color de línea: verde # 2f7713

Dimensión Ajuste el ancho.
Ancho de divisor: 4 PX

Ancho: 13VW
Espaciado Agregar un valor de margen más alto.

Margen superior:


Escritorio: 7VW
Tableta + teléfono: 5VW

Gire el separador para hacerlo verticalmente.
Transformación de rotación: 90 grados en la primera opción
Extienda la configuración del divisor Use la opción Expandir estilos para estilizar a los otros separadores.

Primero, haga clic en los puntos a la derecha del módulo divisor y elija “Extienda los estilos del divisor”.
Luego, en la ventana emergente, haga clic en “A lo largo” y elija “esta sección”.
Haga coincidir los colores del divisor 2 hacen el segundo divisor amarillo.
Color de línea: Amarillo # F2E200

La División 3 hace el tercer divisor de naranja.
Color de línea: naranja # F2B100Divizor 4 Haga el cuarto separador rojo naranja.

Color de línea: Red Orange # EF4A21
El divisor 5 hace el quinto divisor púrpura.
Color de línea: Violet # 8E008C


Agregue la fila # 2 Agregue una nueva fila con una sola columna.
Antes de agregar el módulo de imagen, ajuste la configuración de la fila. Dimensión primero, ajuste el tamaño.

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1

Ancho: 100%
Ancho máximo: 100%

Visibilidad entonces, visibilidad.
Superación horizontal y vertical: Visible

Agregue un módulo de imagen Agregue un módulo de imagen y cargue la imagen de los jugos.

La dimensión obliga al ancho de la imagen completa.
Fuerza el ancho completo: si
Difundir filas es el momento del toque final. Abra la configuración de la fila 1 nuevamente y agregue algunos bordes superior e inferior.
Margen superior: 7VW
Margen inferior:

Escritorio: -24VW
Tableta: -31VW

Teléfono: -35VW

Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Ejemplo no. 1 escritorio
Móvil

Ejemplo no. 2 escritorio
Móvil
¡Esta es una envoltura! En esta publicación, le mostré cómo crear dos modelos diferentes de marcadores de imágenes. Utilicé las opciones de columnas para mantener juntas las columnas de texto y los separadores. Esperamos que estos modelos lo inspire a crear sus propios marcadores de imagen. Recuerde usar las opciones de transformación de las columnas para un mejor control de cada marcador de imagen. Si tiene alguna pregunta, ¡no dude en dejar un comentario en la sección de comentarios a continuación!