Repeater

The Repeaterfelt forvandler ét sæt kontrolelementer til så mange rækker, som brugeren har brug for. Du definerer felterne én gang (et navn, en pris, en beskrivelse), og alle, der redigerer widgetten i Elementor, kan tilføje, duplikere, omarrangere og fjerne elementer fra panelet, nøjagtigt som repeaterne i Elementors egen ikonliste eller Testimonial Carousel-widgets. Inde i Master Addons Widget Builder, er Repeater, hvordan du bygger kortgitter, menuer, funktionslister, teamsektioner og alt andet, hvor elementantallet er op til webstedsejeren, ikke widgetforfatteren.

Repeateren parrer med begge ledsagende systemer: Betingelser viser eller skjuler kontrolelementet i panelet, og den Twig-syntaks skabelon motor gengiver sine rækker på forenden med {% for item in my_repeater %} sløjfer og prikkede tokens som {{ item.title }}. Begge guider dækker opsætning og begrænsninger.

Repeateren arbejder sammen med skabelonsløjfen i din HTML: a {% for %} blok udskriver din markering én gang pr. række. Tre elementer gengiver tre kort; tilføj et fjerde i panelet, og et fjerde kort vises, ingen kodeændringer.

Hvad Repeater feltet gør #

Et Repeater-felt gengiver Elementors standard repeaterkontrol i din widgets indstillingspanel. Når nogen vælger widgetten, ser de en stak sammenklappelige rækker med fire velkendte handlinger:

• Tilføj vare: en knap under rækkerne opretter et nyt element med dine standardværdier.
• Duplikere: kopiikonet kloner en række, indstillinger og det hele.
• Genbestil: rækker trækker og falder i en ny rækkefølge, og siden opdateres, så den matcher.
• Fjern: sletteikonet tager en række ud.

Hver række udvides for at vise de underfelter, du definerede: tekst, tekstområde, vælg, medie, URL, ikoner og de andre Widget Builder-felttyper kan alle leve inde i en Repeater. Dette adskiller sig fra enkeltværdifelterne som Text på én vigtig måde: Forbindelsen til din HTML er en løkke, ikke en engangs shortcode. Hvis du er ny til at bygge widgets, skal du starte med Widget Builder oversigt first.

Før du starter #

• WordPress med Elementor installeret og aktiv.
• Master Addons til Elementor installeret og aktiv. Ny i plugin'et? Se den installationsvejledning.
• En brugerdefineret widget åben i Widget Builder editor. Vores eksempel er en restaurant “signatur retter” sektion, der gengiver en 3-søjle gitter af kort, et kort pr Repeater række.

Sådan tilføjes et Repeater-felt #

Rul feltpanelet til venstre i Widget Builder-editoren, indtil du finder Repeater felt, opført med de øvrige strukturelle felter.

Træk Repeateren ind i en sektion under Content tab, hvor gentaget indhold hører hjemme. Når det lander, åbnes feltets muligheder til venstre, og det er her den rigtige opsætning sker: at definere de underfelter, hver række vil bære.

Repeaterfeltindstillinger forklaret #

• Etiket: overskriften vist over rækkerne i Elementor, for eksempel “Signaturretter”.
• Navn: den unikke identifikator for hele repeateren, bogstaver, tal og understregninger kun. Dette er navnet din løkke henviser til, for eksempel signature_dishes.
• Felter: de underfelter, hver række indeholder. Tilføj et pr. stykke indhold pr. vare — i paraboleksemplet: et parabolnavntekstfelt, et pristekstfelt, et beskrivelsestekstområde og et tagformatvalg.
• Titelfelt: hvilket underfelt mærker den sammenklappede række, skrevet som {{{ dish_name }}}. Standard til det første underfelt, hvilket normalt er det, du ønsker.
• Standard: rækkerne widget starter med. Send to eller tre udfyldte elementer, så widgetten ser levende ud ved første drop.
• Knaptekst: etiketten på tilføj-knappen, for eksempel “Tilføj parabol” i stedet for den generiske “Tilføj vare”.
• Forebyg Tom: stopper brugeren i at slette den sidste resterende række.
• Min / Max Varer: valgfri grænser for, hvor få eller hvor mange rækker der er tilladt.

Forbind Repeateren til din HTML med en loop #

Her er den del, der fungerer forskelligt fra hvert enkeltværdifelt: repeateren har ingen slette {{shortcode}}. Dens værdi er en liste over rækker, så din HTML ombryder den gentagne markering i en {% for %} blok. Inde i løkken er hvert underfelt tilgængeligt på løkkevariablen:

<div class="dish-grid">
  {% for dish in signature_dishes %}
  <article class="dish-card">
    <h3>{{ dish.dish_name }}</h3>
    <span class="price">{{ dish.dish_price }}</span>
    <p>{{ dish.dish_desc }}</p>
  </article>
  {% endfor %}
