¿Cómo utilizar la sección Beneficios en el Editor de bloques de Waclis?

La sección Beneficios del Editor de bloques de Waclis permite presentar de forma clara las principales ventajas, diferenciales o razones por las que un cliente debería elegir tu empresa, producto o servicio.

Puedes utilizarla para destacar, por ejemplo:

• envíos rápidos;

• atención personalizada;

• experiencia;

• garantía;

• financiación;

• soporte;

• cobertura;

• calidad;

• seguridad;

• disponibilidad;

• asesoramiento;

• beneficios comerciales.

Waclis incluye diferentes diseños dentro de:

Secciones → Beneficios

Puedes elegir la composición que mejor se adapte a tu contenido y luego personalizar:

• íconos;

• títulos;

• textos;

• colores;

• fondos;

• espacios;

• cantidad de Cards;

• comportamiento responsive.

¿Qué es una sección de Beneficios?

Una sección de Beneficios agrupa varias ventajas dentro de una misma composición.

Por ejemplo:

¿POR QUÉ ELEGIRNOS?

[ Ícono ]
Envíos a todo el país
Despachamos tus pedidos de forma rápida y segura.

[ Ícono ]
Compra segura
Diferentes medios de pago disponibles.

[ Ícono ]
Atención personalizada
Nuestro equipo puede ayudarte antes y después de tu compra.

Cada beneficio suele funcionar como una unidad compuesta por:

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

Aunque la estructura exacta puede variar según el diseño elegido.

¿Cuándo conviene utilizar Beneficios?

Utiliza esta sección cuando quieras responder una pregunta como:

¿Por qué debería elegir esta empresa?

¿Qué ventajas obtiene el cliente?

¿Qué diferencia esta propuesta de otras?

¿Qué recibe el usuario además del producto o servicio principal?

Ejemplo para una Página web comercial

BENEFICIOS DE COMPRAR CON NOSOTROS

Envíos a todo el país
Despachamos pedidos a diferentes localidades.

Atención personalizada
Te acompañamos durante todo el proceso.

Compra segura
Tus operaciones se realizan mediante medios de pago confiables.

Stock actualizado
Consulta disponibilidad antes de realizar tu compra.

Ejemplo para una empresa de servicios

¿POR QUÉ TRABAJAR CON NOSOTROS?

Experiencia
Años acompañando empresas de diferentes sectores.

Soluciones personalizadas
Cada proyecto se adapta a las necesidades del cliente.

Soporte
Acompañamiento antes, durante y después de la implementación.

Beneficios, Características y Servicios no son lo mismo

Estas tres categorías pueden parecer similares, pero cumplen funciones diferentes.

Beneficios

Responden principalmente:

¿Qué gana el cliente?

Ejemplos:

• entrega rápida;

• ahorro de tiempo;

• asesoramiento;

• financiación;

• soporte;

• garantía.

Características

Responden principalmente:

¿Qué tiene o cómo funciona el producto o servicio?

Ejemplos:

• fabricado en acero inoxidable;

• compatible con dispositivos móviles;

• capacidad de 1 litro;

• integración automática;

• panel de administración.

Servicios

Responden:

¿Qué ofrece la empresa?

Ejemplos:

• instalación;

• consultoría;

• mantenimiento;

• diseño;

• soporte técnico;

• implementación.

Ejemplo comparativo

Supongamos que una empresa ofrece un sistema de gestión.

Servicio

Implementación

Característica

Panel de administración online

Beneficio

Accede a tu información desde cualquier lugar

Elegir correctamente la categoría ayuda a que el contenido sea más claro.

¿Cómo agregar una sección de Beneficios?

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

Luego abre:

Secciones

y selecciona:

Beneficios

Paso 1: abre Beneficios

Dentro de la biblioteca encontrarás diferentes composiciones.

Elige principalmente según:

• cantidad de elementos;

• distribución;

• tipo de ícono;

• posición del texto;

• tamaño visual;

• relación entre Cards.

No es necesario que los textos o colores de ejemplo coincidan con tu marca.

Puedes personalizarlos después.

Paso 2: agrega la composición

Selecciona el diseño que quieras utilizar.

