¿Cómo utilizar Image, Figure y Svg Icon en el Editor de bloques de Waclis?

El Editor de bloques de Waclis cuenta con diferentes componentes para incorporar contenido visual dentro de una Página web.

Entre los principales se encuentran:

Componentes → Base → Image

y dentro de:

Componentes → Elementos

encontrarás:

• Figure

• Svg Icon

Aunque los tres permiten incorporar elementos visuales, tienen finalidades diferentes.

En este tutorial aprenderás:

• cuándo utilizar una Image;

• cuándo puede resultar más apropiado Figure;

• para qué sirve Svg Icon;

• cómo reemplazar imágenes;

• cómo configurar Width y Height;

• cómo utilizar Alt correctamente;

• cómo crear imágenes enlazadas;

• qué diferencias existen entre Cover y Contain;

• cómo mantener proporciones;

• cómo adaptar imágenes a celular;

• cómo evitar deformaciones;

• cómo utilizar SVG sin afectar otros iconos;

• cómo trabajar con Classes, IDs y Linked styles;

• qué errores evitar al escribir CSS.

Image, Figure y Svg Icon: ¿cuál utilizar?

Una guía rápida:

Image

Utilízala para:

• fotografías;

• imágenes de productos;

• banners internos;

• logos;

• ilustraciones;

• capturas de pantalla;

• imágenes institucionales;

• cualquier recurso gráfico habitual.

Por ejemplo:

[ FOTOGRAFÍA ]

Figure

Puede utilizarse cuando la imagen forma parte de una unidad visual con mayor contexto.

Conceptualmente:

Figure
├── Image
└── Información asociada

La estructura y las opciones exactas dependerán de la composición utilizada.

Puede resultar apropiado para:

• una fotografía con descripción;

• una imagen editorial;

• una ilustración acompañada de información;

• contenido donde imagen y texto deben mantenerse relacionados.

Svg Icon

Está pensado para iconografía vectorial.

Por ejemplo:

[ ícono ubicación ]

[ ícono teléfono ]

[ ícono envío ]

[ ícono seguridad ]

Los SVG suelen resultar especialmente útiles para iconos porque pueden mantenerse nítidos en diferentes tamaños.

Image no es lo mismo que Background Image

Esta distinción es fundamental.

Puedes tener:

Image

como elemento dentro de la estructura.

O puedes utilizar:

Background Image

como fondo de una:

• Section;

• Card;

• Container;

• otro elemento.

Image

Es un elemento independiente.

Conceptualmente:

<img>

Background Image

Forma parte del estilo del elemento.

Conceptualmente:

background-image: url(...);

¿Cuándo utilizar Image?

Cuando la imagen forma parte del contenido.

Por ejemplo:

NUESTRO PRODUCTO

[ IMAGEN DEL PRODUCTO ]

Descripción...

La imagen aporta información.

¿Cuándo utilizar Background Image?

Cuando la imagen forma principalmente parte del diseño.

Por ejemplo:

┌──────────────────────────────────┐
│                                  │
│        FOTOGRAFÍA DE FONDO       │
│                                  │
│        TÍTULO                    │
│        TEXTO                     │
│        CTA                       │
│                                  │
└──────────────────────────────────┘

No utilices Background Image automáticamente

si la imagen es información importante.

Una fotografía relevante puede necesitar:

• Alt;

• estructura propia;

• comportamiento independiente.

En esos casos puede resultar mejor utilizar Image.

¿Cómo agregar una Image?

Abre:

Componentes → Base

y selecciona:

Image

Después incorpórala dentro de la estructura correspondiente.

Ejemplo

Section
└── Container
    └── Grid Row
        ├── Grid Column
        │   └── Image
        └── Grid Column
            ├── Heading
            └── Paragraph

Utiliza Navigator

Después de agregarla, revisa Navigator para comprobar que la imagen haya quedado en la columna correcta.

Evita imágenes fuera de la estructura esperada

Por ejemplo:

Section
├── Image
└── Container
    └── contenido

puede ser correcto en determinados diseños,

pero si pretendías que Image estuviera dentro del Container:

utiliza Navigator para detectarlo.

Seleccionar una Image

Haz clic sobre la imagen.

Después abre:

Contenido

Dentro de la configuración de Image encontrarás opciones como:

• imagen actual;

• Set Image;

• Width;

• Height;

• Alt;

• Align;

• opciones de Link;

• Enable link;

• Id;

• Class.

Set Image

Utiliza:

Set Image

para reemplazar la imagen actual.

Este es el procedimiento recomendado

No necesitas editar HTML solamente para cambiar la URL de una fotografía.

Reemplaza siempre las imágenes de ejemplo

Antes de guardar comprueba que no quede:

imagen de demostración

de la plantilla prediseñada.

¿Qué imagen debería utilizar?

Dependerá del objetivo.

Producto

Utiliza una imagen donde el producto pueda reconocerse.

Servicio

Puede utilizar:

• fotografía del servicio;

• trabajo realizado;

• imagen representativa.

Quiénes somos

Puede utilizar:

• equipo;

• instalaciones;

• empresa;

• actividad real.

Portafolio

Utiliza preferentemente imágenes reales del proyecto cuando sea posible.

Banner

Necesita una composición que funcione también con recortes responsive.

No utilices una imagen únicamente porque es atractiva

Debe estar relacionada con el contenido.

Calidad de imagen

La imagen debería tener resolución suficiente para el tamaño en el que será mostrada.

Imagen demasiado pequeña

Si una fotografía de:

300 × 200 px

se utiliza ocupando gran parte de una pantalla desktop,

puede verse:

• borrosa;

• pixelada.

Imagen excesivamente grande

Una fotografía original enorme puede tener un peso innecesario.

Por ejemplo:

6000 × 4000 px

para una Card de:

350 px

puede resultar excesiva.

Busca equilibrio

Necesitas:

calidad suficiente

sin:

peso innecesario.

Peso y rendimiento

Una página con:

20 imágenes pesadas

puede tardar considerablemente más en cargar.

Esto es especialmente importante en

• Galerías;

• Portafolio;

• Equipo;

• Productos destacados;

• Servicios.

Optimiza las imágenes antes de utilizarlas cuando sea necesario

Sin sacrificar la calidad visual requerida.

Proporción de imagen

Una imagen posee una relación entre:

• ancho;

• altura.

Por ejemplo:

1200 × 800

tiene una proporción diferente a:

800 × 1200

Horizontal

┌──────────────────────────┐
│                          │
│          IMAGEN          │
│                          │
└──────────────────────────┘

Vertical

┌───────────────┐
│               │
│               │
│    IMAGEN     │
│               │
│               │
└───────────────┘

Cuadrada

┌────────────────┐
│                │
│     IMAGEN     │
│                │
└────────────────┘

No fuerces una proporción incorrecta

Este es uno de los errores más comunes.

Ejemplo

Imagen original:

1200 × 800

Si la fuerzas a:

300 × 300

sin controlar cómo se adapta,

