Cómo agregar marcadores de imagen con las opciones de transformación de Divi


Los marcadores de imagen son una excelente manera de mostrar las características especiales de un producto. En esta publicación, le mostraremos cómo crear marcadores de imagen usando un módulo de texto y un divisor vertical. Gracias a la configuración de transformación dentro de las columnas, se puede colocar un marcador de imagen en cualquier lugar que lo necesite. Para mostrarle lo versátil que es esta técnica, le mostraremos dos ejemplos de diseño diferentes. ¡También podrás descargar el archivo JSON gratis!

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Ejemplo 1

Escritorio

Vista previa de marcadores de imagen con coche

Móvil

marcador de imagen móvil 1.

Ejemplo # 2

Escritorio

Vista previa del marcador de imagen de jugos

Móvil

marcadores de imagen móvil 2

Descargar The Image Markers Layout GRATIS

Para poner sus manos en el diseño de marcadores de imagen gratis, 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

(incrustar) https://www.youtube.com/watch?v=ECNQAtIU0ZM (/ incrustar)

Suscríbase a nuestro canal de Youtube

Recrear Ejemplo # 1

¡Comencemos a recrear el primer ejemplo de diseño!

Vista previa de marcadores de imagen con coche

Agregar nueva sección

Agregue una nueva sección a la página en la que está trabajando. Antes de agregar una fila, primero ajuste la configuración de la sección.

Antecedentes

Agregue un degradado y luego una imagen con un modo de fusión de pantalla.

  • Fondo: Gradiente + Imagen
  • Color del degradado 1: blanco #ffffff
  • Gradient Color 2: Medium Grey # 666666
  • Posición de inicio del gradiente: 22%
  • Mezcla de imagen de fondo: pantalla

agregar un fondo degradado 1

agregar una imagen al fondo de la sección

Espaciado

Elimine el relleno superior e inferior predeterminado de la sección siguiente.

  • Relleno superior e inferior: 0vw

ajustar el relleno de la sección

Visibilidad

Complete la configuración de la sección ocultando los desbordamientos de la sección.

  • Desbordamiento vertical y horizontal: oculto

ajustar la visibilidad en la sección

Agregar fila # 1

Ahora, agregue una nueva fila con tres columnas.

agregar una fila en la sección

Antes de agregar cualquier módulo, ajuste la configuración de la fila.

Dimensionamiento

Primero, ajuste el tamaño de la fila.

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho Máx .: 100%

configuración de fila

CSS personalizado

Luego, 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 en tamaños de pantalla más pequeños también.

  • Elemento principal CSS: display: flex;
display: flex;

agregue algunos CSS personalizados

Columna 1

Transformar Traducir

Aplique un efecto de traducción de transformación personalizado a la primera columna para reposicionar la columna. Este paso tendrá sentido una vez que agregue los módulos de marcador de imagen más adelante en la publicación. Si está utilizando esta técnica en otro diseño, deberá cambiar estos valores en consecuencia.

  • Transformar Traducir: eje x 2vw, eje y 16vw

ajustar la configuración de la columna

Índice Z

Agregue un valor de índice z más alto a la pestaña de visibilidad.

  • Índice Z: 10

Ajustar la visibilidad

Columna 2

Transformar Traducir

Aplique un efecto de transformación de traducción a la segunda columna.

  • Transformar Traducir: eje x -11vw, eje y 6vw

transformar traducir columna 2

Índice Z

Aumente el valor del índice z.

  • Índice Z: 10

Ajustar la visibilidad

Columna 3

Transformar Traducir

Modifique los valores de traducción de transformación de la tercera columna.

  • Transformar Traducir: eje x -11vw, eje y 8vw

ajustar transformar traducir

Índice Z

Y cambie el valor del índice z.

  • Índice Z: 10

Ajustar la visibilidad

Agregar fila # 2

Antes de agregar cualquier módulo a la primera fila, agregue una nueva fila de una columna. Haga esto antes de agregar los marcadores de imagen para que pueda ver lo que sucede en la pantalla mientras diseña.

agregar una nueva fila de una columna

Dimensionamiento

Cambiar la configuración de tamaño de la fila.

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho Máx .: 100%

ajustar el tamaño de la fila

Añadir módulo de imagen

Agregue un módulo de imagen a continuación.

agregar un módulo de imagen

insertar una imagen en el módulo

Dimensionamiento

Fuerce el ancho completo en el módulo de imagen para asegurarse de que el diseño siga respondiendo en todos los tamaños de pantalla.

  • Forzar ancho completo: sí

