¿Cómo utilizar Contenidos destacados en el Editor de bloques de Waclis?

La sección Contenidos destacados del Editor de bloques de Waclis permite dar mayor protagonismo a determinados contenidos de tu Página web.

Puedes utilizarla para destacar:

• productos;

• categorías;

• servicios;

• artículos;

• publicaciones;

• páginas internas;

• campañas;

• promociones;

• colecciones;

• recursos;

• novedades;

• guías;

• casos;

• eventos;

• lanzamientos;

• cualquier otro contenido que quieras priorizar.

Dentro del Editor de bloques encontrarás diferentes diseños en:

Secciones → Contenidos destacados

Según la composición elegida, puedes personalizar elementos como:

• imágenes;

• títulos;

• descripciones;

• Cards;

• Links;

• Buttons;

• etiquetas;

• fondos;

• columnas;

• tamaños;

• orden;

• comportamiento responsive.

¿Qué es un Contenido destacado?

Es un contenido al que decides darle mayor visibilidad dentro de una página.

Por ejemplo:

CONTENIDOS DESTACADOS

[ IMAGEN ]
Nueva colección

Conoce nuestros últimos productos.

[ VER COLECCIÓN ]


[ IMAGEN ]
Guía de compra

Descubre qué tener en cuenta antes de elegir.

[ LEER GUÍA ]


[ IMAGEN ]
Servicio corporativo

Soluciones para empresas.

[ CONOCER SERVICIO ]

¿Cuál es el objetivo?

Ayudar al visitante a identificar rápidamente:

¿Qué contenido debería mirar primero?

¿Qué es especialmente importante en este momento?

¿Qué opciones queremos priorizar?

¿Hacia dónde puede continuar?

Destacar implica priorizar

Este concepto es fundamental.

Si una página muestra:

20 contenidos

y todos tienen:

• mismo tamaño;

• mismo color;

• misma posición;

• misma jerarquía;

entonces ninguno se percibe realmente como destacado.

Una sección de destacados debería ayudar a ordenar

Por ejemplo:

CONTENIDO PRINCIPAL

[ CARD GRANDE ]

↓

CONTENIDOS SECUNDARIOS

[ CARD ][ CARD ][ CARD ]

O simplemente seleccionar pocos elementos

[ A ] [ B ] [ C ]

que sean realmente importantes.

No necesitas destacar todo

Antes de crear la sección pregunta:

¿Cuáles son los 3 o 4 contenidos que más nos interesa que el visitante descubra?

Contenidos destacados vs Portafolio

Pueden utilizar Cards similares, pero tienen objetivos diferentes.

Portafolio

Presenta:

trabajos o proyectos realizados.

Por ejemplo:

Proyecto Oficinas ABC

Contenidos destacados

Puede presentar cualquier contenido prioritario.

Por ejemplo:

Nueva categoría de productos

Artículo recomendado

Servicio principal

Campaña vigente

Una Card visualmente similar puede tener significados diferentes

Por eso el contenido define la función.

Contenidos destacados vs Servicios

Servicios

presenta de forma organizada qué ofrece la empresa.

Contenidos destacados

selecciona algunos contenidos porque quieres priorizarlos.

Ejemplo

Servicios:

Diseño
Producción
Instalación
Logística

Destacados:

SERVICIO DESTACADO

Producción para grandes volúmenes

[ CONOCER MÁS ]

No utilices Contenidos destacados para reemplazar toda la sección Servicios

si necesitas explicar el catálogo completo de servicios.

Contenidos destacados vs Características

Características

explica:

qué tiene o qué hace algo.

Contenido destacado

dirige la atención hacia:

algo que quieres priorizar.

Ejemplo

Característica:

Sincronización automática

Contenido destacado:

CONOCE NUESTRA NUEVA INTEGRACIÓN

[ VER MÁS ]

Contenidos destacados vs Banner

Un Banner suele tener:

• un mensaje principal;

• gran protagonismo visual;

• una campaña o acción.

Contenidos destacados suele permitir presentar:

• varios elementos;

• Cards;

• diferentes destinos.

Ejemplo Banner

NUEVA COLECCIÓN

[ CONOCER MÁS ]

Ejemplo Contenidos destacados

NUEVA COLECCIÓN

GUÍA DE PRODUCTOS

SERVICIO CORPORATIVO

Contenidos destacados vs menú de navegación

Esta diferencia también es importante.

Un menú ayuda a navegar por la estructura general de la Página web.

Por ejemplo:

Productos
Servicios
Nosotros
Contacto

Contenidos destacados

debería priorizar contenidos seleccionados.

Por ejemplo:

Lo más nuevo

Nuevo catálogo
Caso destacado
Promoción vigente

Evita reconstruir el menú principal mediante Cards

salvo que exista una decisión de navegación específica.

¿Cuándo conviene utilizar esta sección?

Puede resultar especialmente útil en:

• Home;

• landing pages;

• Blog;

• páginas institucionales;

• Productos;

• Servicios;

• campañas;

• páginas de contenido.

Ejemplo en Home

CONTENIDOS DESTACADOS

[ Nueva colección ]

[ Soluciones para empresas ]

[ Guía de compra ]

Ejemplo en Blog

ARTÍCULOS DESTACADOS

[ artículo ]

[ artículo ]

[ artículo ]

Ejemplo en Productos

CATEGORÍAS DESTACADAS

[ Categoría A ]

[ Categoría B ]

[ Categoría C ]

Ejemplo institucional

CONOCE MÁS SOBRE NOSOTROS

[ Nuestra historia ]

[ Equipo ]

[ Proyectos ]

Ejemplo comercial

RECOMENDADOS

[ Producto / categoría ]

[ Servicio ]

[ Promoción ]

Importante: contenido destacado no significa contenido dinámico automáticamente

Esta aclaración es especialmente importante.

Una Card creada mediante el Editor de bloques puede mostrar:

[ imagen ]
Producto destacado
[ Ver producto ]

pero eso no significa automáticamente que:

• el precio se actualice;

• el stock se actualice;

• el nombre se sincronice;

• la imagen se tome del catálogo;

• el producto desaparezca si se elimina del catálogo.

El Editor de bloques crea contenido visual

Si construyes una Card manualmente, debes considerarla:

contenido editable que puede requerir mantenimiento manual.

No confundas una Card estática con el catálogo dinámico de Waclis

Por ejemplo:

CATÁLOGO DE PRODUCTOS
→ contenido dinámico administrado por Waclis

no es necesariamente lo mismo que:

CARD CREADA EN EDITOR DE BLOQUES
→ contenido diseñado manualmente

Esto es muy importante al destacar productos

Si escribes manualmente:

Producto ABC

$ 50.000

ese precio puede quedar desactualizado si cambia en el catálogo.

Recomendación

Cuando el objetivo sea simplemente dirigir hacia un producto o categoría, puede resultar más seguro utilizar:

Producto ABC

Conoce todos los detalles.

[ VER PRODUCTO ]

y permitir que el precio actualizado se consulte en la ficha correspondiente.

Si decides mostrar un precio manual

deberás mantenerlo actualizado.

Lo mismo ocurre con:

• promociones;

• fechas;

• stock;

• cuotas;

• porcentajes;

• disponibilidad.

Contenido destacado y contenido dinámico pueden convivir

Por ejemplo:

NUEVA COLECCIÓN

[ CARD DESTACADA ]

