Divi: Det beste WordPress-temaet hele tiden!

mer 901.000 nedlastinger, Divi er det mest populære WordPress-temaet i verden. Den er komplett, enkel å bruke og leveres med mer enn 62 gratis maler.

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

Egendefinert CSS hos Elementor

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

Opprett enkelt nettstedet ditt med Elementor

Elementor lar deg lage Enkelt og gratis ethvert nettsted eller bloggdesign med et profesjonelt utseende. Slutt å betale mye for et nettsted du kan gjøre selv.

 
add_action ('wp_head', funksjon () {?>

//VOTRE CODE ICI


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

Egendefinert CSS hos Elementor

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

Egendefinert CSS hos Elementor

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 optimalisere grepet på bloggen eller nettstedet ditt.

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

1. FileBird

Filebird

Har du noen gang slitt med å administrere tusenvis av bilde-, video- eller dokumentfiler du lastet opp til WordPress FTP? ja eller nei, uansett, det viktigste er å vite at WordPress FileBird-plugin vil hjelpe deg med å administrere mediefilene dine med letthet 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 ditt, kan FileBird WordPress-plugin være det hemmelige våpenet ditt.

Last neddEMO | Webhotell

2. Ultimate WooCommerce Utvidbare kategorier

Ultimate kategorier for utvidelse av netthandel

Denne WordPress-pluginen lar deg enkelt redigere lange lister med irriterende 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 kan gjette fra navnet det bærer, er WavePlayer et lydavspillingsprogram som tar bølgeformen til den lydfilen som spilles. Med dette pluginet vil du være i stand til å være vert for spor eller bare integrere det med andre cloud hosting-tjenester, for eksempel SoundCloud.

Waveplayer premium wordpress plugins legger til lydspiller

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.

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.

...  

0 aksjer
del
tweet
Enregistrer