Elementor: Hvordan legge til tilpasset CSS til gratisversjonen

Nylig utfordret en av våre lesere som ikke hadde Pro-versjonen av Elementor oss om hvordan han kunne legge til tilpasset CSS på nettstedet sitt.

Siden problemet er litt mer komplekst, trodde vi at flere brukere kan møte dette problemet. Så vi bestemte oss for å gi en detaljert artikkel om hvordan du kommer dit.

I denne artikkelen viser vi deg hvordan du enkelt kan legge til tilpasset CSS til en Elementor-side eller et nettsted.

De tre måtene å legge til tilpasset CSS til en Elementor-side eller et nettsted er som følger:

• Legg til CSS-kode via HTML-elementet.
• Via pluginet Utdragskode.
• Ved hjelp av Elementors Theme Customizer

Metode 1: Legg til CSS-kode fra Elementors HTML-element

Bruk denne metoden hvis du bare vil legge til CSS på en enkelt side.

Trinn 1: Dra og slipp Elementor HTML-elementet

Du kan plassere dette HTML-elementet hvor som helst på siden, og det fungerer helt fint.

Trinn 2: Klikk på Rediger HTML-ikonet

Klikk på ikonet Rediger html til høyre for Elementor HTML-elementet. Ved å klikke på den vises en HTML-redigeringsverktøykasse på venstre side av skjermen.

Trinn 3: Legg til CSS-koden

1. Klikk på fanen Innhold og åpne rullegardinlisten HTML-kode.
2. Plasser CSS-koden i fyrtårn.

Metode 2: Egendefinert CSS for Elementor via plugin for kodebit

Fordeler med å bruke kodestykket plugin:

• Hvis du vil endre eller oppdatere WordPress-temaet ditt, blir CSS alltid brukt.
• Dette er den mest praktiske og effektive måten å legge til CSS-kode fordi du kan aktivere eller deaktivere CSS-kode som plugins.

Trinn 1: Åpne utvidelsesmenyen på dashbordet

Trinn 2: Legg til et nytt plugin

Klikk på knappen Legg On »For å få tilgang til siden for å legge til nye plugins.

1. Se etter programtillegget " kodesnutter ".
2. Installer det ved å klikke på knappen installere nå når forskningsresultatene er positive.

Trinn 3: Aktiver plugin

Klikk på knappen aktivere »Når installasjonen er fullført for å aktivere plugin Kodebiter.

Trinn 4: Åpne pluginsiden og legg til en kodebit

1. Åpne menyen ekstrakter fra dashbordet
2. Klikk på knappen Nouveau for å legge til et nytt kodebit

Trinn 5: Lag et kodebit og aktiver det

1. Gi kodebiten et navn.
2. Inne i taggen, skriv koden din. Denne koden er tilgjengelig nedenfor for kopiering.
3. Klikk på knappen Lagre endringer For å lagre kodebiten.
4. Når du har lagret CSS, klikker du på " aktivere For å aktivere CSS-koden.

Kopier kode

add_action( 'wp_head', function () { ?>
<style>
//VOTRE CODE ICI
</style>
<?php } );

Metode 3: Bruk Elementor Theme Customizer

Merk: Vær forsiktig før du bruker denne metoden, for hvis du endrer tema vil du miste denne tilpassede CSS.

Trinn 1: Åpne tematilpasningen

Gå til nettstedet ditt og klikk på tilpasningsalternativet på den øverste navigasjonslinjen. Dette åpner et tematilpasningsvindu.

Trinn 2: Klikk på den ekstra CSS-fanen

Dette åpner CSS-oppføringssiden.

Trinn 3: Legg til CSS-koden

God ! Nå vet du hvordan du enkelt kan legge til tilpasset CSS til en Elementor-side eller et nettsted. Dette vil gjøre utformingen av unike nettsider i Elementor Free mer fleksibel.

Få Elementor Pro nå!

Oppdag også noen premium WordPress-plugins  

Du kan bruke andre WordPress plugins for å gi et moderne utseende og for å optimalisere håndteringen av bloggen eller nettsiden din.

Vi tilbyr deg her noen premium WordPress-plugins som vil hjelpe deg å gjøre det.

1. FileBird

Har du noen gang slitt med å administrere tusenvis av bilde-, video- eller dokumentfiler du lastet opp til WordPress FTP? ja eller nei, det spiller ingen rolle, det viktigste er å vite at WordPress Plugin FileBird vil hjelpe deg med å administrere mediefilene dine på en enkel måte og gi mer kraft til biblioteket ditt.

Det sømløse brukergrensesnittet og kontekstmenyen lar brukere dra og slippe filer til mapper eller har de nødvendige rettighetene til raskt å opprette, gi nytt navn eller slette mapper på samme måte som du gjør på datamaskinen din.

Med dette pluginet i hånden vil mediefilene dine organiseres systematisk, og du kan enkelt velge et bilde du vil sette inn på en side eller publisere det. I tillegg er dette pluginet fullt kompatibelt med de mest populære plugins, spesielt med WooCommerce, og støtter også et stort antall språk.

Hvis du vil vite mer, besøk Hvordan håndtere filer og mapper WordPress

Så hvis du vil gi et løft til administrere mediebiblioteket dittden WordPress Plugin FileBird kan være ditt hemmelige våpen.

Last ned | dEMO | Webhotell

2. Ultimate WooCommerce Utvidbare kategorier

Ce WordPress Plugin lar deg enkelt endre de lange listene over kjedelige WooCommerce-kategorier, og erstatte dem med forskjellige nivåer av underelementer i en trekkspillmeny.

Dens viktigste funksjoner er: muligheten for å aktivere den og til slutt at den fungerer automatisk (ingen parametere kreves!), Støtten for flere nivåer av kategorier (kategorier, underkategorier osv.), Utheving av aktiv kategori, åpning av alle foreldrekategorier hvis den nåværende kategorien er inne, kompatibilitet med noen WooCommerce-tema, lydhør for å ønske, gratis oppdateringer og en veldig aktiv kundesupport.

Last ned | dEMO | Webhotell

3. WavePlayer

Som du kanskje gjetter ut fra navnet, er WavePlayer en lydspiller-plugin som tar bølgeformen til den spilte lydfilen. Med dette pluginet vil du kunne være vert for spor eller ganske enkelt integrere det med andre tjenester.sky hosting, for eksempel SoundCloud.

Den kan også brukes til podcasting-formål, og den tilbyr andre funksjoner som: HTML5-støtte, responsivt layout, WooCommerce-integrering, etc ...

Du vil også kunne lage en spilleliste visuelt før du publiserer den. En annen viktig funksjon er hastigheten og effektiviteten.

Last ned | dEMO | Webhotell

Anbefalte ressurser

Finn ut om andre anbefalte ressurser for å hjelpe deg med å bygge og administrere nettstedet ditt.

• Hvordan komprimere og endre størrelsen på bilder på WordPress
• Hvordan å ha en e-postadresse med WordPress hosting
• Hvordan endre navn på bilder på en WordPress blogg
• Hvordan finne linken til WordPress påloggingssiden

konklusjonen

Her! Det er det for denne opplæringen, vi håper det hjelper deg å legge til tilpasset CSS til Elementor gratis. Ikke nøl med å del med vennene dine på dine favoritt sosiale nettverk. 

Du vil imidlertid også kunne konsultere våre ressources, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting.

Hvis du har forslag eller kommentarer, kan du la dem ligge i seksjonen vår commentaires.

...