fuerza de ancho completo

Espaciado

Luego, agregue un poco de relleno izquierdo y derecho para hacer la imagen más pequeña.

  • Relleno izquierdo y derecho: 10vw

hacer espacio en los ajustes izquierdo y derecho

Agregar 3 módulos de texto

Ahora, regrese a la primera fila de 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, clónelo dos veces y arrastre los duplicados a las otras columnas.

agregue el primer módulo de texto

agregar y duplicar módulos de texto

Comience a modificar el módulo de texto en la columna 1. Ingrese el contenido que desee y cambie la configuración de la siguiente manera.

Antecedentes

Agrega un fondo negro.

  • Color de fondo: negro # 000000

agregar un fondo negro

Texto

Dale estilo al texto.

  • Fuente de texto: Aldrich
  • Color del texto: blanco #ffffff
  • Alineación de texto: centrado
  • Tamano del texto:
    • Escritorio: 1.2vw
    • Tableta: 2vw
    • Teléfono: 2.4vw
  • Peso de la fuente del encabezado: negrita

diseñar el texto con fuente aldrich

Dimensionamiento

Ajusta el tamaño del módulo de texto.

  • Anchura:
    • Escritorio: 17vw
    • Tableta: 23vw
    • Teléfono: 30vw
  • Alineación del módulo: centro

configuración de texto para marcadores de imagen

Espaciado

Añadir relleno superior e inferior.

  • Acolchado superior e inferior: 0.9vw

agregar relleno a la configuración de texto

Frontera

Cambiar la configuración del borde.

  • Esquinas redondeadas: 14 px en todas las esquinas
  • Estilos inferiores: borde inferior
  • Ancho del borde inferior: 4px
  • Color del borde inferior: rojo # E02B20

ajustes de texto para el borde del marcador de imagen

Sombra de la caja

Aplica una sombra de cuadro.

  • Box Shadow: tercera opción

agregar una sombra de cuadro al texto

Expandir estilos de texto

Para ahorrar tiempo, use la opción de estilo extendido para diseñar 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 estilos de texto".
  • Luego, en el cuadro emergente, haga clic en "A lo largo" y seleccione "Esta sección" cuando el menú se despliegue.
  • Cambiar el contenido en cada módulo de texto.

extender estilos de texto

extender estilos a lo largo de esta sección

Agregue 3 módulos divisores

Agregue un divisor debajo del módulo de texto en la columna 1. Luego clónelo dos veces y arrastre los duplicados a las otras columnas.

agregar un módulo divisor

divisores duplicados y arrastre

Abra el módulo divisor en la columna 1 y realice algunos cambios.

Línea

Haz el divisor negro.

  • Color de línea: negro # 000000

agregar color al divisor

Dimensionamiento

Ajusta el grosor del divisor.

  • Divisor de peso: 3px
  • Ancho: 20vw
  • Alineación del módulo: centro

ajustes de tamaño del divisor

Espaciado

Ajusta el margen superior.

  • Margen superior: 7vw

configuración del margen divisor

Transformar

Agregue un efecto de transformación de rotación para hacer que el divisor sea vertical.

  • Transformar girar: primera opción a 90 grados

divisor rotar

Expandir configuración del divisor

Ahorre tiempo y use la opción extender estilos.

  • Primero, haga clic en los tres puntos en el lado derecho del módulo divisor y seleccione "Extender estilos de divisor".
  • Luego, en el cuadro emergente, haga clic en "En todo momento" y seleccione "Esta sección" en el menú desplegable.

extender estilos divisores

El diseño ahora debería verse así:

marcador de imagen primera etapa

Agregar fila # 3

Agregue una tercera fila a la sección utilizando la siguiente estructura de columnas:

agrega la tercera fila

Ahora, antes de agregar cualquier módulo, ajuste la configuración de la fila en consecuencia.

Dimensionamiento

Cambiar la configuración de tamaño.

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho Máx .: 100%

ajustar la configuración de la tercera fila

Columna 1

Transformar

Aplique un efecto de transformación de traducción a la primera columna.

  • Transformar Traducir: eje y -8vw

transformar traducir en la columna uno

Índice Z

Ajuste el valor del índice z también.

  • Índice Z: 10

índice z en la columna uno

Columna 2

Transformar

Vuelva a colocar la segunda columna usando algunas configuraciones de traducción de transformación personalizadas.

  • Transformar Traducir: eje x -17vw, eje y -14vw

transformarse en la columna dos

Índice Z

Ajuste el valor del índice z.

  • Índice Z: 10