↓

PRODUCTOS

[ catálogo dinámico ]

La Card funciona como introducción

y el catálogo mantiene el contenido operativo.

¿Cómo agregar Contenidos destacados?

Ingresa al Editor de bloques de la página o área editable donde quieras incorporarlos.

Después abre:

Secciones

y selecciona:

Contenidos destacados

Paso 1: elige una composición

Waclis mostrará los diseños disponibles.

Puedes encontrar alternativas basadas en:

• Cards;

• imágenes;

• columnas;

• composiciones asimétricas;

• contenido principal + secundarios;

• texto + imagen;

• diferentes distribuciones.

Elige principalmente según:

• cantidad de contenidos;

• importancia relativa;

• proporción de imágenes;

• cantidad de texto;

• necesidad de CTA.

No elijas solamente por el diseño de ejemplo

Piensa:

¿Mis contenidos tienen la misma importancia?

¿Uno debería ser más grande?

¿Las imágenes tienen proporciones compatibles?

¿Necesito tres Cards o seis?

Paso 2: agrega la sección

Selecciona la composición deseada.

Después podrás modificar cada contenido.

Paso 3: utiliza Navigator

Una estructura conceptual puede ser:

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

Otra composición podría utilizar

Section
└── Container
    └── Grid Row
        ├── Featured Main
        │   ├── Image
        │   ├── Heading
        │   └── Link
        │
        └── Featured Secondary
            ├── Card
            └── Card

La estructura exacta dependerá del diseño.

Navigator es fundamental

Porque al seleccionar:

Título del contenido

probablemente estés seleccionando únicamente un Heading.

Para:

• clonar;

• eliminar;

• mover;

• cambiar fondo;

• cambiar Hover;

normalmente debes seleccionar la Card completa.

Identifica la unidad

Conceptualmente:

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

Paso 4: define qué quieres destacar

No comiences cambiando colores.

Primero haz una lista.

Por ejemplo:

1. Nueva categoría de productos.
2. Servicio corporativo.
3. Guía de compra.
4. Caso destacado.
5. Promoción temporal.

Después decide cuáles realmente deberían aparecer

Por ejemplo:

Nueva categoría
Servicio corporativo
Guía de compra

¿Por qué?

Porque una selección clara suele funcionar mejor que una colección extensa.

Puedes priorizar según distintos criterios

Por ejemplo:

• relevancia comercial;

• novedad;

• utilidad;

• actualidad;

• temporada;

• estrategia;

• interés del público.

Relevancia comercial

Puedes destacar:

Servicio para empresas

si representa una línea estratégica.

Novedad

Puedes destacar:

Nueva colección 2026

Utilidad

Puedes destacar:

Guía para elegir el producto adecuado

Temporalidad

Puedes destacar:

Campaña Día de...

pero deberás retirarla después.

No mezcles criterios sin pensar

Por ejemplo:

Promoción urgente
Historia de la empresa
Política de privacidad
Instagram
Producto destacado

puede resultar poco coherente.

Intenta que la sección tenga una lógica común

Por ejemplo:

DESTACADOS DEL MES

o:

RECOMENDAMOS

o:

CONOCE MÁS

Paso 5: modifica el Heading general

Puedes utilizar:

Contenidos destacados

Destacados

Te recomendamos

Conoce más

Lo más importante

Novedades

según el contenido.

El título debe ayudar a interpretar la selección

Si son artículos:

Artículos destacados

es mejor que:

Destacados

si quieres ser más específico.

Si son categorías

Categorías destacadas

Si son recursos

Recursos recomendados

Si son servicios

Servicios destacados

Paso 6: agrega una introducción si aporta contexto

Por ejemplo:

Conoce algunos de nuestros contenidos y soluciones más relevantes.

Otro ejemplo

Seleccionamos estos contenidos para ayudarte a encontrar rápidamente la información más importante.

No necesitas una introducción si las Cards se explican solas

Paso 7: reemplaza la imagen

Selecciona:

Image → Contenido → Set Image

Elige una imagen representativa

La fotografía debería ayudar al visitante a anticipar qué encontrará.

Ejemplo: categoría

[ productos representativos ]

EQUIPAMIENTO CORPORATIVO

Ejemplo: artículo

[ imagen relacionada ]

CÓMO ELEGIR...

Ejemplo: servicio

[ imagen del servicio ]

SOLUCIONES PARA EMPRESAS

Evita imágenes puramente decorativas

si no tienen relación con el destino.

La imagen funciona como una promesa visual

Si una Card muestra:

computadoras

pero lleva hacia:

artículos de oficina

puede generar confusión.

Paso 8: completa Alt

Cuando la imagen aporta información utiliza un Alt descriptivo.

Por ejemplo:

Selección de productos de merchandising corporativo

Vista previa de la guía de productos

Evita

imagen1

No necesitas describir toda la Card

Describe la imagen.

Paso 9: Cover vs Contain

La elección dependerá del contenido.

Cover

Puede funcionar bien para:

• fotografías;

• ambientes;

• campañas;

• artículos;

• servicios.

Ventaja:

mantiene Cards uniformes.

Riesgo

Puede recortar contenido.

Contain

Puede resultar mejor para:

• producto completo;

• logotipo;

• packaging;

• pieza gráfica;

• captura.

Riesgo

Puede generar espacio libre.

Utiliza un criterio coherente dentro de una misma grilla

No es obligatorio que todas las imágenes utilicen exactamente el mismo tratamiento, pero una lógica común suele mejorar el diseño.

Paso 10: escribe el título de cada contenido

Debe explicar claramente qué encontrará el visitante.

Ejemplos

Soluciones para empresas

Nueva colección

Guía para elegir tu producto

Casos de éxito

Conoce nuestra historia

Evita títulos ambiguos

Por ejemplo:

Descubre

Más

Especial

sin contexto.

Mejor

Descubre nuestra nueva colección

Títulos breves

Funcionan mejor dentro de una Card.

Si el título necesita cuatro líneas

puede ser demasiado largo para esa composición.

Paso 11: agrega una descripción

Puede explicar por qué ese contenido merece atención.

Por ejemplo:

Conoce nuestras soluciones para proyectos corporativos y grandes volúmenes.

Otro ejemplo

Una guía práctica para comparar materiales, medidas y opciones antes de elegir.

Otro

Descubre una selección de nuestros proyectos más recientes.

No repitas exactamente el título

Título:

Nueva colección

Descripción poco útil:

Conoce nuestra nueva colección.

Mejor

Nuevos productos y opciones para tus próximos proyectos.

si describe realmente el contenido.

Mantén descripciones relativamente breves

Una Card destacada no debería convertirse en un artículo completo.

Paso 12: configura el CTA

Puedes utilizar:

Ver más

Conocer más

Ver productos

Leer artículo

Ver categoría

Conocer servicio

Ver proyecto

Utiliza un CTA específico cuando puedas

Por ejemplo:

Leer guía

es más descriptivo que:

Ver más

Pero mantén consistencia

Si las tres Cards son artículos:

Leer artículo

puede utilizarse en todas.

Si los destinos son diferentes

puedes adaptar:

Ver productos

Conocer servicio

Leer guía

Eso es correcto

porque cada acción representa un destino distinto.

Paso 13: configura la URL

Utiliza Navigator para localizar el:

• Link;

• Button;

• estructura enlazada.

