Nyligen utmanade en av våra läsare som inte hade Pro-versionen av Elementor oss om hur han kunde lägga till anpassad CSS till sin webbplats.
Eftersom frågan är lite mer komplex trodde vi att flera användare skulle kunna möta detta problem. Så vi bestämde oss för att ge en detaljerad artikel om hur man kommer dit.
I den här artikeln visar vi hur du enkelt kan lägga till anpassad CSS till en Elementor-sida eller webbplats.
De tre sätten att lägga till anpassad CSS till en Elementor-sida eller webbplats är som följer:
- Lägg till CSS-kod via HTML-elementet.
- Via plugin Kodkod.
- Med Elementors temainpassare
Metod 1: Lägg till CSS-kod från Elementors HTML-element
Använd den här metoden om du bara vill lägga till CSS på en sida.
Steg 1: Dra och släpp Elementors HTML-element
Du kan placera detta HTML-element var som helst på sidan, och det kommer att fungera bra.
Steg 2: Klicka på Redigera HTML-ikonen
Klicka på ikonen Redigera html till höger om Elementor HTML-elementet. Om du klickar på den visas en verktygslåda för HTML-redigering till vänster på skärmen.
Steg 3: Lägg till din CSS-kod
- Klicka på fliken Innehåll och öppna rullgardinsmenyn HTML-kod.
- Placera din CSS-kod i fyrar.
Metod 2: Anpassad CSS för Elementor via plugin-kod för kodutdrag
Fördelar med att använda plugin-kod:
- Om du vill ändra eller uppdatera ditt WordPress-tema kommer CSS alltid att tillämpas.
- Detta är det mest praktiska och effektiva sättet att lägga till CSS-kod eftersom du kan aktivera eller inaktivera CSS-kod som plugins.
Steg 1: Öppna tilläggsmenyn på instrumentpanelen
Steg 2: Lägg till ett nytt plugin
Klicka på knappen Add On »För att komma åt sidan för att lägga till nya plugins.
- Leta efter plugin " Kod Snippets ".
- Installera den genom att klicka på knappen installera nu när forskningsresultaten är positiva.
Steg 3: Aktivera plugin
Klicka på knappen aktivera »När installationen är klar för att aktivera plugin Kodavsnitt.
Steg 4: Öppna pluginsidan och lägg till ett kodavsnitt
- Öppna menyn Utdrag från din instrumentpanel
- Klicka på knappen Nouveau för att lägga till ett nytt kodavsnitt
Steg 5: Skapa ett utdrag och aktivera det
- Ge ditt kodavsnitt ett namn.
- Inne i taggen, skriv din kod. Den här koden finns tillgänglig nedan för kopiering.
- Klicka på knappen Spara ändringar För att spara kodavsnittet.
- När du har sparat CSS, klicka på " aktivera För att aktivera CSS-koden.
Kopiera kod
add_action( 'wp_head', function () { ?>
<style>
//VOTRE CODE ICI
</style>
<?php } );Metod 3: Använd Elementor Theme Customizer
Notera: Var försiktig innan du använder den här metoden, för om du ändrar tema förlorar du den här anpassade CSS.
Steg 1: Öppna temainpassaren
Gå till din webbplats och klicka på anpassningsalternativet i det övre navigeringsfältet. Detta öppnar ett temaanpassningsfönster.
Steg 2: Klicka på ytterligare CSS-fliken
Detta öppnar CSS-inmatningssidan.
Steg 3: Lägg till din CSS-kod
Bra ! Nu vet du hur man enkelt kan lägga till anpassad CSS till en Elementor-sida eller webbplats. Detta gör designen av unika webbsidor i Elementor Free mer flexibel.
Skaffa Elementor Pro nu!
Upptäck också några premium WordPress-plugins
Du kan använda andra Wordpress plugins för att ge ett modernt utseende och för att optimera hanteringen av din blogg eller hemsida.
Vi erbjuder dig här några premium WordPress-plugins som hjälper dig att göra det.
1. FileBird
Har du någonsin kämpat för att hantera tusentals bild-, video- eller dokumentfiler som du laddat upp till din WordPress FTP? ja eller nej, det spelar ingen roll, det viktiga är att veta att Wordpress plugin FileBird hjälper dig att hantera dina mediefiler med lätthet och ge mer kraft till ditt bibliotek.
Dess sömlösa användargränssnitt och snabbmeny gör det möjligt för användare att dra och släppa filer till mappar eller har de nödvändiga rättigheterna för att snabbt skapa, byta namn på eller ta bort mappar på samma sätt som du gör på din dator.
Med detta plugin i handen organiseras dina mediefiler systematiskt och du kan enkelt välja en bild som du vill infoga på en sida eller publicera den. Dessutom är detta plugin helt kompatibelt med de mest populära pluginsna, särskilt med WooCommerce, och stöder också ett stort antal språk.
Om du vill veta mer, besök Hur man hanterar filer och mappar Wordpress
Så om du vill ge ett boost till hantera ditt mediebibliotek, den Wordpress plugin FileBird kan vara ditt hemliga vapen.
Ladda ner | demo | webbhotell
2. Ultimate WooCommerce Expandable Categories
Ce Wordpress plugin låter dig enkelt ändra de långa listorna med tråkiga WooCommerce-kategorier och ersätta dem med olika nivåer av underobjekt i en dragspelsmeny.
Dess huvudsakliga funktioner är: möjligheten att aktivera den och slutligen att den fungerar automatiskt (inga parametrar krävs!), Stöd för flera nivåer av kategorier (kategorier, underkategorier, etc ...), markeringen av den aktiva kategorin, öppnandet av alla överordnade kategorier om den aktuella kategorin är inne, kompatibilitet med någon WooCommerce-tema, lyhörda för önskan, gratis uppdateringar och en mycket aktiv kundsupport.
Ladda ner | demo | webbhotell
3. WavePlayer
Som du kanske gissar från namnet är WavePlayer ett plugin för ljudspelare som tar vågformen för den spelade ljudfilen. Med denna plugin kommer du att kunna vara värd för spår eller helt enkelt integrera den med andra tjänster.moln värd, som SoundCloud.
Det kan också användas för podcasting och det erbjuder andra funktioner som: HTML5-stöd, responsiv layout, WooCommerce-integration, etc ...
Du kommer också att kunna skapa en spellista visuellt innan du publicerar den. En annan viktig funktion är dess hastighet och effektivitet.
Ladda ner | demo | webbhotell
Rekommenderade resurser
Ta reda på om andra rekommenderade resurser som hjälper dig att bygga och hantera din webbplats.
- Hur komprimera och ändra storlek på bilder på Wordpress
- Hur man har en e-postadress med din Wordpress värd
- Hur byta namn på bilder på en Wordpress-blogg
- Hur man hittar länken till Wordpress inloggningssidan
Slutsats
Här! Det är det för denna handledning, vi hoppas att det hjälper dig att lägga till anpassad CSS till Elementor gratis. Tveka inte att dela med dina vänner på dina favorit sociala nätverk.
Du kommer dock också att kunna konsultera vår medel, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande.
Om du har förslag eller kommentarer, lämna dem i vårt avsnitt commentaires.
.