índice z columna dos

Agregar 2 divisores

Agregue dos divisores, uno en cada columna.

agregando más divisores

Extender estilos de divisor

Después de agregar los divisores, use los divisores anteriores para extender los estilos a los nuevos.

  • Primero, haga clic en los tres puntos en el módulo divisor en la primera fila de arriba y seleccione "Extender estilos de divisor".
  • Luego, en la ventana emergente, seleccione "En toda esta página".

extender el estilo divisor nuevamente

a lo largo de esta página

Ahora, vamos a hacer algunos cambios en el divisor en la primera columna de nuestra tercera fila.

Dimensionamiento

Eliminar el margen.

  • Margen superior: predeterminado

eliminar el margen

Índice Z

Cambie el índice z también.

  • Índice Z: -2

z index a -2

Agregar 2 módulos de texto

Agregue un módulo de texto a cada columna.

agregar más módulos de texto

Ampliar estilos de texto

Después de agregar los nuevos módulos de texto, extienda los estilos de texto desde el módulo de texto en la primera fila.

  • Primero, haga clic en los tres puntos en el primer módulo de texto en la fila superior y seleccione "Extender estilos de texto".
  • Luego, en la ventana emergente, seleccione "En toda esta página".

extender estilos de texto a la fila inferior

a lo largo de esta página nuevamente

Ahora, cambie el texto para que coincida con el diseño. Además, agregue un margen superior a ambos módulos de texto en la tercera fila.

Espaciado

  • Margen superior: 7vw

ajustar el margen del nuevo módulo de texto

Recrear Ejemplo # 2

En el siguiente ejemplo!

Vista previa del marcador de imagen de jugos

Agregar nueva sección

Agregue una nueva sección a la página en la que está trabajando. Antes de agregar una fila, ajuste la configuración de la sección.

Visibilidad

Ocultar los desbordamientos de la sección en la configuración de visibilidad.

  • Desbordamiento horizontal y vertical: oculto

ajustar la visibilidad para la sección

Agregar fila # 1

Ahora, agregue una fila con cinco columnas. Antes de agregar cualquier módulo, ajuste la configuración de la fila de la siguiente manera.

Dimensionamiento

Primero, modifique la configuración de tamaño.

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho Máx .: 100%

ajustar la configuración a la nueva fila

Espaciado

Luego ajuste el espacio.

  • Relleno izquierdo y derecho: 19.5vw

relleno izquierdo y derecho

CSS personalizado

Permita que las columnas aparezcan una al lado de la otra agregando una línea de código CSS al elemento principal de la fila.

  • Elemento principal CSS: display: flex;
display: flex;

CSS personalizado a la fila

Todas las configuraciones de columna

Luego, realice algunos cambios en cada una de las columnas.

CSS personalizado

  • Elemento principal: ancho: 20%! Importante;
width: 20% !important;

CSS personalizado para todas las columnas

Índice Z

Ajuste el valor del índice z también.

  • Índice Z: 10

Índice z para todas las columnas

Agregar 5 módulos de texto

Agregue un módulo de texto a cada columna.

agregar un módulo de texto en la fila

arrastre los módulos de texto duplicados

Agregue contenido relevante al cuadro de contenido y continúe modificando la configuración del módulo de texto del módulo de texto en la columna 1.

Antecedentes

Agrega un color de fondo.

  • Color de fondo: Verde # 2f7713

agregar un fondo verde

Texto

Diseñe el contenido de la siguiente manera.

  • Fuente de texto: Allerta
  • Alineación de texto: centro
  • Color del texto: blanco #ffffff
  • Tamano del texto:
    • Escritorio: 1.3vw
    • Tableta: 2vw
    • Teléfono: 2.4vw
  • Altura de la línea de texto: 2.9em

ajustar la configuración de texto al módulo de texto

Dimensionamiento

Ajusta el tamaño.

  • Anchura:
    • Escritorio: 6vw
    • Tableta: 8vw
    • Teléfono: 9vw
  • Alineación del módulo: centro

ajustar el ancho del módulo de texto

Espaciado

Ajuste el espacio para convertir el módulo en un cuadrado.

  • Margen inferior: -2vw
  • Acolchado superior e inferior: 1vw
  • Relleno izquierdo y derecho: 1vw

hacer que el módulo sea cuadrado

Frontera

Convierta el módulo de texto en un círculo en la configuración del borde.

  • Esquinas redondeadas: 50vw los cuatro lados

hacer circular el módulo

Sombra de la caja

Seleccione un cuadro de sombra también.

  • Box Shadow: tercera opción

