Indstillinger Panel Introduktion

The Master Addons Widget Builder forvandler din egen HTML, CSS og JavaScript til en ægte Elementor-widget, med redigerbare kontroller i Elementor-panelet. Du designer indstillingspanelet, forbinder det til din kode med kortkoder, og widgeten opfører sig som ethvert indbygget Elementor-element. Ingen PHP, ingen plugin-boilerplate, ingen separat kodeeditor til at jonglere.

To systemer kører under alt, der er beskrevet her: Betingelser lad enhver kontrol vise eller skjule baseret på et andet felts værdi, og Twig-syntaks skabelon motor forvandler dine feltnavne til tokens, {% if %} kontroller, og {% for %} sløjfer i fanebladene HTML, CSS og JS. Begge vejledninger dækker opsætning og begrænsninger.

Denne vejledning går gennem Widget Builder-indstillingspanelet, præcis som det vises på skærmen: tilføjelse af en ny widget, træk af felter i fanerne Indhold, Stil og Avanceret, skrivning af kode, brug af de dynamiske kortkoder, indlæsning af CDN-biblioteker og endelig eksport eller import af en widget som en JSON-fil. Du kan finde funktionen på Widget Builder-side og inde i det fulde widgets og udvidelser list.

Hvad Widget Builder gør #

De fleste tilføjelser giver dig et fast sæt widgets. Denne giver dig værktøjerne til at lave din egen. Du samler et valgpanel fra færdige felttyper (overskrift, tekst, farve, nummer, dimensioner, switcher og mere), slip i din kode og bind felterne til den kode med simple shortcode tokens. Gem widgeten og Master Addons registrerer både en shortcode og en Elementor widget, du kan trække på enhver side.

Tænk på det som broen mellem et kodepen-stil uddrag og en fuldt redigerbar Elementor widget. Når det er bygget, kan alle på dit team justere farverne, afstanden og teksten fra Elementor editor uden nogensinde at åbne kilden.

Før du starter #

• WordPress med den Elementor sidebygger installeret og aktiv.
• Master Addons til Elementor installeret og aktiv. Ny i plugin? Følg installationsvejledning first.
• Grundlæggende HTML og CSS. JavaScript er valgfrit og kun nødvendigt for interaktive widgets.

Åbn Widget Builder og tilføj en ny widget #

Fra WordPress dashboard, gå til Master Addons → Widget Builder. Dette åbner den Master Addons Widgets skærm, som viser hver brugerdefineret widget, du har bygget sammen med sin kategori, forfatter, og genereret shortcode. Øverst vil du se tre knapper: Tilføj Ny Widget, Importer Widget, og Video Tutorial.

Klik Tilføj Ny Widget. A Opret ny widget dialog vises med to felter:

• Widget Titel (påkrævet): et beskrivende navn til din widget, for eksempel “Hero Section”. Dette er, hvad du vil søge efter i Elementor panelet senere, så gør det til noget, du vil genkende.
• Widget Kategori: kategorien Elementor widgetten er grupperet under (Favoritter som standard). Kategorier holder dine brugerdefinerede widgets organiseret i editoren.

Indtast en titel, vælg en kategori, og klik Gem ændringer. Master Addons åbner Widget Builder editor til din nye widget.

Inde i Widget Builder-grænsefladen #

Bygherren er opdelt i tre arbejdsområder, venstre mod højre:

• Feltpanel (venstre): et søgbart bibliotek med kontroltyper, du trækker ind i din widget, såsom Overskrift, Tekst, Tekstområde, URL, Farve, Tal, Switcher, Vælg, Vælg, WYSIWYG, Kode og Dato Tid.
• Indstillingspanel (i midten): the Content, Style, og Advanced faner, hvor du arrangerer disse felter i sektioner. Dette er det faktiske valgpanel, dine brugere vil se i Elementor.
• Kodepanel (højre): the HTML, CSS, JS, og INKLUDERER faner, hvor du skriver opmærkningen, typografier, scripts og biblioteksreferencer.

Den øverste bjælke indeholder widgetnavnet med et indstillingsgearikon ved siden af, plus Preview og Gem indstillinger buttons.

Opbyg indstillingspanelet: Fanerne Indhold, Stil og Avanceret #

Det er her, du designer kontrollerne. Vælg et felt fra venstre panel, og træk det ind i en sektion under Content, Style, eller Advanced fane. Følg samme logik Elementor bruger: tekst og links under Indhold, farver og typografi under Stil, mellemrum og layout under Avanceret.

Hvert afsnit har en Afsnit Titel (etiketten vist i afsnitsoverskriften) og en Sektionsnavn, en unik identifikator, du vil referere i din kode. Tilføj så mange sektioner og felter som widget har brug for.

For eksempel, drop a Farvefelt ind i fanen Stil for at lade brugerne omfarve widgetten, og en Dimensioner felt ind i fanen Avanceret for at styre polstring på alle fire sider. Hver felttype har sin egen dokumentation, hvis du vil have den fulde liste over muligheder.

Dynamiske kortkoder: forbind felter til din kode #