No asumas que cambiar el texto cambia el destino

Por ejemplo:

Button:
Ver nueva colección

puede seguir enlazando a:

categoría anterior

si no actualizas Url.

Siempre revisa:

TÍTULO
↕
CTA
↕
URL

Los tres deben ser coherentes

Enlaces internos

Pueden llevar a:

• Productos;

• categoría;

• Blog;

• página institucional;

• Servicio;

• Contacto;

• proyecto.

Enlaces externos

También pueden utilizarse cuando corresponda.

En ese caso revisa:

Target

y mantén un criterio consistente.

No envíes al visitante a un destino inesperado

Si la Card dice:

Conoce nuestra historia

no debería abrir:

Instagram

salvo que quede claramente indicado.

Cards completamente clicables

Algunas composiciones pueden tener:

Link
└── Card

En esos casos

toda la Card puede dirigir al contenido.

Utiliza Navigator

para identificar si:

• solo el Button es Link;

• la Image está enlazada;

• toda la Card está envuelta por un Link.

No agregues Links anidados

Si toda la Card ya está dentro de un Link, evita colocar otro Link dentro sin comprender la estructura.

Paso 14: jerarquía entre contenidos

Una característica especialmente interesante de Contenidos destacados es que no todos deben tener igual importancia.

Ejemplo

┌──────────────────────────────┐
│                              │
│      CONTENIDO PRINCIPAL     │
│                              │
└──────────────────────────────┘

┌──────────────┐ ┌──────────────┐
│ Secundario A │ │ Secundario B │
└──────────────┘ └──────────────┘

Esto puede ayudar a dirigir la atención

Por ejemplo:

Principal:
Nueva colección

Secundarios:
Guía de compra
Servicio corporativo

No conviertas un contenido secundario en enorme por accidente

La diferencia visual debería responder a una prioridad real.

Jerarquía puede establecerse mediante

• tamaño;

• posición;

• fotografía;

• Typography;

• color;

• espacio;

• etiqueta.

No necesitas utilizar todos al mismo tiempo

Contenido principal

Puede tener:

• imagen más grande;

• Heading mayor;

• descripción.

Secundario

Puede ser más compacto.

Ejemplo

DESTACADO PRINCIPAL

[ IMAGEN GRANDE ]

Nueva colección 2026

Conoce...

[ VER COLECCIÓN ]

Debajo

[ Guía ] [ Servicio ] [ Proyecto ]

No destaques visualmente algo que ya dejó de ser prioritario

La jerarquía también necesita mantenimiento.

Paso 15: etiquetas

Puedes utilizar etiquetas como:

NUEVO

DESTACADO

RECOMENDADO

GUÍA

ARTÍCULO

cuando aporten contexto.

Dentro de Componentes existe Badge

que puede ser útil en construcciones personalizadas.

No abuses

Evita:

NUEVO
DESTACADO
RECOMENDADO
IMPERDIBLE
OFERTA

sobre la misma Card.

Una etiqueta suele ser suficiente

“Nuevo” requiere mantenimiento

Un contenido publicado hace dos años no debería continuar:

NUEVO

indefinidamente.

“Recomendado”

puede ser más estable.

“Oferta”

debería corresponder a una condición real y vigente.

Paso 16: temporalidad

Algunos destacados son permanentes.

Por ejemplo:

Conoce nuestros servicios

Otros son temporales

Promoción Agosto

Los temporales necesitan una fecha de revisión

Cuando termina la campaña:

• reemplaza la Card;

• elimina la promoción;

• modifica el destino.

No dejes promociones vencidas

Si incluyes una fecha

Por ejemplo:

Válido hasta...

debe ser correcta.

No necesitas publicar la fecha dentro de la Card si no aporta

pero internamente debes recordar revisar el contenido.

Productos destacados

Puedes utilizar una Card manual:

[ PRODUCTO ]

Producto ABC

Conoce sus características.

[ VER PRODUCTO ]

Cuidado con datos variables

Evita incluir manualmente:

stock
precio
cuotas

si cambian frecuentemente y no existe una actualización automática en ese bloque.

Es preferible dirigir hacia la ficha

para consultar la información actual.

Categorías destacadas

Es uno de los usos más útiles.

Por ejemplo:

CATEGORÍAS DESTACADAS

[ Tecnología ]

[ Oficina ]

[ Merchandising ]

[ Hogar ]

Cada Card puede contener

Image
Heading
Link

sin necesidad de descripción extensa.

Mantén imágenes representativas

No utilices la misma fotografía para todas

si las categorías son muy diferentes.

Artículos destacados

Puede utilizarse en Blog.

Por ejemplo:

ARTÍCULOS RECOMENDADOS

[ imagen ]
Cómo elegir...
[ Leer artículo ]

[ imagen ]
5 consejos para...
[ Leer artículo ]

Importante

Si estas Cards fueron creadas manualmente en el Editor de bloques:

no debes asumir que se actualizan automáticamente cuando publicas nuevos artículos.

Debes mantener la selección manualmente

salvo que exista una funcionalidad específica que indique lo contrario.

No presentes:

Últimos artículos

si en realidad la selección es manual y puede quedar desactualizada.

Puede ser más preciso

Artículos recomendados

Servicios destacados

Puedes presentar:

SOLUCIONES DESTACADAS

[ Servicio A ]
[ Servicio B ]
[ Servicio C ]

Si necesitas mostrar todos

utiliza la sección:

Servicios

Campañas destacadas

Por ejemplo:

VUELTA A CLASES

Conoce nuestra selección...

[ VER PRODUCTOS ]

Requiere mantenimiento temporal

Recursos destacados

Puedes presentar:

GUÍAS Y RECURSOS

[ Guía ]

[ Tutorial ]

[ Descarga ]

Si existe una descarga

asegúrate de que el Link lleve al archivo o destino correcto.

No utilices “Descargar” si en realidad abre una página diferente

Páginas institucionales destacadas

Por ejemplo:

CONOCE MÁS SOBRE NOSOTROS

[ Historia ]

[ Equipo ]

[ Proyectos ]

Puede funcionar especialmente bien al final de Quiénes somos.

Contenidos destacados en Home

La Home es uno de sus principales usos.

Pero la Home ya suele contener muchas prioridades

Por ejemplo:

Banner
Productos
Servicios
Beneficios
Testimonios
Newsletter

No agregues destacados sin revisar el recorrido completo

Pregúntate:

¿Esta sección ayuda o simplemente repite contenido que ya aparece?

Ejemplo de repetición innecesaria

SERVICIOS

[ A ][ B ][ C ]

↓

CONTENIDOS DESTACADOS

[ Servicio A ][ Servicio B ][ Servicio C ]

Probablemente sea redundante

En cambio

puede destacar:

Guía
Caso de éxito
Categoría

y aportar una función distinta.

Destacados cerca del catálogo

Puede utilizarse:

ENCUENTRA MÁS RÁPIDO LO QUE BUSCAS

[ Categoría A ]
[ Categoría B ]
[ Categoría C ]

↓

PRODUCTOS

Esto puede funcionar como acceso visual

sin reemplazar el catálogo.

Destacados en Blog

Puede utilizarse:

ARTÍCULO RECOMENDADO

[ Card principal ]

↓

MÁS CONTENIDOS

[ Card ][ Card ]

Si el artículo principal cambia periódicamente

actualiza manualmente la sección cuando corresponda.

