¿Cómo utilizar la sección Características en el Editor de bloques de Waclis?

La sección Características del Editor de bloques de Waclis permite presentar de manera organizada las principales propiedades, funciones, capacidades o elementos que forman parte de un producto, servicio o solución.

Puedes utilizarla para explicar:

• qué incluye;

• qué funcionalidades posee;

• cómo está compuesto;

• qué capacidades tiene;

• qué opciones admite;

• qué especificaciones ofrece;

• qué elementos forman parte de una propuesta;

• qué características diferencian una alternativa de otra.

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

Secciones → Características

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

• títulos;

• descripciones;

• íconos;

• imágenes;

• Cards;

• datos numéricos;

• columnas;

• fondos;

• colores;

• espacios;

• comportamiento responsive.

¿Qué es una característica?

Una característica describe una propiedad concreta.

Por ejemplo:

Capacidad de 1 litro

Fabricado en acero inoxidable

Compatible con dispositivos móviles

Permite administrar múltiples usuarios

Disponible en diferentes colores

Actualización automática

Son afirmaciones que explican:

qué tiene o qué hace el producto o servicio.

Características y Beneficios no son lo mismo

Esta diferencia es especialmente importante.

Característica

Explica:

qué tiene, qué hace o cómo está compuesto.

Por ejemplo:

Fabricado en acero inoxidable.

Beneficio

Explica:

qué obtiene el cliente gracias a esa característica.

Por ejemplo:

Mayor resistencia y durabilidad para el uso cotidiano.

Otro ejemplo

Característica

Sincronización automática de información.

Beneficio

Reduce la necesidad de actualizar datos manualmente.

Otro ejemplo

Característica

Capacidad para 20 usuarios.

Beneficio

Permite que distintos integrantes del equipo trabajen dentro de la misma solución.

Ambas pueden complementarse

Una Card puede contener:

SINCRONIZACIÓN AUTOMÁTICA

La información puede actualizarse automáticamente, reduciendo tareas manuales.

En este caso:

• el título comunica la característica;

• la descripción ayuda a explicar su utilidad.

Características vs Servicios

También debemos diferenciarlos.

Característica

Panel de administración responsive

describe una propiedad de una solución.

Servicio

Diseño de Página web

describe algo que la empresa ofrece.

Otro ejemplo

Empresa de mantenimiento:

Servicio

Mantenimiento preventivo

Característica del servicio

Incluye revisión periódica de los equipos.

Características vs Beneficios vs Servicios

Podemos pensarlo así:

SERVICIO
¿Qué ofrecemos?

↓

CARACTERÍSTICA
¿Qué incluye o cómo funciona?

↓

BENEFICIO
¿Qué obtiene el cliente?

Ejemplo completo

SERVICIO
Hosting administrado

CARACTERÍSTICA
Copias de seguridad periódicas

BENEFICIO
Permite contar con respaldos ante determinadas incidencias.

¿Cuándo conviene utilizar la sección Características?

Puede resultar especialmente útil cuando quieres presentar:

• funcionalidades;

• especificaciones;

• capacidades;

• propiedades;

• elementos incluidos;

• aspectos técnicos;

• atributos de un producto;

• componentes de un servicio.

Ejemplo de producto

CARACTERÍSTICAS

[ ícono ]
Acero inoxidable

[ ícono ]
Capacidad de 750 ml

[ ícono ]
Tapa hermética

[ ícono ]
Apta para bebidas frías y calientes

Ejemplo de software

CARACTERÍSTICAS PRINCIPALES

[ ícono ]
Gestión de usuarios

[ ícono ]
Reportes

[ ícono ]
Integraciones

[ ícono ]
Diseño responsive

Ejemplo de servicio

QUÉ INCLUYE

Relevamiento inicial

Configuración

Capacitación

Acompañamiento

¿Cómo agregar una sección Características?

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

Después abre:

Secciones

y selecciona:

Características

Paso 1: elige una composición

Waclis mostrará las alternativas prediseñadas disponibles.

Puedes encontrar diseños orientados a:

• ícono + título + descripción;

• Cards;

• bloques simples;

• varias columnas;

• características con imágenes;

• datos destacados.

Elige principalmente según:

• cantidad de características;

• longitud de los textos;

• importancia de los íconos;

• espacio disponible;

• estilo general de la página.

No necesitas conservar la cantidad original

Si el diseño de ejemplo tiene:

6 características

y tú necesitas:

4

elimina las unidades sobrantes.

No inventes características solamente para completar el diseño.

Paso 2: agrega la sección

Selecciona la composición deseada.

Después podrás modificar individualmente:

• Heading;

• Paragraph;

• íconos;

• imágenes;

• Cards;

• Grid;

• Section.

Paso 3: utiliza Navigator

Una estructura habitual puede pensarse como:

Section
└── Container
    ├── Heading
    ├── Paragraph
    └── Grid Row
        ├── Grid Column
        │   └── Característica
        │       ├── Icon
        │       ├── Heading
        │       └── Paragraph
        │
        ├── Grid Column
        │   └── Característica
        │
        └── Grid Column
            └── Característica

La estructura exacta dependerá del diseño seleccionado.

¿Por qué Navigator es importante?

Porque visualmente puedes hacer clic sobre:

Gestión de usuarios

y seleccionar solamente:

Heading

cuando en realidad quieres:

• clonar toda la característica;

• moverla;

• eliminarla;

