For nylig udfordrede en af ​​vores læsere, der ikke havde Pro-versionen af ​​Elementor, os om, hvordan han kunne tilføje brugerdefineret CSS til sin hjemmeside.

Da problemet er lidt mere komplekst, troede vi, at flere brugere måske står over for dette problem. Så vi besluttede at give en detaljeret artikel om, hvordan man kommer derhen.

I denne artikel viser vi dig, hvordan du nemt kan tilføje tilpasset CSS til en Elementor-side eller et websted.

De tre måder at tilføje tilpasset CSS til en Elementor-side eller et websted er som følger:

  • Tilføj CSS-kode via HTML-elementet.
  • Via pluginet Stykke kode.
  • Brug af Elementors tematilpasning

Metode 1: Tilføj CSS-kode fra Elementors HTML-element

Brug denne metode, hvis du kun vil føje CSS til en enkelt side.

Trin 1: Træk og slip Elementors HTML-element

Du kan placere dette HTML-element hvor som helst på siden, og det fungerer fint.

Trin 2: Klik på Rediger HTML-ikonet

Klik på ikonet Rediger html til højre for Elementor HTML-elementet. Ved at klikke på den vises en HTML-redigeringsværktøjskasse til venstre på skærmen.

Trin 3: Tilføj din CSS-kode

  1. Klik på fanen Indhold og åbn rullelisten HTML-kode.
  2. Placer din CSS-kode i fyrtårne.

Metode 2: Brugerdefineret CSS til Elementor via plugin til kodestykker

Fordele ved at bruge kodestykket plugin:

  • Hvis du vil ændre eller opdatere dit WordPress-tema, anvendes CSS altid.
  • Dette er den mest bekvemme og effektive måde at tilføje CSS-kode på, fordi du kan aktivere eller deaktivere CSS-kode som plugins.

Trin 1: Åbn menuen udvidelser på dit dashboard

Trin 2: Tilføj et nyt plugin

Klik på knappen Add On »For at få adgang til siden til tilføjelse af nye plugins.

  1. Se efter pluginet " Kodeuddrag ".
  2. Installer det ved at klikke på knappen installere nu når forskningsresultaterne er positive.

Trin 3: Aktivér pluginet

Custom CSS hos Elementor

Klik på knappen aktivere »Når installationen er færdig for at aktivere pluginet Kodestykker.

Trin 4: Åbn pluginsiden, og tilføj et kodestykke

  1. Åbn menuen Ekstrakter fra dit dashboard
  2. Klik på knappen Nouveau for at tilføje et nyt kodestykke

Trin 5: Opret et uddrag og aktiver det

  1. Giv dit kodestykke et navn.
  2. Skriv din kode inde i tagget. Denne kode er tilgængelig nedenfor til kopiering.
  3. Klik på knappen Gem ændringer For at gemme kodestykket.
  4. Når du har gemt CSS, skal du klikke på " aktivere For at aktivere CSS-koden.

Kopier kode

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

Metode 3: Brug Elementor Theme Customizer

Bemærk: Vær forsigtig, inden du bruger denne metode, for hvis du ændrer temaet, mister du denne tilpassede CSS.

Trin 1: Åbn temaet tilpasning

Custom CSS hos Elementor

Gå til dit websted, og klik på tilpasningsmuligheden i den øverste navigationslinje. Dette åbner et tema tilpasningsvindue.

Trin 2: Klik på den ekstra CSS-fane


Dette åbner CSS-indgangssiden.

Trin 3: Tilføj din CSS-kode

Custom CSS hos Elementor

Godt ! Nu ved du, hvordan du nemt kan tilføje tilpasset CSS til en Elementor-side eller et websted. Dette gør designet af unikke websider i Elementor Free mere fleksibelt.

Hent Elementor Pro nu!

Oplev også nogle premium WordPress-plugins  

Du kan bruge andet WordPress plugins for at give et moderne udtryk og for at optimere håndteringen af ​​din blog eller hjemmeside.

Vi tilbyder dig her nogle premium WordPress-plugins, der hjælper dig med det.

1. FileBird

Filebird

Har du nogensinde kæmpet for at administrere tusindvis af billed-, video- eller dokumentfiler, du har uploadet til din WordPress FTP? ja eller nej, det er lige meget, det vigtige er at vide, at WordPress plugin FileBird vil hjælpe dig med at administrere dine mediefiler med lethed og bringe mere kraft til dit bibliotek.

Dens sømløse brugergrænseflade og kontekstmenu giver brugerne mulighed for at trække og slippe filer i mapper eller har de nødvendige rettigheder til hurtigt at oprette, omdøbe eller slette mapper på samme måde som du gør på din computer.

Med dette plugin i hånden organiseres dine mediefiler systematisk, og du kan nemt vælge et billede, der skal indsættes på en side eller offentliggøre det. Derudover er dette plugin fuldt kompatibelt med de mest populære plugins, især med WooCommerce, og understøtter også et stort antal sprog.

Hvis du vil vide mere, besøg Sådan håndteres filer og mapper WordPress

Så hvis du vil give et løft til administrere dit mediebibliotek, WordPress plugin FileBird kunne være dit hemmelige våben.

Downloadedemo | Web-hosting

2. Ultimate WooCommerce Udvidelige kategorier

Ultimative kategorier, der kan udvides med woocommerce

Ce WordPress plugin giver dig mulighed for nemt at ændre de lange lister over kedelige WooCommerce-kategorier og erstatte dem med forskellige niveauer af underelementer i en harmonikamenu.

Dets vigtigste funktioner er: muligheden for at aktivere den og endelig at den fungerer automatisk (ingen parametre kræves!), Understøttelsen af ​​flere niveauer af kategorier (kategorier, underkategorier osv.), Fremhævning af aktiv kategori, åbning af alle overordnede kategorier, hvis den aktuelle kategori er indeni, kompatibilitet med nogen WooCommerce-tema, lydhør over for ønske, gratis opdateringer og en meget aktiv kundesupport.

Downloade | demo | Web-hosting

3. WavePlayer

Som du måske kan gætte ud fra navnet, er WavePlayer et plugin til lydafspiller, der tager bølgeformen af ​​den afspillede lydfil. Med dette plugin vil du være i stand til at være vært for spor eller blot integrere det med andre tjenester.sky hosting, såsom SoundCloud.

Waveplayer premium wordpress plugins tilføjer lydafspiller

Det kan også bruges til podcasting formål, og det tilbyder andre funktioner såsom: HTML5 support, responsivt layout, WooCommerce integration osv ...

Du vil også være i stand til visuelt at oprette en playliste, før du offentliggør den. En anden vigtig funktion er dens hastighed og effektivitet.

Downloade | demo | Web-hosting

Anbefalede ressourcer

Find ud af om andre anbefalede ressourcer, der hjælper dig med at opbygge og administrere dit websted.

Konklusion

Her ! Det er det til denne vejledning, vi håber, det hjælper dig med at tilføje brugerdefineret CSS til Elementor gratis. Tøv ikke med at del med dine venner på dine foretrukne sociale netværk

Du vil dog også kunne konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse.

Hvis du har forslag eller bemærkninger, skal du lade dem stå i vores afsnit kommentarer.

...