Cantidad de Cards

No existe una cantidad obligatoria.

2 contenidos

[ A ] [ B ]

pueden funcionar muy bien.

3

[ A ] [ B ] [ C ]

es una estructura habitual.

4

[ A ] [ B ] [ C ] [ D ]

puede funcionar en desktop.

6

[ A ] [ B ] [ C ]

[ D ] [ E ] [ F ]

Más cantidad

puede empezar a parecer:

• listado;

• catálogo;

• menú.

Pregunta

¿Siguen siendo “destacados”?

Si tienes 18:

probablemente necesites otra estructura.

Clonar un contenido destacado

Procedimiento recomendado:

1. Abrir Navigator.
2. Identificar la Card completa.
3. Clonar elemento.
4. Reemplazar Image.
5. Actualizar Alt.
6. Cambiar Heading.
7. Cambiar Paragraph.
8. Cambiar etiqueta.
9. Cambiar CTA.
10. Cambiar Url.
11. Revisar ID.
12. Revisar responsive.

No clones solamente la imagen

si quieres crear una nueva Card.

No clones solamente Heading

Duplica la unidad completa

Conceptualmente:

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

Error frecuente después de clonar

Card nueva:

Imagen:
Nueva colección

Título:
Nueva colección

pero Link:

Servicio anterior

Prueba siempre la Card final

Eliminar una Card

Selecciona la unidad completa.

Recuerda:

Waclis no solicita confirmación.

Si eliminas un nivel incorrecto:

Deshacer

No elimines solamente Image

si quieres retirar todo el destacado.

Si quieres mantenerlo sin imagen

reorganiza intencionalmente la Card.

Después de eliminar

revisa la grilla.

Ejemplo

Antes:

[ A ] [ B ] [ C ] [ D ]

Después:

[ A ] [ B ] [ C ]

Puede ser conveniente redistribuir las columnas.

Mover contenidos

Puedes cambiar prioridades mediante el orden.

Por ejemplo

Antes:

Guía
Campaña
Servicio principal

Después:

Servicio principal
Campaña
Guía

La primera posición suele recibir más atención

especialmente en móvil.

Orden mobile

Este punto es muy importante.

Una composición desktop:

[ PRINCIPAL ][ SECUNDARIO A ]
             [ SECUNDARIO B ]

puede transformarse en celular en:

PRINCIPAL

SECUNDARIO A

SECUNDARIO B

Comprueba que ese sea el orden deseado

Estructura visual vs orden real

A veces una composición asimétrica puede cambiar la percepción del orden.

Utiliza Navigator para comprender:

• qué elemento aparece primero;

• qué columnas existen.

No dependas de posiciones rígidas

si necesitas que móvil se reorganice naturalmente.

Grid responsive

Tres Cards pueden funcionar:

Desktop

[ A ] [ B ] [ C ]

Tablet

[ A ] [ B ]

[ C ]

Mobile

[ A ]

[ B ]

[ C ]

Cuatro Cards

Desktop:

[ A ] [ B ] [ C ] [ D ]

Tablet

[ A ] [ B ]

[ C ] [ D ]

Mobile

[ A ]

[ B ]

[ C ]

[ D ]

Utiliza Grid Row

para configurar la estructura.

Los iconos superiores de dispositivo son solo previsualización

Recuerda:

móvil / tablet / desktop

del toolbar permiten revisar el diseño.

No configuran por sí solos el comportamiento responsive.

Card principal asimétrica

Puede utilizar:

8 columnas
+
4 columnas

conceptualmente,

o cualquier distribución apropiada.

Una composición equilibrada

puede utilizar:

6 + 6

Decide según la prioridad

No utilices Margin para simular una columna

Utiliza Grid.

Altura de Cards

Si los textos son diferentes:

Card A
2 líneas

Card B
8 líneas

las alturas pueden variar.

Primera solución

Reduce o equilibra descripciones.

Segunda solución

Utiliza una estructura flexible.

Evita Height fijo como primera alternativa

height: 500px;

puede cortar contenido.

Min Height

puede utilizarse si necesitas una base visual común, comprobando siempre responsive.

Igualdad visual

No significa necesariamente:

exactamente la misma altura

Lo importante es que la grilla se vea intencional

Cards con imagen superior

Por ejemplo:

┌────────────────────┐
│       IMAGEN       │
├────────────────────┤
│ Título             │
│ Descripción        │
│                    │
│ CTA                │
└────────────────────┘

Cards con fondo de imagen

┌────────────────────┐
│                    │
│      IMAGEN        │
│                    │
│  TÍTULO            │
│  CTA               │
└────────────────────┘

En este caso revisa Overlay

El texto necesita contraste.

Cards horizontales

[ IMAGEN ][ CONTENIDO ]

pueden funcionar muy bien para contenidos editoriales.

Mobile

pueden transformarse en:

[ IMAGEN ]

CONTENIDO

Imágenes consistentes

Si utilizas una grilla uniforme:

intenta mantener proporciones similares.

Por ejemplo

16:9

o:

1:1

según el diseño.

No es obligatorio utilizar esas proporciones

Son solamente ejemplos.

Lo importante es que no exista

Card A → imagen altísima
Card B → imagen muy baja
Card C → imagen cuadrada

sin intención.

Hover

Puede ser útil si las Cards son clicables.

Ejemplo

estado normal
↓
Hover
↓
sombra sutil + imagen ligeramente ampliada

Pero no exageres

El contenido debe seguir siendo el protagonista.

Card no clicable

Si solo el Button es Link, un Hover demasiado fuerte sobre toda la Card puede generar expectativa de clic.

Decide el comportamiento según la estructura.

Hover sobre Image

Puede utilizarse un zoom moderado.

Asegúrate de controlar overflow

si corresponde.

No ocultes el título hasta Hover

si es esencial.

En celular el Hover no funciona de la misma manera.

Animaciones

Puedes utilizar:

Avanzado → Animate on scroll

sobre:

• Section;

• Grid Row;

• Cards.

Evita animar todos los elementos internos por separado

Una Card puede entrar como una sola unidad.

Si existen varios destacados

mantén delays moderados.

Prioridad y color

Puedes utilizar el color para marcar jerarquía.

Por ejemplo:

Contenido principal
→ fondo de marca

Secundarios
→ fondo neutro

Pero no conviertas cada Card en un color diferente

si no existe una lógica.

Typography

Mantén una jerarquía consistente:

ETIQUETA
↓
TÍTULO
↓
DESCRIPCIÓN
↓
CTA

Título

Debe ser más importante que:

• categoría;

• descripción.

CTA

Debe reconocerse como acción.

No hagas todos los textos del mismo tamaño

Descripción larga

Si necesitas explicar demasiado:

probablemente el contenido deba abrir una página propia.

Card = resumen

Destino = detalle

Etiqueta y categoría

No son necesariamente lo mismo.

Una etiqueta puede ser

NUEVO

Una categoría puede ser

GUÍAS

Puedes utilizar ambas, pero evita sobrecargar.

Información temporal

Si muestras:

Evento 15 de agosto

después debes actualizarlo.

Destacados requieren mantenimiento

Este es uno de los puntos más importantes de la sección.

Revisa periódicamente

• URLs;

• imágenes;

• promociones;

• fechas;

• productos;

• etiquetas;

• prioridad.

Un contenido puede dejar de ser relevante

Ejemplo

