Hvis du er ligesom mig, har du mange idéer til din hjemmeside, som du gerne vil se blive til virkelighed. Og selvom Elementor gør det nemt at skabe unikke designs med træk-og-slip-funktioner og præbyggede elementer, kan intet nogle gange erstatte kraften i ren CSS. I denne artikel vil vi dække, hvordan du tilføjer brugerdefineret CSS i Elementor, så du kan tage dit hjemmesidedesign endnu et skridt videre!
3 populære måder at tilføje brugerdefineret CSS i Elementor
Der er forskellige måder at tilføje brugerdefineret CSS i Elementor. Lad os se på vores 3 bedste måder at gøre det på.
- Brug WordPress-tilpasningsværktøjet
- Brug et CSS-plugin
- Brug af HTML-widget
Brug WordPress-tilpasningsværktøjet.
For at tilføje brugerdefineret CSS-kode i Elementor skal du følge disse trin:
- Gå til Udseende > Tilpas
- I WordPress-tilpasningsværktøjet skal du klikke på Yderligere CSS.
- Afsnittet Yderligere CSS åbnes. Du kan tilføje kode her ved at indsætte den i tekstfeltet eller klikke på knappen Tilføj brugerdefineret CSS for at søge efter din fil på din computer.
Brug et CSS-plugin
Der findes forskellige plugins på markedet, som f.eks. Simple CSS, Custom CSS Pro og CSS Hero, der giver dig mulighed for at tilføje brugerdefineret CSS til Elementor.
For at starte skal du gå til Brugerdefineret CSS og JS > Tilføj brugerdefineret CSS og klikke på Tilføj CSS-kode.
En grundlæggende CSS-editor vises til venstre. Du kan vælge at indlæse CSS-koden internt eller i et eksternt stylesheet ved hjælp af konfigurationsmulighederne til højre. Derudover kan du vælge, om koden hører hjemme i headeren eller footeren:
Når du er færdig med at redigere CSS-koden, skal du trykke på Udgiv .
Bemærk: Skift til en front-end-visning for at se koden i aktion.
Brug af HTML-widget
Du kan bruge en HTML-widget til at tilføje brugerdefineret CSS til Elementor. Alt du skal gøre for at gøre dette er at trække og slippe HTML-widgetten og tilføje din CSS-kode i et Style-tag.
Brugerdefineret CSS er en måde at tilføje brugerdefineret kode til dit websted. Det kan bruges til mange ting, lige fra at ændre dit websteds udseende og funktionalitet til at tilføje ekstra funktionalitet.
Nu hvor du ved, hvordan du tilføjer brugerdefineret CSS, kan du bruge det på dine websteder ved at følge disse trin:
- Åbn Elementors editorvindue, og klik på ikonet '+' øverst til venstre
- Klik på 'Brugerdefineret kode', og indsæt derefter dette stykke kode: `.elementor-custom-css{display:none;}`. Du kan finde dette under Indstillinger > Brugerdefineret CSS eller Udseende > Temaindstillinger > Brugerdefineret CSS (afhængigt af hvilken version af WordPress du har).
Konklusion
Nu hvor du ved, hvordan du tilføjer brugerdefineret CSS, kan du drage fordel af Elementors fleksibilitet. Næste gang noget ikke opfører sig som forventet, så prøv at tilføje noget CSS-kode. I stedet for at rette det med et plugin eller en temaændring, prøv at tilføje noget CSS-kode!
Relevant indhold
- Hvad er CSS Framework?
- Hvordan fjerner man ubrugt CSS i WordPress?
