Hur man addar Customize Styles till WordPress Widgets (2 sätt)

Att bygga WordPress-webbplatser har lärt oss att små detaljer gör stora skillnader. Anpassad widgetstyling kan förvandla bra webbplatser till fantastiska.

På WPBeginner får vi alla element att fungera tillsammans. Ta våra sidofältwidgets, till exempel.

Vi har anpassat deras utseende för att lyfta fram viktiga resurser och få dem att smälta in sömlöst i vår webbplats design. Detta hjälper oss att bygga upp ett förtroende hos miljontals besökare.

I den här guiden delar vi med oss av de enklaste metoderna för att anpassa WordPress widget-stilar. Du kommer att lära dig tekniker för att få dina widgetar att se professionella ut och integreras perfekt med ditt tema.

Varför lägga till anpassade stilar i WordPress Widgets?

Som standard använder WordPress-widgetar temats stil, vilket kanske inte alltid matchar dina designmål. Genom att lägga till anpassade stilar får du mer kontroll över hur dina widgetar ser ut och känns.

Här är varför det är värt att anpassa:

• 🎨 Matcha ditt varumärke: Med anpassade stilar kan du anpassa widgetfärger, teckensnitt och avstånd till webbplatsens varumärke för ett mer sammanhängande utseende.
• 👓 F örbättra läsbarheten: Ibland är standardwidgetlayouten inte lätt att läsa. Styling kan hjälpa till att förbättra teckenstorlekar, kontrast eller justering för en bättre användarupplevelse.
• 🌟 Lyft fram viktigt innehåll: Vill du att dina senaste inlägg, uppmaning till handling eller kontaktinformation ska sticka ut? Anpassad CSS kan göra dessa widgetar mer iögonfallande.
• 🧹 Städa upp röriga designer: Om en widget ser för trång eller malplacerad ut kan anpassade stilar hjälpa till att effektivisera dess utseende och integrera den smidigare i din layout.
• 🧩 S kapa unika layouter: Anpassade stilar öppnar upp för layoutmöjligheter, som att förvandla en grundläggande textwidget till en stylad promo-box eller anpassa flera widgets i ett rutnät.

Kort sagt hjälper styling av dina widgetar dig att gå längre än standardutseendet och skapa en mer polerad och professionell webbplats.

Med detta sagt, låt oss ta en titt på hur du enkelt kan lägga till anpassade stilar till dina WordPress-widgets.

Vi visar dig 2 sätt att anpassa dina WordPress-widgetar med egna stilar. Du kan använda dessa snabblänkar för att hoppa till den som fungerar bäst för dig:

Metod 1: Styla WordPress Widgets med CSS-kod

WordPress-widgetar använder nu blockredigeraren för att lägga till en ny widget och ett nytt block i widgetområden och sidofält. Det innebär att du kommer att se några blockstylingalternativ för några av standardblocken i WordPress.

Om du till exempel går till sidan Appearance ” Widgets och klickar på ett standard WordPress block, kommer du att se alternativ för att ändra blockets färger och typografi.

Det är dock inte alla block som har dessa widgetalternativ, särskilt om dessa block inte är standardblock för WordPress. Tack och lov är en av fördelarna med att använda blockredigeraren för widgets att du enkelt kan lägga till anpassade CSS-klasser till varje block.

Allt du behöver göra är att helt enkelt klicka på den widget där du vill lägga till anpassade stilar.

Därefter måste du bläddra ner till fliken “Avancerat” under blockpanelen. Härifrån kan du lägga till en anpassad CSS-klass.

Glöm inte att spara dina widgetinställningar genom att klicka på knappen “Uppdatera”.

Nu kan you add custom CSS till your WordPress theme med inriktning på viss CSS-klass.

Gå bara till appearance ” Customize page och växla till Additional CSS tabs. Där kommer du att se en live preview av din website med en box för att add to dina CSS-regler.

En annan effektiv metod för att lägga till anpassad CSS är att använda WPCode.

Vi har testat det utförligt och funnit att det är ett av de säkraste sätten att integrera anpassad kod i ditt tema. Om du hanterar många CSS-snippets gör WPCode det enkelt att organisera och spåra dem.

För mer information om dess funktioner och fördelar, känn dig fri att kolla in vår WPCode recension.

Se först till att installera pluginet WPCode. För Step-by-Step instruktioner kan du läsa vår guide om hur du installerar ett WordPress plugin.

Gå sedan till Code Snippets “ + Add Sn ippet och välj ‘Add Your Custom Code (New Snippet). Klicka sedan på knappen “+ Add Custom Snippet”.

Ge nu din nya custom CSS ett namn. Det kan vara något enkelt som “Custom Widget Style”.

Ändra sedan Code Type till “CSS Snippet”.

Därefter går du vidare och lägger till din customize CSS i fältet.

Här är lite grundläggande CSS som vi använde:

.latest-articles { 
background-color:#def4f1;
padding:10px;
}

När du är klar rullar du bara ner till sectionen Insertion. Se till att infogningsmetoden är inställd på “Auto Insert” och att Location är “Site Wide Header.

Därefter togglar du knappen högst upp i högra hörnet tills det står “Active” och klickar på “Save Snippet”.

När du har lagt till din anpassade CSS kan du visa din WordPress-webbplats på mobil eller dator för att se hur den fungerar.

Så här ser vår ut på vår demo WordPress-webbplats:

Metod 2: Stil WordPress Widgets med CSS Hero (ingen kod)

Ett problem med metoden ovan är att du måste skriva CSS-kod. Men inte alla användare kan CSS eller ej vill de skriva kod själva.

I så fall kan du använda CSS Hero. Det är ett custom WordPress plugin för styling som gör att du kan add to custom CSS till din WordPress tema utan att skriva någon kod.

Du kan lära dig mer om tillägget i vår CSS Hero review.

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

Vid aktivering kommer plugin att lägga till ett nytt menu item till din WordPress admin-verktygsfält högst upp.

Därefter måste du besöka sidan där du kan se den widget du vill styla och klicka på CSS Hero-knappen högst upp.

Detta öppnar sidan i gränssnittet för CSS Hero Editor.

Det är en Live Editor där du helt enkelt kan peka och clicka på valfritt objekt på din website och ändra dess stil.

Ta helt enkelt din mus till det widget som du vill styla. Klicka sedan för att selecta den.

I det här exemplet har vi valt widgeten Search.

Efter det kan du använda menyn till vänster för att styla ditt widget hur du vill. Detta inkluderar avancerade alternativ för styling som gillar gradienter, typografi, padding, marginaler och kanter.

I exemplet nedan har vi ändrat teckenstorleken för widgeten WordPress Search så att den sticker ut ännu mer.

Du kan också ändra specifika delar av widgeten om det behövs.

For instance, we decided to change the border radius of the button and search fields. På så sätt ser de mer böjda och snygga ut.

När du är slutförd, glöm inte att klicka på knappen “Save” för att spara dina Settings.

Gå sedan vidare och förhandsgranska din webbplats för att se din nya WordPress-design i aktion.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du add to custom styles till WordPress widgets. Du kanske också vill se vårt urval av de bästa drag and drop page builders för WordPress och vår jämförelse av för- och nackdelar mellan gratis och premiumteman för 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.