Agosto:

LANZAMIENTO NUEVO

Diciembre:

puede ser más apropiado destacar otra cosa.

Contenido vencido

No debe seguir ocupando el espacio más importante.

Contenido eliminado

Si una Card enlaza a una página que ya no existe:

actualiza o elimina la Card.

No dejes Links rotos.

Contenido cambiado

Si el destino cambió de nombre:

actualiza también el título del destacado cuando corresponda.

Evita promesas desalineadas

Card:

Guía completa

Destino:

página con dos párrafos

puede generar una expectativa incorrecta.

La Card debe representar correctamente el contenido de destino

Contenidos destacados y SEO

Utiliza títulos descriptivos y Links coherentes.

Pero no repitas palabras artificialmente solamente para intentar posicionar.

El objetivo principal

es ayudar a navegar y descubrir contenido importante.

No utilices

Comprar productos baratos productos económicos mejores productos...

como Heading de una Card.

Prioriza claridad.

Destacados con números

Puede utilizarse:

01
Servicio corporativo

02
Guía

como recurso de diseño.

El número no necesita tener significado funcional

pero debería mantener consistencia.

No utilices

01
07
23

sin lógica si parecen representar un orden.

Destacados con iconos

Puedes utilizar:

• Font Icon;

• Svg Icon;

en composiciones más simples.

Por ejemplo

[ icono ]

Guía de compra

[ LEER ]

Si el contenido necesita una imagen

no reemplaces siempre todo por iconos.

Elige según el tipo.

Imágenes vs iconos

Imagen:

mayor riqueza visual.

Icono:

mayor simplicidad.

Cards sin imagen

También pueden funcionar:

RECURSOS DESTACADOS

[ GUÍA ]
Cómo elegir...

[ TUTORIAL ]
Cómo configurar...

[ AYUDA ]
Preguntas frecuentes...

No todas las secciones necesitan fotografías.

Contenido destacado + CTA general

Además de CTA individuales puedes agregar:

[ VER TODOS LOS CONTENIDOS ]

al final.

Por ejemplo

ARTÍCULOS DESTACADOS

[ 3 Cards ]

[ VER TODOS LOS ARTÍCULOS ]

Esto funciona muy bien

cuando la sección muestra solamente una selección.

No agregues CTA general si no existe un destino adecuado

Por ejemplo

VER TODO

sin una página que realmente muestre todo.

Contenidos destacados + Carrusel

Si tienes muchos contenidos, puedes considerar un Carrusel.

Pero primero pregúntate

si realmente todos son prioritarios.

Un Carrusel puede ocultar elementos posteriores

porque el usuario debe desplazarse entre ellos.

Para 3 contenidos importantes

una grilla puede resultar más directa.

Para más opciones

un Carrusel puede ser apropiado según el diseño.

No utilices movimiento automático solamente para hacer la sección “más moderna”

La claridad tiene prioridad.

Contenidos destacados + Galería

Galería:

imágenes.

Destacados:

destinos o contenidos.

Si necesitas solamente mostrar fotografías

utiliza Galería.

Si cada imagen tiene:

• título;

• descripción;

• Link;

puede tener más sentido Contenidos destacados.

Contenidos destacados + Portafolio

Si cada Card representa un proyecto realizado:

usa Portafolio.

Contenidos destacados + Equipo

Si cada Card representa una persona:

usa Equipo.

Contenidos destacados + Servicios

Si todas las Cards explican servicios:

usa Servicios.

Contenidos destacados es más útil

cuando la selección puede combinar diferentes tipos de contenido o cuando la prioridad es el criterio principal.

Ejemplo mixto válido

TE RECOMENDAMOS

[ Guía ]
Cómo elegir...

[ Servicio ]
Soluciones para empresas

[ Caso ]
Proyecto destacado

Los tres comparten un criterio:

contenidos recomendados.

Ejemplo mixto poco claro

[ Política de privacidad ]
[ Instagram ]
[ Producto ]
[ Contacto ]
[ Historia ]
[ Promoción ]

sin una razón común.

Clases para personalización avanzada

Puedes utilizar conceptualmente:

destacados-section
destacados-grid
destacado-card
destacado-image
destacado-content
destacado-label
destacado-title
destacado-text
destacado-link

CSS localizado

Por ejemplo:

.destacados-section .destacado-card {
    border-radius: 16px;
    overflow: hidden;
}

Imagen

.destacados-section .destacado-image {
    width: 100%;
    height: 280px;
    object-fit: cover;
}

Contenido

.destacados-section .destacado-content {
    padding: 24px;
}

Responsive

@media (max-width: 768px) {
    .destacados-section .destacado-image {
        height: 220px;
    }
}

si la composición realmente necesita esos valores.

Estas Classes son ejemplos

No representan necesariamente las Classes originales de todas las composiciones prediseñadas.

Utiliza primero las herramientas visuales

Antes de CSS revisa:

• Grid Row;

• Width;

• Height;

• Padding;

• Typography;

• Background;

• Border.

Evita CSS global

No utilices:

.card {
    border-radius: 16px;
}

si solo quieres cambiar esta sección.

Tampoco

img {
    height: 280px;
    object-fit: cover;
}

porque podría afectar todas las imágenes.

Limita el scope.

Linked styles

Esta sección suele beneficiarse especialmente de estilos compartidos.

Por ejemplo

Todas las Cards pueden utilizar:

destacado-card

Esto permite mantener

• mismo Border radius;

• mismo Padding;

• mismo Hover;

• misma Typography.

Si Waclis muestra Linked styles

puede ser exactamente el comportamiento deseado.

Excepción

Para un contenido principal:

class="destacado-card principal"

puede mantener la base y agregar diferencias.

No elimines la Class común solamente para hacerlo más grande.

IDs

Puedes utilizar un ID para una excepción concreta.

Por ejemplo:

id="destacado-campana-agosto"

Después de clonar

cambia el identificador.

No utilices el mismo ID en varias Cards.

Editar HTML

Puedes utilizar:

Editar código HTML <>

cuando necesites comprender una Card avanzada.

Por ejemplo

Link
└── Card
    ├── Image
    └── Content

Pero para modificaciones habituales

no necesitas editar HTML.

Utiliza:

• Contenido;

• Estilo;

• Navigator;

• Grid.

No elimines Classes que no reconoces

si la Card ya contiene:

• Hover;

• Overlay;

• comportamiento responsive.

JavaScript

Una sección estática de Contenidos destacados normalmente no necesita JavaScript personalizado.

No agregues JavaScript para:

• cambiar imágenes;

• agregar espacios;

• modificar colores.

Si una composición posee una interacción propia

conserva la estructura si ya funciona.

Filtros

No agregues Buttons:

Todos
Productos
Artículos
Servicios

y asumas que se convierten automáticamente en filtros.

Un filtro necesita lógica funcional.

Si solo quieres clasificar

puedes utilizar etiquetas dentro de las Cards.

Por ejemplo

ARTÍCULO
Título...

SERVICIO
Título...

sin crear una interfaz falsa de filtrado.

Contenido estático vs actualización automática

Este concepto merece repetirse.

Una Card manual

NUEVO ARTÍCULO

no sabe automáticamente cuándo publicas otro.

Una categoría manual

PRODUCTOS DESTACADOS

no sabe automáticamente qué producto está más vendido.

Una promoción manual

20 % OFF