Una vez incorporado, pasa a formar parte del contenido y puedes modificar cada elemento.

Paso 3: reemplaza los títulos

Selecciona cada:

Heading

y cambia el contenido de ejemplo.

Por ejemplo:

Envíos a todo el país

Compra segura

Atención personalizada

Mantén títulos breves y fáciles de escanear.

Evita títulos excesivamente largos

Por ejemplo:

Contamos con un equipo especializado para brindar atención personalizada a cada cliente

puede resultar demasiado extenso como Heading.

Es preferible:

Atención personalizada

y ampliar la explicación en el Paragraph.

Paso 4: reemplaza las descripciones

Selecciona cada:

Paragraph

y explica brevemente el beneficio.

Ejemplo:

Despachamos pedidos a diferentes localidades para que recibas tus productos donde los necesites.

La descripción debe ampliar el título, no repetirlo exactamente.

Ejemplo poco útil

Título:

Compra segura

Descripción:

Compra de forma segura.

Aporta muy poca información adicional.

Mejor

Título:

Compra segura

Descripción:

Utiliza diferentes medios de pago y realiza tus operaciones desde un entorno confiable.

Paso 5: personaliza los íconos

Muchos diseños de Beneficios utilizan:

• Font Icon;

• SVG Icon;

• otros componentes visuales.

Selecciona el ícono para modificarlo según las opciones disponibles.

El ícono debe reforzar el concepto

Por ejemplo:

Envíos

Puede utilizar:

• vehículo;

• caja;

• ubicación.

Seguridad

Puede utilizar:

• candado;

• escudo;

• verificación.

Atención

Puede utilizar:

• auriculares;

• persona;

• mensaje.

Garantía

Puede utilizar:

• sello;

• escudo;

• check.

Evita íconos sin relación

Un beneficio de:

Envíos rápidos

con un ícono de:

corazón

puede generar confusión si no existe una lógica visual clara.

Los íconos deberían ayudar a interpretar el contenido rápidamente.

Mantén una misma familia visual de íconos

Si utilizas varios íconos dentro de la misma sección, intenta que compartan:

• estilo;

• tamaño;

• grosor visual;

• tratamiento de color.

Por ejemplo, evita combinar sin intención:

• un SVG muy detallado;

• un ícono lineal;

• una fotografía;

• un emoji.

La coherencia ayuda a que las Cards se perciban como parte del mismo conjunto.

Tamaño de los íconos

Un ícono debería ser suficientemente visible sin competir con el título.

Comprueba especialmente:

• desktop;

• celular.

Un ícono demasiado grande puede desplazar demasiado contenido hacia abajo.

Color de los íconos

Puedes utilizar el color principal de la marca o un tono complementario.

Por ejemplo:

Ícono → color principal
Título → color oscuro
Texto → gris

No es necesario utilizar un color distinto para cada beneficio.

Una paleta consistente suele funcionar mejor.

Cantidad de beneficios

No existe una cantidad obligatoria.

Puedes utilizar:

• 3;

• 4;

• 6;

• otra cantidad según el contenido y el diseño.

Lo importante es que cada beneficio sea realmente relevante.

Tres beneficios

Es una de las distribuciones más comunes.

[ BENEFICIO 1 ] [ BENEFICIO 2 ] [ BENEFICIO 3 ]

Funciona bien cuando quieres destacar tres diferenciales principales.

Cuatro beneficios

Puedes utilizar:

[ 1 ] [ 2 ] [ 3 ] [ 4 ]

si existe suficiente espacio.

También puedes organizar:

[ 1 ] [ 2 ]

[ 3 ] [ 4 ]

según el diseño.

Seis beneficios

Una composición frecuente puede ser:

[ 1 ] [ 2 ] [ 3 ]

[ 4 ] [ 5 ] [ 6 ]

En celular:

[ 1 ]

[ 2 ]

[ 3 ]

[ 4 ]

[ 5 ]

[ 6 ]

No agregues beneficios solo para completar la grilla

Si tienes cuatro beneficios relevantes, no necesitas inventar dos adicionales para completar seis.

Es preferible ajustar la estructura.