puede verse deformada.

Deformación

Por ejemplo, una persona puede verse:

más ancha

o:

más alta

de lo real.

Para evitarlo

debes trabajar correctamente con:

• Width;

• Height;

• proporción;

• object-fit cuando corresponda.

Width

La opción:

Width

permite controlar el ancho de la imagen.

Height

La opción:

Height

permite controlar su altura.

No necesitas definir ambos siempre

Si una imagen debe mantener su proporción natural, puede ser preferible controlar el ancho y permitir que la altura se adapte.

Conceptualmente

width: 100%;
height: auto;

es una solución habitual para imágenes responsive.

Pero no copies esta regla globalmente

Debes aplicarla únicamente donde corresponda.

Width 100 %

Cuando una imagen debe ocupar todo el ancho de su columna:

Grid Column
└── Image → 100 %

puede ser adecuado.

Esto permite que se adapte al contenedor

Evita Width fijo demasiado grande

Por ejemplo:

width: 900px;

si la columna puede tener:

320 px

en celular.

Puede generar desbordamiento.

Height fija

Puede utilizarse cuando necesitas crear un marco visual uniforme.

Por ejemplo, varias Cards:

[ IMAGE ] [ IMAGE ] [ IMAGE ]

con:

misma altura

Pero en ese caso debes definir cómo se adapta la imagen

Aquí aparecen dos conceptos muy importantes:

Cover

y:

Contain

¿Qué es Cover?

Conceptualmente:

object-fit: cover;

hace que la imagen llene completamente el área disponible.

Ejemplo

Marco:

┌──────────────────────┐
│                      │
│      IMAGEN          │
│    LLENA TODO        │
│                      │
└──────────────────────┘

Ventaja

No quedan espacios vacíos.

Desventaja

Parte de la imagen puede recortarse.

¿Cuándo utilizar Cover?

Puede funcionar muy bien para:

• fotografías;

• Cards;

• Portafolio;

• Equipo;

• categorías;

• banners;

• servicios con imágenes.

Ejemplo

Tres fotografías de diferentes proporciones:

[ horizontal ]
[ vertical ]
[ cuadrada ]

pueden mostrarse dentro de tres marcos iguales utilizando Cover.

Pero comprueba el recorte

Por ejemplo, Cover puede cortar:

• rostro;

• producto;

• logo;

• texto incorporado en una imagen.

¿Qué es Contain?

Conceptualmente:

object-fit: contain;

hace que el contenido completo quede visible dentro del área.

Ejemplo

┌──────────────────────┐
│                      │
│    [ PRODUCTO ]      │
│                      │
└──────────────────────┘

Puede quedar espacio alrededor.

Ventaja

La imagen completa permanece visible.

Desventaja

Puede generar:

• espacios;

• diferencias visuales entre imágenes.

¿Cuándo utilizar Contain?

Puede resultar especialmente útil para:

• productos;

• logotipos;

• packaging;

• piezas gráficas;

• capturas;

• documentos;

• elementos donde no quieres recortar nada.

Ejemplo producto

Si tienes:

una botella

y utilizas Cover:

podrías cortar:

• tapa;

• base.

Con Contain

el producto puede mantenerse completo.

Cover vs Contain: regla rápida

FOTOGRAFÍA
→ Cover suele funcionar bien

PRODUCTO COMPLETO
→ Contain suele funcionar bien

LOGOTIPO
→ Contain suele ser apropiado

RETRATO
→ Cover puede funcionar

No es una regla absoluta

Siempre debes revisar el resultado real.

¿Dónde configuro Cover o Contain?

Dependiendo de la estructura, puede requerir una personalización mediante CSS.

Por ejemplo:

.mi-card .card-image {
    width: 100%;
    height: 280px;
    object-fit: cover;
}

Contain

.mi-producto .producto-image {
    width: 100%;
    height: 280px;
    object-fit: contain;
}

Estas Classes son ejemplos

No representan nombres obligatorios del Editor de bloques.

Nunca apliques esto globalmente sin necesidad

Por ejemplo:

img {
    object-fit: cover;
}

podría afectar:

• logotipo;

• productos;

• banners;

• mapas;

• iconos que utilicen imágenes;

• otras secciones.

Este es uno de los errores más importantes

Utiliza siempre un scope.

Por ejemplo

.servicios-section .servicio-image {
    object-fit: cover;
}

O:

.productos-destacados .producto-image {
    object-fit: contain;
}

Alt: ¿qué significa?

Dentro de Image encontrarás:

Alt

Este texto describe el contenido de la imagen cuando corresponde.

Ejemplo

Imagen:

fotografía de un showroom

Alt:

Showroom de la empresa con exhibición de productos

Otro ejemplo

Imagen:

producto

Alt:

Botella térmica de acero inoxidable

Otro ejemplo

Retrato:

María González, directora comercial

Evita Alt como

imagen1

foto

img-final

Alt no es el nombre del archivo

Debe describir la imagen.

No sobrecargues Alt

No necesitas:

Fotografía profesional extremadamente hermosa de nuestro excelente equipo...

Sé descriptivo y directo.

Imagen decorativa

No todas las imágenes necesitan comunicar información independiente.

Si una imagen es puramente decorativa, su tratamiento puede ser diferente según la estructura.

No inventes un Alt lleno de palabras comerciales

solo para completar el campo.

Alt y SEO

El Alt debería describir la imagen.

No lo utilices para introducir listas artificiales de palabras clave.

Por ejemplo evita

comprar productos baratos productos empresas ofertas Argentina...

Prioriza claridad.

Align

La configuración de Image incluye:

Align

que permite controlar su alineación según las opciones disponibles.

Puede utilizarse para alinear una imagen

• izquierda;

• centro;

• derecha;

según la estructura.

No utilices Align para solucionar una mala Grid

Por ejemplo, si necesitas:

[ IMAGE ][ TEXT ]

utiliza:

Grid Row

con dos columnas.

No intentes colocar la imagen a la izquierda solamente mediante Margin o Align

si realmente forma parte de un layout de columnas.

Image con Link

La configuración de Image incluye una sección:

Link

con:

Enable link

Esto permite convertir una imagen en un acceso hacia otro contenido cuando corresponde.

Ejemplos

Una imagen de categoría puede enlazar a:

Categoría Productos

Una imagen de proyecto

puede enlazar a:

Detalle del proyecto

Un banner visual

puede enlazar a:

Campaña

No hagas una imagen clicable sin que exista una razón

Imagen que parece solamente decorativa

pero inesperadamente abre otra página puede generar confusión.

Si la imagen es clicable

intenta que el contexto lo comunique.

Por ejemplo

[ IMAGEN ]

Ver categoría

Imagen dentro de un Link existente

Antes de activar:

Enable link

revisa Navigator.

Podría existir ya una estructura:

Link
└── Image

Si agregas otro Link

puedes terminar generando una estructura de enlaces innecesaria o incorrecta.

Utiliza Navigator antes de crear Links adicionales

Link completo de una Card