• cambiar su fondo.

Para esas acciones debes seleccionar la unidad completa.

Identifica la unidad repetida

Conceptualmente:

Característica
├── Icon
├── Heading
└── Paragraph

Esa es la unidad que normalmente debes:

• clonar;

• mover;

• eliminar.

Paso 4: modifica el título general

Puedes utilizar:

Características

Características principales

Todo lo que incluye

Funcionalidades principales

Especificaciones

Conoce sus características

según el contenido.

Utiliza un título que corresponda realmente al contenido

Si vas a mostrar:

medidas
materiales
capacidad
peso

puede ser más preciso:

Especificaciones

Si mostrarás funciones

Puede ser:

Funcionalidades principales

Si explicarás lo que incluye un servicio

Puede ser:

Qué incluye

Paso 5: redacta cada característica

Cada título debería ser:

• claro;

• breve;

• específico.

Buenos ejemplos

Actualización automática

Gestión multiusuario

Acero inoxidable

Diseño responsive

Capacidad de 750 ml

Compatible con Android e iOS

cuando esos datos sean realmente correctos.

Evita títulos demasiado vagos

Por ejemplo:

Calidad

Tecnología

Innovación

Lo mejor

no explican una característica concreta.

Mejor

En lugar de:

Tecnología

puede ser:

Conectividad Bluetooth

si esa es la característica real.

En lugar de

Seguridad

puede ser:

Acceso mediante usuarios y permisos

si corresponde.

Las características deben ser verificables

Evita:

El mejor sistema

porque no describe una propiedad concreta.

Es preferible

Permite administrar hasta X usuarios

cuando ese dato sea real.

Paso 6: utiliza una descripción breve

Puedes ampliar el título mediante un Paragraph.

Por ejemplo:

GESTIÓN MULTIUSUARIO

Permite que diferentes integrantes del equipo accedan utilizando sus propios usuarios.

Otro ejemplo

ACERO INOXIDABLE

Fabricado con material resistente para acompañar el uso diario.

No repitas exactamente el título

Título:

Actualización automática

Descripción poco útil:

Cuenta con actualización automática.

Mejor

La información puede actualizarse sin necesidad de realizar el mismo proceso manualmente en cada oportunidad.

si esa explicación es correcta.

Una característica también puede incluir su beneficio

Esto puede ser útil para que la sección sea más comprensible.

Estructura:

CARACTERÍSTICA

qué hace
+
por qué resulta útil

Ejemplo

DISEÑO RESPONSIVE

La interfaz se adapta a distintos tamaños de pantalla para facilitar su utilización desde diferentes dispositivos.

No conviertas todas las Cards en largos textos comerciales

Mantén:

• característica concreta;

• explicación breve.

Longitud similar

Si una Card contiene:

2 líneas

y otra:

12 líneas

puede producir una grilla visualmente irregular.

No es necesario que todas tengan exactamente la misma longitud

Pero intenta que exista un nivel de detalle similar.

Si una característica necesita mucha explicación

Puede ser mejor:

• resumirla;

• utilizar Texto e imagen;

• utilizar Acordeón;

• enlazar documentación adicional.

Paso 7: utiliza íconos cuando aporten valor

Muchas composiciones de Características utilizan:

• Font Icon;

• SVG Icon;

• otros elementos visuales.

Dentro de Componentes existen alternativas como:

• Font Icon;

• Svg Icon.

El ícono debe ayudar a reconocer la característica

Por ejemplo:

[ usuario ]
Gestión de usuarios

[ teléfono ]
Diseño responsive

[ gráfico ]
Reportes

Evita íconos aleatorios

Por ejemplo:

[ estrella ]
Integraciones API

puede no aportar demasiado si no existe una relación visual clara.

Mantén una misma familia visual

Evita combinar:

ícono lineal
ícono relleno
emoji
fotografía
ilustración 3D

dentro de una misma fila sin una razón.

Consistencia

Utiliza preferentemente:

• mismo estilo;

• tamaño similar;

• tratamiento de color coherente.

No todos los diseños necesitan íconos

Una característica también puede presentarse simplemente como:

01

GESTIÓN DE USUARIOS

Descripción...

o:

CAPACIDAD

750 ml

Los íconos son apoyo visual

No deberían reemplazar un título comprensible.

No utilices solamente un ícono

Por ejemplo:

[ nube ]

sin texto puede resultar ambiguo.

Paso 8: características cuantitativas

Algunas características se expresan mejor mediante datos.

Por ejemplo:

750 ml
Capacidad

12 horas
Autonomía

20
Usuarios incluidos

2 kg
Peso

cuando esos valores sean correctos.

Utiliza siempre unidad cuando sea necesaria

Evita:

750

sin explicar qué significa.

Mejor

750 ml

Otro ejemplo

Evita:

20

Mejor:

20 usuarios

o:

20

Usuarios incluidos

Mantén las cifras correctas

No las utilices como decoración.

No redondees datos técnicos sin necesidad

Si una especificación exacta es importante, conserva su valor real.

Características técnicas

Puedes utilizar:

Peso

Dimensiones

Material

Capacidad

Compatibilidad

Si existen muchas especificaciones

Tal vez resulte más apropiado utilizar:

• Table;

• Acordeón;

• otra sección específica.

Características visuales vs especificaciones completas

Puedes mostrar en Características:

4 o 6 datos principales

y después:

ESPECIFICACIONES COMPLETAS

en otra sección.

Esto mantiene la página fácil de recorrer

Ejemplo de producto

CARACTERÍSTICAS PRINCIPALES

750 ml
Capacidad

Acero inoxidable
Material

Tapa hermética
Cierre

4 colores
Opciones disponibles

Ejemplo de software

FUNCIONALIDADES

Multiusuario
Permite trabajar con diferentes accesos.

Responsive
Puede utilizarse desde distintos tamaños de pantalla.

Reportes
Permite consultar información organizada.

Integraciones
Puede conectarse con determinados servicios según la configuración disponible.

Ejemplo de servicio

QUÉ INCLUYE

Relevamiento inicial

Configuración

Capacitación

Acompañamiento

No mezcles niveles diferentes

Por ejemplo:

Soporte
Alta calidad
24 usuarios
Empresa líder
Integraciones

mezcla:

• característica;

• beneficio;

• dato;

• afirmación comercial.

Intenta mantener la misma lógica.

Define primero qué estás mostrando

¿Son:

• especificaciones?

• funcionalidades?

• elementos incluidos?

• capacidades?

Mantén esa categoría.

Paso 9: define la cantidad

No existe una cantidad obligatoria.

Puedes utilizar:

• 3;

• 4;

• 6;

• 8;

• otra cantidad.

Tres características

Puede funcionar:

[ A ] [ B ] [ C ]

para comunicar los puntos principales.

Cuatro

Puede utilizar:

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

en desktop.

Seis

Puede organizarse:

[ A ] [ B ] [ C ]

[ D ] [ E ] [ F ]

No agregues diez características solo porque existen

Prioriza las que ayudan a comprender el producto o servicio.

Pregunta

¿Esta característica ayuda al visitante a decidir o entender?

Si no, puede ir en documentación más detallada.

Orden de características

Coloca primero las más importantes.

Ejemplo

Si estás vendiendo una botella:

1. Material
2. Capacidad
3. Conservación
4. Cierre
5. Colores

puede tener más sentido que empezar por un detalle secundario.

Software

1. Función principal
2. Gestión
3. Integraciones
4. Reportes
5. Seguridad

según la solución.

No dependas de que el visitante lea todas

Las primeras deberían comunicar lo esencial.

Cards de Características

Una composición puede utilizar:

┌──────────────────┐
│      ÍCONO       │
│                  │
│ Característica   │
│                  │
│ Descripción      │
└──────────────────┘

Puedes personalizar

• Background Color;

• Border;

• Border radius;

• Padding;

• Typography;

• icono.

Mantén todas las Cards relacionadas

Por ejemplo:

caracteristica-card

como Class compartida.

Linked styles

Si modificas:

• fondo;

• Padding;

• Border radius;

y Waclis indica Linked styles, puede ser exactamente lo que necesitas.

Todas las Cards deberían conservar un diseño común.

No conviertas Linked styles en un problema automáticamente

En estructuras repetidas, compartir estilos es una ventaja.

Ejemplo

Card 1 → caracteristica-card
Card 2 → caracteristica-card
Card 3 → caracteristica-card

Si cambias:

Border radius

puede ser deseable que cambien las tres.

Excepción

Si una característica necesita destacarse:

class="caracteristica-card destacada"

puede mantener el estilo general y agregar una diferencia.

No elimines la Class compartida

si solo necesitas una excepción.

¿Es recomendable destacar una característica?

Puede serlo cuando existe una función especialmente importante.

Por ejemplo:

NUEVO
Integración X

si realmente se trata de una novedad relevante.

No destaques cuatro de seis

Si todo está destacado, nada destaca.

Badge

Dentro de Componentes existe Badge.

Puede resultar útil en una composición personalizada para etiquetas como:

NUEVO

DESTACADO

si corresponde.

No utilices “Nuevo” indefinidamente

Si una función dejó de ser nueva, actualiza la etiqueta.

Clonar una característica

Para agregar una nueva unidad:

1. abre Navigator;

2. identifica la Card o contenedor completo;

3. selecciónalo;

4. utiliza Clonar elemento;

5. modifica:

   • ícono;

   • Heading;

   • Paragraph;

   • datos;

   • Link si existe;

   • ID personalizado si existe.

No clones solamente Heading

Si tienes:

Card
├── Icon
├── Heading
└── Paragraph

y clonas solamente Heading:

Card
├── Icon
├── Heading
├── Heading
└── Paragraph

no habrás creado una nueva característica.

Clona la unidad completa

Conceptualmente:

Grid Row
├── Característica
├── Característica
└── Característica nueva

Revisa la posición de la copia

Debe continuar dentro de la misma:

• Grid Row;

• Section;

según la composición.

Después de clonar

No olvides reemplazar todos los datos.

Por ejemplo:

Ícono
Título
Descripción
Link
ID

IDs personalizados

Si la unidad original utiliza:

id="caracteristica-reportes"

la copia no debería mantener el mismo ID.

Eliminar una característica

Selecciona la unidad completa mediante Navigator.

Después utiliza:

Eliminar elemento

Recuerda

Waclis no solicita confirmación.

Si eliminas algo incorrecto:

Deshacer

inmediatamente.

No elimines solamente el texto

Si quieres eliminar toda una característica.

Podrías dejar:

[ ícono ]

[ espacio vacío ]

Elimina la Card o columna correspondiente

Reorganiza Grid después de eliminar