Prioriza los beneficios más importantes

El visitante suele prestar más atención a los primeros elementos.

Ordena la sección estratégicamente.

Por ejemplo:

1. Envíos
2. Compra segura
3. Garantía
4. Atención

si esos son los principales argumentos comerciales.

Evita demasiados beneficios secundarios

Una sección con:

12 o 15 beneficios

puede dejar de funcionar como resumen y convertirse en un listado extenso.

Si tienes mucho contenido, considera:

• reducir a los principales;

• dividir en grupos;

• utilizar Características;

• utilizar Acordeones;

• crear otra sección complementaria.

Estructura típica de una Card de Beneficio

Puedes encontrar algo similar a:

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

Navigator te ayudará a identificar cada nivel.

¿Qué seleccionar para modificar cada parte?

Cambiar ícono

Selecciona:

Icon

Cambiar título

Selecciona:

Heading

Cambiar descripción

Selecciona:

Paragraph

Cambiar fondo de la tarjeta

Selecciona:

Card

Cambiar espacio de toda la fila

Selecciona:

Grid Row o el contenedor correspondiente.

Clonar un beneficio

Si quieres agregar uno nuevo:

1. selecciona la Card completa o su contenedor;

2. utiliza Clonar elemento;

3. modifica:

   • ícono;

   • Heading;

   • Paragraph;

   • enlace, si existe;

   • ID, si corresponde.

No clones solamente el título

Si seleccionas:

Heading

y utilizas Clonar, obtendrás dos títulos dentro de la misma Card.

Para duplicar todo el beneficio debes seleccionar la unidad completa.

Revisa Navigator antes de clonar

Por ejemplo:

Grid Column
└── Card
    ├── Icon
    ├── Heading
    └── Paragraph

Puede ser conveniente clonar:

Grid Column

si esa es la unidad completa dentro de la grilla.

Dependerá del diseño elegido.

Eliminar un beneficio

Si el diseño contiene más elementos de los que necesitas:

1. selecciona el contenedor completo;

2. utiliza Eliminar.

Recuerda que Waclis no solicita confirmación.

Si te equivocas, utiliza:

Deshacer

inmediatamente.

No elimines solamente el contenido y dejes la Card vacía

Por ejemplo, no conviertas:

[ Beneficio 1 ] [ Beneficio 2 ] [ Beneficio 3 ]

en:

[ Beneficio 1 ] [                 ] [ Beneficio 3 ]

si tu intención era tener solamente dos Cards.

Elimina la unidad completa y adapta la grilla.

Mantener todas las Cards consistentes

Una sección de Beneficios funciona mejor cuando las unidades comparten:

• misma altura visual;

• mismo Padding;

• misma tipografía;

• mismo tamaño de íconos;

• mismo Border radius;

• misma lógica de Hover;

• misma alineación.

Utiliza Classes compartidas

Por ejemplo:

beneficio-card

puede utilizarse en todas las Cards.

Esto permite mantener estilos comunes.

Si Waclis muestra:

Linked styles

puede ser exactamente el comportamiento que necesitas.

Ejemplo

Todas las Cards:

class="beneficio-card"

pueden compartir:

• fondo;

• borde;

• Padding;

• Hover.

Así no tienes que configurar cada una manualmente.

¿Qué ocurre si quiero destacar una sola?

Mantén la Class común y agrega una excepción.

Por ejemplo:

Card 1
class="beneficio-card"

Card 2
class="beneficio-card destacado"

Card 3
class="beneficio-card"

O utiliza un ID único

Por ejemplo:

id="beneficio-envio-gratis"

si esa Card es realmente única.

No elimines la Class general solo para destacar una

Podrías perder:

• dimensiones;

• Padding;

• responsive;

• Hover;

• otros estilos compartidos.

Fondo de las Cards

Puedes utilizar:

• fondo transparente;

• fondo blanco;

• fondo de color;

• borde;

• sombra.

La elección depende del contexto.

Beneficios sobre un fondo general

Por ejemplo:

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

      ¿POR QUÉ ELEGIRNOS?

 [ Card ]   [ Card ]   [ Card ]

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

Puedes aplicar un fondo a la Section y mantener las Cards más simples.