Una Card puede estar estructurada:

Link
└── Card
    ├── Image
    ├── Heading
    └── Paragraph

En ese caso

la Image ya forma parte de una unidad clicable.

No necesitas habilitar otro Link en la imagen.

Prueba siempre el destino

Después de guardar:

Ver página → hacer clic → comprobar URL

Clonar una Image

Puedes clonar una Image para mantener:

• dimensiones;

• Class;

• estilo.

Pero después debes revisar

• Set Image;

• Alt;

• Link;

• ID.

Ejemplo

Original:

Image:
Producto A

Alt:
Producto A

Link:
Producto A

Después de clonar para Producto B

debes obtener:

Image:
Producto B

Alt:
Producto B

Link:
Producto B

No cambies solamente la fotografía.

ID después de clonar

Si la imagen original tiene:

id="imagen-producto-a"

la copia debería utilizar otro ID.

Los IDs deben ser únicos.

Classes compartidas

Puede ser totalmente correcto mantener:

producto-image

en todas las imágenes de una grilla.

Esto permite aplicar

.producto-image {
    object-fit: contain;
}

dentro de un scope adecuado.

Linked styles

Si diferentes imágenes comparten una Class, Waclis puede mostrar:

Linked styles

Eso puede ser deseable.

Por ejemplo:

Imagen A
Imagen B
Imagen C

comparten:

portfolio-image

Así mantienen:

• misma altura;

• misma proporción;

• mismo Border radius.

No agregues IDs individuales solo para evitar estilos compartidos.

Excepción

Si una imagen necesita un tratamiento particular:

class="portfolio-image imagen-especial"

puede conservar el estilo general.

Figure: ¿cuándo utilizarlo?

Dentro de:

Componentes → Elementos

encontrarás:

Figure

Figure puede resultar útil cuando quieres tratar una imagen como una unidad de contenido más estructurada.

Conceptualmente puede representar:

[ IMAGEN ]

Descripción asociada

Ejemplo editorial

[ fotografía del proyecto ]

Vista general del proyecto terminado.

Ejemplo institucional

[ fotografía histórica ]

Primera sede de la empresa.

Image vs Figure

Utiliza Image cuando:

solamente necesitas la imagen.

Utiliza Figure cuando:

imagen y contexto deben presentarse como una unidad.

La estructura exacta puede variar

Después de insertar Figure:

1. selecciónalo;

2. revisa Navigator;

3. abre Contenido;

4. identifica los elementos que lo forman.

No asumas que todos los Figure tienen exactamente la misma composición

Figure y descripción

Si la composición utilizada incluye un texto asociado, ese contenido debería explicar algo relevante sobre la imagen.

Ejemplo

[ imagen ]

Proyecto realizado en 2026 para una empresa del sector industrial.

Evita

Imagen ilustrativa

si puedes aportar información más útil.

Figure no sustituye Alt

Aunque exista un texto visible debajo de la imagen:

revisa también Alt cuando corresponda.

El texto visible y Alt cumplen funciones diferentes.

Figure en Portafolio

Puede resultar útil para presentar:

Proyecto
+
descripción visual

Figure en Blog

Puede utilizarse para una imagen acompañada de contexto editorial.

Figure en Timeline

Puede servir para:

fotografía histórica
+
referencia

según la estructura.

Figure en Galería

No necesitas convertir cada fotografía de una Galería en Figure si la sección ya posee su propia estructura.

Evita complejidad innecesaria.

Clonar Figure

Si debes crear una segunda unidad:

utiliza Navigator para seleccionar Figure completo.

No clones solamente Image

si quieres conservar también su información asociada.

Después revisa

• imagen;

• Alt;

• texto;

• Links;

• IDs.

Eliminar Figure

Selecciona la unidad completa.

Recuerda:

Waclis no solicita confirmación.

Si eliminas algo incorrecto:

Deshacer

Svg Icon: ¿qué es?

Dentro de:

Componentes → Elementos

encontrarás:

Svg Icon

Un SVG es un recurso gráfico vectorial.

¿Qué ventaja tiene?

Puede mantenerse nítido en diferentes tamaños.

Por ejemplo:

16 px

32 px

64 px

sin pixelarse como podría hacerlo una imagen raster de baja resolución.

Por eso es especialmente adecuado para

• iconos;

• símbolos;

• elementos gráficos simples.

Ejemplos

ubicación

teléfono

email

carrito

seguridad

envío

Svg Icon vs Image

SVG Icon:

símbolo gráfico.

Image:

fotografía, ilustración o imagen general.

No utilices SVG Icon para una fotografía

No utilices una fotografía pequeña para representar un icono

si existe un recurso vectorial adecuado.

Svg Icon vs Font Icon

Dentro de Elementos también existe:

Font Icon

Ambos pueden utilizarse para iconografía.

La diferencia técnica de implementación puede variar

pero desde el punto de vista del diseño:

ambos sirven para incorporar símbolos visuales.

¿Cuál utilizar?

Dependerá de:

• recurso disponible;

• diseño;

• iconografía utilizada en la sección.

Mantén consistencia

Si una sección utiliza SVG lineales:

evita mezclarlos con:

• emojis;

• fotografías;

• iconos 3D;

sin una razón.

Ejemplo coherente

[ SVG ] Rapidez
[ SVG ] Seguridad
[ SVG ] Soporte

Ejemplo poco coherente

[ emoji ] Rapidez
[ foto ] Seguridad
[ SVG ] Soporte

Icono no sustituye el texto

Un símbolo puede ayudar, pero no debería ser la única forma de comprender contenido importante.

Por ejemplo

[ reloj ]

Atención de lunes a viernes

es más claro que:

[ reloj ]

sin explicación.

Iconos decorativos

Pueden utilizarse como apoyo.

No agregues un icono a cada línea simplemente porque puedes hacerlo

Demasiados símbolos generan ruido.

Tamaño de Svg Icon

Selecciona el componente y revisa las opciones disponibles en:

Contenido

y:

Estilo

Las opciones exactas pueden depender de la estructura utilizada.

Para personalizaciones avanzadas puedes trabajar mediante Classes.

Conceptualmente:

feature-icon

Después:

.mi-seccion .feature-icon {
    width: 40px;
    height: 40px;
}

cuando corresponda a la estructura real.

No utilices globalmente

svg {
    width: 40px;
    height: 40px;
}

Este selector puede afectar

• iconos sociales;

• mapas;

• controles;

• componentes;

• otros SVG de la Página web.

Este es un error muy frecuente

Utiliza siempre un scope.

Por ejemplo

.beneficios-section .feature-icon {
}

Color de SVG

Dependiendo de cómo esté construido el SVG, puede ser posible personalizar su color mediante las opciones de estilo o CSS.

Pero no todos los SVG responden exactamente igual

Algunos pueden utilizar internamente:

• fill;

• stroke;

• colores propios.

No asumas que cambiar Text Color necesariamente modificará cualquier SVG

Revisa el resultado.