Supongamos:

Antes:

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

Eliminas D:

[ A ] [ B ] [ C ]

Puede ser necesario revisar el ancho de las columnas para que la composición quede equilibrada.

Mover características

Puedes cambiar el orden.

Por ejemplo:

Antes:

Colores
Material
Capacidad
Garantía

Después:

Material
Capacidad
Colores
Garantía

Mueve la unidad completa

No solamente:

• Icon;

• Heading;

• Paragraph.

Utiliza Navigator

para comprobar que cada parte permanezca dentro de su Card correspondiente.

Grid responsive

La sección Características suele depender fuertemente de una grilla.

Tres columnas desktop

[ A ] [ B ] [ C ]

Tablet

Puede mantenerse:

[ A ] [ B ] [ C ]

si existe espacio suficiente.

O pasar a:

[ A ] [ B ]

[ C ]

según la composición.

Mobile

Puede transformarse en:

[ A ]

[ B ]

[ C ]

Cuatro columnas desktop

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

Tablet

[ A ] [ B ]

[ C ] [ D ]

Mobile

[ A ]

[ B ]

[ C ]

[ D ]

No mantengas cuatro Cards diminutas en celular

La información debe seguir siendo:

• legible;

• cómoda;

• fácil de recorrer.

Grid Row

Selecciona:

Grid Row

y revisa las configuraciones de cada columna para los distintos tamaños de pantalla.

Recuerda

Los iconos superiores de:

• celular;

• tablet;

• desktop;

permiten previsualizar.

No son la configuración real de columnas.

Padding de las Cards

Un Card necesita suficiente espacio interior.

Por ejemplo:

┌────────────────────┐
│                    │
│      ÍCONO         │
│                    │
│      TÍTULO        │
│                    │
│   descripción      │
│                    │
└────────────────────┘

Poco Padding

Puede verse:

┌──────────────────┐
│ÍCONOTÍTULOtexto  │
└──────────────────┘

demasiado comprimido.

Demasiado Padding

Puede hacer que una Card con poco contenido ocupe demasiado espacio.

Busca equilibrio

Separación entre Cards

También necesitas espacio suficiente entre unidades.

No las pegues completamente

si el diseño utiliza Cards independientes.

Tampoco las separes tanto

que parezcan secciones sin relación.

Altura de Cards

Una Card puede ser más alta debido a su texto.

Evita Height fijo como primera solución

Por ejemplo:

.caracteristica-card {
    height: 300px;
}

puede cortar contenidos cuando:

• cambia el texto;

• cambia el dispositivo;

• se traduce.

Min Height

Puede ser más flexible cuando realmente necesitas una base común.

Pero comprueba móvil.

Primera solución: equilibrar contenido

Intenta mantener descripciones razonablemente similares.

Segunda solución: estructura flexible

Permite que las Cards crezcan.

No agregues texto irrelevante solamente para igualar alturas

Alineación del contenido

Puedes utilizar:

• izquierda;

• centro;

según la composición.

Centrado

Puede funcionar bien para:

Ícono
Título
Descripción breve

Izquierda

Puede resultar mejor para:

• más texto;

• especificaciones;

• listas.

Mantén coherencia

No centres una Card y alinees otra a izquierda sin una razón.

Tamaño de los íconos

Debe corresponder a la jerarquía.

No hagas el ícono más importante que la característica

El visitante necesita leer:

Gestión de usuarios

más que admirar un ícono enorme.

Color de los íconos

Puedes utilizar:

• color principal;

• colores neutros;

• variaciones controladas.

Evita un color distinto para cada Card sin una lógica

Características con imágenes

Algunas composiciones pueden utilizar:

Image
+
Heading
+
Paragraph

en lugar de íconos.

Esto puede ser útil para

• materiales;

• producto;

• detalles visuales;

• funciones que necesitan demostración.

Ejemplo

[ imagen de tapa ]

CIERRE HERMÉTICO

Descripción...

Cover vs Contain

Si la imagen muestra un objeto o detalle completo:

Contain

puede resultar adecuado.

Si es una fotografía ambiental o de uso:

Cover

puede funcionar mejor.

No deformes las imágenes

Mantén proporciones correctas.

Características con cifras

Puedes dar gran protagonismo al dato.

Por ejemplo:

24 h
Autonomía

Otra:

500 GB
Almacenamiento

Mantén una jerarquía clara

24 h       ← dato

Autonomía  ← significado

No uses el dato sin explicación

Características con listas

Una Card puede contener:

COMPATIBILIDAD

- Windows
- macOS
- Android
- iOS

si esa información es real.

Si la lista es muy larga

considera:

• Acordeón;

• Tabla;

• documentación.

Características y Tabla de precios

Una Tabla de precios utiliza características para comparar opciones comerciales.

Por ejemplo:

Plan A
✓ 5 usuarios

Plan B
✓ 20 usuarios

La sección Características, en cambio, puede explicar:

GESTIÓN MULTIUSUARIO

Permite administrar diferentes accesos dentro de la solución.

Características y Beneficios pueden aparecer juntas

Por ejemplo:

CARACTERÍSTICAS
↓
qué tiene

BENEFICIOS
↓
qué obtiene el cliente

Ejemplo de recorrido

SERVICIO

↓

CARACTERÍSTICAS

[ función A ] [ función B ] [ función C ]

↓

BENEFICIOS

