Hur man bygger anpassad Elementor-widget utan någon kodningskunskap

Elementor-widgets hjälper till att lägga till sidbyggande element som en navigeringsmeny, knapp, bildruta, FAQ-sektion och många fler. Även om flera Elementor-tillägg kommer med Elementor-widgets, är det osannolikt att du får alla nödvändiga widgets i dessa tillägg.

Det är här du behöver anpassade Elementor-widgets för att uppfylla dina behov. ElementsKit har funktionerna som hjälper dig att bygga de nödvändiga widgetarna på nolltid.

Det här inlägget kommer att guida dig om hur du bygger en anpassad Elementor-widget utan kodning i en minimalistisk metod.

Låt oss fortsätta... nu!

Vad är en widget?

Widget hänvisar till en liten GUI-applikation som används för att slutföra en specifik uppgift. En widget kan vara vilken del av din webbplats som helst som en knapp, kryssruta, dialogruta, rullningslist, sökruta, karta, klocka, besökarräknare, etc.

Låt oss betrakta Elementors sidbyggare som ett exempel. Denna sidbyggare är utrustad med många inbyggda widgets. Du kan lägga till de bästa gratis Elementor-widgetarna för att designa din webbsida.

Du kan dock också skapa en anpassad widget för Elementor om det behövs. Och den ElementsKit widgetbyggare hjälper dig att göra det!

Fördelar med att använda ElementsKit Widget Builder för att bygga anpassade widgets

Vi vet alla att widgets lägger till utmärkt funktionalitet till webbplatser. Men att hitta en lämplig widget för att utföra din anpassade uppgift är nästan omöjligt. I så fall har du inget annat val än att bygga en anpassad widget.

Och widgetbyggarna gör denna anpassade widgetbyggande enklare än någonsin. Låt oss ta en titt på de viktigaste fördelarna med att använda en widgetbyggare.

• Bygg anpassade widgets utan någon kunskap om kodning
• Widgets är helt responsiva
• Skapa widgetarna visuellt genom att dra och släppa elementen
• Stöder strukturerat innehåll
• Inkluderar fristående kodredigerare
• Stöd för flera fälttyper etc.

Dessa är de viktigaste fördelarna med ElementsKit-widgetbyggaren. 

Hur man bygger anpassad Elementor-widget med ElementsKit (gratis)?

En fullt fungerande widget kan ladda din webbplatsbyggande upplevelse. Så det är viktigt att bygga din anpassade Elementor-widget för din webbplats.

Sugen på att veta hur man bygger en anpassad Elementor-widget? Här är steg-för-steg-processen för att bygga en gratis anpassad Elementor-widget genom att använda ElementsKit-widgetbyggaren.

Nödvändig förutsättning

För att bygga en anpassad Elementor-widget behöver du följande plugins –

• Elementor
• ElementsKit

När dessa verktyg är installerade och aktiverade på din WordPress-webbplats är det dags att börja skapa den anpassade Elementor-widgeten.

Steg #1: Slå på Widget Builder

För att starta widgetbyggandet, se till att du har aktiverat Widget Builder-modulen från instrumentpanelen.

För att aktivera den, fortsätt till panelen ElementsKit instrumentpanel och klicka sedan MODULER. I modulesektionen kan du hitta modulen "Widget Builder" och slå på den.

Här är processen för att kontrollera om widgetbyggaren är på eller av –

Slår på widgetbyggaren

Glöm inte att klicka på 'Spara ändringar'-knappen efter att ha slagit på eller stängt av en modul.

Steg #2: Skapa en widget

För att skapa en ny widget, fortsätt till ElementsKit > Widget Builder. På den nya sidan kommer du att märka en ny knapp som heter "Lägg till ny”. Genom att klicka på den knappen skapas en ny widget på din Elementor vänstra panel.

Skapa en ny widget

Nu kan du anpassa widgetens titel, ikon och kategori från den här sidan. Sätt en widgettitel och -ikon på din anpassade widget. Du kan använda vilken ikon som helst från Font Awesome-ikonbiblioteket.

Anpassa widgettitel och ikon

När du namnger din widget, se till att den är relevant för din uppgift. Och lägg till en relevant ikon till din widget.

Steg #3: Anpassa den nya widgeten

Elementor-widgetutveckling är klar, nu är det dags för anpassning. Du behöver ingen djupgående kodningskunskap för att bygga en ny anpassad widget för Elementor. ElementsKit-widgetbyggaren gör processen smidigare än någonsin. 

Dra helt enkelt ElementsKit-widgeten från den vänstra panelen och släpp den på mittpanelen. Den tappade widgeten skapar automatiskt en variabel på den högra tavlan.

Klicka på den variabeln så inkluderas den automatiskt i kodredigeraren. Du kan lägga till ytterligare HTML-, CSS- och JavaScript-uppmärkningar via kodredigeraren om det behövs.

Efter att ha byggt en ny widget eller gjort någon anpassning, klicka på knappen Spara och du är klar.

Här är den detaljerade processen -

Bygger en ny widget

Du kan också lägga till dessa kontroller på fliken Stil eller Avancerat.

Steg #4: Ändra widgetfälten

När du skapar widgeten kan du anpassa alla widgetfält eller element. Du kan till exempel anpassa etikettens namn, platshållare, standardvärde osv.

