Om du är som jag har du många idéer för din webbplats som du vill se förverkligas. Och även om Elementor gör det enkelt att skapa unika designer med dra-och-släpp-funktioner och förbyggda element, kan ibland ingenting ersätta kraften i ren CSS. I den här artikeln kommer vi att gå igenom hur du lägger till anpassad CSS i Elementor så att du kan ta din webbdesign ännu längre!
3 populära sätt att lägga till anpassad CSS i Elementor
Det finns olika sätt att lägga till anpassad CSS i Elementor. Låt oss ta en titt på våra tre bästa sätt att göra det.
- Använd WordPress-anpassaren
- Använd ett CSS-plugin
- Använda HTML-widgeten
Använd WordPress-anpassaren.
För att lägga till anpassad CSS-kod i Elementor, följ dessa steg:
- Gå till Utseende > Anpassa
- I WordPress-anpassaren klickar du på Ytterligare CSS.
- Avsnittet Ytterligare CSS öppnas. Du kan lägga till kod här genom att klistra in den i textrutan eller klicka på knappen Lägg till anpassad CSS för att bläddra efter din fil på din dator.
Använd ett CSS-plugin
Det finns olika plugins tillgängliga på marknaden, som Simple CSS, Custom CSS Pro och CSS Hero, som låter dig lägga till anpassad CSS i Elementor.
För att börja, gå till Anpassad CSS och JS > Lägg till anpassad CSS och klicka på Lägg till CSS-kod.
En grundläggande CSS-editor visas till vänster. Du kan välja att ladda CSS-koden internt eller i ett externt stilark med hjälp av konfigurationsalternativen till höger. Dessutom kan du välja om koden ska placeras i sidhuvudet eller sidfoten:
När du är klar med att redigera CSS-koden trycker du på knappen Publicera
Obs: Växla till en frontend-vy för att se koden i aktion.
Använda HTML-widgeten
Du kan använda en HTML-widget för att lägga till anpassad CSS i Elementor. Allt du behöver göra för det här alternativet är att dra och släppa HTML-widgeten och lägga till din CSS-kod i en Style-tagg.
Anpassad CSS är ett sätt att lägga till anpassad kod på din webbplats. Den kan användas till många saker, från att ändra utseendet och känslan på din webbplats till att lägga till extra funktionalitet.
Nu när du vet hur du lägger till anpassad CSS kan du använda den på dina webbplatser genom att följa dessa steg:
- Öppna Elementors redigeringsfönster och klicka på ikonen '+' uppe till vänster
- Klicka på "Anpassad kod" och klistra sedan in följande kod: `.elementor-custom-css{display:none;}`. Du hittar detta under Inställningar > Anpassad CSS eller Utseende > Temaalternativ > Anpassad CSS (beroende på vilken version av WordPress du har).
Slutsats
Nu när du vet hur man lägger till anpassad CSS kan du dra nytta av Elementors flexibilitet. Nästa gång något inte beter sig som förväntat, försök att lägga till lite CSS-kod istället för att fixa det med ett plugin eller temaändring, försök att lägga till lite CSS-kod!
Relevant innehåll
- Vad är CSS-ramverket?
- Hur tar man bort oanvänd CSS i WordPress?