Cards independientes

Otra alternativa:

[ Card blanca ]
[ Card blanca ]
[ Card blanca ]

sobre un fondo claro o gris.

En este caso puedes utilizar:

• Border;

• Border radius;

• sombra.

Evita demasiados efectos juntos

Una Card no necesita necesariamente:

• borde grueso;

• sombra intensa;

• degradado;

• gran Hover;

• animación;

• fondo fuerte;

todo al mismo tiempo.

La jerarquía debería seguir siendo clara.

Padding en las Cards

El Padding es especialmente importante en Beneficios.

Sin suficiente espacio:

┌───────────────────┐
│IconTítuloTexto    │
└───────────────────┘

puede sentirse comprimido.

Con Padding:

┌───────────────────┐
│                   │
│       Icon        │
│                   │
│      Título       │
│                   │
│       Texto       │
│                   │
└───────────────────┘

la lectura suele mejorar.

No exageres el Padding en móvil

Un Padding lateral muy grande puede dejar poco espacio para el contenido.

Revisa tablet y celular.

Alineación

Las Cards pueden utilizar:

• contenido centrado;

• contenido alineado a izquierda.

Ambas alternativas son válidas.

Contenido centrado

Puede funcionar bien con:

• ícono;

• título breve;

• texto corto.

Ejemplo:

       [ Ícono ]

       Envíos

Despachamos tus pedidos...

Alineación a izquierda

Puede resultar más cómoda cuando las descripciones son algo más largas.

[ Ícono ]

Envíos

Despachamos tus pedidos de forma rápida...

Mantén la misma alineación entre las Cards

Evita:

Card 1 → centrada
Card 2 → izquierda
Card 3 → derecha

salvo que forme parte intencional del diseño.

Altura de Cards

Si las descripciones tienen longitudes diferentes, una Card puede resultar más alta.

Ejemplo:

[ Card corta ]

[ Card mucho más alta ]

Esto puede generar una grilla irregular.

La mejor solución suele comenzar por el contenido

Intenta mantener descripciones de longitud similar.

Por ejemplo:

Título breve
1 o 2 líneas de explicación

en todas las Cards.

Si aun así necesitas igualar visualmente alturas

Puedes trabajar con:

• estructura;

• Min Height;

• alineaciones;

• CSS específico.

Evita utilizar un Height fijo demasiado rígido si los textos pueden cambiar posteriormente.

Min Height

Puede ser útil para mantener una altura mínima.

Por ejemplo:

.beneficios-section .beneficio-card {
    min-height: 240px;
}

si el diseño realmente lo necesita.

Pero comprueba textos largos y responsive.

Beneficios responsive

Una sección puede utilizar:

Desktop

[ 1 ] [ 2 ] [ 3 ]

Tablet

[ 1 ] [ 2 ]

[ 3 ]

Celular

[ 1 ]

[ 2 ]

[ 3 ]

La distribución correcta depende de:

• cantidad;

• ancho;

• contenido;

• tamaño de íconos.

Utiliza Grid Row

Si la sección utiliza Grid Row, adapta las columnas por tamaño.

No mantengas tres Cards extremadamente estrechas en celular solo para conservar la misma fila.

Ejemplo con cuatro beneficios

Desktop

[ 1 ] [ 2 ] [ 3 ] [ 4 ]

Tablet

[ 1 ] [ 2 ]

[ 3 ] [ 4 ]

Mobile

[ 1 ]

[ 2 ]

[ 3 ]

[ 4 ]

No ocultes beneficios importantes en móvil

Si los cuatro son relevantes, deben seguir disponibles.

Utiliza Hide based on device screen width solamente cuando exista una razón real para ocultar un elemento.

Tipografía

Mantén una jerarquía clara.

Por ejemplo:

Título de la sección
↓
Título de cada beneficio
↓
Descripción

El título de cada Card no debería competir visualmente con el Heading principal de la sección.

Ejemplo

¿POR QUÉ ELEGIRNOS?         ← Heading principal

Envíos rápidos              ← Heading de Card
Despachamos tus pedidos...  ← Paragraph

Evita poner todo en negrita

