Ett av de största argumenten för att använda sidbyggare som Elementor är att du får tillgång till förbyggda sidelement, eller ”widgets”. Elementor-widgetar innehåller massor av anpassnings- och stylingalternativ. Ibland är dock det enda sättet att tillämpa en viss stil att nyttja Cascading Style Sheets (CSS).
CSS ger dig en fantastisk grad av kontroll över varje komponent på din webbplats. Det är enkelt att lägga till detta i WordPress om du är bekant med språket. Elementor erbjuder även flera alternativ för att lägga till anpassad CSS.
Kolla in vår videoguide om hur man lägger till en anpassad CSS i Elementor
I den här artikeln så ska vi prata om vad CSS är och hur du kan lägga till anpassad styling i Elementor. Slutligen så diskuterar vi några bästa metoder för att använda CSS i WordPress. Nu sätter vi igång!
Vad är CSS?
CSS är vad vi kallar ett språk för ”stilblad”. Du kan använda CSS-stilblad för att lägga till egen stil i HTML- eller XML-dokument. Genom att använda CSS så kan du ta en enkel HTML-sida och omvandla den till en modern design.
Tänk på CSS som ett språk som beskriver hur element ska visas i en webbläsare. Det fungerar i alla webbläsare och är ett av internets kärnspråk.
Det här är exempelvis den CSS-kod som du skulle använda för att tilldela en bakgrundsfärg till kroppen av ett HTML-dokument:
body {
background-color: red;
}Du kan använda CSS för att tillämpa stilar på specifika komponenter, klasser och ID: er i HTML. Följande utdrag skulle exempelvis ge en specifik textfärg och justering för alla H2: er på en sida:
h2 {
color: black;
text-align: left;
}När du laddar en HTML-sida så laddas vanligtvis även ett separat stilmall-blad som innehåller all CSS-kod. Detta innebär att du kan återanvända stilmallarna på flera sidor.
Du kan använda CSS-kod direkt på vilken HTML-sida som helst. Du kan även använda den ”inbundet”. Detta är en term som hänvisar till CSS-kod som gäller för ett enda HTML-element och som finns i den filen.
Här är ett exempel på inbunden CSS för en specifik H2-rubrik:
<h2 style="color:black;text-align:center;">This is where the heading text goes</h1>Det anses vara bästa praxis att lägga till CSS i ett separat stilblad. En av de många fördelarna med att använda WordPress och Elementor är dock att du kan lägga till CSS utan att redigera filer manuellt. Låt oss ta en närmare titt på hur det fungerar.
Anpassade CSS-alternativ i Elementor
Om du är bekant med Elementor så vet du att byggaren använder sektioner, kolumner och widgetar för att hjälpa dig att sätta ihop sidor. Sektioner innehåller en eller flera kolumner, och varje kolumn kan ha flera moduler:
En av de bästa delarna med Elementor är att du kan lägga till separat CSS-kod på avsnitts-, kolumn- och widgetnivå. När du håller muspekaren över ett avsnitt så kan du välja ikonen med sex punkter för att öppna menyn Redigera avsnitt på vänster sida av skärmen:
Om du går till fliken Avancerat i menyn Redigera avsnitt så ser du avsnittet Anpassad CSS. Där finns ett fält där du kan lägga till kod för det specifika avsnittet:
När du redigerar kolumner och widgets så kommer du att märka att du har tillgång till samma tre flikar i deras respektive inställningsmenyer. Avsnitt, kolumner och widgetar inkluderar alla inställningar för layout, stil och avancerade inställningar.
Om du vill lägga till anpassad CSS till en kolumn, så håller du muspekaren över den och väljer ikonen med två kolumner i det övre högra hörnet av elementet. Navigera sedan till alternativet Avancerat och öppna avsnittet Anpassad CSS:
Du kan följa samma process för att lägga till anpassad CSS till en Elementor-widget. Välj helt enkelt den widget som du vill anpassa och gå direkt till fliken Avancerat > Anpassad CSS:
Att lägga till anpassad CSS till specifika element i Elementor-sidbyggaren är mycket enkelt. Tänk dock på att stilen endast gäller för dessa element. Om du vill lägga till anpassad CSS som påverkar hela webbplatsen så måste du använda ett annat tillvägagångssätt.
Så här lägger du till anpassad CSS med Elementor (5 metoder)
I det här avsnittet så undersöker vi andra sätt att lägga till anpassad CSS med Elementor. Vi tar upp metoder som tillämpar CSS på hela din webbplats, på specifika sidor och på Elementor-widgetar.
Metod 1: Använd Elementor’s HTML-widget
Elementor gör det möjligt för dig att lägga till anpassad CSS i alla dess widgetar. I vissa fall så bör du dock lägga till element manuellt med hjälp av HTML och CSS. I dessa fall så måste du använda HTML-widgeten:
HTML-widgeten kan analysera HTML, CSS och JavaScript. Du kan lägga till vilken kod som helst i fältet HTML-kod och om den är giltig så kommer Elementor att visa den som en widget:
HTML-widgeten har stöd för både inbunden och fristående CSS. All kod som du lägger till med hjälp av widgeten kommer endast att påverka det enskilda elementet.
Metod 2: Använd Elementor’s meny för webbplatsinställningar
Elementor inkluderar en samling globala inställningar som liknar de alternativ som du hittar i WordPress Anpassaren. För att komma åt Elementor’s Webbplatsinställnings-meny öppnar du redigeraren och klickar på hamburgermenyn i det övre vänstra hörnet av skärmen:
På nästa sida väljer du alternativet Webbplatsinställningar:
Där ser du en samling inställningar som gör att du kan anpassa webbplatsens stil. Alla ändringar som du gör i den här menyn gäller för hela webbplatsen, även om du tekniskt sett bara redigerar en enda sida.
Du kan läsa om hur du använder menyn Webbplatsinställningar för att anpassa din sida på den officiella Elementor-webbplatsen. För tillfället så är den enda sektionen som vi bryr oss om fliken Anpassad CSS. Öppna den så kommer du att se ett fält som ser ut precis som de anpassade CSS-alternativen för avsnitt, widgetar och kolumner:
All anpassad CSS som du lägger till här kommer att påverka hela webbplatsen. Om du bara vill anpassa specifika element så rekommenderar vi att du använder ett mer målinriktat tillvägagångssätt (exempelvis att du lägger till CSS direkt i en widget).
Metod 3: Använd WordPress Anpassaren
WordPress Anpassaren gör det även möjligt att lägga till anpassad CSS på en webbplatsövergripande basis. För att göra detta så går du till Utseende > Anpassa och väljer alternativet Ytterligare CSS i den vänstra menyn:
Det är dock värt att notera att Elementor’s kodfält är mer användarvänliga än de som finns i Anpassaren. Om du redan använder Elementor för att bygga webbplatser så finns det ingen anledning att lägga till anpassad CSS via Anpassaren.
Metod 4: Ställ anpassade CSS-filer i kö
Om du är bekväm med att redigera WordPress-filer och komma åt din webbplats via en FTP-klient (File Transfer Protocol) så kan du ställa in ett CSS-stilblad som ska laddas med Elementor. Detta tillvägagångssätt kräver att du lägger till kod i filen functions.php i WordPress.
För att komma åt filen functions.php så ansluter du till din webbplats via FTP och går till WordPress rotmapp. Öppna mappen, hitta filen functions.php och redigera den.
Här är ett exempel på den kod som du ska lägga till i filen:
add_action( 'elementor/frontend/before_enqueue_scripts', function() {
wp_enqueue_script(
'custom-stylesheet',
get_stylesheet_uri()
);
} );Den koden använder before_enqueue_scriptshook för att ladda ett stilblad som heter custom-stylesheet. Vi använder även funktionen get_stylesheet_uri för att rikta mot stilbladets plats på servern.
Du ska helst lägga till det anpassade stilbladet i ditt barnstemas katalog eller i själva mappen Teman. Stilbladet kan inkludera vilken Elementor CSS-kod som helst. Det utdrag som du lade till i functions.php säkerställer att koden endast laddas när Elementor är aktivt på din webbplats.
Metod 5: Använd en CSS-plugin
Det finns flera plugins som gör att du kan lägga till anpassad CSS på din webbplats utan att använda Anpassaren eller sidbyggare. Ett av våra favoritverktyg för jobbet heter Simple Custom CSS and JS:
Med Simple Custom CSS and JS så får du möjlighet att lägga till kod direkt i ditt temas rubrik- och sidfotelement. Till att börja med så går du till Anpassad CSS & JS > Lägg till anpassad CSS och klickar på Lägg till CSS-kod.
En enkel CSS-redigerare visas till vänster. Till höger så kan du konfigurera om CSS-koden ska laddas i ett externt stilblad eller internt. Du kan även bestämma om koden ska placeras i rubriken eller i sidfoten:
När du är klar med redigeringen av CSS-koden så trycker du på knappen Publicera. Du kan behöva byta till en frontend-vy för att se koden i aktion.
Bästa praxis för att skapa anpassad CSS med Elementor
När du arbetar med anpassad CSS eller lägger till någon typ av kod på din webbplats så gör du klokt i att ha följande bästa praxis i åtanke. Låt oss börja med att använda ett barntema.
Använd ett WordPress Barntema
Om du vill ändra någon del av ditt temas stil med hjälp av CSS så rekommenderar vi att du använder ett barntema. Ett barntema är en mall som ärver alla stilar från ett utsett tema.
På så sätt så påverkar inte de anpassningar som du lägger till i barntemat om du gör några ändringar i det ursprungliga temat. När du uppdaterar ditt tema så kommer det dessutom att behålla dessa ändringar.
Använd en kodförberedare för enklare skrivning
En av de största utmaningarna med att lägga till kod i WordPress eller använda Elementor är att du inte får tillgång till alla funktioner som moderna kodredigerare erbjuder. Istället för att krångla till koden med hjälp av grundläggande redigeringsprogram på plats så rekommenderar vi att du använder din favoritförberedare. Sedan så kan du helt enkelt kopiera och klistra in din kod i WordPress.
Överväg att använda en webbplats för iscensättning
När du planerar att göra stora ändringar i WordPress så rekommenderar vi att du använder en iscensättnings-webbplats. Iscensättnings-webbplatser gör att du kan testa ändringar i stil och funktionalitet utan att riskera att förstöra något på din live-webbplats.
Vissa hosting-leverantörer ger dig tillgång till iscensättnings-funktionalitet från din kontrollpanel. Om du använder Kinsta så kan du välja din webbplats med hjälp av instrumentpanelen MyKinsta och växla fram och tillbaka mellan live- och iscensättningsmiljöer:
Om din hosting-leverantör inte erbjuder iscensättnings-funktionalitet så kan du använda en lokal WordPress-utvecklingsmiljö som DevKinsta för teständamål. Du kan alternativt överväga att byta hosting-leverantör.
Sammanfattning
Att lägga till Elementor-anpassad CSS är enklare än du kanske tror. Sidbyggaren erbjuder flera metoder för att lägga till kod till avsnitt, kolumner, widgets och för hela din webbplats.
För att sammanfatta det hela så finns här fem huvudsakliga sätt att lägga till anpassad CSS i Elementor (eller på din webbplats i allmänhet):
- Använd Elementor HTML Widget.
- Använd menyn Elementor Webbplatsinställningar.
- Använd WordPress Anpassaren.
- Skicka in anpassade CSS-filer.
- Använd ett CSS-plugin.
Alla Kinsta’s planer är utformade för att hjälpa dig att bygga din drömwebbplats med sidbyggare som Elementor. Kolla in våra planer eller prata med försäljning för att hitta den plan som passar dig.
Salman Ravoof är en självlärd webbutvecklare, författare, skapare och en stor beundrare av fri och öppen källkod (FOSS). Förutom teknik är han intresserad av vetenskap, filosofi, fotografi, konst, katter och mat. Lär dig mer om honom på hans hemsida och kontakta Salman på X.
Lämna ett svar