[ resultado A ] [ resultado B ] [ resultado C ]

↓

CTA

Evita repetir exactamente lo mismo

Si Características dice:

Responsive

y Beneficios dice:

Responsive

no estás agregando información.

Conecta ambas

Característica:

Diseño responsive

Beneficio:

Permite navegar cómodamente desde distintos tamaños de pantalla.

Características en Home

Puedes utilizar una selección de:

3 o 4 características principales

para no sobrecargar la Home.

Después puedes enlazar

[ CONOCER MÁS ]

si existe una página específica.

Características en una landing

Puede ser una de las secciones centrales.

Por ejemplo:

Banner
↓
Beneficios
↓
Características
↓
Testimonios
↓
FAQ
↓
CTA

Características en Productos

Puedes utilizar un bloque editable para presentar características generales de una línea o categoría.

Por ejemplo:

TODOS NUESTROS PRODUCTOS INCLUYEN

[ característica ]
[ característica ]
[ característica ]

↓

CATÁLOGO DINÁMICO

No reemplaces características específicas de cada producto

si el catálogo ya dispone de información dinámica correspondiente.

Utiliza la sección para contenido general o complementario.

Características de Servicios

Puedes utilizar:

QUÉ INCLUYE EL SERVICIO

[ Relevamiento ]
[ Configuración ]
[ Capacitación ]
[ Soporte ]

Si estás describiendo etapas

Puede ser mejor:

Timeline

o una sección de proceso.

Ejemplo

Relevamiento

como elemento incluido es una característica del servicio.

Pero:

1. Relevamiento
2. Configuración
3. Implementación

como secuencia temporal puede comunicarse mejor mediante Timeline.

Características y Acordeón

Si existen muchos detalles técnicos:

CARACTERÍSTICAS PRINCIPALES

[ 6 Cards ]

↓

ESPECIFICACIONES COMPLETAS

▸ Dimensiones
▸ Compatibilidad
▸ Requisitos
▸ Configuración

puede ser una excelente combinación.

No intentes mostrar todo en Cards

Clases para personalización avanzada

Puedes utilizar una estructura como:

caracteristicas-section
caracteristicas-grid
caracteristica-card
caracteristica-icon
caracteristica-title
caracteristica-text

CSS localizado

Por ejemplo:

.caracteristicas-section .caracteristica-card {
    padding: 24px;
    border-radius: 12px;
}

Iconos

.caracteristicas-section .caracteristica-icon {
    font-size: 32px;
}

No utilices selectores globales

Evita:

.card {
    padding: 24px;
}

si solo quieres modificar esta sección.

Tampoco

h3 {
    font-size: 22px;
}

si el cambio solo corresponde a los títulos de Características.

Utiliza scope

Hover

Puedes utilizar Hover moderado sobre Cards.

Por ejemplo:

.caracteristicas-section .caracteristica-card {
    transition: transform .2s ease;
}

.caracteristicas-section .caracteristica-card:hover {
    transform: translateY(-3px);
}

Pero pregunta primero

¿La Card es interactiva?

Si no lo es, un Hover demasiado intenso puede hacer pensar que puede hacerse clic.

Hover sutil

puede utilizarse simplemente como recurso visual, pero no debería simular un Button inexistente.

Si existe Link

entonces el Hover puede reforzar la interacción.

No ocultes información mediante Hover

Por ejemplo:

estado normal:
solo ícono

hover:
aparece todo el texto

puede funcionar mal en dispositivos táctiles.

El contenido principal debe ser accesible normalmente

Animaciones

Puedes utilizar:

Avanzado → Animate on scroll

sobre:

• Section;

• Grid Row;

• Cards.

Evita animar cada pequeño elemento

Por ejemplo:

ícono
título
párrafo

con tres animaciones diferentes en cada Card puede resultar excesivo.

Puede ser suficiente animar la Card completa

Delays

Si utilizas delay entre Cards, mantenlo moderado.

El visitante debería poder consultar todas las características rápidamente.

Responsive de íconos

Un ícono que funciona a:

48 px

en desktop puede seguir funcionando en móvil.

Pero revisa si ocupa demasiado espacio dentro de una Card estrecha.

Responsive del título

No mantengas un tamaño enorme que provoque:

GESTIÓN
DE
USUARIOS
AVANZADA

en demasiadas líneas.

Puedes ajustar Typography

según el dispositivo cuando sea necesario.

Descripciones en celular

Las líneas naturalmente serán más cortas.

Por eso una descripción de cinco líneas en desktop puede ocupar ocho o diez en celular.

La Card debe poder crecer.

No utilices Height fijo

si eso corta el contenido.

Ejemplo práctico: cuatro características

Queremos:

CARACTERÍSTICAS PRINCIPALES

[ ícono ]
Gestión de usuarios
Descripción...

[ ícono ]
Reportes
Descripción...

[ ícono ]
Integraciones
Descripción...

[ ícono ]
Responsive
Descripción...

Paso 1

Abre:

Secciones → Características

Paso 2

Selecciona una composición.

Paso 3

Utiliza Navigator.

Identifica:

Section
→ Grid Row
→ Grid Column
→ unidad de Característica

Paso 4

Modifica el Heading general.

Paso 5

Reemplaza el título de cada característica.

Paso 6

Reemplaza las descripciones.

Paso 7

Modifica los íconos si la composición los utiliza.

Paso 8

Elimina unidades sobrantes.

Paso 9

