Ikoner

The Ikoner felt sætter Elementors fulde ikon bibliotek vælger i din widgets panel: Font Awesome, eventuelle brugerdefinerede ikon biblioteker registreret på webstedet, og direkte SVG upload, alle bag ikon vælgeren redaktører allerede kender. Inde Master Addons Widget Builder, det er feltet for feature kugler, info bokse, sociale rækker, og hver anden plet, hvor et lille symbol bærer betydningen.

Som alle Widget Builder-felter understøtter Icons-kontrollen Betingelser, nyttigt til kun at vise vælgeren, når en “aktiver ikon”-skift er tændt, og dens output gengives gennem Twig-syntaks skabelon motor. Begge guider dækker detaljerne og begrænsningerne.

Værdien er et array med to nøgler, value og library. Den form har en konsekvens, der er værd at angive på forhånd: udskrivning af feltet direkte med {{ my_icon }} udsender slet ikke noget. Skrifttypeikoner og uploadede SVG'er gengives også gennem forskellige markeringer, så skabelonen har brug for en kort gren. Begge mønstre er nedenfor, klar til at indsætte.

Hvad Ikoner feltet gør #

• Åbner Elementors ikonbiblioteksvælger med Font Awesome uploader brugerdefinerede biblioteker og SVG.
• Gemmer valget som et array af value og library.
• Holder en klassestreng for skrifttypeikoner: value er ikonets klasse, klar til en <i> tag.
• Indeholder et indlejret filarray til SVG'er: value bliver et URL- og ID-par nået som {{ my_icon.value.url }}.
• Accepterer en standard og en anbefalet liste, så plukkeren kan overflade de ikoner, der passer til widget.

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 funktion liste widget, hvor hver instans viser et ikon, navngivet feature_icon, ved siden af en kort tekst-blurb.

Sådan tilføjes et ikonfelt #

Find the Ikoner felt i panelet til venstre for Widget Builder-editoren, grupperet med de andre mediefelter.

Træk den ind i en sektion under Content fane. Når det lander, åbnes feltets muligheder til venstre.

Ikoner feltindstillinger forklaret #

• Etiket: teksten vist over plukkeren i Elementor, for eksempel “Feature Icon”.
• Navn: den unikke identifikator for feltet, bogstaver, tal og understregninger kun f.eks feature_icon.
• Standard: et startikon som en value og library par, så widgetten falder aldrig ind ikonløst.
• Anbefalet: et sæt ikoner, som plukkeren først overflader, styrer redaktører mod valg, der passer til designet.
• Beskrivelse, Vis etiket, Separator: standardvisningsindstillingerne plus Betingelser for kun at vise feltet, når et andet kontrolelement har en bestemt værdi.

Forbind feltet Ikoner til din skabelon #

For det første fejlen næsten alle gør én gang: {{ feature_icon }} udskriver ingenting. Genvejen med direkte print på array-værdier udsender kun et topniveau url nøgle, og Ikoner array har ingen, så tokenet kommer ud tom. Ingen fejl, ingen advarsel, bare et tomt sted, hvor ikonet skal være. Egenskaberne er, hvor indholdet bor.

Skrifttypeikon (Font Awesome og andre klassebaserede biblioteker): value holder klassestrengen, så en <i> tag gengiver det:

<i class="{{ feature_icon.value }}" aria-hidden="true"></i>

Uploadet SVG: når valget kommer fra SVG-biblioteket, value er i sig selv et array med en URL og ID, så ikonet gengives som et billede:

<img src="{{ feature_icon.value.url }}" alt="">

En widget ved sjældent på forhånd, hvilken slags redaktøren vil vælge, så det pålidelige mønster forgrener sig på library nøgle og håndterer begge:

{% if feature_icon.library == 'svg' %}
  <img src="{{ feature_icon.value.url }}" alt="">
{% else %}
  <i class="{{ feature_icon.value }}"></i>
{% endif %}

Pak det hele ind i en tom tilstandsvagt, som med ethvert felt af medietypen, så et ikke-indstillet ikon efterlader ingen vildfarenhed <i class=""> bag:

{% if feature_icon.value %}
  ...the branch above...
{% endif %}

Pas på test kun med skrifttypeikoner. Den <i>-tag version virker hele ugen, så uploader en klient et mærke SVG, og ikonet forsvinder, fordi en klasseattribut ikke kan holde et filarray. Hvis du sender feltet, skal du sende grenen.

Brug ikonkontrollen i Elementor #

Tilføj din brugerdefinerede widget til en side i Elementor, genindlæser editoren, hvis siden allerede var åben. Feltet gengives som Elementors ikonvælger under din etiket, der viser det aktuelle ikon.

Klik på det, og ikonbiblioteket åbnes. Søg Skrifttype Fantastisk, gennemse eventuelle brugerdefinerede biblioteker, eller skift til uploadfanen for en SVG. Bekræft valget og forhåndsvisningsopdateringerne, og kør gennem den gren af din skabelon, der matcher biblioteket.

Almindelige brugstilfælde #

• Feature- og fordelslister med ét symbol pr. punkt.
• Info- og ikonbokse hvor ikonet forankrer kortets emne.
• Sociale linkrækker, hver forekomst, der parrer et ikon med et URL-felt.
• Knapper og opfordringer til handling der bærer et lille ledende ikon.
• Trin og proces widgets hvor nummererede stadier hver får et matchende symbol.

Tips til at arbejde med feltet Ikoner #

• Udskriv aldrig feltet blottet. {{ feature_icon }} udsender intet; ikonet bor i {{ feature_icon.value }} og, for SVG'er, {{ feature_icon.value.url }}.
• Send biblioteksafdelingen. The {% if feature_icon.library == 'svg' %} pattern er den eneste version, der overlever hvert valg, en redaktør kan foretage.
• Bevogt den tomme tilstand. {% if feature_icon.value %} forhindrer ikke-indstillede ikoner i at gengive tomme tags.
• Add aria-hidden="true" til dekorative skrifttypeikoner. Skærmlæsere springer symbolet over og læser teksten ved siden af i stedet.
• Brug anbefalet til at guide valget. Ved at overgive et kurateret sæt holdes en widgets ikoner visuelt konsistente på tværs af et websted.
• Størrelse SVG'er i din CSS-fane. Uploadede SVG'er ankommer som billeder, så giv img-grenen en bredde for at holde begge grene gengivet i samme skala.

Ofte stillede spørgsmål #

Indpakning #

Feltet Widget Builder-ikoner bringer hele Elementor-ikonbiblioteket ind i en brugerdefineret widget til prisen for én kort gren: value som en klasse for skrifttype ikoner, value.url som en fil til SVG'er, og en vagt omkring begge. Par den med Mediefelt når en spilleautomat kræver et fuldt billede frem for et symbol. Udforsk resten af Master Addons widgets og udvidelser, og se den prissætning side for hvad hver plan indeholder.