Un bloque de ventajas que el cliente amplía por su cuenta
Tres tarjetas en el diseño son solo el principio: dentro de un mes el cliente querrá una cuarta. Convierte las tarjetas en una lista y la añadirá él mismo, mientras la tarjeta conserva tu diseño.
Qué obtienes
<section class="benefits">
<h2 fld-text="Benefits title">Why people stay</h2>
<div class="benefits__grid" fld-loop="Benefits">
<div class="benefit">
<h3 fld-text="Benefit title">Roasted on Mondays</h3>
<p fld-area="Benefit text">Beans are never older than a week.</p>
</div>
<div class="benefit">
<h3 fld-text="Benefit title">Quiet tables</h3>
<p fld-area="Benefit text">No music before ten, sockets at every seat.</p>
</div>
<div class="benefit">
<h3 fld-text="Benefit title">Pastries from next door</h3>
<p fld-area="Benefit text">Baked at six, gone by noon.</p>
</div>
</div>
</section>El cliente añadió la cuarta tarjeta en el panel; no estaba en el marcado.
Paso a paso
El título de la sección es un campo normal
El título sobre las tarjetas no se repite, así que es un fld-text fuera de la lista.
<h2 fld-text="Benefits title">Why people stay</h2>
La lista va en el bloque de tarjetas
fld-loop va en el bloque dentro del cual las tarjetas van una tras otra. El nombre de la lista es su título en el panel.
<div class="benefits__grid" fld-loop="Benefits">
Los campos de una tarjeta
La primera tarjeta es el modelo de una fila: los campos que marques en ella los tendrá cada fila del panel. Aquí, un título fld-text y un texto fld-area.
<div class="benefit"> <h3 fld-text="Benefit title">Roasted on Mondays</h3> <p fld-area="Benefit text">Beans are never older than a week.</p> </div>
Las demás tarjetas, igual
Marca cada tarjeta con los mismos atributos. Así «Cargar datos» lleva al panel las tres, no solo una.
<div class="benefit"> <h3 fld-text="Benefit title">Quiet tables</h3> <p fld-area="Benefit text">No music before ten, sockets at every seat.</p> </div>
Lo importante
- Si el cliente borra todas las filas, el bloque de tarjetas desaparece de la página y el título se queda.
- Esta receta no toca imágenes ni iconos: déjalos en el marcado o llévalos a un bloque aparte.
Errores frecuentes
El registro de la generación es la pestaña «Registros» de tu proyecto en themeforge.pro; la revisión gratuita del marcado muestra los mismos avisos.
<div class="benefits__grid" fld-loop="Benefits">
<div class="benefit">
<h3 fld-text="Benefit title">Roasted on Mondays</h3>
</div>
<div class="benefit">
<h3>Quiet tables</h3>
</div>
</div>Solo está marcada la primera tarjeta: la plantilla funciona, pero «Cargar datos» lleva al panel una fila en lugar de tres. El registro de la generación no dice nada.
<div class="benefits__grid" fld-loop="Benefits">
<div class="benefit">
<h3 fld-text="Benefit title">Roasted on Mondays</h3>
</div>
<div class="benefit">
<h3 fld-text="Benefit title">Quiet tables</h3>
</div>
</div>Atributos en cada tarjeta.