Et af de største salgsargumenter ved at bruge side builders som Elementor er, at du får adgang til forudbyggede sideelementer, eller “widgets”. Elementor-widgets indeholder masser af tilpasnings- og stylingmuligheder. Men nogle gange er den eneste måde at anvende en bestemt stil på, ved brug af et Cascading Style Sheets (CSS).
CSS giver dig en fantastisk grad af kontrol over alle komponenter på dit websted. Det er nemt at tilføje det til WordPress, hvis du er fortrolig med sproget. Elementor tilbyder også flere muligheder for at tilføje brugerdefineret CSS.
Tjek vores videoguide til tilføjelse af en brugerdefineret CSS til Elementor
I denne artikel vil vi tale om, hvad CSS er, og hvordan du kan tilføje brugerdefineret styling til Elementor. Endelig vil vi diskutere nogle bedste praksis for brug af CSS i WordPress. Lad os komme i gang!
Hvad er CSS?
CSS er det, vi kalder et “stylesheet”-sprog. Du kan bruge CSS-stylesheet til at tilføje brugerdefineret styling til HTML- eller XML-dokumenter. Ved at bruge CSS kan du tage en grundlæggende HTML-side og omdanne den til et moderne design.
Tænk på CSS som et sprog, der beskriver, hvordan elementer skal vises i en browser. Det fungerer i alle browsere, og det er et af internettets centrale sprog.
Dette er f.eks. den CSS-kode, som du bruger til at tildele en baggrundsfarve til body af et HTML-dokument:
body {
background-color: red;
}Du kan bruge CSS til at anvende stilarter på specifikke komponenter, klasser og ID’er i HTML. Med følgende uddrag kan du f.eks. anvende en bestemt tekstfarve og en bestemt justering på alle H2’er på en side:
h2 {
color: black;
text-align: left;
}Når du indlæser en HTML-side, indlæses der typisk også et separat stylesheet, som indeholder al CSS-kode. Det betyder, at du kan genbruge stylesheets på tværs af flere sider.
Du kan frit anvende CSS-kode direkte på enhver HTML-side. Du kan også bruge den “inline”. Dette er et udtryk, der henviser til CSS-kode, som gælder for et enkelt HTML-element og befinder sig i den pågældende fil.
Her er et eksempel på inline CSS for en bestemt H2-hovedlinje:
<h2 style="color:black;text-align:center;">This is where the heading text goes</h1>Det anses for bedste praksis at tilføje CSS i et separat stylesheet. En af de mange fordele ved at bruge WordPress og Elementor er dog, at du kan tilføje CSS uden at redigere filer manuelt. Lad os se nærmere på, hvordan det fungerer.
Brugerdefinerede CSS-muligheder i Elementor
Hvis du er bekendt med Elementor, ved du, at builderen bruger sektioner, kolonner og widgets til at hjælpe dig med at sammensætte sider. Sektioner indeholder en eller flere kolonner, og hver kolonne kan have flere moduler:
En af de bedste dele ved at bruge Elementor er, at du kan tilføje separat CSS-kode på sektions-, kolonne- og widget-niveau. Når du holder musen over et afsnit, kan du vælge ikonet med seks prikker for at åbne menuen Edit Section (Rediger afsnit) i venstre side af skærmen:
Hvis du går til fanen Avanceret i menuen Rediger afsnit , kan du se et afsnit Tilpasset CSS-afsnit. Heri finder du et felt, der gør det muligt at tilføje kode for det pågældende afsnit:
Når du redigerer kolonner og widgets, vil du bemærke, at du har adgang til de samme tre faner i deres respektive indstillingsmenuer. Sektioner, kolonner og widgets indeholder alle layout, stil og avancerede indstillinger.
Hvis du vil tilføje brugerdefineret CSS til en kolonne, skal du holde musen hen over den og vælge ikonet med to kolonner øverst til højre på elementet. Naviger derefter til indstillingen Avanceret, og åbn afsnittet Tilpasset CSS:
Du kan følge den samme proces for at tilføje brugerdefineret CSS til en Elementor-widget. Du skal blot vælge den widget, som du vil tilpasse, og gå direkte til fanen Avanceret > Brugerdefineret CSS:
Det er meget ligetil at tilføje brugerdefineret CSS til specifikke elementer i Elementor-sideopbyggeren. Husk dog på, at stilen kun gælder for disse elementer. Hvis du ønsker at tilføje brugerdefineret CSS, der påvirker hele dit websted, skal du bruge en anden fremgangsmåde.
Sådan tilføjer du brugerdefineret CSS ved hjælp af Elementor (5 metoder)
I dette afsnit undersøger vi andre måder at tilføje Elementor brugerdefineret CSS på. Vi dækker metoder, der anvender CSS på hele dit websted, på specifikke sider og på Elementor-widgets.
Metode 1: Brug Elementor HTML-widget
Elementor giver dig mulighed for at tilføje brugerdefineret CSS til enhver af dens widgets. I nogle tilfælde vil du dog måske gerne tilføje elementer manuelt ved hjælp af HTML og CSS. I disse tilfælde skal du bruge HTML-widget:
HTML-widget’en kan analysere HTML, CSS og JavaScript. Du kan tilføje en hvilken som helst kode i HTML-kodefeltet , og hvis den er gyldig, viser Elementor den som en widget:
HTML-widget’ten understøtter både inline og standalone CSS. Enhver kode, som du tilføjer ved hjælp af widgeten, vil kun påvirke det enkelte element.
Metode 2: Brug Elementor Site Settings Menu
Elementor indeholder en samling af globale indstillinger, der ligner de muligheder, du kan finde i WordPress Customizer. For at få adgang til Elementor Site Settings-menuen skal du åbne editoren og klikke på hamburgermenuen i øverste venstre hjørne af skærmen:
På den næste side skal du vælge indstillingen Indstillinger for websted:
Herinde vil du se en samling indstillinger, der gør det muligt for dig at tilpasse stilen på dit websted. Alle ændringer, som du foretager i denne menu, gælder for hele dit websted, selv om du teknisk set kun redigerer en enkelt side.
Du kan læse om, hvordan du bruger menuen Site Settings til at tilpasse din side på det officielle Elementor-websted. Indtil videre er det eneste afsnit, som vi interesserer os for, fanen Custom CSS-fanen. Åbn den, og du vil se et felt, der ligner de brugerdefinerede CSS-indstillinger for sektioner, widgets og kolonner:
Enhver brugerdefineret CSS, som du tilføjer her, vil påvirke hele dit websted. Hvis du kun har til hensigt at tilpasse specifikke elementer, anbefaler vi, at du bruger en mere målrettet tilgang (f.eks. ved at tilføje CSS direkte til en widget).
Metode 3: Brug WordPress Customizer
WordPress Customizer giver dig også mulighed for at tilføje brugerdefineret CSS på et steddækkende grundlag. For at gøre dette skal du gå til Appearance > Customising og vælge indstillingen Additional CSS i menuen til venstre:
Det er dog værd at bemærke, at Elementor-kodefelterne er mere brugervenlige end dem, der er tilgængelige i Customizer. Hvis du allerede bruger Elementor til opbygning af webstedet, er der ingen grund til at tilføje brugerdefineret CSS via Customizer.
Metode 4: Sæt brugerdefinerede CSS-filer i kø
Hvis du er fortrolig med at redigere WordPress-filer og få adgang til dit websted via en FTP-klient (File Transfer Protocol), kan du indkalde et CSS-stylesheet til indlæsning med Elementor. Denne fremgangsmåde kræver, at du tilføjer kode til WordPress functions.php-filen.
For at få adgang til filen functions.php skal du oprette forbindelse til dit websted via FTP og gå til WordPress-rootmappen . Åbn mappen, find filen functions.php, og rediger den.
Her er et eksempel på den kode, som du vil tilføje til filen:
add_action( 'elementor/frontend/before_enqueue_scripts', function() {
wp_enqueue_script(
'custom-stylesheet',
get_stylesheet_uri()
);
} );Denne kode bruger before_enqueue_scriptshooktil at indlæse et stylesheet kaldet custom-stylesheet. Vi bruger også get_stylesheet_urifunctiontil at pege på stylesheetets placering på serveren.
Ideelt set tilføjer du det brugerdefinerede stylesheet i dit undertema’s mappe eller i selve mappen Themes. Stilarket kan indeholde enhver Elementor CSS-kode, som du ønsker. Det udsnit, som du har tilføjet til functions.php, sikrer, at koden kun indlæses, når Elementor er aktiv på dit websted.
Metode 5: Brug et CSS-plugin
Der findes flere plugins, som gør det muligt for dig at tilføje brugerdefineret CSS til dit websted uden at bruge Customizer eller side builders. Et af vores yndlingsværktøjer til opgaven hedder Simple Custom CSS and JS:
Med Simple Custom CSS and JS får du mulighed for at tilføje kode direkte til dit temas header- og footer-elementer. For at starte skal du gå til Brugerdefineret CSS & JS > Tilføj brugerdefineret CSS og klikke på Tilføj CSS-kode.
En grundlæggende CSS-editor vises til venstre. Til højre kan du konfigurere, om CSS-koden skal indlæses i et eksternt stylesheet eller internt. Du kan også bestemme, om koden skal placeres i headeren eller i footeren:
Når du er færdig med at redigere CSS-koden, skal du trykke på knappen Publish. Du skal muligvis skifte til en front-end visning for at se koden i aktion.
Bedste praksis for oprettelse af brugerdefineret CSS med Elementor
Når du har med brugerdefineret CSS at gøre eller tilføjer nogen form for kode til dit websted, gør du klogt i at huske på følgende bedste praksis. Lad os starte med at bruge et child theme.
Brug et WordPress Child Theme
Hvis du ønsker at ændre en del af dit temas stil ved hjælp af CSS, anbefaler vi, at du bruger et child theme. Et “child”-tema er en skabelon, der arver alle stilarter fra et udpeget tema.
På denne måde vil ændringer, som du foretager i det oprindelige tema, ikke påvirke de tilpasninger, som du tilføjer til undertemaet, hvis du foretager ændringer i det oprindelige tema. Når du opdaterer dit tema, vil det desuden bevare disse ændringer, når du opdaterer det.
Brug en kode-preprocessor for at gøre det nemmere at skrive
En af de største udfordringer ved at tilføje kode i WordPress eller ved at bruge Elementor er, at du ikke får adgang til alle de funktioner, som moderne kodeeditorer tilbyder. I stedet for at vride kode ved hjælp af grundlæggende on-site-editorer anbefaler vi, at du bruger din foretrukne preprocessor. Derefter kan du blot kopiere og indsætte din kode i WordPress.
Overvej at bruge et Scene-websted
Når du planlægger at foretage store ændringer i WordPress, anbefaler vi, at du bruger et scene-websted. Scene-websteder giver dig mulighed for at teste ændringer i stil og funktionalitet uden risiko for at ødelægge noget på dit live-websted.
Nogle webhosts giver dig adgang til staging-funktionalitet fra dit dashboard. Hvis du bruger Kinsta, kan du vælge dit websted ved hjælp af MyKinsta-dashboardet og skifte frem og tilbage mellem live- og scene-miljøer:
Hvis din webhost ikke tilbyder staging-funktionalitet, kan du bruge et lokalt WordPress-udviklingsmiljø som DevKinsta til testformål. Alternativt kan du overveje at skifte hostingudbyder.
Opsummering
Tilføjelse af Elementor brugerdefineret CSS er nemmere, end du måske forestiller dig. Sidebyggeren tilbyder flere metoder til at tilføje kode til sektioner, kolonner, widgets og til hele dit websted.
For at opsummere er her fem hovedmetoder til at tilføje brugerdefineret CSS til Elementor (eller dit websted generelt):
- Brug Elementor HTML Widget.
- Brug Elementor Site Settings-menuen.
- Brug WordPress Customizer.
- Sæt brugerdefinerede CSS-filer i kø.
- Brug et CSS-plugin.
Hos Kinsta er vores abonnementer designet til at hjælpe dig med at bygge dit drømmesite med side builders som Elementor. Tjek vores planer eller tal med salgsafdelingen for at finde den plan, der passer til dig.
Han er en selvlært webudvikler, skribent, skaber og en stor beundrer af Free and Open Source Software (FOSS). Udover teknologi, er han begejstret for videnskab, filosofi, fotografi, kunst, katte og mad. Lær mere om ham på hans hjemmeside, og kontakt Salman på X.
Skriv et svar