Si necesitas CSS avanzado

primero inspecciona la estructura específica.

Evita aplicar globalmente

svg path {
    fill: red;
}

porque podrías modificar iconos en toda la Página web.

Mejor limitarlo

Conceptualmente:

.mi-seccion .feature-icon path {
}

si realmente corresponde.

No elimines atributos internos del SVG

si no comprendes su función.

SVG y responsive

Los iconos deberían mantener un tamaño proporcional.

Desktop

Por ejemplo:

48 px

Mobile

puede mantenerse o reducirse ligeramente.

No necesitas:

120 px

en móvil solamente porque existe espacio.

El icono debe acompañar al contenido, no dominarlo.

SVG dentro de una Card

Ejemplo:

╭─────────────────────────╮
│                         │
│          [ SVG ]        │
│                         │
│       SEGURIDAD         │
│                         │
│ Texto...                │
│                         │
╰─────────────────────────╯

Mantén

• misma posición;

• tamaño similar;

• misma lógica visual.

Contenedor de icono

Puedes crear:

( SVG )

dentro de un círculo.

Esto puede ayudar a uniformar iconos con diferentes proporciones.

Ejemplo conceptual

.mi-seccion .icon-wrapper {
    width: 56px;
    height: 56px;
    border-radius: 50%;
}

El wrapper controla el marco

y el SVG puede mantenerse dentro.

No necesitas modificar internamente el SVG solo para crear un círculo

Estiliza el contenedor.

Svg Icon con Link

Si el icono debe funcionar como enlace:

puedes utilizar una estructura:

Link
└── Svg Icon

Por ejemplo

• red social;

• contacto;

• navegación.

Utiliza Navigator para comprobar

qué elemento controla:

• icono;

• URL.

Cambiar SVG no cambia automáticamente el Link

Mismo principio que en Social icons.

Ejemplo

Original:

LinkedIn SVG
→ LinkedIn

Lo clonas y cambias a:

Instagram SVG

pero podría continuar:

→ LinkedIn

hasta que cambies el Link.

Siempre revisa

ICONO
+
URL

Imágenes responsive

Una imagen que funciona en desktop no necesariamente funciona igual en celular.

Ejemplo

Desktop:

[ persona a la derecha ][ espacio para texto ]

Mobile

si utiliza Cover:

[ solamente espacio ]

podría cortar a la persona.

Por eso revisa siempre la composición real.

Vista móvil del toolbar

Los iconos superiores de:

• teléfono;

• tablet;

• desktop;

permiten previsualizar.

No modifican automáticamente

• Width;

• Height;

• Grid;

• visibilidad.

Debes ajustar realmente la estructura cuando sea necesario.

Imagen dentro de Grid

Desktop:

[ IMAGE ][ TEXT ]

Mobile:

[ IMAGE ]

[ TEXT ]

Utiliza Grid Row para controlar esta distribución.

No reduzcas la imagen a:

80 px

solamente para mantener dos columnas estrechas.

Apila el contenido cuando corresponda.

Orden en móvil

Desktop:

[ IMAGE ][ TEXT ]

puede funcionar.

Otra sección:

[ TEXT ][ IMAGE ]

En móvil podrías terminar:

IMAGE
TEXT

TEXT
IMAGE

Esto puede ser correcto o no

dependiendo del recorrido.

Revisa el orden estructural mediante Navigator.

No confíes únicamente en la posición visual desktop.

Imágenes de ancho completo

Una imagen puede ocupar:

100 % de la columna

Pero eso no significa necesariamente:

100 % de la pantalla

Si la Section utiliza Container Boxed

la imagen estará limitada por ese Container.

Si quieres una composición amplia

revisa:

Section → Container width

con las opciones disponibles:

• Boxed;

• Full.

No fuerces una imagen fuera del Container con Width exagerado

Imagen como banner

Una Image horizontal puede utilizarse como pieza visual.

Pero si necesitas:

• texto encima;

• Overlay;

• CTA;

puede resultar más apropiado utilizar:

• Banner;

• Background Image;

• una composición específica.

No conviertas cualquier Image en Banner mediante posiciones absolutas si existe una estructura más sencilla.

Imágenes con texto incorporado

Por ejemplo, una imagen que ya contiene:

NUEVA COLECCIÓN
20 % OFF
VER MÁS

tiene varias limitaciones.

El texto no puede adaptarse fácilmente

• mobile;

• accesibilidad;

• cambios de campaña;

• traducciones.

Y un botón dibujado

[ VER MÁS ]

dentro de la imagen no es un Button real.

Siempre que sea posible

utiliza:

Image / Background
+
Heading
+
Paragraph
+
Button

como elementos independientes.

Esto permite editar cada parte.

Logos

Los logos suelen necesitar un tratamiento diferente a las fotografías.

En general

Contain

puede resultar más apropiado.

Evita Cover

si recorta:

• símbolo;

• texto;

• slogan.

No deformes un logo

Este error es especialmente visible.

Ejemplo incorrecto

Logo original horizontal:

████████████████

forzado a cuadrado:

██████
██████

Mantén su proporción.

Logos con diferentes proporciones

En un carrusel de marcas puedes utilizar:

marco común
+
Contain

Así:

• logos anchos;

• logos altos;

pueden convivir sin deformarse.

Productos

Para imágenes de producto suele ser importante mostrarlo completo.

Por ejemplo

[ zapatilla completa ]

Cover puede cortar:

• punta;

• talón.

Contain puede ser mejor.

El fondo del marco

puede utilizarse para manejar el espacio restante.

Personas

Retratos suelen funcionar bien con Cover.

Pero comprueba:

• rostro;

• cabeza;

• hombros.

No dejes que el recorte corte la cara.

Portafolio

Fotografías de proyectos pueden utilizar Cover para mantener una grilla ordenada.

Pero una captura de Página web

puede necesitar un tratamiento diferente.

Capturas de pantalla

Una captura completa muy alta:

5000 px

dentro de una Card de:

250 px

puede quedar ilegible.

Puede ser mejor utilizar

• recorte;

• mockup;

• vista representativa.

No intentes mostrar absolutamente todo dentro de una miniatura.

Imágenes transparentes

Algunas imágenes pueden tener fondo transparente.

Comprueba cómo funcionan sobre:

• fondo blanco;

• gris;

• oscuro.

Un logo blanco transparente

sobre fondo blanco puede parecer inexistente.

Cambia:

• fondo;

• versión de logo;

según corresponda.

No agregues una sombra excesiva solamente para hacerlo visible

si existe una versión apropiada del recurso.

Border radius en Image

Puedes aplicarlo cuando corresponda.

Por ejemplo:

╭────────────────────╮
│                    │
│      IMAGEN        │
│                    │
╰────────────────────╯

Pero si la Image está dentro de una Card

quizá resulte más apropiado aplicar Border radius al contenedor y controlar:

overflow

Por ejemplo

.mi-card {
    border-radius: 16px;
    overflow: hidden;
}

Esto evita que la imagen sobresalga.