Si:

• Heading general;

• títulos;

• párrafos;

utilizan todos el máximo Font weight, se pierde jerarquía.

Utiliza Typography para diferenciar niveles.

Longitud de textos

Una sección de Beneficios se consume rápidamente.

Evita descripciones excesivamente extensas.

No necesitas explicar todas las condiciones del servicio dentro de cada Card.

Puedes ampliar información en otra sección si es necesario.

Ejemplo recomendado

Garantía

Contamos con respaldo y acompañamiento ante cualquier inconveniente.

Ejemplo demasiado largo

Garantía

Nuestra empresa cuenta con una política de garantía que contempla distintas situaciones dependiendo del tipo de producto adquirido, fecha de compra, condiciones...

Ese contenido puede ser más apropiado para:

• FAQ;

• Acordeón;

• página de condiciones.

Beneficios con enlaces

Algunos diseños pueden incluir:

• Button;

• Link;

• Card clicable.

Por ejemplo:

Financiación

Conoce nuestras alternativas.

[ Ver opciones ]

Utiliza enlaces solo cuando aportan valor

No es obligatorio convertir cada beneficio en un enlace.

Si el visitante ya recibe toda la información necesaria, puede no hacer falta.

Si las Cards son clicables

Asegúrate de que sea visualmente comprensible.

Puedes utilizar:

• Button;

• Hover;

• texto de acción;

• tratamiento visual consistente.

Revisa los enlaces después de clonar

Si clonas:

Beneficio 1
→ /pagina-1

la copia puede conservar:

/pagina-1

hasta que lo cambies.

Comprueba siempre las URLs.

Hover en Beneficios

Puede utilizarse un Hover suave para reforzar visualmente una Card.

Por ejemplo:

.beneficios-section .beneficio-card {
    transition: transform .3s ease;
}

.beneficios-section .beneficio-card:hover {
    transform: translateY(-4px);
}

Mantén el Hover como refuerzo

La Card debe seguir siendo comprensible sin Hover.

Especialmente porque en dispositivos táctiles el comportamiento es diferente.

No ocultes descripciones hasta Hover

Evita:

Normal:
solo ícono

Hover:
título + texto

si esa información es importante.

En celular puede resultar problemática.

Animaciones

Puedes utilizar:

Avanzado → Animate on scroll

para:

• toda la fila;

• cada Card;

• la Section.

Animar toda la fila

Puede generar un resultado más simple:

[ 1 ] [ 2 ] [ 3 ]
↓
aparecen juntos

Animar Cards individualmente

Puedes utilizar un Delay progresivo:

Card 1 → primero
Card 2 → después
Card 3 → después

Utiliza diferencias moderadas.

No retrases el contenido demasiado

Los beneficios suelen comunicar información clave.

Deben aparecer rápidamente.

Beneficios en Home

Una de las ubicaciones más habituales es la Home.

Por ejemplo:

Banner

↓

Productos destacados

↓

¿POR QUÉ ELEGIRNOS?

[ Beneficio ] [ Beneficio ] [ Beneficio ]

También pueden utilizarse antes de los productos.

La posición depende del objetivo de la Página web.

Beneficios en Productos

Puedes utilizar:

Productos → Bloque editable debajo del menú

para mostrar información como:

ENVÍOS

COMPRA SEGURA

FINANCIACIÓN

GARANTÍA

antes del catálogo dinámico.

Beneficios después del catálogo

También puedes utilizar el área editable inferior para reforzar:

• garantía;

• devoluciones;

• soporte;

• atención.

Beneficios en una landing page

En una página de campaña puedes utilizar:

Banner
↓
Producto / servicio
↓
Beneficios
↓
Testimonios
↓
CTA

La sección ayuda a convertir características en argumentos comerciales.

Cómo escribir mejores beneficios

Una buena práctica consiste en enfocarse en el resultado para el cliente.

En lugar de

Tenemos soporte técnico

puedes utilizar:

Acompañamiento permanente

Nuestro equipo puede ayudarte antes, durante y después de tu compra.

En lugar de

Contamos con logística

puedes utilizar:

Recibe tus pedidos donde los necesitas