Clona una unidad completa si necesitas otra.

Paso 10

Ordena las características por importancia.

Paso 11

Personaliza:

• Background;

• Padding;

• Border radius;

• Typography.

Paso 12

Revisa Linked styles.

Paso 13

Configura Grid responsive.

Paso 14

Revisa desktop.

Paso 15

Revisa tablet.

Paso 16

Revisa celular.

Paso 17

Guarda.

Paso 18

Utiliza:

Ver página

Ejemplo práctico: especificaciones de producto

ESPECIFICACIONES PRINCIPALES

750 ml
Capacidad

Acero inoxidable
Material

350 g
Peso

4 colores
Disponibles

En este caso

puede tener más importancia:

• el dato;

• la unidad;

que una descripción larga.

Ejemplo práctico: servicio

QUÉ INCLUYE

RELEVAMIENTO
Analizamos las necesidades iniciales.

CONFIGURACIÓN
Preparamos las opciones necesarias.

CAPACITACIÓN
Acompañamos al equipo en la utilización.

SOPORTE
Brindamos asistencia según las condiciones del servicio.

Ejemplo práctico: producto físico

CARACTERÍSTICAS

[ ícono ]
Acero inoxidable

[ ícono ]
Tapa hermética

[ ícono ]
750 ml

[ ícono ]
Apta para bebidas frías y calientes

Ejemplo práctico: plataforma digital

FUNCIONALIDADES

USUARIOS Y PERMISOS
Administra diferentes accesos.

REPORTES
Consulta información organizada.

RESPONSIVE
Utiliza la plataforma desde distintos tamaños de pantalla.

INTEGRACIONES
Conecta herramientas compatibles según la configuración disponible.

¿Qué hacer si no sé si un texto es característica o beneficio?

Hazte esta pregunta:

¿Estoy diciendo qué tiene o qué hace?

Entonces probablemente sea:

Característica

Si respondes

¿Qué obtiene el cliente gracias a eso?

entonces probablemente sea:

Beneficio

Ejemplo

Carga automática

Característica.

Ahorra tiempo de carga manual

Beneficio.

¿Qué hacer si la sección parece demasiado comercial?

Revisa si estás utilizando frases como:

Increíble
Único
Extraordinario
Revolucionario

en lugar de explicar propiedades reales.

Sustituye adjetivos por información

Por ejemplo:

Revolucionario sistema de gestión

puede convertirse en:

Gestión de usuarios, permisos y reportes desde un mismo panel.

si eso describe correctamente la solución.

¿Qué hacer si tengo 20 características?

Prioriza las principales.

Puedes:

1. mostrar 6;

2. agregar Acordeón;

3. crear una Tabla;

4. enlazar más información.

¿Qué hacer si todas son muy técnicas?

Puedes agregar una breve explicación orientada al usuario.

Por ejemplo:

API REST

Permite integrar sistemas compatibles mediante una API.

si corresponde.

No elimines la precisión técnica

pero explica lo suficiente para que el público objetivo la comprenda.

¿Qué hacer si las Cards tienen alturas diferentes?

Primero revisa:

• longitud de títulos;

• descripciones.

Después considera:

• Min Height;

• layout flexible.

Evita Height rígido como primera solución.

¿Qué hacer si una Card queda vacía después de eliminar texto?

Si ya no necesitas esa característica:

elimina la unidad completa.

¿Qué hacer si al eliminar una Card quedan tres columnas desbalanceadas?

Revisa Grid Row y redistribuye.

¿Qué hacer si quiero pasar de 4 a 3?

Puedes ajustar la grilla.

Por ejemplo:

Antes:

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

Después:

[ A ] [ B ] [ C ]

con columnas más amplias.

¿Qué hacer si quiero pasar de 3 a 6?

Puedes clonar unidades y organizar:

[ A ] [ B ] [ C ]

[ D ] [ E ] [ F ]

¿Qué hacer si al clonar el ícono sigue siendo el mismo?

Es normal.

La copia conserva el contenido hasta que lo reemplazas.

Modifica el ícono correspondiente.

¿Qué hacer si al cambiar un color cambian todas las Cards?

Comprueba:

Linked styles

Probablemente comparten una Class.

Si quieres que todas cambien:

es correcto.

¿Qué hacer si quiero cambiar solo una?

Agrega:

• Class adicional;

• ID único;

si realmente necesitas una excepción.

¿Qué hacer si el Hover cambia todas?

Mismo principio.

Revisa la Class que comparte el estilo.

¿Qué hacer si un ícono aparece demasiado grande?

Selecciona el elemento correspondiente y ajusta:

• tamaño;

• Width;

• Typography según el tipo de icono.

¿Qué hacer si el ícono no queda alineado?

Revisa:

• contenedor;

• text-align;

• alineación;

• Margin/Padding.

No lo posiciones con valores absolutos rígidos sin necesidad

¿Qué hacer si las Cards siguen en cuatro columnas en móvil?

Revisa:

Grid Row

y los tamaños de cada columna para dispositivos pequeños.

La vista móvil superior solo previsualiza.

¿Qué hacer si hay scroll horizontal?

Revisa:

• Width fijo;

• Grid;

• Margin;

• Min Width;

• íconos o imágenes demasiado grandes.

No utilices globalmente

body {
    overflow-x: hidden;
}

para esconder el problema.

¿Qué hacer si la imagen se deforma?

Revisa:

• Width;

• Height;

• object-fit.

¿Qué hacer si una característica debería enlazar a más información?

Puedes incluir:

• Link;

• Button;

cuando corresponda.

Por ejemplo:

INTEGRACIONES

Conoce las alternativas disponibles.

[ VER INTEGRACIONES ]

No agregues un Button en cada Card si no aporta valor

Una grilla con:

6 Cards
+
6 botones

puede generar demasiado ruido.

Puede ser mejor un único CTA debajo

[ CONOCER TODAS LAS CARACTERÍSTICAS ]

Características y CTA

Ejemplo:

CARACTERÍSTICAS

[ A ] [ B ] [ C ]

↓

¿QUIERES CONOCER LA SOLUCIÓN?

[ CONTACTAR ]

Utilizar IA para organizar Características

ChatGPT, Claude o Gemini pueden ayudarte.

Por ejemplo:

Tengo esta lista de características reales de un producto:

[pegar información]

Quiero presentarlas en una sección Características de Waclis.

Selecciona las seis más importantes.

Para cada una crea:
- título máximo de 4 palabras;
- descripción máxima de 20 palabras.

No inventes funcionalidades, capacidades ni beneficios.

IA para diferenciar Características y Beneficios

Tengo estas frases:

[lista]

Clasifícalas en:
- Característica.
- Beneficio.
- Servicio.
- Afirmación genérica.

No agregues información nueva.

Explica brevemente los casos ambiguos.

IA para transformar lenguaje técnico

Estas son características técnicas reales:

[lista]

Reescríbelas para que sean comprensibles para un cliente no técnico.

Mantén el dato técnico original.

No inventes beneficios.

IA para crear títulos más breves

Tengo estos títulos de características:

[lista]

Redúcelos a un máximo de cuatro palabras.

Mantén el significado técnico.

No agregues términos comerciales.

IA para seleccionar íconos conceptualmente

Puedes pedir:

Estas son seis características:

[lista]

Para cada una sugiere un concepto de ícono simple y reconocible.

Ejemplo:
Usuarios → persona
Reportes → gráfico

No indiques una librería específica.
No inventes funcionalidades.

Después puedes seleccionar dentro del editor el recurso visual disponible que mejor represente cada concepto.

IA para revisar consistencia

Tengo estas seis Cards:

[pegar títulos y descripciones]

Revisa:
- si todas son realmente características;
- si alguna está expresada como beneficio;
- si se repiten;
- si tienen niveles de detalle muy diferentes.

Propón ajustes únicamente utilizando la información existente.

IA para CSS

Por ejemplo:

Estoy personalizando una sección Características en Waclis.

La sección utiliza:
.caracteristicas-section

Las Cards:
.caracteristica-card

Los títulos:
.caracteristica-title

Los íconos:
.caracteristica-icon

Necesito:
- 3 Cards por fila en desktop;
- 2 por fila en tablet;
- 1 por fila en celular;
- Padding de 24 px;
- Border radius de 12 px;
- Hover muy sutil;
- mismo estilo para todas las Cards.

No modifiques otras Cards de la Página web.

No cambies HTML.

No agregues JavaScript.

No elimines Classes existentes.

Devuélveme solamente el CSS necesario.

IA para revisar HTML de una unidad

Si no sabes qué debes clonar:

Este es el HTML de una Card dentro de una sección Características de Waclis:

[pegar únicamente la unidad relevante]

Necesito agregar otra característica manteniendo exactamente la misma estructura.

Indícame cuál es el contenedor completo que debo duplicar.

No elimines ni renombres Classes.

Buenas prácticas para Características

Recomendamos:

• definir primero qué tipo de características vas a mostrar;

• diferenciar características de beneficios;

• utilizar información concreta;

• priorizar las más relevantes;

• escribir títulos breves;

• mantener descripciones concisas;

• utilizar íconos relacionados con el concepto;

• mantener un estilo visual consistente;

• utilizar datos cuantitativos con sus unidades;

• clonar unidades completas;

• utilizar Navigator;

• aprovechar Linked styles para Cards repetidas;

• adaptar Grid responsive;

• evitar Height fijo cuando el contenido puede variar;

• limitar CSS a la sección;

• probar el resultado mediante Ver página.

Errores frecuentes

Confundir Características con Beneficios

Pregunta:

¿Qué tiene o hace?

Característica.

¿Qué obtiene el cliente?

Beneficio.

Confundir Características con Servicios

Servicio describe qué ofrece la empresa.

Utilizar títulos vagos

Evita:

Calidad
Innovación
Tecnología

sin explicar qué significan.

Utilizar superlativos en lugar de propiedades

Explica hechos.

Inventar características para completar Cards

Elimina las unidades sobrantes.

Agregar demasiadas características

Prioriza.

Mezclar especificaciones, beneficios y mensajes comerciales sin lógica

Mantén una categoría consistente.

Utilizar íconos sin relación

El recurso visual debe ayudar a comprender.

Utilizar diferentes estilos de íconos en cada Card

Mantén coherencia.

Utilizar solo un ícono sin texto

La característica debe poder comprenderse.

Mostrar números sin unidad

Explica qué representan.

Clonar solamente Heading

Clona la unidad completa.

Eliminar solamente el Paragraph

Si quieres quitar toda la característica, elimina su Card.

Mover solo el ícono

Mueve la unidad completa.

Repetir IDs personalizados