</div>

• signature_dishes er Gentagerens Navn.
• dish er en løkkevariabel, du opfinder på stedet; kald det hvad som helst.
• {{ dish.dish_name }} udskriver den rækkes parabolnavn. Hvert underfelt fungerer på samme måde: {{ dish.<sub_field_name> }}.
• Alt mellem {% for %} og {% endfor %} udskriver én gang pr. række, i den rækkefølge rækkerne sidder i panelet.

Valgfrie felter inde i løkken #

Pak alt valgfrit ind i en {% if %} bloker, så tomme felter ikke efterlader vildfaren markup. I paraboleksemplet har hvert kort et valgfrit tag-badge:

{% if dish.tag_text %}
<span class="tag tag--{{ dish.tag_style }}">{{ dish.tag_text }}</span>
{% endif %}

En række med en tom Tag Text gengiver slet ikke noget badge. Den {% if %} block accepterer også sammenligninger som {% if dish.tag_style == 'spicy' %} når du har brug for opmærkning, der ændres pr. værdi.

Medier og link underfelter #

Et billedunderfelt udskriver sin URL direkte, som i <img src="{{ dish.photo }}">, og et URL-underfelt afslører sin adresse på samme måde. Indlejrede egenskaber er tilgængelige med punktnotation, når du har brug for dem.

Brug Repeateren i Elementor #

Tilføj din brugerdefinerede widget til en side i Elementor, eller genindlæs editoren, hvis siden allerede var åben. Repeateren vises som en stak rækker under den etiket, du indstiller, hver række med titlen efter dens titelfelt.

Klik på en række for at udvide dens underfelter og redigere dem; forhåndsvisningen opdateres live. Hvis en ny række slet ikke gengiver noget, skal du kontrollere, at sløjfenavnet i din HTML matcher feltet Gentagerens navn nøjagtigt — et mismatch mislykkes lydløst i stedet for at kaste en fejl. Klik Tilføj parabol (eller hvad din knaptekst siger), og en ny række vises med dine standardværdier, klar til at redigere. Træk håndtaget på en vilkårlig række for at genbestille, og kortene på siden følger.

Fordi løkken udskriver hver række, vokser layoutet med indholdet. I vores 3-kolonne parabolgitter fylder de første tre kort en række; en fjerde parabol starter en anden række nedenunder, automatisk, fordi det er sådan widgetens CSS-gitter ombrydes.

Almindelige brugstilfælde #

• Kortgitre — tjenester, funktioner, prisniveauer, retter eller teammedlemmer, en række pr. kort.
• Menuer og prislister — restauranter, saloner, og fitnesscentre, hvor varer skifter ugentligt.
• Logovægge og kundelister — et billedunderfelt pr. række.
• FAQ og harmonika sektioner — et spørgsmålstekstfelt og et svartekstområde pr. række.
• Tidslinjer og procestrin — ordnede rækker brugeren kan trække i rækkefølge.

Tips til at arbejde med feltet Repeater #

• Sløjfen er forbindelsen. Der er ingen {{repeater_name}} shortcode til at udskrive på egen hånd; repeateren giver kun mening indeni {% for %}…{% endfor %}.
• Skib reelle misligholdelser. To eller tre udfyldte rækker gør widgetten præsentabel i det øjeblik, den droppes, og de fungerer som et eksempel på, hvad hvert felt forventer.
• Indstil titelfeltet. Sammenklappede rækker mærket “Margherita del Forno” er langt nemmere at administrere end tre rækker, alle mærket “Vare”.
• Bevogt valgfrie felter med {% if %}. Tomme spændvidder og tomme indpakninger er usynlige, indtil de bryder din afstand.
• Lad CSS håndtere rækken tæller. Et gitter med repeat(3, 1fr) ombryder ekstra elementer til nye rækker alene; løkken udskriver bare kort.
• Navngiv underfelter tydeligt. {{ dish.dish_price }} læser bedre i en skabelon end {{ dish.field_2 }}, for dig og for den, der arver widgetten.

Ofte stillede spørgsmål #

Indpakning #

Feltet Widget Builder Repeater er det, der gør et fast layout til et levende: definer underfelterne, udskriv dem i en {% for %} loop, og hver indholdsbeslutning derefter sker i Elementor-panelet: Tilføj et kort, træk det på plads, slet det næste sæson. Par det med Typografifelt for editor-kontrollerede skrifttyper og Grænsefelt til kortstyling, og en enkelt widget dækker et helt afsnit af siden. Udforsk resten af Master Addons widgets og udvidelser, og se den prissætning side for hvad hver plan indeholder.