No agregues overflow: hidden indiscriminadamente

porque podría cortar:

• sombras;

• elementos posicionados;

• decoraciones.

Utilízalo sobre el contenedor correcto.

Sombra de imagen

Puede utilizarse para:

• mockups;

• capturas;

• fotografías independientes.

No todas las imágenes necesitan sombra.

Una grilla de productos

puede verse más limpia sin ella.

Border

Puede utilizarse especialmente para imágenes con fondo blanco sobre una página blanca.

Por ejemplo:

captura de una interfaz

puede necesitar un borde suave para diferenciarse.

Imagen con Hover

Puede utilizarse:

normal
↓
hover
↓
zoom sutil

Ejemplo CSS localizado

.portfolio-section .portfolio-image {
    transition: transform .3s ease;
}

.portfolio-section .portfolio-card:hover .portfolio-image {
    transform: scale(1.04);
}

No utilices zoom excesivo

Puede:

• recortar demasiado;

• generar movimiento;

• hacer que parezca inestable.

El contenedor puede necesitar controlar Overflow.

No utilices Hover sobre una imagen no interactiva

si hace pensar que puede abrirse.

Animaciones

Puedes utilizar:

Avanzado → Animate on scroll

sobre:

• Image;

• Figure;

• contenedor;

• Card.

Utiliza efectos moderados.

Una imagen no necesita

girar
rebotar
aumentar
desplazarse

simultáneamente.

La animación debe complementar el contenido.

Clonar imágenes dentro de una Galería

Selecciona la unidad correcta.

Una estructura puede ser:

Gallery Item
└── Link
    └── Image

Si quieres crear otra unidad completa

no clones solamente Image.

Utiliza Navigator para seleccionar:

Gallery Item

cuando corresponda.

Lo mismo aplica a

• Portafolio;

• Servicios;

• Equipo;

• Contenidos destacados.

Eliminar Image

Recuerda:

Waclis no solicita confirmación.

Si eliminas Image de una Card

puedes dejar:

Heading
Paragraph
Button

sin recurso visual.

Eso puede ser intencional

o un error.

Si deseas eliminar toda la Card

selecciona el contenedor completo.

Deshacer

Si eliminas el nivel incorrecto:

Deshacer

inmediatamente.

CSS global sobre img: uno de los errores más peligrosos

Supongamos que quieres corregir fotografías de un Portafolio y utilizas:

img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

Esta regla puede afectar muchas imágenes

Por ejemplo:

• logo;

• productos;

• iconos basados en imágenes;

• banners;

• fotografías del equipo;

• componentes externos.

Resultado

Puedes corregir Portafolio

pero romper:

el logotipo

Solución

Utiliza una Class propia.

Por ejemplo:

.portfolio-section .portfolio-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

Mismo principio con SVG

Evita:

svg {
    width: 50px;
}

Puede alterar:

• iconos;

• mapas;

• controles;

• elementos de navegación.

Mejor

.beneficios-section .beneficio-icon {
    width: 50px;
}

Mismo principio con path

No utilices:

path {
    fill: #000;
}

Eso puede afectar muchos SVG.

Limita siempre el selector.

Cómo crear Classes específicas

Selecciona el elemento y utiliza:

Contenido → General → Class

Por ejemplo:

portfolio-image

Sobre el contenedor raíz puedes utilizar:

portfolio-section

Después CSS:

.portfolio-section .portfolio-image {
}

Esto reduce el riesgo de afectar otras secciones.

ID para una imagen única

Puedes utilizar:

id="imagen-principal-nosotros"

si necesitas una personalización específica.

No utilices el mismo ID en varias imágenes.

Class para comportamiento compartido

Por ejemplo:

team-photo

en:

• María;

• Juan;

• Lucía.

Todas pueden compartir:

.team-section .team-photo {
    object-fit: cover;
}

Esto es preferible a crear tres IDs para aplicar exactamente lo mismo.

Linked styles en Image

Si una imagen comparte una Class con otras, los cambios de Estilo pueden afectar varias.

Por ejemplo

.product-image

en seis Cards.

Cambiar Border radius en una

puede reflejarse en las demás.

Esto puede ser correcto

porque deseas consistencia.

Si necesitas una excepción

utiliza:

product-image featured-image

No elimines automáticamente la Class base.

Figure y Linked styles

Mismo principio.

Varias Figure pueden compartir estilos.

Svg Icon y Linked styles

También.

Por ejemplo

todos los iconos de una sección pueden compartir:

feature-icon

Esto permite cambiar:

• tamaño;

• color;

• espacio;

de manera consistente.

Responsive mediante CSS

Por ejemplo:

.mi-seccion .hero-image {
    width: 100%;
    height: 480px;
    object-fit: cover;
}

@media (max-width: 768px) {
    .mi-seccion .hero-image {
        height: 300px;
    }
}

Estos valores son ilustrativos

No existe una altura universal.

Elige según:

• contenido;

• proporción;

• composición.

No copies 480px

solo porque aparece en un ejemplo.

Responsive sin CSS

En muchos casos puedes resolver la mayor parte del comportamiento utilizando:

• Grid Row;

• Width;

• estructura;

• tamaño de columnas.

Utiliza CSS solamente cuando necesites ajustes adicionales.

Background Image responsive

Dentro de Estilo existe:

Background Image

con opciones como:

• Image;

• Set Image;

• Repeat;

• Size;

• Position x;

• Position y.

Esto es diferente al componente Image.

Si la fotografía está configurada como Background

no intentes modificarla seleccionando una Image que no existe.

Utiliza Navigator y revisa qué elemento tiene el fondo.

Cover en Background Image

Puede utilizarse mediante:

Size

cuando la configuración correspondiente lo permita.

El recorte de Background Image también cambia según la pantalla.

Comprueba especialmente

• desktop;

• tablet;

• celular.

Posición del fondo

Puede ser importante.

Por ejemplo, fotografía:

persona a la derecha

Si el recorte móvil la elimina

puede ser necesario ajustar Position.

No agregues texto crítico dentro de la imagen para compensar.

Imágenes diferentes para mobile

No debería ser la primera solución.

Primero intenta:

• buena composición;

• Position;

• Cover;

• Grid;

• recorte adaptable.

En determinados casos puede ser necesario utilizar composiciones diferentes

pero eso aumenta mantenimiento.

Si duplicas versiones desktop/mobile

deberás mantener:

• ambas imágenes;

• ambos textos;

• Links;

• IDs.

Utiliza una sola estructura responsive cuando sea posible.

Imágenes y Header/Footer

Recuerda que el Editor de bloques trabaja sobre áreas editables de contenido.

El logotipo o imágenes que forman parte estructural del Header o Footer de la plantilla no necesariamente se editan mediante estos componentes.

Si agregas una Image debajo del menú

estás agregando contenido en el área editable.

No estás reemplazando automáticamente el logotipo del Header.

Ejemplo práctico 1: imagen + texto

Queremos:

[ IMAGEN ]

Quiénes somos