no desaparecerá automáticamente cuando termine.

Por eso:

contenido destacado manual = contenido que debes revisar manualmente.

No utilices afirmaciones dinámicas si no puedes mantenerlas

Por ejemplo:

El producto más vendido

puede quedar desactualizado.

Puede ser más seguro

Producto recomendado

si es una selección editorial.

“Último artículo”

También puede desactualizarse.

“Artículo recomendado”

es estable hasta que decidas modificarlo.

“Más leído”

debería tener fundamento real si lo utilizas.

No inventes popularidad.

Performance

Muchas Cards con imágenes pueden aumentar el peso de la página.

Utiliza archivos adecuados para el tamaño mostrado.

No cargues

10 imágenes originales de varios megabytes

para miniaturas pequeñas.

Si solo mostrarás 3 Cards

no necesitas cargar material para 20.

Optimiza sin sacrificar calidad visible.

Responsive y textos

Un título como:

Soluciones corporativas para grandes empresas y organizaciones

puede ocupar:

• 2 líneas en desktop;

• 4 o 5 en móvil.

Esto es válido

pero revisa la altura de la Card.

No reduzcas el título a un tamaño ilegible.

Puedes simplificar

Soluciones corporativas

y explicar el resto en la descripción.

CTA móvil

Debe ser fácil de utilizar.

Si tienes:

[ CONOCER TODAS NUESTRAS SOLUCIONES CORPORATIVAS ]

puede ocupar varias líneas.

Considera una acción más breve:

Conocer soluciones

No sacrifiques claridad para mantener una sola línea.

Contenido principal en mobile

Una composición asimétrica desktop puede necesitar reorganización.

Desktop

┌──────────────────────┬──────────┐
│                      │    B     │
│          A           ├──────────┤
│                      │    C     │
└──────────────────────┴──────────┘

Mobile

puede convertirse en:

[ A ]

[ B ]

[ C ]

Comprueba que A realmente deba ir primero.

No utilices posiciones absolutas rígidas

para recrear el mosaico si la estructura puede resolverse mediante Grid.

Masonry o composiciones irregulares

Pueden resultar visualmente atractivas.

Pero requieren más atención a:

• imágenes;

• orden;

• responsive.

Una grilla uniforme suele ser más fácil de mantener.

Ejemplo práctico: tres contenidos

Queremos:

TE RECOMENDAMOS

[ IMAGEN ]
Soluciones para empresas
Conoce nuestras opciones para proyectos corporativos.
[ CONOCER SERVICIO ]

[ IMAGEN ]
Guía de compra
Qué tener en cuenta antes de elegir.
[ LEER GUÍA ]

[ IMAGEN ]
Proyectos destacados
Conoce algunos trabajos realizados.
[ VER PROYECTOS ]

Paso 1

Abre:

Secciones → Contenidos destacados

Paso 2

Selecciona una composición de tres Cards.

Paso 3

Utiliza Navigator para identificar cada Card completa.

Paso 4

Modifica el Heading general.

Paso 5

Reemplaza todas las imágenes.

Paso 6

Completa Alt.

Paso 7

Actualiza títulos.

Paso 8

Actualiza descripciones.

Paso 9

Configura CTA.

Paso 10

Configura URLs.

Paso 11

Comprueba que cada destino corresponda a la Card.

Paso 12

Revisa Cover / Contain.

Paso 13

Personaliza:

• fondo;

• Border radius;

• Padding;

• Typography.

Paso 14

Revisa Linked styles.

Paso 15

Configura Grid responsive.

Paso 16

Revisa desktop.

Paso 17

Revisa tablet.

Paso 18

Revisa celular.

Paso 19

Guarda.

Paso 20

Utiliza:

Ver página

Paso 21

Prueba las tres Cards.

Ejemplo práctico: categorías destacadas

CATEGORÍAS DESTACADAS

[ IMAGEN ]
Tecnología
[ VER CATEGORÍA ]

[ IMAGEN ]
Oficina
[ VER CATEGORÍA ]

[ IMAGEN ]
Merchandising
[ VER CATEGORÍA ]

En este caso

la descripción puede incluso omitirse.

Ejemplo práctico: artículo principal + secundarios

ARTÍCULOS DESTACADOS

[ IMAGEN GRANDE ]

GUÍA COMPLETA PARA...

Descripción...

[ LEER ARTÍCULO ]


[ artículo 2 ]

[ artículo 3 ]

Jerarquía

El primer artículo recibe mayor protagonismo.

Ejemplo práctico: contenido mixto

TE PUEDE INTERESAR

GUÍA
Cómo elegir...

SERVICIO
Soluciones para empresas

CASO
Proyecto destacado

La selección comparte un criterio:

utilidad para el visitante.

Ejemplo práctico: campaña

DESTACADO DEL MES

[ IMAGEN ]

NUEVA COLECCIÓN

Descubre los últimos productos incorporados.

[ VER COLECCIÓN ]

Después del período correspondiente

revisa si debe seguir destacada.

Ejemplo práctico: recursos institucionales

CONOCE MÁS SOBRE NOSOTROS

Nuestra historia
[ CONOCER MÁS ]

Nuestro equipo
[ VER EQUIPO ]

Proyectos
[ VER PROYECTOS ]

¿Qué hacer si no sé qué destacar?

Analiza el objetivo de la página.

Home comercial

Puede priorizar:

• categorías;

• servicios;

• campaña actual.

Página institucional

Puede priorizar:

• historia;

• equipo;

• proyectos.

Blog

Puede priorizar:

• artículos;

• guías;

• temas importantes.

Producto

Puede priorizar:

• categorías relacionadas;

• información útil;

• recursos.

La selección debería responder al contexto.

¿Qué hacer si quiero destacar diez contenidos?

Pregunta primero si siguen siendo destacados.

Puede ser mejor:

• seleccionar 3 o 6;

• agregar un CTA “Ver todos”;

• utilizar otra página.

¿Qué hacer si necesito mostrar todos?

Entonces probablemente buscas:

• listado;

• catálogo;

• menú;

• grilla completa;

y no una selección destacada.

¿Qué hacer si una Card tiene más información que otra?

Reduce o reorganiza contenido.

No es necesario que sean idénticas

pero deben mantener una jerarquía coherente.

¿Qué hacer si una Card principal necesita ser más grande?

Selecciona su contenedor y modifica la estructura o utiliza una Class adicional.

No agrandes solamente la Image

si quieres que toda la Card tenga mayor jerarquía.

¿Qué hacer si al cambiar el fondo cambian todas las Cards?

Comprueba:

Linked styles

Probablemente comparten una Class.

Si quieres que todas sean iguales

es correcto.

¿Qué hacer si solo una debe cambiar?

Agrega:

• Class adicional;

• ID.

¿Qué hacer si clono una Card y abre el destino anterior?

Actualiza:

Url

¿Qué hacer si el Button dice “Ver productos” pero lleva a Blog?

Corrige el Link.

¿Qué hacer si una imagen no corresponde al destino?

Reemplázala.

El visitante interpreta la imagen antes de leer.

¿Qué hacer si una Card promocional venció?

Elimínala o reemplázala.

No dejes:

OFERTA HASTA EL 31 DE MAYO

después de esa fecha.

¿Qué hacer si cambia el precio del producto destacado?

Si escribiste el precio manualmente:

actualízalo.

Si cambia frecuentemente

