Farvefelt

At lade en editor omfarve en widget uden at åbne CSS er en af de mest nyttige ting, en brugerdefineret widget kan gøre. Den Farvefelt i Master Addons Widget Builder dropper Elementors farvevælger ind i dit widgetpanel, komplet med globale farver og en valgfri alfakanal. Du navngiver feltet, vælger, hvor det bor, og dets shortcode feeds direkte ind i din CSS.

Som hvert Widget Builder-felt understøtter feltet Farve Betingelser for panel synlighed. Dens token er gengivet af den Twig-syntaks skabelon motor, hvilket er hvad lader dig udskrive den valgte farve overalt i din CSS. Begge guider dækker opsætning og begrænsninger.

Dette er en stilkontrol, så i demoen går den under Style fane. Feltet fungerer det samme, uanset hvilken fane du sætter det i, selv om. Hvor det bor er dit opkald, og det kommer ned til, hvordan du vil organisere din brugerdefinerede widgets kontroller.

Hvad feltet Farve gør #

Feltet Farve gengiver Elementors oprindelige farvevælger i din widgets indstillingspanel. Redaktører klikker på farveprøven, vælger en farve (eller en global farve fra temaet), og din widget udsender den værdi, uanset hvor du placerede den matchende kortkode. Det meste af tiden betyder det, at en CSS-egenskab kan lide color, background, eller border-color.

Fordi den bruger Elementors egen vælger, får redaktører de kontroller, de allerede kender: farveprøven, pipetten, nyere farver og den globale farvepalet. Tænd for alfakanalen, og de kan også indstille gennemsigtighed.

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. Første? Start med Widget Builder oversigt.

Sådan tilføjer du et farvefelt #

I Widget Builder-editoren skal du finde panelet felter til venstre og trække i Color felt ind i en sektion. Da farve er et stylingvalg, er Style fane er det naturlige hjem, men den Content og Advanced faner accepterer det lige så godt. Når feltet er på plads, åbnes dets muligheder til venstre, og dets kortkode vises i Dokumentation sidebjælke ved siden af kodeeditoren.

Farvefeltindstillinger forklaret #

Vælg feltet Farve for at åbne dets indstillinger. De fleste indstillinger matcher de andre felter, plus et der er specifikt for farve.

• Etiket: teksten vist over plukkeren i Elementor, for eksempel “Tekstfarve”.
• Navn: den entydige identifikator for feltet. Kun bogstaver, tal og understregninger. Dette bliver din shortcode, så et felt navngivet color giver dig {{color}}.
• Beskrivelse: valgfri hjælpetekst vist under kontrolelementet.
• Alfa: slå dette til for at tillade gennemsigtighed i vælgeren. Med det slukket kan redaktører kun vælge ensfarvede farver. Aktiver det, når du har brug for rgba-værdier, som en semi-transparent overlejring.
• Standardværdi: startfarven som hex-værdi, som f.eks #FFFFFF. Indstil dette, så widgetten ser færdig ud, før nogen rører ved den.

Fælles indstillinger:responsiv, dynamisk og mere #

Under Standardværdi får du det samme Fælles Indstillinger som hvert felt i bygherren: Vis etiket, etiketblok, responsiv kontrol, dynamisk support, frontend tilgængelig, separator og betingelser. Responsiv kontrol er praktisk her, hvis du vil have en anden farve pr. enhed. Den Tekstfelt dokumentation dækker hver af disse i detaljer.

Forbind feltet til din kode #

Et farvefelt navngivet color producerer tokenet {{color}} i sidebjælken Dokumentation. Slip den ind i din CSS som værdien af enhver farveegenskab. For eksempel for at farve helteteksten:

I CSS editoren ville du skrive noget i stil med .hero-content { color: {{color}}; }. Når editoren vælger en farve i Elementor, bytter Master Addons tokenet til den værdi, og teksten recolors live. Det samme token virker for background, border-color, eller noget, der tager en farve, og du kan genbruge det i så mange regler, som du har brug for. En ting at se: holde token som hele værdien, så color: {{color}};, ikke pakket ind i anførselstegn, eller CSS vil ikke finde anvendelse.

Brug kontrolelementet Farve i Elementor #

Træk din brugerdefinerede widget over på en side, og åbn den i Elementor-editoren. Under den fane, hvor du placerede feltet, vises kontrolelementet Farve som standardfarveprøven med knappen globale farver ved siden af. Klik på den, vælg en farve, og widgetopdateringerne på lærredet.

Redaktører kan vælge en engangsfarve eller klikke på globusikonet for at trække fra webstedets globale farver, som holder brugerdefinerede widgets på brand. Hvis du har slået Dynamisk support til, vises ikonet for dynamiske tags også her.

Almindelige brugstilfælde #

• Tekstfarve for overskrifter og afsnit.
• Baggrundsfarve til sektioner, kort og knapper.
• Kant- og accentfarver bundet til en brandpalet.
• Overlejringstifter brug af alfakanalen til gennemsigtighed.
• Hover stater når parret med et andet farvefelt.

Tips til at arbejde med feltet Farve #

• Placer den, hvor den passer til din widget. Stil er konventionen, men feltet fungerer under enhver fane, så organiser styrer den måde, der giver mening for dig.
• Tænd kun Alpha, når du har brug for gennemsigtighed. For solide mærkefarver holder det plukkeren enklere at lade den være slukket.
• Indstil en fornuftig standardværdi. En god standard betyder, at widgetten ser rigtigt ud i det øjeblik, den tabes på en side.
• Læn dig til globale farver. Tilskynd redaktører til at vælge fra den globale palet, så widgets forbliver konsistente på tværs af webstedet.
• Byg feltet, før du refererer til dets kortkode. Tokenet findes først, efter at feltet er på panelet.

Ofte stillede spørgsmål #

Indpakning #

Feltet Widget Builder Color forvandler en hårdkodet farve til en redigerbar vælger inde i din egen brugerdefinerede widget. Navngiv den, vælg om alfa skal tillades, indstil en standard og ledning {{color}} ind i din CSS. Derefter kan alle omfarve widgeten fra Elementor, med globale farver og gennemsigtighed på tryk. Tag et kig på resten af Master Addons widgets og udvidelser, og kontrollere de prissætning side for hvad hver plan indeholder.