Danish 
English 
German 
Spanish 
Italian 
French 
Portuguese 
Swedish 
Polish 
Korean 
Japanese 
Elementor-widgets hjÊlper med at tilfÞje sidebygningselementer som en navigationsmenu, knap, billedboks, FAQ-sektion og mange flere. Selvom flere Elementor-tilfÞjelser kommer med Elementor-widgets, er det usandsynligt, at du fÄr alle de nÞdvendige widgets i disse tilfÞjelser.
Det er her, du har brug for brugerdefinerede Elementor-widgets for at opfylde dine behov. ElementsKit har funktionerne til at hjÊlpe dig med at bygge de nÞdvendige widgets pÄ ingen tid.
Dette indlĂŠg vil guide dig til, hvordan du opbygger en brugerdefineret Elementor-widget uden kodning i en minimalistisk metode.
Lad os fortsĂŠtte... nu!
Hvad er en widget?
Widget refererer til en lille GUI-applikation, der bruges til at fuldfÞre en specifik opgave. En widget kan vÊre et hvilket som helst element pÄ dit websted, sÄsom en knap, afkrydsningsfelt, dialogboks, rullepanel, sÞgefelt, kort, ur, besÞgstÊller osv.
Lad os betragte Elementor-sidebyggeren som et eksempel. Denne sidebygger er udstyret med talrige indbyggede widgets. Du kan tilfĂžje de bedste gratis Elementor-widgets til at designe din webside.
Du kan dog ogsÄ oprette en brugerdefineret widget til Elementor, hvis det er nÞdvendigt. Og ElementsKit widget builder vil hjÊlpe dig med at gÞre det!
Fordele ved at bruge ElementsKit Widget Builder til at bygge brugerdefinerede widgets
Vi ved alle, at widgets tilfÞjer fremragende funktionalitet til websteder. Men at finde en passende widget til at udfÞre din tilpassede opgave er nÊsten umuligt. I sÄ fald har du intet andet valg end at bygge en brugerdefineret widget.
Og widgetbyggere gÞr denne brugerdefinerede widget-opbygningsproces nemmere end nogensinde. Lad os se pÄ de vigtigste fordele ved at bruge en widgetbygger.
- Byg brugerdefinerede widgets uden viden om kodning
- Widgets er fuldstĂŠndig responsive
- Opret widgets visuelt ved at trĂŠkke og slippe elementerne
- UnderstĂžtter struktureret indhold
- Inkluderer selvstĂŠndig kodeeditor
- UnderstĂžtter flere felttyper osv.
Dette er de vigtigste fordele ved ElementsKit-widgetbyggeren.
Hvordan bygger man brugerdefineret Elementor-widget med ElementsKit (gratis)?
En fuldt funktionel widget kan superlade din hjemmesideopbygningsoplevelse. SĂ„ det er vigtigt at bygge din brugerdefinerede Elementor-widget til dit websted.
Ivrig efter at vide, hvordan man bygger en brugerdefineret Elementor-widget? Her er trin-for-trin-processen til at bygge en gratis brugerdefineret Elementor-widget ved at bruge ElementsKit-widgetbyggeren.
ForudsĂŠtning
For at bygge en Elementor brugerdefineret widget skal du bruge fĂžlgende plugins â
NÄr disse vÊrktÞjer er installeret og aktiveret pÄ dit WordPress-websted, er det tid til at begynde at oprette den tilpassede Elementor-widget.
Trin #1: SlÄ Widget Builder til
For at starte widget-opbygningsprocessen skal du sÞrge for, at du har slÄet Widget Builder-modulet til fra dashboard-panelet.
For at slÄ det til skal du fortsÊtte til ElementsKit-dashboardpanelet og derefter klikke MODULER. Find modulet 'Widget Builder' i modulet og tÊnd det.
Her er processen med at kontrollere, om widgetbyggeren er slĂ„et til eller fra â
TĂŠnder for widgetbyggeren
Glem ikke at klikke pÄ 'Gem Êndringer'-knappen efter at have tÊndt eller slukket for et modul.
Trin #2: Opret en widget
For at oprette en ny widget skal du fortsĂŠtte til ElementsKit > Widget Builder. PĂ„ den nye side vil du bemĂŠrke en ny knap kaldet "TilfĂžj nyâ. Ved at klikke pĂ„ den knap oprettes en ny widget pĂ„ dit Elementor venstre panel.
Oprettelse af en ny widget
Nu kan du tilpasse widgettitlen, ikonet og kategorien fra denne side. SÊt en widgettitel og et ikon pÄ din brugerdefinerede widget. Du kan bruge et hvilket som helst ikon fra Font Awesome-ikonbiblioteket.
Tilpasning af widgettitel og -ikon
Mens du navngiver din widget, skal du sĂžrge for at holde den relevant for din opgave. Og fĂžj et relevant ikon til din widget.
Trin #3: Tilpasning af den nye widget
Udvikling af Elementor-widgets er fĂŠrdig, nu er det tid til tilpasning. Du behĂžver ikke nogen dybdegĂ„ende kodningsviden for at bygge en ny brugerdefineret widget til Elementor. ElementsKit-widgetbyggeren gĂžr processen glattere end nogensinde.Â
TrÊk blot ElementsKit-widgetten fra venstre panel og slip den pÄ midterpanelet. Den tabte widget vil automatisk oprette en variabel pÄ det hÞjre bord.
Klik pÄ den variabel, og den vil automatisk blive inkluderet i kodeeditoren. Du kan tilfÞje yderligere HTML-, CSS- og JavaScript-opmÊrkninger via kodeeditoren, hvis det er nÞdvendigt.
Efter at have bygget en ny widget eller lavet nogle tilpasninger, skal du klikke pÄ knappen Gem, og du er fÊrdig.
Her er den detaljerede proces -
Opbygning af en ny widget
Du kan ogsÄ tilfÞje disse kontroller til fanen Stil eller Avanceret.
Trin #4: Ăndring af widgetfelterne
Mens du opretter widgetten, kan du tilpasse alle widgetfelterne eller -elementerne. For eksempel kan du tilpasse etiketnavnet, pladsholderen, standardvĂŠrdien osv.
Tilpasningsmulighederne er dog ikke de samme for alle paneler. Forskellige kontrolpaneler har forskellige inputfelter.
Tilpasning af widgetfelterne
Pro tips: Mens du tilfĂžjer den samme kontrol flere gange, skal navnet vĂŠre unikt. Ellers vil det skabe en variabel konflikt.
Trin #5: Se en forhÄndsvisning af den nybyggede widget
Den nybyggede widget fungerer fuldstÊndig pÄ linje med de eksisterende Elementor-widgets. Den nybyggede brugerdefinerede widget vil vÊre tilgÊngelig pÄ Elementor-panelet. For at tjekke den nye widget skal du Äbne en ny webside og trÊkke og slippe widgetten pÄ den nye webside.
Tjek den nye widget
Pro tips: Du kan tilfÞje alle ElementsKit-kontrolelementer for at bygge den brugerdefinerede Elementor-widget via Elementor-widgetbyggeren. FÄ ElementsKit pro-versionen for at fÄ adgang til flere Elementor-kontroller.
Se videoen nedenfor for at lĂŠre mere om ElementsKit-widgetbyggeren.
Liste over ElementsKit-understĂžttede kontrolfelter
ElementKit tilbyder masser af kontrolfelter til at bygge en brugerdefineret widget. Her er listen over understĂžttede kontrolfelter â
- Tekst â Tekstfeltet bruges til at fĂ„ tekstinput.
- Nummer â Brugere kan indtaste tal via nummerkontrolfeltet.
- TekstomrĂ„de â TekstomrĂ„det bruges til at indtaste tal, tekster, symboler osv.
- WYSIWYG â Det er WordPress TinyMCE rig-tekst editor.
- Kode â Denne kontrol tilfĂžjer en kodeeditor baseret pĂ„ Ace-editoren.
- Skjult â Det skjulte inputfelt bruges til at gemme data direkte i databasen uden at angive et inputfelt i kontrolpanelet.
- Switcher â En Switcher er en fancy reprĂŠsentation af et afkrydsningsfelt. Det bruges til at vise/skjule forskellige blokke eller elementer pĂ„ en webside.
- VĂŠlg â Valgmuligheden giver brugerne flere muligheder at vĂŠlge imellem. Det viser mulighederne pĂ„ en rullemenu.Â
- VĂŠlge â VĂŠlg bruges til at vise en knap eller en gruppe knapper med ikoner og andre stil- eller justeringsindstillinger.
- Farve â Det muliggĂžr et farvevĂŠlgerfelt pakket med en alfa-skyder.
- Skrifttype â Skrifttypekontrollen giver brugerne mulighed for at vĂŠlge en skrifttype fra Googles skrifttypebibliotek.
- Dato tid â Dato-tid-biblioteket bruger Flatpickr bibliotek at vĂŠlge dato og klokkeslĂŠt.
- URL â URL-feltet giver et link med en knap. Du kan indstille knappen til at Ă„bne linket inden for samme eller ny fane samt gĂžre det nofollow.
- Medier â Brugere kan vĂŠlge forskellige medier ved at bruge denne sektion. Det viser mediefilerne fra WordPress mediebibliotek.
- Ikoner â Ikonkontrollen giver brugerne mulighed for at tilfĂžje ikoner fra Font Awesome- og ElementsKit lite-ikonbibliotekerne. Brugere kan ogsĂ„ uploade deres brugerdefinerede ikonbibliotek fra WordPress mediebibliotek.
- Skyder â Skyderen er en skala, der kan trĂŠkkes, der bruges til at vĂŠlge mellem en rĂŠkke numeriske vĂŠrdier.
- Dimensioner â Dimensionskontrol bestĂ„r af fire inputpaneler til at indstille et passende sted for et element. Indtastningspanelerne er top, hĂžjre, bund og venstre.
- GrĂŠnse â Det gĂžr det muligt for brugeren at tilpasse kanttype, bredde og farve.
- Baggrund - Baggrundskontrollen giver brugerne mulighed for at tilfĂžje et baggrundsbillede, video og farve. Du kan tilfĂžje statiske eller gradientfarver til videoen.
- Box Shadow â Boksskyggen byder pĂ„ fem forskellige typer skygger rundt om boksen. Det inkluderer vandret skygge, lodret skygge, skyggeslĂžring, skyggespredning og farverig skygge.
- Tekstskygge â Ligesom boksskyggen giver tekst-skygge-kontrollen ogsĂ„ fire forskellige kontroller. Disse er vandret skygge, lodret skygge, skyggeslĂžring og farverig skygge omkring teksterne.
- Typografi â Typografien giver brugerne mulighed for at tilpasse skrifttypefamilie, skriftstĂžrrelse, skriftvĂŠgt, skrifttypestil, linjehĂžjde, teksttransformation og bogstavafstand.
- Billeddimension â Billeddimensionskontrol bestĂ„r af billedhĂžjde, -bredde og en anvend-knap.
- VĂŠlg 2 â Det opretter ogsĂ„ en rullemenu som vĂŠlg kontrol, men med mere stil og design.
- SvĂŠveanimation â Denne kontrol tilfĂžjer animation pĂ„ forskellige udvalgte bokse baseret pĂ„ Hover.css-biblioteket.
- Indgangsanimation â Indgangsanimationskontrollen giver brugeren mulighed for at tilpasse en knaps udseende baseret pĂ„ Animate.css-biblioteket.
Dette er kontrolelementerne i ElementsKit-widgetbyggeren, som du kan bruge, mens du bygger en brugerdefineret Elementor-widget.
Afsluttende ord
SÄdan kan du sÄ nemt bygge en brugerdefineret Elementor-widget ved at trykke pÄ ElementsKit. ElementsKit kommer med tonsvis af indbyggede widgets, som sandsynligvis vil minimere din indsats i Elementor-sidebygning.
Samtidig giver det dig ogsÄ en minimalistisk metode til at skabe dine foretrukne Elementor-tilpassede widgets. Nu er det din tur til at installere og hente ElementsKit og hÞste fordelene ved tilfÞjelsen til at bygge Elementor brugerdefinerede widgets.
Skriv et svar