considera eliminar el precio del bloque y dirigir a la ficha.

¿Qué hacer si el producto deja de existir?

Actualiza o elimina la Card.

¿Qué hacer si el artículo se elimina?

Actualiza el Link o reemplaza el destacado.

¿Qué hacer si una URL interna cambia?

Actualiza el Link.

¿Qué hacer si elimino una Card y queda un hueco?

Revisa:

• Grid Column;

• wrapper;

• Card.

Probablemente eliminaste solo contenido interno.

Reorganiza la grilla

si pasaste de cuatro a tres elementos.

¿Qué hacer si agrego una cuarta Card?

Clona una unidad completa y revisa responsive.

Desktop podría pasar a

[ A ] [ B ] [ C ] [ D ]

Tablet

[ A ] [ B ]

[ C ] [ D ]

Mobile

[ A ]

[ B ]

[ C ]

[ D ]

¿Qué hacer si tres Cards quedan muy estrechas en tablet?

Configura dos por fila o una estructura más apropiada.

¿Qué hacer si una Card desborda en celular?

Revisa:

• Width;

• Grid;

• imagen;

• Margin;

• CTA;

• palabras largas.

No ocultes el overflow globalmente.

¿Qué hacer si la imagen se deforma?

Revisa:

• Width;

• Height;

• object-fit.

¿Qué hacer si Cover recorta demasiado?

Utiliza:

• otra imagen;

• otro encuadre;

• Contain;

• otra altura.

¿Qué hacer si las imágenes tienen alturas distintas?

Define un marco común si la composición lo requiere.

¿Qué hacer si quiero que toda la Card sea clicable?

Revisa la estructura.

Si ya existe un Link envolvente:

configura su URL.

Si no existe

puedes requerir una modificación estructural más avanzada.

Evita crear Links anidados.

¿Qué hacer si quiero varios CTA dentro de una Card?

Pregunta si realmente son necesarios.

Una Card destacada suele funcionar mejor con una acción principal.

Por ejemplo

evita:

[ VER ]
[ COMPRAR ]
[ CONTACTAR ]
[ COMPARTIR ]

si eso complica la decisión.

¿Qué hacer si quiero una Card sin CTA?

Puede funcionar si:

• toda la Card es clicable;

• es puramente informativa;

• no necesita destino.

Pero el visitante debería poder comprenderlo.

¿Qué hacer si el Hover hace pensar que es clicable y no lo es?

Reduce el efecto o agrega una acción real.

¿Qué hacer si quiero filtros?

No simules filtros mediante Buttons.

Necesitas una lógica funcional real si quieres que los contenidos se oculten o muestren por categoría.

¿Qué hacer si quiero actualización automática?

Una sección manual del Editor de bloques no debería asumirse como dinámica.

Si necesitas datos que se actualicen automáticamente, utiliza la funcionalidad correspondiente del sistema cuando exista en lugar de reconstruirla manualmente.

Utilizar IA para elegir destacados

ChatGPT, Claude o Gemini pueden ayudarte.

Por ejemplo:

Tengo estos contenidos disponibles:

[lista]

La página es una Home.

El objetivo principal es:
[objetivo]

Quiero destacar solamente 3 contenidos.

Selecciona cuáles deberían aparecer primero teniendo en cuenta:
- relevancia para el visitante;
- relación con el objetivo;
- evitar repeticiones con otras secciones.

No inventes contenido.

IA para redactar Cards

Quiero crear una Card de Contenido destacado.

Contenido real:
[título / destino / objetivo]

Redacta:
- etiqueta opcional;
- Heading máximo de 6 palabras;
- descripción máxima de 22 palabras;
- CTA máximo de 4 palabras.

Utiliza español neutro.

No inventes precios, promociones ni beneficios.

IA para revisar jerarquía

Tengo estos cuatro contenidos destacados:

[lista]

Uno debe ser principal y los otros tres secundarios.

Analiza cuál debería recibir mayor protagonismo según este objetivo de página:

[objetivo]

No inventes información nueva.

IA para detectar redundancias

Esta Página web ya contiene:

[lista de secciones]

Quiero agregar estos contenidos destacados:

[lista]

Identifica cuáles repiten información que ya aparece y cuáles aportarían un recorrido nuevo.

No agregues nuevas secciones.

IA para revisar mantenimiento

Tengo estas Cards:

[pegar contenido]

Identifica cuáles contienen información que puede quedar desactualizada rápidamente, como:
- precios;
- fechas;
- promociones;
- stock;
- etiquetas "Nuevo";
- afirmaciones de popularidad.

No cambies los datos.

Indícame qué debería revisarse periódicamente.

IA para CSS

Por ejemplo:

Estoy personalizando una sección Contenidos destacados en Waclis.

La sección utiliza:
.destacados-section

Las Cards:
.destacado-card

Las imágenes:
.destacado-image

El contenido:
.destacado-content

Necesito:
- 3 Cards por fila en desktop;
- 2 por fila en tablet;
- 1 por fila en celular;
- imágenes con misma altura;
- object-fit cover;
- Border radius de 16 px;
- Hover muy sutil;
- no modificar otras Cards o imágenes de la Página web.

No cambies HTML.

No agregues JavaScript.

No elimines Classes existentes.

Devuélveme solamente CSS limitado a .destacados-section.

IA para destacar una Card principal

Tengo cuatro Cards de Contenidos destacados.

La primera utiliza además:
.destacado-principal

Necesito que:
- ocupe mayor espacio en desktop;
- mantenga la misma lógica visual de las demás;
- en celular vuelva a una Card normal de ancho completo.

No modifiques HTML.

No agregues JavaScript.

No afectes otras secciones.

IA para revisar una Card clonada

Cloné una Card de Contenidos destacados en Waclis.

Quiero asegurarme de que no conserva información de la Card anterior.

Este es el HTML únicamente de la Card:

[pegar]

Identifica dónde aparecen:
- Image;
- Alt;
- Heading;
- Paragraph;
- etiqueta;
- CTA;
- URL;
- ID.

No elimines ni renombres Classes.

Buenas prácticas para Contenidos destacados

Recomendamos:

• definir primero qué merece ser destacado;

• mostrar pocos contenidos realmente prioritarios;

• utilizar un criterio común;

• evitar repetir otras secciones;

• utilizar imágenes representativas;

• completar Alt;

• mantener títulos claros;

• redactar descripciones breves;

• utilizar CTA coherentes;

• comprobar cada URL;

• mantener jerarquía visual;

• utilizar Navigator;

• clonar Cards completas;

• revisar Links e IDs después de clonar;

• utilizar Linked styles;

• adaptar Grid responsive;

• evitar información manual que cambia constantemente;

• revisar promociones y etiquetas temporales;

• limitar CSS a la sección;

• comprobar el resultado mediante Ver página.

Errores frecuentes

Destacar demasiados contenidos

Si todo es importante, nada lo es.

Utilizar la sección como otro menú completo

Selecciona prioridades.

Repetir exactamente Servicios, Productos u otras secciones

Aporta un recorrido diferente.

Confundir Contenidos destacados con Portafolio

Portafolio presenta proyectos realizados.

Confundirlo con Características

Características explica propiedades.

Utilizar contenido dinámico como si una Card manual se actualizara automáticamente

Revisa manualmente.

Publicar precios que después quedan desactualizados

Evalúa si deben aparecer en la Card.