Texto...

o desktop:

[ IMAGE ][ TEXT ]

Paso 1

Agrega un Grid Row.

Paso 2

Utiliza dos columnas.

Paso 3

Agrega:

Image

en la primera.

Paso 4

Utiliza:

Set Image

Paso 5

Completa:

Alt

Paso 6

Agrega Heading y Paragraph en la segunda.

Paso 7

Revisa Grid responsive.

Paso 8

Comprueba celular.

Paso 9

Guarda.

Paso 10

Utiliza:

Ver página

Ejemplo práctico 2: fotografías de Equipo

Queremos:

[ FOTO ][ FOTO ][ FOTO ]

con fotografías cuadradas.

Puede utilizarse una Class:

team-photo

CSS conceptual:

.team-section .team-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

Después revisa cada rostro.

No aceptes automáticamente el recorte.

Ejemplo práctico 3: productos con Contain

Queremos:

[ PRODUCTO ][ PRODUCTO ][ PRODUCTO ]

sin cortar ningún producto.

Class:

product-image

CSS:

.featured-products .product-image {
    width: 100%;
    height: 280px;
    object-fit: contain;
}

Comprueba que:

• todos los productos se vean completos;

• el espacio vacío sea aceptable.

Ejemplo práctico 4: logos

[ LOGO ][ LOGO ][ LOGO ][ LOGO ]

Mantén:

• mismo marco;

• Contain;

• espacio suficiente.

No deformes logos para hacerlos iguales.

Ejemplo práctico 5: SVG de Beneficios

[ SVG ]
Integración

[ SVG ]
Automatización

[ SVG ]
Reportes

Mantén:

• mismo tamaño de contenedor;

• misma familia visual;

• mismo color si corresponde.

No modifiques globalmente todos los SVG del sitio.

¿Qué hacer si una imagen se ve estirada?

Revisa:

• Width;

• Height.

Si ambos están forzando una proporción diferente a la original

corrige.

Puedes utilizar:

height: auto

cuando necesitas conservar proporción.

O utilizar:

• Cover;

• Contain;

si la imagen debe ocupar un marco fijo.

¿Qué hacer si la imagen queda cortada?

Probablemente estés utilizando Cover o una estructura equivalente.

Opciones

• cambiar imagen;

• cambiar encuadre;

• modificar Height;

• utilizar Contain;

• revisar Position si es Background.

¿Qué hacer si queda espacio alrededor?

Puede deberse a Contain.

Si necesitas llenar el marco:

considera Cover.

Pero no sacrifiques contenido importante.

¿Qué hacer si la imagen sale de la columna?

Revisa:

• Width;

• Min Width;

• Margin;

• Grid.

Evita Width fijo mayor al contenedor.

¿Qué hacer si provoca scroll horizontal?

Mismo procedimiento.

No utilices overflow-x: hidden globalmente como primera solución.

¿Qué hacer si la imagen funciona en desktop pero se corta en móvil?

Revisa:

• Cover;

• Height;

• Position;

• Grid.

Comprueba qué parte de la imagen es realmente importante.

¿Qué hacer si el producto se corta?

Considera Contain.

¿Qué hacer si las fotos de Portafolio tienen diferentes alturas?

Utiliza:

• marco común;

• Height o aspect ratio coherente;

• Cover.

¿Qué hacer si los logos tienen diferentes tamaños visuales?

Utiliza:

• mismo contenedor;

• Contain;

• Padding.

No aumentes individualmente cada logotipo hasta que “parezca” igual sin una regla común.

¿Qué hacer si el logo se deforma?

Elimina las dimensiones que fuerzan una proporción incorrecta.

Mantén Width y Height coherentes.

¿Qué hacer si al cambiar Border radius cambian todas las imágenes?

Comprueba:

Linked styles

Si comparten una Class:

es normal.

Si quieres cambiar una sola:

agrega una Class adicional o ID.

¿Qué hacer si al cambiar una imagen también cambia otra?

Cambiar el archivo desde Set Image debería aplicarse al elemento seleccionado.

Si observas un comportamiento inesperado:

1. utiliza Navigator;

2. confirma qué elemento seleccionaste;

3. comprueba si estás editando un elemento padre o una configuración compartida.

¿Qué hacer si la Image es clicable y no quiero que lo sea?

Selecciona la Image y revisa:

Link → Enable link

o revisa mediante Navigator si existe un Link envolvente.

No elimines el Link equivocado

si toda la Card depende de él.

¿Qué hacer si quiero que la Image sea clicable?

Antes verifica que no exista ya un Link padre.

Después utiliza la configuración adecuada.

¿Qué hacer si el Link abre el destino anterior después de clonar?

Actualiza la URL correspondiente.

¿Qué hacer si Alt sigue describiendo la imagen anterior?

Actualiza Alt.

Esto es especialmente frecuente al clonar.

¿Qué hacer si tengo una Image decorativa?

Evalúa si realmente necesita una descripción o si puede tratarse de manera puramente visual según la estructura y finalidad.

No rellenes Alt con contenido irrelevante.

¿Qué hacer si Figure tiene elementos que no necesito?

Utiliza Navigator para identificar la estructura.

Puedes eliminar el elemento innecesario manteniendo la unidad correctamente organizada.

Recuerda

eliminar no solicita confirmación.

Utiliza Deshacer si seleccionaste un nivel incorrecto.

¿Qué hacer si Svg Icon aparece demasiado grande?

Revisa:

• Width;

• Height;

• Font size si la implementación lo utiliza;

• contenedor;

• Classes.

¿Qué hacer si se ve pequeño?

Mismo procedimiento.

No modifiques todos los SVG globalmente.

¿Qué hacer si el SVG no cambia de color?

Puede depender de su estructura interna.

Revisa si utiliza:

• fill;

• stroke.

No agregues reglas globales sobre:

svg
path

Limita la personalización al componente específico.

¿Qué hacer si cambiar SVG rompe otros iconos?

Probablemente utilizaste un selector demasiado general.

Por ejemplo:

svg path {
    fill: #000;
}

Sustitúyelo por un selector localizado.

¿Qué hacer si necesito un icono para una nueva Card?

Puedes:

1. clonar la Card completa;

2. seleccionar Svg Icon;

3. revisar las opciones disponibles;

4. reemplazar o configurar el recurso correspondiente;

5. revisar cualquier Link;

6. comprobar tamaño y estilos.

No clones solamente el SVG

si necesitas otra Card completa.

¿Qué hacer si los SVG tienen tamaños distintos?

Utiliza un wrapper común.

Conceptualmente:

Icon Wrapper
└── Svg Icon

Todos los wrappers pueden medir lo mismo.

¿Qué hacer si un SVG es visualmente más ancho?

Puede tener proporciones internas diferentes.

No necesariamente significa que su Width CSS sea distinto.

Ajusta el recurso o su contenedor conscientemente.

¿Qué hacer si quiero una imagen circular?

Puedes aplicar:

Border radius

según el diseño.