Realizamos envíos a diferentes localidades.

Habla desde la perspectiva del visitante

En lugar de centrar todo en:

“Nosotros tenemos...”

intenta explicar:

“Tú obtienes...”

o directamente el beneficio.

Característica convertida en beneficio

Característica:

Plataforma disponible online

Beneficio:

Accede desde cualquier lugar

Descripción:

Consulta tu información desde diferentes dispositivos con conexión a Internet.

Combinar característica + beneficio

Puedes utilizar:

Sincronización automática

Mantén la información actualizada sin realizar cargas manuales repetitivas.

Aquí explicas:

qué hace

y

qué obtiene el usuario.

Diferencia entre Beneficio y Promesa absoluta

Evita afirmaciones que no puedan sostenerse.

Por ejemplo:

El mejor servicio del mercado

es mucho menos informativo que:

Atención personalizada

Nuestro equipo acompaña cada consulta de forma individual.

Los beneficios concretos suelen ser más creíbles.

Íconos y accesibilidad

El ícono debería complementar el texto, no reemplazarlo por completo.

Por ejemplo, un usuario no debería necesitar interpretar un símbolo para entender el beneficio.

Utiliza siempre:

ícono + título

cuando el significado no sea universalmente evidente.

Fondo de la Section

Puedes modificar la Section completa.

Por ejemplo:

Fondo claro

¿POR QUÉ ELEGIRNOS?

[ Card ] [ Card ] [ Card ]

Selecciona Section y utiliza las propiedades correspondientes.

Boxed o Full

Puedes utilizar:

Container width → Boxed

cuando quieres que las Cards permanezcan dentro de un ancho contenido.

Full

puede ser útil en determinados diseños amplios.

La elección depende de la composición.

Espacio superior e inferior

Una sección de Beneficios necesita suficiente separación de las áreas anteriores y siguientes.

Puedes trabajar con:

• Padding de Section;

• Margin según la estructura.

Evita que parezca pegada a otros bloques.

Ejemplo

Antes:

PRODUCTOS
BENEFICIOS
TESTIMONIOS

Con espacio adecuado:

PRODUCTOS


BENEFICIOS


TESTIMONIOS

La separación ayuda a identificar cada unidad.

Beneficios con fondo de imagen

Puede utilizarse una Section con imagen de fondo si el diseño lo requiere.

En ese caso presta especial atención a:

• contraste;

• legibilidad;

• Overlay;

• Cards.

Una fotografía con mucho detalle puede dificultar la lectura de tres o cuatro Cards.

Fondo simple suele funcionar muy bien

Beneficios comunica información breve.

Un fondo limpio ayuda a que:

• íconos;

• títulos;

• textos;

sean fáciles de leer.

CSS personalizado para Beneficios

Si necesitas personalización avanzada, utiliza un scope específico.

Por ejemplo:

beneficios-section

Cards:

beneficio-card

CSS

.beneficios-section .beneficio-card {
    padding: 24px;
    border-radius: 16px;
}

Evita

.card {
    padding: 24px;
}

porque puede afectar otras Cards.

Estructura de Classes recomendada

Por ejemplo:

beneficios-section
beneficios-grid
beneficio-card
beneficio-icono
beneficio-titulo
beneficio-texto

Esto facilita:

• mantenimiento;

• responsive;

• CSS;

• uso de IA.

IA para personalizar Beneficios

Puedes pedir ayuda a ChatGPT, Claude o Gemini.

Por ejemplo:

Estoy trabajando con una sección de Beneficios en Waclis.

La sección utiliza:
.beneficios-section

Las tarjetas utilizan:
.beneficio-card

Quiero:
- tres tarjetas por fila en desktop;
- una por fila en celular;
- Border radius de 16 px;
- Padding de 24 px;
- sombra muy suave;
- Hover elevándose 4 px.

No modifiques otras Cards de la Página web.

No agregues JavaScript.

Devuélveme solamente el CSS.

Si quieres mantener todas las Cards con la misma altura

Puedes explicar:

Los textos tienen longitudes diferentes.

Quiero que las tarjetas mantengan una altura visual consistente sin cortar contenido.