Mantén IDs únicos.

Romper Classes compartidas para evitar Linked styles

Compartir estilos puede ser beneficioso.

Aplicar Height fijo a Cards con textos variables

Puede cortar contenido.

Mantener cuatro columnas estrechas en celular

Adapta Grid.

Ocultar características importantes en móvil

Corrige el layout en lugar de eliminarlas.

Utilizar Hover como única forma de acceder al contenido

Recuerda dispositivos táctiles.

Hacer que Cards no clicables parezcan botones

Utiliza Hover moderado.

Aplicar CSS global a .card, h3 o img

Limita el scope.

Agregar demasiado CSS antes de revisar Grid

Utiliza primero las herramientas visuales.

No comprobar Ver página

Revisa la composición final.

Flujo recomendado

1. DEFINIR QUÉ ESTAMOS DESCRIBIENDO
↓
2. DIFERENCIAR CARACTERÍSTICAS DE BENEFICIOS
↓
3. PRIORIZAR LAS MÁS IMPORTANTES
↓
4. ELEGIR DISEÑO
↓
5. AGREGAR SECCIÓN
↓
6. REVISAR NAVIGATOR
↓
7. MODIFICAR HEADING GENERAL
↓
8. REEMPLAZAR TÍTULOS
↓
9. REEMPLAZAR DESCRIPCIONES
↓
10. CONFIGURAR ÍCONOS / IMÁGENES
↓
11. AGREGAR DATOS CUANTITATIVOS SI CORRESPONDE
↓
12. ELIMINAR / CLONAR UNIDADES
↓
13. ORDENAR POR IMPORTANCIA
↓
14. PERSONALIZAR ESTILO
↓
15. REVISAR LINKED STYLES
↓
16. CONFIGURAR GRID RESPONSIVE
↓
17. GUARDAR CAMBIOS
↓
18. VER PÁGINA

Checklist antes de publicar Características

• Todas las unidades representan realmente características.

• No estoy mezclando beneficios sin intención.

• No estoy mezclando servicios sin intención.

• Los títulos son claros.

• Los títulos son relativamente breves.

• Las descripciones explican la característica.

• Evité afirmaciones comerciales genéricas.

• Las características son reales y verificables.

• Los datos numéricos son correctos.

• Las unidades están indicadas cuando corresponde.

• No hay características duplicadas.

• Priorizo primero las más importantes.

• La cantidad de Cards es razonable.

• Eliminé unidades de ejemplo innecesarias.

• Los íconos representan correctamente cada concepto.

• Los íconos mantienen un estilo visual coherente.

• Las imágenes fueron reemplazadas si existen.

• Revisé Cover / Contain si corresponde.

• La Typography es consistente.

• Las Cards tienen Padding adecuado.

• La separación entre unidades es correcta.

• Linked styles tiene el alcance esperado.

• Las excepciones utilizan Class adicional o ID cuando corresponde.

• Al clonar seleccioné la unidad completa.

• Actualicé títulos, textos e íconos de las copias.

• Los IDs personalizados son únicos.

• Revisé Navigator.

• Desktop se ve correctamente.

• Tablet se ve correctamente.

• Celular se ve correctamente.

• Grid se reorganiza correctamente.

• Las Cards no quedan demasiado estrechas.

• Los textos no se cortan.

• No existe scroll horizontal inesperado.

• El Hover es moderado.

• Las animaciones son moderadas.

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

• Guardé los cambios.

• Revisé el resultado mediante Ver página.

En resumen

La sección Características permite explicar de manera organizada:

• qué tiene;

• qué hace;

• cómo está compuesto;

• qué capacidades posee;

un producto, servicio o solución.

La distinción principal es:

CARACTERÍSTICA
¿Qué tiene o qué hace?

BENEFICIO
¿Qué obtiene el cliente?

SERVICIO
¿Qué ofrece la empresa?

Por ejemplo:

Característica:
Sincronización automática

Beneficio:
Reduce tareas manuales

Servicio:
Implementación de la solución

Una estructura habitual de Características puede ser:

Section
└── Grid Row
    ├── Card
    │   ├── Icon
    │   ├── Heading
    │   └── Paragraph
    ├── Card
    └── Card

Por eso utiliza Navigator para identificar la unidad completa antes de:

• clonar;

• mover;

• eliminar.

Cuando las Cards comparten una Class y Waclis muestra:

Linked styles

esto puede ser exactamente lo que necesitas para mantener:

• mismo Padding;

• mismo Border radius;

• misma Typography;

• mismo Hover.

En responsive:

Desktop
[ A ] [ B ] [ C ]

puede transformarse en:

Mobile

[ A ]

[ B ]

[ C ]

Utiliza Grid Row para adaptar las columnas y no mantengas Cards excesivamente estrechas en celular.

Si tienes muchas características:

prioriza las principales y utiliza otras secciones para desarrollar el detalle.

Por ejemplo:

Características principales
↓
6 Cards

Especificaciones completas
↓
Acordeón o Tabla

Una buena sección Características debe ser:

• concreta;

• organizada;

• visualmente consistente;

• fácil de comparar;

• responsive;

• basada en información real.

Finalmente:

Guardar Cambios → Ver página → revisar desktop, tablet y celular.

El objetivo no es llenar una grilla de íconos.

El objetivo es que el visitante pueda comprender rápidamente qué ofrece realmente el producto o servicio y cuáles son sus principales capacidades.