Para un círculo real

el marco debería tener proporción cuadrada.

Si aplicas 50 % a:

300 × 180

obtendrás una forma ovalada.

Para retratos circulares

utiliza un área:

1:1

y Cover.

¿Qué hacer si la foto circular corta el rostro?

Ajusta el encuadre.

¿Qué hacer si quiero poner texto encima de Image?

Evalúa primero si la composición debería utilizar:

• Background Image;

• Card con Overlay;

• Banner.

No utilices posiciones absolutas improvisadas si existe una solución estructural más adecuada.

¿Qué hacer si quiero crear un Overlay?

Puedes trabajar sobre una Section o contenedor según la composición.

La configuración de Section dispone de opción:

Overlay

cuando corresponda.

No agregues una imagen semitransparente encima manualmente

si el diseño ya dispone del mecanismo adecuado.

¿Qué hacer si quiero un icono dentro de un botón?

Puede utilizarse una estructura adecuada con:

• Button;

• Svg Icon;

• Font Icon;

según el diseño.

Pero no conviertas cada Button en una estructura compleja si el texto ya es suficiente.

¿Qué hacer si tengo muchas imágenes?

Evalúa si corresponde utilizar:

• Gallery;

• Carousel;

• Slider;

en lugar de agregar Images individualmente.

Image es el componente básico.

Gallery organiza una colección.

Carousel permite recorrer elementos.

Slider da protagonismo a imágenes secuenciales.

Utiliza el nivel de herramienta correcto.

¿Qué hacer si necesito comparar dos imágenes?

Dentro de Elementos existe:

Image Compare

Puede resultar más apropiado que colocar dos Images separadas si el objetivo es una comparación visual interactiva.

Lo veremos dentro de los componentes visuales avanzados.

Utilizar IA para elegir Cover o Contain

Puedes utilizar ChatGPT, Claude o Gemini.

Por ejemplo:

Estoy diseñando una Card en Waclis.

La imagen representa:
[describir]

El marco mide:
[datos]

Necesito decidir entre:
- object-fit: cover;
- object-fit: contain.

Explícame cuál conviene y qué riesgo visual tiene cada opción.

No generes CSS adicional.

IA para generar CSS de Image

Estoy personalizando imágenes dentro de una sección de Waclis.

La sección utiliza:
.mi-seccion

Las imágenes:
.card-image

Necesito:
- ancho 100 %;
- altura de 280 px en desktop;
- 220 px en celular;
- object-fit cover;
- Border radius de 12 px;
- no afectar otras imágenes de la Página web.

Waclis utiliza Bootstrap 4.

No modifiques HTML.
No agregues JavaScript.

Devuélveme solamente CSS limitado a .mi-seccion.

IA para productos con Contain

Tengo imágenes de productos dentro de Cards en Waclis.

La sección:
.productos-section

Las imágenes:
.producto-image

Necesito:
- mostrar siempre el producto completo;
- misma área visual para todas;
- height 300 px;
- object-fit contain;
- centradas;
- responsive;
- no modificar otras imágenes.

No cambies HTML.
No agregues JavaScript.

Devuélveme solamente CSS.

IA para detectar CSS que deforma imágenes

Estas imágenes comenzaron a deformarse después de agregar este CSS:

[pegar CSS]

Busca específicamente reglas sobre:
- img;
- width;
- height;
- min-width;
- max-width;
- object-fit;
- aspect-ratio.

Indícame qué reglas pueden estar causando la deformación.

No reescribas el resto del CSS.

IA para detectar reglas globales peligrosas

Revisa este CSS de una Página web en Waclis:

[pegar]

Identifica selectores demasiado generales que puedan afectar imágenes o SVG en otras secciones, especialmente:
- img;
- svg;
- svg path;
- figure.

No cambies el código todavía.

Solo señala riesgos y explica su alcance.

IA para SVG

Tengo este SVG dentro de una Card en Waclis:

[pegar únicamente SVG]

Necesito entender:
- si utiliza fill;
- si utiliza stroke;
- si tiene Width / Height;
- qué podría impedir cambiar su color mediante CSS.

No modifiques el SVG.

IA para CSS SVG localizado

Tengo un Svg Icon dentro de:

.beneficios-section

El icono utiliza:
.beneficio-icon

Necesito:
- Width 40 px;
- Height 40 px;
- mantener proporción;
- cambiar únicamente este conjunto de iconos;
- no afectar otros SVG de la Página web.

No utilices selectores globales.
No cambies HTML.
No agregues JavaScript.

Devuélveme solamente CSS.

IA para Alt

Tengo estas imágenes para una Página web:

1. [descripción]
2. [descripción]
3. [descripción]

Redacta un Alt breve y descriptivo para cada una.

No agregues palabras clave comerciales.
No inventes detalles que no te proporcioné.

IA para revisar imágenes antes de utilizar Cover

Si la herramienta permite analizar imágenes:

Esta fotografía se utilizará en una Card horizontal con object-fit cover.

Analiza:
- dónde está el elemento principal;
- qué partes podrían quedar recortadas;
- si sería mejor otro encuadre.

No modifiques la imagen.

IA para una composición responsive

Tengo esta sección en Waclis:

Desktop:
[ Image ][ Text ]

Mobile:
quiero Image arriba y Text debajo.

Explícame cómo estructurarlo con:
- Container;
- Grid Row;
- Grid Columns.

No utilices posiciones absolutas.
No generes CSS salvo que sea necesario.

IA para Figure

Quiero presentar una fotografía acompañada de una descripción breve dentro de Waclis.

Explícame cuándo conviene utilizar Figure en lugar de una Image independiente + Paragraph.

No inventes opciones del editor que no estén disponibles.

Buenas prácticas para Image, Figure y Svg Icon

Recomendamos:

• utilizar Image para imágenes de contenido;

• diferenciar Image de Background Image;

• utilizar Figure cuando imagen y contexto deban mantenerse relacionados;

• utilizar Svg Icon para iconografía;

• reemplazar todas las imágenes de ejemplo;

• utilizar imágenes relacionadas con el contenido;

• mantener resolución suficiente;

• evitar archivos innecesariamente pesados;

• respetar proporciones;

• evitar deformaciones;

• utilizar Cover conscientemente;

• utilizar Contain cuando necesites mostrar el recurso completo;

• completar Alt;

• utilizar Navigator;

• revisar Link antes de habilitar otro;

• mantener IDs únicos;

• utilizar Classes para estilos compartidos;

• aprovechar Linked styles;

• limitar CSS a cada sección;

• evitar reglas globales sobre img y svg;

• revisar desktop, tablet y celular;

• comprobar el resultado mediante Ver página.

Errores frecuentes

Utilizar la primera imagen disponible

El recurso debería estar relacionado con el contenido.

Dejar imágenes de ejemplo

Reemplázalas.

Utilizar imágenes demasiado pequeñas

Pueden pixelarse.

Utilizar imágenes enormes sin necesidad

Puede aumentar el peso de la página.