Men anpassningsalternativen är inte desamma för alla paneler. Olika kontrollpaneler har olika inmatningsfält.

Anpassa widgetfälten

Proffs tips: När du lägger till samma kontroll flera gånger måste namnet vara unikt. Annars kommer det att skapa en variabel konflikt.

Steg #5: Förhandsgranska den nybyggda widgeten

Den nybyggda widgeten fungerar helt likt de befintliga Elementor-widgetarna. Den nybyggda anpassade widgeten kommer att vara tillgänglig på Elementor-panelen. För att kontrollera den nya widgeten, öppna en ny webbsida och dra och släpp widgeten på den nya webbsidan.

Kontrollerar den nya widgeten

Proffs tips: Du kan lägga till alla ElementsKit-kontroller för att bygga den anpassade Elementor-widgeten via Elementor-widgetbyggaren. Skaffa ElementsKit pro-versionen för att komma åt fler Elementor-kontroller.

Kolla videon nedan för att lära dig mer om ElementsKit-widgetbyggaren.

Lista över ElementsKit-kontrollfält som stöds

ElementKit erbjuder massor av kontrollfält för att bygga en anpassad widget. Här är listan över kontrollfält som stöds –

• Text – Textfältet används för att få textinmatning.
• siffra – Användare kan mata in nummer via nummerkontrollfältet.
• Textområde – Textområdesfältet används för att mata in siffror, texter, symboler etc.
• WYSIWYG – Det är WordPress TinyMCE rich-text editor.
• Koda – Denna kontroll kommer att lägga till en kodredigerare baserad på Ace-redigeraren.
• Dold – Det dolda inmatningsfältet används för att spara data direkt i databasen utan att ange ett inmatningsfält i kontrollpanelen.
• Switcher – En Switcher är en snygg representation av en kryssruta. Det används för att visa/dölja olika block eller element på en webbsida.
• Välj – Välj alternativet ger flera alternativ för användarna att välja mellan. Den visar alternativen på en rullgardinsmeny. 
• Välja – Välj används för att visa en knapp eller en grupp knappar med ikoner och andra stil- eller inriktningsinställningar.
• Färg – Det möjliggör ett färgväljarfält packat med en alfareglage.
• Font – Teckensnittskontrollen ger användarna möjlighet att välja ett teckensnitt från Googles teckensnittsbibliotek.
• Datum Tid – Datum-tid-biblioteket använder Flatpickr bibliotek för att välja datum och tid. 
• URL – URL-fältet ger en länk med en knapp. Du kan ställa in knappen för att öppna länken inom samma eller ny flik samt göra den nofollow.
• Media – Användare kan välja olika media genom att använda det här avsnittet. Den visar mediefilerna från WordPress mediebibliotek.
• Ikoner – Ikonkontrollen låter användarna lägga till ikoner från Font Awesome och ElementsKit lite ikonbibliotek. Användare kan också ladda upp sitt anpassade ikonbibliotek från WordPress mediebibliotek.
• Skjutreglage – Slider är en dragbar skala som används för att välja mellan en rad numeriska värden.
• Mått – Dimensionskontroll består av fyra ingångspaneler för att ställa in en lämplig plats för ett element. Ingångspanelerna är övre, höger, botten och vänster. 
• Gräns – Det gör det möjligt för användaren att anpassa kanttyp, bredd och färg.
• Bakgrund – Bakgrundskontrollen låter användarna lägga till en bakgrundsbild, video och färg. Du kan lägga till statiska eller gradientfärger till videon.
• Box Shadow – Lådskuggan erbjuder fem olika typer av skuggor runt lådan. Den inkluderar horisontell skugga, vertikal skugga, skuggoskärpa, skuggspridning och färgglad skugga.
• Text skugga – Precis som boxskuggan ger text-shadow-kontrollen också fyra olika kontroller. Dessa är horisontell skugga, vertikal skugga, skuggoskärpa och färgglad skugga runt texterna.
• Typografi – Typografin låter användarna anpassa teckensnittsfamilj, teckenstorlek, teckensnittsvikt, teckensnittsstil, radhöjd, textomvandling och bokstavsavstånd.
• Bilddimension – Bilddimensionskontroll består av bildhöjd, bredd och en appliceringsknapp.
• Välj2 – Det skapar också en rullgardinsmeny som välj kontroll men med mer stil och design.
• Hover Animation – Den här kontrollen lägger till animering på olika urvalsrutor baserat på Hover.css-biblioteket.
• Entréanimation – Ingångsanimeringskontrollen låter användaren anpassa en knapps utseende baserat på Animate.css-biblioteket.

Det här är kontrollerna i ElementsKit-widgetbyggaren som du kan använda när du bygger en anpassad Elementor-widget.

Slutord

Så enkelt kan du bygga en anpassad Elementor-widget genom att klicka på ElementsKit. ElementsKit kommer med massor av inbyggda widgets som sannolikt kommer att minimera dina ansträngningar i Elementor-sidbyggande.

Samtidigt erbjuder den dig också en minimalistisk metod för att skapa dina favoritelementor anpassade widgets. Nu är det din tur att installera och hämta ElementsKit och skörda fördelarna med tillägget när du bygger Elementor anpassade widgets.