Un bloque principal con fondo y botón
Lo primero que ve el visitante y lo que el cliente actualiza una y otra vez: una oferta nueva, otra foto, otro texto en el botón. Una vez marcada, todo eso se edita en el panel, y el diseño sigue siendo tuyo.
Qué obtienes
<body wp-fields-group="Home">
<section class="hero" fld-bg-image="Hero background">
<p class="hero__eyebrow" fld-text="Hero eyebrow">Open every day</p>
<h1 fld-text="Hero title">Coffee for slow mornings</h1>
<p class="hero__lead" fld-area="Hero lead">Single-origin espresso, fresh pastries and a table by the window.</p>
<a class="button" href="/menu" fld-link="Hero button">
<span fld-text="Hero button text">See the menu</span>
</a>
</section>
</body>Open every day
Coffee for slow morningsSingle-origin espresso, fresh pastries and a table by the window.
See the menuSeis campos en un mismo grupo: el cliente los encuentra en la página «Home».
Paso a paso
Ponle nombre al grupo de campos
El atributo wp-fields-group en
<body>da a los campos de la página un título común en el panel. Sin él, los campos no aparecen.<body wp-fields-group="Home">
Convierte el fondo en un campo
fld-bg-image va en el mismo bloque que tiene el fondo. En el panel es un campo de imagen; en el sitio, el fondo de la sección.
<section class="hero" fld-bg-image="Hero background">
Marca los textos
Las líneas cortas son fld-text; un párrafo, fld-area: en él el cliente puede hacer saltos de línea. Cada campo tiene su propio nombre claro.
<p class="hero__eyebrow" fld-text="Hero eyebrow">Open every day</p> <h1 fld-text="Hero title">Coffee for slow mornings</h1> <p class="hero__lead" fld-area="Hero lead">Single-origin espresso, fresh pastries and a table by the window.</p>
Un botón son dos campos
fld-link en el enlace convierte la dirección en un campo; el texto se marca aparte, dentro del enlace, con otro nombre.
<a class="button" href="/menu" fld-link="Hero button"> <span fld-text="Hero button text">See the menu</span> </a>
Lo importante
- Pon a los campos nombres que el cliente entienda sin ti: «Hero title», no «Text 1».
- Los textos del marcado pasan a los campos con «Cargar datos»: el cliente no tiene que volver a escribirlos.
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.
<a class="button" href="/menu" fld-link="Hero button">
<span fld-text="Hero button">See the menu</span></a>El enlace y el texto con el mismo nombre: un solo campo acaba con dos funciones y el botón se rompe. La generación informa de una colisión.
<a class="button" href="/menu" fld-link="Hero button">
<span fld-text="Hero button text">See the menu</span></a>El texto lleva su propio nombre, por ejemplo «Hero button text».