Så här använder du Visual Editor för att skapa widgetar i WordPress

Vill du använda en visual editor för att skapa widgetar till din website?

Med rätt visual editor kan du skapa custom widgets med länkar, images, text och mycket mer. You can then add these widgetar to different areas of your theme and display them across your WordPress website.

I den här artikeln visar vi dig hur du använder en visual editor för att skapa widgetar i WordPress.

Varför använda Visual Editor för att skapa widgetar i WordPress?

Widgets allow you to add rich content outside of the main page and post area. Alla teman i WordPress är olika, men du kan vanligtvis add widgetar till area som gillar footer, header och sidebar.

Många websites använder dessa areas för att visa en about section, display their most popular posts, add to an email newsletter sign-up form, med mera.

WordPress allow you to add a wide range of blocks to any widget-ready area, and many WordPress plugins also add their own blocks.

Om du till exempel använder Smash Balloon Twitter Feed, kan du embeda senaste tweets i alla widget-klara area med hjälp av pluginets Twitter Feed block.

Men ibland kanske du vill skapa en custom widget som visar rikt multimedia content för dina besökare. Till exempel kanske du vill uploada ditt författarfoto och sedan använda det för att skapa en widget för författarens bio, komplett med links till dina olika profiler på sociala medier.

Med detta sagt, låt oss se hur du kan använda en visual editor för att skapa customize widgets i WordPress. Använd bara länkarna under för att hoppa till den metod som är rätt för ditt theme:

Metod 1: Använda tillägget Widgets Options Plugin (fungerar med alla WordPress Themes)

Det enklaste sättet att skapa en customize-widget är att använda pluginet Widget Options. Det addar massor av extra inställningar till WordPress standard visual widget editor, inklusive möjligheten att visa olika widgets beroende på användarens roll, dölja WordPress widgets på mobilen, och mer.

Det add to också en Text widget som du kan customize med dina egna links, images, format, och mer. Detta allow you att skapa en custom widget utan att behöva skriva någon kod.

Först måste du installera och aktivera pluginet Widget Options. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett plugin för WordPress.

Efter aktivering, gå till sidan Appearance ” Widgets i din WordPress dashboard.

Du kommer nu att se en lista över alla områden som är redo för widgetar i ditt WordPress theme. De alternativ som du ser kan variera beroende på ditt theme.

You’ll also see all the widgets you can add to your site. Vi kommer att använda widgeten Text för den här guiden, så det är bara att drag and drop den till valfritt widgetfärdigt area.

You will now see a small popup.

Den här popupen är i huvudsak en mini-page eller post editor, så det borde se bekant ut.

Till att börja med kan du skriva in en rubrik, som kommer att visas ovanför widgeten.

Därefter kan du skriva text direkt i den lilla editorn, lägga till links och images, ändra formatet, lägga till punktlistor och numrerade listor med mera.

Du kan också visa eller dölja widgetar på specifika pages i WordPress och lägga till customizes i WordPress-widgetar.

När du är nöjd med widgetens inställningar klickar du på länken ”Done” för att save inställningarna.

Nu, om du besöker din website, kommer du att se den nya widgeten för rik text live.

Om du föredrar det kan du bygga ett eget widget visuellt med hjälp av WordPress Customizer.

Gå bara till Appearance ” Widgets, men den här gången klickar du på ”Hantera med Live Preview”.

Detta öppnar Customize med widgetinställningarna redan valda.

Du kan nu klicka på det area där du vill lägga till den customize widget.

Därefter klickar du på ”Add a Widget”, vilket öppnar en panel som visar alla olika widgetar.

Hitta bara ”Text” och klicka på den för att add to din website.

Detta öppnar en liten editor där du kan add to text, links, media, med mera.

När du gör ändringar i Editorn uppdateras live preview automatiskt.

När du är nöjd med hur widgeten ser ut klickar du på knappen ”Publicera” för att göra den live på din WordPress-blogg eller website.

Om du inte kan hitta theme customize i din WordPress dashboard, vänligen se vår guide om hur du fixar den saknade theme customize i WordPress admin.

Metod 2: Använda Site Editor för hela webbplatsen (fungerar med Block-aktiverade WordPress Themes)

Om du använder ett blockaktiverat WordPress-tema kan du lägga till block till alla widget-klara områden med hjälp av hela Site Editor.

På så sätt kan du skapa customize-widgets genom att ordna standardblocken i WordPress i ett widget-klart område, t.ex. sidebaren. Du behöver inte heller installera ett separat plugin för WordPress.

Det är också ett sätt att add widgets till area som du inte kan edit med WordPress standard widget editor eller customizer. Du kan till exempel lägga till widgetar till din 404 page template.

För att komma igång, heada över till Appearance ” Editor i WordPress dashpanelen.

Som standard visar hela Site Editor ditt temas hemmamall, men du kan lägga till widgets och block till alla area.

För att se alla tillgängliga alternativ, välj bara antingen ”Templates” eller ”Template Parts”.

Du kan nu clicka på den template eller template-del som du vill edit:a.

WordPress kommer nu att visa en preview av designen. För att gå vidare och edit denna template, click på den lilla pennan icon.

När du har gjort det klickar du på den blå ”+” -ikonen och hittar sedan det första blocket du vill använda i din custom widget.

Du kan använda vilken kombination av block du vill, men om du har planer på att använda en image och text rekommenderar vi att du börjar med blocket Media & Text.

This allows you to easily arrange an image next to some text in a nice layout. Följaktligen är Media & Text-blocket perfekt för att skapa en informationsbox för författare, som du kan se i följande image.

När du har valt det block du vill använda är det bara att drag and drop det till ett widgetfärdigt area som sidebar och footer.

Den kompletta Site Editor ger dig tillgång till WordPress kompletta uppsättning tools och Settings. Det innebär att du kan add to en call-to-action knapp, text, links, images och annat content till fler block.

Med detta sagt bör du kunna skapa exakt den widget du hade i åtanke. Lägg bara till fler block och content till widget-ready area tills du är nöjd med hur det ser ut.

För fler idéer om hur du använder ditt temas widget-klara areas, vänligen se vår checklista över saker att lägga till i footern på din WordPress site.

När du är nöjd med de ändringar du har gjort klickar du på ”Save”.

Nu, om du besöker din WordPress website, kommer du att se den nya custom widgetar live.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt kan använda visual editor för widgetar i WordPress. Du kanske också vill se vår guide om de bästa page builders med drag and drop och hur du skapar en landing page med WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.