Dette er den del, der binder alt sammen. Hvert felt, du tilføjer, genererer en shortcode token, og de tokens dukker op i Dokumentation sidebar ved siden af kodeeditoren. Tilføj et farvefelt, og du får {{color}}. Tilføj et Dimensions felt og du får {{dimensions}}.

Slip disse tokens i din HTML, CSS eller JS, uanset hvor du vil have feltets værdi til at lande. Når en bruger ændrer det kontrolelement i Elementor, bytter Master Addons tokenet til liveværdien, så din kode forbliver dynamisk. En ting at huske: tokenet eksisterer kun, når det matchende felt er på panelet, så byg feltet først, og henvis derefter til dets kortkode.

Tilføj din HTML, CSS og JS #

Med panelet og kortkoderne klar, skal du skifte til kodefanerne til højre og indsætte din opmærkning, typografier og scripts.

HTML- faneblad: skriv widgetstrukturen, og placer shortcode-tokens, hvor dynamiske værdier hører hjemme.

fanen CSS: style markeringen. Henvis til de samme shortcode tokens for at trække i farver og dimensioner valgt i panelet.

fanen JS: tilføj JavaScript for enhver interaktiv adfærd, som hover effekter eller en skyder. Almindelig vanilje JS virker, og det samme gør jQuery, når du indlæser det under Inkluderer.

Hvis du kun har brug for et kodefelt inde i panelet i stedet for hovededitoren, skal Kodefelt dropper et syntaksfremhævet input i dine kontroller.

Inkluderer: indlæs CDN CSS- og JS-biblioteker #

Åbn INKLUDERER faneblad til at vedhæfte eksterne biblioteker din widget afhænger af. Der er to lister: CSS biblioteker og JS Biblioteker. For hver enkelt tilføjer du en Håndtag (et unikt navn) og en Kilde-URL eller registreret håndtag, og klik derefter på Tilføj CSS eller Tilføj JS.

Sådan trækker du noget som Font Awesome ind fra en CDN, eller jQuery, uden at redigere dit tema. Master Addons sætter kun biblioteket i kø, når widgetten faktisk er på siden, så dine andre sider forbliver rene.

Har du brug for ikoner inde i widgetten? Master Addons sender også otte bundtede ikon biblioteker du kan bruge uden et eksternt CDN-opkald.

Widgetindstillinger: titel, ikon, kategori og eksport #

Klik på gearikon ved siden af widgetnavnet i den øverste bjælke for at åbne Widget-indstillinger i venstre panel. Herfra styrer du, hvordan widgetten præsenterer sig inde i Elementor:

• Widget Titel: omdøb widgetten. Denne titel vises i Elementor-widgetlisten.
• Widget ikon: click Skift ikon for at vælge et ikon fra Master Addons ikonvælger. Du kan bruge ethvert inkluderet ikon eller en Font Awesome klasse.
• Widget Kategori: vælg den Elementorkategori, widgetten vises under, så den grupperer med relaterede widgets.
• Eksportér widget: eksporter hele widgetkonfigurationen som en JSON-fil, du kan gemme, sikkerhedskopiere eller dele med hvem som helst.

Ikonvælgeren grupperer tusindvis af ikoner i kategorier som Alle ikoner, Elementor Ikoner, Simple Line Ikoner, Ikoniske skrifttype Ikoner, Lineære ikoner, og Materiale Ikoner. Filtrer efter navn, vælg en, og klik Indsæt.

Importer en widget fra en JSON-fil #

Deling virker begge veje. Tilbage på Master Addons Widgets skærm, klik på Importer Widget knap. Dialogen lader dig trække og slippe en .json fil, eller søg efter den. Kun .json filer, der eksporteres fra Widget Builder, understøttes.

Enhver med JSON-filen af en widget kan importere det, panel, kode, omfatter, og alle, derefter bruge det på deres eget websted i sekunder. Det gør Widget Builder en ryddelig måde at genbruge widgets på tværs af projekter eller aflevere dem til en klient.

Tips til at opbygge pålidelige brugerdefinerede widgets #

• Navngiv afsnit tydeligt. Sektionsnavnet ender i din kode, så hold det kort og meningsfuldt.
• Tilføj et felt, før du refererer til dets kortkode. Tokens findes kun, efter at det matchende felt er på panelet.
• Brug Preview ofte. Tjek live-forhåndsvisningen, før du gemmer, så du fanger et manglende token tidligt i stedet for på live-siden.
• Indlæs biblioteker gennem Inkluderer, ikke inline. Det holder din kode ren og indlæser kun scripts, hvor de er nødvendige.
• Eksporter mens du går. En JSON-eksport fordobles som din sikkerhedskopi og din delingsfil.
• Ser du ikke din widget i Elementor? Tjek fejlfindingsvejledning til synlighedsrettelser.

Ofte stillede spørgsmål #

Indpakning #

Master Addons Widget Builder lukker hullet mellem et kodestykke og en Elementor-widget til produktion. Byg panelet, skriv din HTML, CSS og JS, fortråd det med kortkodepoletter, indlæs eventuelle biblioteker, du har brug for, og eksporter eller importer derefter resultatet som JSON. Tag et kig på resten af Master Addons widget bibliotek for at se, hvad du ellers kan bygge.