agregar una sombra de cuadro al círculo

Ampliar estilos de texto

Use la opción extender estilos para ajustar la configuración de todos los módulos de texto en la fila.

  • Primero, haga clic en los puntos a la derecha del módulo de texto y elija "Extender estilos de texto".
  • Luego, en la ventana emergente, haga clic en "En todo momento" y seleccione "Esta página".
  • Finalmente, cambie el texto en el cuadro de contenido de cada módulo.

extender estilos de texto de círculo

extiende el círculo

El diseño ahora debería verse así.

cinco módulos de texto circular verde

Módulo de texto 2

Haz el segundo círculo amarillo.

  • Color de fondo: amarillo # f2e200

cambiar el color del segundo círculo

Módulo de texto 3

Haz el tercer círculo naranja.

  • Color de fondo: Naranja # f2b100

cambiar el tercer círculo

Módulo de texto 4

Haz el cuarto círculo naranja-rojo.

  • Color de fondo: rojo anaranjado

cambiar el circulo naranja

Módulo de texto 5

Haz el quinto módulo morado.

  • Color de fondo: Púrpura # 8e008c

quinto círculo morado

Añadir 5 módulos divisores

Ahora, debajo de cada módulo de texto, agregue un módulo divisor.

agrega un divisor debajo de cada círculo

agregar, duplicar y arrastrar divisores

Ajuste la configuración al primer divisor en consecuencia.

Línea

Dale un color al divisor.

  • Color de línea: verde # 2f7713

hacer el primer divisor verde

Dimensionamiento

Ajusta el ancho.

  • Ancho del divisor: 4px
  • Ancho: 13vw

ajustar el ancho del divisor

Espaciado

Agregue un valor de margen superior.

  • Margen superior:
    • Escritorio: 7vw
    • Tableta + Teléfono: 5vw

ajustar el ancho del divisor 1

Transformar

Gire el divisor para hacerlo vertical.

  • Transformar Rotar: 90 grados en La primera opción

hacer vertical el divisor

Extender la configuración del divisor

Use la opción extender estilos para diseñar los otros divisores.

  • Primero, haga clic en los puntos a la derecha del módulo divisor y elija "Extender estilos de divisor".
  • Luego, en la ventana emergente, haga clic en "En todo momento" y seleccione "Esta sección".

extendiendo estilos de divisor

aplicar estilos de divisor a la sección

Unir los colores

Divisor 2

Haz el segundo divisor amarillo.

  • Color de línea: amarillo # f2e200

hacer el divisor amarillo

Divisor 3

Haz el tercer divisor naranja.

  • Color de línea: naranja # f2b100haz el divisor naranja

Divisor 4

Haz el cuarto divisor rojo anaranjado.

  • Color de línea: naranja rojo # ef4a21

hacer el divisor rojo anaranjado

Divisor 5

Haz el quinto divisor morado.

  • Color de línea: púrpura # 8e008c

ajuste divisor morado

Agregar fila # 2

Agregue una nueva fila de una columna.

agregar una fila para un módulo de imagen

Antes de agregar el módulo de imagen, ajuste la configuración de la fila.

Dimensionamiento

Primero, ajuste el tamaño.

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho Máx .: 100%

ajustar la última fila

Visibilidad

Entonces, la visibilidad.

  • Desbordamiento horizontal y vertical: visible

ajustar la visibilidad de la última fila

Añadir módulo de imagen

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

agregar un módulo de imagen en la fila

Dimensionamiento

Forzar ancho completo en la imagen.

  • Forzar ancho completo: sí

hacer imagen de ancho completo

Distancia entre filas

Es hora del toque final. Abra la configuración de la fila # 1 nuevamente y agregue un margen superior e inferior.

  • Margen superior: 7vw
  • Margen inferior:
    • Escritorio: -24vw
    • Tableta: -31vw
    • Teléfono: -35vw

margen toques finales

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Ejemplo 1

Escritorio

Vista previa de marcadores de imagen con coche

Móvil

marcador de imagen móvil 1.

Ejemplo # 2

Escritorio

Vista previa del marcador de imagen de jugos

Móvil

marcadores de imagen móvil 2

¡Eso es un envoltorio!

En esta publicación, le mostramos cómo crear dos diseños de marcadores de imagen diferentes. Utilizamos las opciones de columna para mantener juntas las columnas de texto y los divisores. Esperamos que estos diseños lo inspiren a crear sus propios diseños de marcadores de imagen. Recuerde utilizar las opciones de traducción de transformación dentro 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.