La sección Benefits muestra una fila de tarjetas, cada una con un icono, un título y un texto corto. Úsala para las promesas que haces a cada comprador, como envío gratis, pago contra reembolso, pago seguro o devoluciones fáciles.
Añadir la sección
- Abre el constructor y elige Home page en la pestaña Pages.
- En la pestaña Sections, haz clic en Add new section y elige Benefits en el grupo Marketing.
- Selecciona la sección y haz clic en Add new block para añadir una tarjeta Benefit. Arrastra las tarjetas para cambiar su orden.
Solo está disponible en la página de inicio, una por página, con hasta 8 tarjetas.
Ajustes de la sección
- Desktop columns: cuántas tarjetas van una al lado de otra en ordenadores (de 1 a 6). Las tarjetas que sobran pasan a una nueva fila.
- Mobile columns: cuántas tarjetas van una al lado de otra en móviles (de 1 a 3). Con una, cada texto se lee fácilmente.
- Surface: Card pone cada ventaja en su propio panel, Plain las pone directamente sobre el fondo de la sección y Divider dibuja una línea fina entre las tarjetas. Las esquinas, los bordes y la sombra vienen de tu tema.
- Section width, Color scheme, Gap entre tarjetas, Padding y una pestaña Custom CSS.
Cada tarjeta de ventaja
- Icon: elige un icono, como un camión de reparto, un escudo o un candado. Elige None para una tarjeta solo con texto.
- Image: usa tu propia imagen en lugar del icono, solo para esta tarjeta. Se muestra al tamaño del icono.
- Alignment: Start o Center, para el icono y la línea de acento. El título y el texto tienen su propia alineación en sus bloques de texto.
- Icon size: el tamaño del icono o de la imagen.
- Accent line: una línea corta debajo del texto que cierra la tarjeta. Activada por defecto.
- Hover effect: Lift eleva el icono y Scale lo agranda cuando el ratón está sobre la tarjeta, y los dos alargan la línea de acento. None deja la tarjeta quieta.
Cada tarjeta admite hasta 2 bloques Text: el primero es el título y el segundo el texto corto. Puedes darles estilo como a cualquier bloque de texto, consulta Bloques Group, Text, Button y Divider: ¿cómo funcionan los ajustes de los componentes de diseño? El tamaño del icono, la alineación, la línea de acento y el efecto se definen tarjeta por tarjeta, así que puedes mezclarlos en una misma fila.
Ideas
- Entrega y pago: "Envío gratis", "Pago contra reembolso", "Devoluciones fáciles" y "Atención 7 días a la semana", con 4 Desktop columns y 2 Mobile columns.
- Promesas de marca: "Hecho a mano", "Ingredientes naturales", "Fabricado aquí", con tus propias imágenes dibujadas.
Bueno saberlo
- Las tarjetas no son enlaces, así que el efecto al pasar el ratón solo mueve el icono y la línea, nunca la tarjeta.
- Los compradores que activaron la reducción de movimiento en su dispositivo ven las tarjetas sin movimiento.
- Para pequeños mensajes de confianza cerca del botón de compra en la página de producto, usa mejor el bloque Badges. Consulta ¿Cómo añado pestañas desplegables, fechas de entrega, una guía de tallas, insignias o imágenes de antes y después a mi página de producto?
- Promete solo lo que de verdad ofreces. Los compradores confían en estas tarjetas.