Forzar Width y Height incorrectos

Puede deformar.

No respetar proporción

Mantén relación entre ancho y altura.

Utilizar Cover para logos

Puede recortarlos.

Utilizar Cover para productos que deben verse completos

Considera Contain.

Utilizar Contain en fotografías cuando necesitas llenar todo el marco

Puede dejar espacios.

Utilizar Cover sin comprobar recortes

Revisa cada imagen.

Dejar Alt vacío cuando la imagen aporta información

Descríbela.

Utilizar el nombre del archivo como Alt

Escribe una descripción útil.

Rellenar Alt con palabras clave

Describe la imagen.

Utilizar una imagen con texto incorporado cuando podría ser texto editable

Separa Image y contenido cuando sea posible.

Dibujar un Button dentro de una imagen

No será un Button funcional.

Activar Link cuando ya existe un Link padre

Revisa Navigator.

Clonar una Image y dejar Alt anterior

Actualízalo.

Clonar una Image y dejar Link anterior

Actualízalo.

Duplicar IDs

Mantén IDs únicos.

Clonar solo Image cuando necesitas una Card completa

Selecciona la unidad correcta.

Eliminar Image cuando querías eliminar toda la Card

Utiliza Navigator.

Aplicar img { ... }

Puede afectar toda la Página web.

Aplicar svg { ... }

Puede afectar iconos y Widgets.

Aplicar svg path { ... }

Puede modificar múltiples componentes.

Aplicar Border radius global a imágenes

Limita el scope.

Hacer todos los SVG del mismo tamaño globalmente

Utiliza Classes específicas.

Utilizar iconos con estilos completamente distintos

Mantén coherencia.

Utilizar SVG sin texto cuando su significado no es evidente

Agrega contexto.

Utilizar una fotografía como icono

Utiliza un recurso adecuado.

Deformar el logotipo

Respeta su proporción.

Mantener una imagen de fondo que funciona en desktop pero pierde el sujeto en móvil

Revisa Position y recorte.

Utilizar posiciones absolutas para texto sobre imágenes sin necesidad

Utiliza una estructura apropiada.

Mantener dos columnas demasiado estrechas en celular

Apila el contenido.

No revisar imágenes en Ver página

Comprueba el frontend real.

Flujo recomendado

1. DEFINIR QUÉ RECURSO VISUAL NECESITAS
↓
2. ELEGIR IMAGE / FIGURE / SVG ICON
↓
3. AGREGAR EL COMPONENTE
↓
4. REVISAR NAVIGATOR
↓
5. REEMPLAZAR EL RECURSO
↓
6. CONFIGURAR ALT
↓
7. REVISAR WIDTH / HEIGHT
↓
8. DEFINIR COVER / CONTAIN SI ES NECESARIO
↓
9. REVISAR LINK
↓
10. CONFIGURAR CLASS / ID SI CORRESPONDE
↓
11. REVISAR LINKED STYLES
↓
12. ADAPTAR GRID RESPONSIVE
↓
13. COMPROBAR DESKTOP
↓
14. COMPROBAR TABLET
↓
15. COMPROBAR CELULAR
↓
16. GUARDAR CAMBIOS
↓
17. VER PÁGINA

Checklist antes de finalizar

• Elegí el componente visual adecuado.

• Sé si necesito Image, Figure o Svg Icon.

• No confundí Image con Background Image.

• Reemplacé todas las imágenes de ejemplo.

• El recurso está relacionado con el contenido.

• Tiene resolución suficiente.

• El archivo no es innecesariamente pesado.

• La imagen mantiene su proporción.

• No está deformada.

• Width es adecuado.

• Height es adecuado.

• Utilicé Cover únicamente cuando corresponde.

• Revisé los recortes de Cover.

• Utilicé Contain cuando necesito mostrar la imagen completa.

• El logo no está recortado.

• Los productos se muestran completos cuando corresponde.

• Los rostros no están mal recortados.

• Completé Alt cuando corresponde.

• Alt describe la imagen.

• No utilicé palabras clave artificiales en Alt.

• Revisé Align.

• Revisé si la imagen necesita Link.

• No creé un Link dentro de otro por accidente.

• Probé cualquier imagen enlazada.

• Utilicé Navigator.

• Figure mantiene juntos sus elementos relacionados.

• Los Svg Icon son reconocibles.

• Los iconos mantienen un estilo coherente.

• Los SVG tienen tamaños consistentes.

• No dependí solamente del icono para comunicar información importante.

• Los IDs personalizados son únicos.

• Las Classes compartidas tienen sentido.

• Linked styles tiene el alcance esperado.

• No utilicé CSS global sobre img.

• No utilicé CSS global sobre svg.

• No utilicé CSS global sobre svg path.

• El CSS personalizado está limitado a la sección correcta.

• Desktop se ve correctamente.

• Tablet se ve correctamente.

• Celular se ve correctamente.

• Las imágenes no provocan scroll horizontal.

• La Grid se reorganiza correctamente.

• Los Background Images conservan una composición adecuada.

• No utilicé posiciones rígidas innecesarias.

• Las animaciones son moderadas.

• Guardé los cambios.

• Revisé el resultado mediante Ver página.

En resumen

Los tres componentes cumplen funciones diferentes:

IMAGE
→ imagen habitual

FIGURE
→ imagen presentada como una unidad visual con mayor contexto

SVG ICON
→ iconografía vectorial

Para una Image puedes trabajar desde Contenido con opciones como:

• Set Image;

• Width;

• Height;

• Alt;

• Align;

• Link;

• Id;

• Class.

Uno de los conceptos más importantes es:

COVER
→ llena el marco
→ puede recortar

frente a:

CONTAIN
→ muestra el recurso completo
→ puede dejar espacio

Por ejemplo:

FOTOGRAFÍA
→ Cover puede funcionar bien

PRODUCTO / LOGO
→ Contain puede ser más apropiado

pero siempre debes comprobar el resultado real.

No deformes una imagen simplemente para hacerla coincidir con la Card.

Utiliza:

• proporciones;

• object-fit;

• un marco adecuado.

También recuerda completar Alt cuando la imagen aporta información.

Y cuando una Image es clicable:

comprueba primero en Navigator si ya forma parte de un Link antes de activar otro.

Para SVG, una de las precauciones más importantes es evitar CSS como:

svg {
    ...
}

o:

svg path {
    ...
}

sin limitar el alcance.

Lo mismo aplica a:

img {
    ...
}

Estas reglas pueden modificar recursos de toda la Página web.

Utiliza Classes y scope.

Por ejemplo:

.mi-seccion .card-image {
}

Finalmente:

Guardar Cambios → Ver página → comprobar imágenes → probar Links → revisar desktop, tablet y celular.

Una buena utilización de imágenes e iconos no consiste solamente en que “se vean bien”.

También deben:

• mantener sus proporciones;

• representar correctamente el contenido;

• adaptarse a diferentes pantallas;

• cargar de manera razonable;

• no afectar otros componentes mediante estilos globales.