Sådan bygger du brugerdefineret Elementor-widget uden kodningsviden

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 –

• Elementor
• ElementsKit

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.