Evita un Height rígido si puede causar overflow.

Esto ayuda a obtener una solución más flexible.

Ejemplo práctico: tres beneficios comerciales

Queremos crear:

¿POR QUÉ COMPRAR CON NOSOTROS?

[ Ícono ]
Envíos a todo el país
Despachamos tus pedidos a diferentes localidades.

[ Ícono ]
Compra segura
Utiliza diferentes medios de pago disponibles.

[ Ícono ]
Atención personalizada
Nuestro equipo está disponible para ayudarte.

Paso 1

Abre:

Secciones → Beneficios

Paso 2

Selecciona una composición de tres Cards.

Paso 3

Reemplaza los títulos.

Paso 4

Reemplaza las descripciones.

Paso 5

Selecciona íconos relacionados.

Paso 6

Comprueba que las Cards compartan:

• alineación;

• Typography;

• Padding;

• estilo visual.

Paso 7

Revisa responsive.

Desktop:

[ 1 ] [ 2 ] [ 3 ]

Mobile:

[ 1 ]

[ 2 ]

[ 3 ]

Paso 8

Configura Hover o animación solo si aporta valor.

Paso 9

Guarda.

Paso 10

Utiliza:

Ver página

Ejemplo práctico: seis beneficios

Puedes utilizar:

NUESTRAS VENTAJAS

[ Envíos ] [ Garantía ] [ Calidad ]

[ Soporte ] [ Financiación ] [ Experiencia ]

En este caso presta atención a:

• longitud de los textos;

• altura de Cards;

• tamaño de íconos;

• separación vertical entre filas.

Ejemplo práctico: Beneficios de un servicio

UNA SOLUCIÓN PENSADA PARA TU EMPRESA

Automatización
Reduce tareas manuales repetitivas.

Información centralizada
Consulta tus datos desde un único lugar.

Acompañamiento
Recibe soporte durante la implementación.

Escalabilidad
Adapta la solución a medida que tu empresa crece.

Aquí la sección explica el resultado que obtiene el cliente.

¿Qué hacer si una Card queda más alta?

Primero revisa:

• longitud del título;

• longitud del Paragraph;

• Padding.

Puedes simplificar el contenido.

Si la diferencia continúa y el diseño necesita uniformidad, considera una solución mediante:

• Min Height;

• estructura flexible;

• alineación.

¿Qué hacer si los íconos tienen tamaños diferentes?

Comprueba:

• el componente utilizado;

• Width;

• Height;

• Font size si son Font Icons;

• Classes compartidas.

Intenta mantener una referencia común.

¿Qué hacer si un cambio modifica todos los íconos?

Probablemente comparten una Class.

Puede ser correcto.

Si quieres modificar solo uno:

• utiliza Class adicional;

• ID único;

• selector específico.

¿Qué hacer si las Cards se ven apretadas?

Revisa:

• Padding;

• espacio entre columnas;

• Margin;

• tamaño del texto;

• cantidad de columnas.

Puede ser preferible pasar de:

4 por fila

a:

2 por fila

en una pantalla intermedia.

¿Qué hacer si hay demasiado espacio?

Revisa:

• Padding de Card;

• Padding de Section;

• Margin;

• Min Height;

• textos demasiado cortos.

No reduzcas todo indiscriminadamente; identifica dónde está el espacio.

¿Qué hacer si los títulos quedan en diferentes líneas?

Puede ser normal.

Por ejemplo:

Compra segura

y:

Atención
personalizada

No necesariamente existe un problema.

Lo importante es que la grilla siga siendo clara.

¿Qué hacer si quiero poner una imagen en lugar de un ícono?

Puedes utilizar una estructura con Image si el diseño lo permite.

Pero considera si realmente sigue funcionando como una sección de Beneficios.

Una fotografía grande puede darle más protagonismo visual y acercar la composición a:

• Servicios;

• Características;

• Cards de contenido.

No es incorrecto, pero cambia la jerarquía visual.

Beneficios vs iconos decorativos

No agregues un ícono solo porque existe un espacio para hacerlo.

Si no encuentras uno que represente claramente el concepto, puedes:

• utilizar un símbolo más general;

• adaptar la composición;