Publicar stock manual

Puede quedar incorrecto.

Mantener promociones vencidas

Actualiza.

Mantener la etiqueta “Nuevo” durante años

Revisa periódicamente.

Utilizar “Más vendido” sin fundamento

No inventes popularidad.

Utilizar “Último artículo” en una Card manual sin actualizarla

Puede quedar incorrecto.

Utilizar una imagen que no representa el destino

Mantén coherencia.

Dejar imágenes de ejemplo

Reemplázalas.

No completar Alt

Descríbelas cuando corresponda.

Utilizar títulos ambiguos

Explica qué contenido se abrirá.

Utilizar CTA genéricos cuando puedes ser específico

Por ejemplo, “Leer guía” puede ser mejor que “Ver más”.

Cambiar el CTA pero olvidar la URL

Prueba el destino.

Clonar una Card y mantener el Link anterior

Actualiza Url.

Duplicar IDs

Mantén identificadores únicos.

Clonar solamente Image o Heading

Clona la unidad completa.

Eliminar únicamente el contenido interior y dejar una columna vacía

Utiliza Navigator.

No reorganizar Grid después de eliminar Cards

Revisa la composición.

Hacer todas las Cards “principales”

Mantén jerarquía.

Utilizar demasiados Badges

Reduce ruido.

Depender del Hover para mostrar títulos

Comprueba móvil.

Utilizar Height fijo con contenido variable

Prefiere una estructura flexible.

Mantener cuatro Cards diminutas en celular

Adapta Grid.

Aplicar CSS global a .card

Limita el scope.

Aplicar CSS global a img

Puede afectar toda la Página web.

Crear filtros que visualmente parecen funcionar pero no tienen lógica

No simules funcionalidades.

Cargar demasiadas imágenes pesadas

Optimiza.

No revisar contenidos temporales

Mantén la sección actualizada.

No probar mediante Ver página

Comprueba todas las Cards.

Flujo recomendado

1. DEFINIR OBJETIVO DE LA PÁGINA
↓
2. SELECCIONAR CONTENIDOS PRIORITARIOS
↓
3. DEFINIR JERARQUÍA
↓
4. ELEGIR DISEÑO
↓
5. AGREGAR CONTENIDOS DESTACADOS
↓
6. REVISAR NAVIGATOR
↓
7. MODIFICAR HEADING GENERAL
↓
8. REEMPLAZAR IMÁGENES
↓
9. COMPLETAR ALT
↓
10. MODIFICAR TÍTULOS
↓
11. REDACTAR DESCRIPCIONES
↓
12. CONFIGURAR ETIQUETAS SI CORRESPONDE
↓
13. CONFIGURAR CTA
↓
14. CONFIGURAR URL
↓
15. REVISAR COVER / CONTAIN
↓
16. PERSONALIZAR CARDS
↓
17. REVISAR LINKED STYLES
↓
18. CONFIGURAR GRID RESPONSIVE
↓
19. GUARDAR CAMBIOS
↓
20. VER PÁGINA
↓
21. PROBAR TODAS LAS CARDS
↓
22. PROGRAMAR REVISIÓN DE CONTENIDOS TEMPORALES

Checklist antes de publicar Contenidos destacados

• La sección tiene un objetivo claro.

• Los contenidos realmente merecen mayor visibilidad.

• No intenté destacar todo.

• La cantidad de Cards es razonable.

• Existe un criterio común entre los elementos.

• No repito innecesariamente otras secciones.

• La jerarquía visual refleja la prioridad real.

• El contenido principal es realmente el más importante.

• Las imágenes fueron reemplazadas.

• No quedan imágenes de ejemplo.

• Las imágenes representan correctamente cada destino.

• Completé Alt.

• Revisé Cover / Contain.

• Las imágenes no están deformadas.

• Los títulos son claros.

• Las descripciones son breves.

• Las etiquetas aportan información.

• No quedan etiquetas “Nuevo” desactualizadas.

• Las promociones siguen vigentes.

• Los precios manuales son correctos si existen.

• No publiqué stock manual sin poder mantenerlo.

• Los CTA describen correctamente la acción.

• Cada URL corresponde a su Card.

• Probé todas las URLs.

• Las Cards completamente clicables tienen el destino correcto.

• No existen Links anidados incorrectamente.

• Utilicé Navigator.

• Al clonar seleccioné la Card completa.

• Al clonar actualicé Image.

• Al clonar actualicé Alt.

• Al clonar actualicé Heading.

• Al clonar actualicé Paragraph.

• Al clonar actualicé CTA.

• Al clonar actualicé URL.

• Los IDs personalizados son únicos.

• Linked styles tiene el alcance esperado.

• Desktop se ve correctamente.

• Tablet se ve correctamente.

• Celular se ve correctamente.

• El orden móvil mantiene la prioridad.

• Grid se reorganiza correctamente.

• Los textos no se cortan.

• Los CTA no desbordan.

• No existe scroll horizontal inesperado.

• La información esencial no depende únicamente del Hover.

• Las animaciones son moderadas.

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

• No agregué JavaScript innecesario.

• No simulé funcionalidades dinámicas inexistentes.

• Las imágenes están optimizadas.

• Guardé los cambios.

• Revisé todo mediante Ver página.

En resumen

La sección Contenidos destacados permite decidir qué información merece recibir mayor atención dentro de tu Página web.

Puede utilizarse para:

PRODUCTOS

CATEGORÍAS

ARTÍCULOS

SERVICIOS

CAMPAÑAS

RECURSOS

PÁGINAS

entre otros contenidos.

La idea principal es:

destacar significa priorizar.

Si agregas 20 Cards con el mismo peso visual:

probablemente ya no estás creando una sección de destacados.

Una estructura habitual puede ser:

Section
└── Grid Row
    ├── Featured Card
    │   ├── Image
    │   ├── Heading
    │   ├── Paragraph
    │   └── Link
    ├── Featured Card
    └── Featured Card

Utiliza Navigator para seleccionar una Card completa antes de:

• clonar;

• eliminar;

• mover.

Después de clonar revisa siempre:

IMAGEN
ALT
TÍTULO
DESCRIPCIÓN
ETIQUETA
CTA
URL
ID

También recuerda que una Card creada manualmente mediante el Editor de bloques no debería considerarse automáticamente sincronizada con contenido dinámico.

Si escribes manualmente:

Producto ABC
$ XX

ese precio deberá mantenerse manualmente.

Por eso puede ser preferible:

Producto ABC

[ VER PRODUCTO ]

y dejar que la ficha correspondiente muestre la información actual.

Lo mismo aplica a:

• stock;

• promociones;

• fechas;

• etiquetas “Nuevo”;

• afirmaciones como “más vendido”.

En responsive:

Desktop

[ A ] [ B ] [ C ]

puede transformarse en:

Mobile

[ A ]

[ B ]

[ C ]

Utiliza Grid Row para adaptar la distribución y revisa especialmente el orden de una composición asimétrica.

Finalmente:

Guardar Cambios → Ver página → abrir cada Card → comprobar el destino → revisar celular.

Y no olvides revisar periódicamente los contenidos temporales.

Una buena sección de Contenidos destacados debería ayudar al visitante a responder rápidamente:

“De todo lo que ofrece esta Página web, ¿qué debería mirar primero?”

Si la sección logra responder esa pregunta, está cumpliendo correctamente su función.