• trabajar sin ícono.

La información sigue siendo lo principal.

Buenas prácticas para Beneficios

Recomendamos:

• seleccionar beneficios concretos;

• priorizar los más importantes;

• utilizar títulos breves;

• escribir descripciones concisas;

• mantener una misma familia de íconos;

• conservar Cards consistentes;

• aprovechar Classes compartidas;

• revisar Linked styles;

• adaptar la grilla a cada dispositivo;

• evitar demasiados beneficios;

• utilizar Hover y animaciones con moderación;

• limitar CSS a la sección;

• comprobar Ver página.

Errores frecuentes

Confundir Beneficios con Características

Piensa en el resultado para el cliente.

Confundir Beneficios con Servicios

Servicios explica qué ofreces; Beneficios explica qué obtiene el cliente.

Escribir títulos demasiado largos

Utiliza el Paragraph para ampliar información.

Repetir el título en la descripción

Aporta información adicional.

Utilizar íconos sin relación

El ícono debe ayudar a interpretar el beneficio.

Mezclar estilos de íconos sin intención

Mantén consistencia visual.

Agregar demasiados beneficios

Prioriza los principales.

Clonar solo Heading

Selecciona la unidad completa.

Eliminar el contenido y dejar una Card vacía

Elimina el contenedor correspondiente.

Mantener demasiadas Cards por fila en celular

Reorganiza la grilla.

Ocultar beneficios importantes para resolver responsive

Adapta primero.

Utilizar Height fijo con textos variables

Puede cortar contenido.

Crear CSS global para .card

Limita el scope.

Depender del Hover para mostrar el beneficio

La información debe ser accesible sin cursor.

No revisar URLs después de clonar

Las copias pueden conservar enlaces originales.

Flujo recomendado

1. DEFINIR BENEFICIOS
↓
2. PRIORIZAR LOS MÁS IMPORTANTES
↓
3. ELEGIR DISEÑO
↓
4. AGREGAR SECCIÓN
↓
5. REEMPLAZAR TÍTULOS
↓
6. REEMPLAZAR DESCRIPCIONES
↓
7. CONFIGURAR ÍCONOS
↓
8. AJUSTAR CANTIDAD DE CARDS
↓
9. REVISAR ESTILOS COMPARTIDOS
↓
10. ADAPTAR RESPONSIVE
↓
11. CONFIGURAR HOVER / ANIMACIÓN SI ES NECESARIO
↓
12. GUARDAR
↓
13. VER PÁGINA

Checklist antes de publicar una sección de Beneficios

• Los beneficios son relevantes para el visitante.

• No confundí beneficios con características o servicios.

• Los títulos son breves.

• Las descripciones aportan información.

• Los íconos tienen relación con el concepto.

• Los íconos mantienen una estética coherente.

• Las Cards comparten una apariencia consistente.

• Revisé Linked styles.

• No existen IDs duplicados.

• Los enlaces son correctos, si existen.

• La grilla funciona en desktop.

• La grilla funciona en tablet.

• La grilla funciona en celular.

• No oculté información importante para solucionar responsive.

• Los textos largos no rompen las Cards.

• Hover funciona como refuerzo visual, no como requisito.

• Las animaciones son moderadas.

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

• Probé el resultado mediante Ver página.

En resumen

La sección Beneficios permite explicar de forma visual y rápida qué obtiene el cliente al elegir tu propuesta.

Puedes utilizarla para destacar:

• rapidez;

• seguridad;

• soporte;

• garantía;

• financiación;

• atención;

• comodidad;

• experiencia;

• otros diferenciales.

La estructura habitual combina:

Ícono
+
Título
+
Descripción

dentro de Cards repetidas.

La clave es mantener:

• beneficios concretos;

• títulos breves;

• textos fáciles de escanear;

• íconos coherentes;

• Cards consistentes;

• una grilla responsive.

Recuerda la diferencia:

Servicios → qué ofreces.

Características → qué tiene o cómo funciona.

Beneficios → qué obtiene el cliente.

Una buena sección de Beneficios ayuda al visitante a comprender rápidamente por qué tu propuesta puede ser adecuada para él.