Aangepaste CSS toevoegen aan gratis Elementor

Onlangs daagde een van onze lezers die de Pro-versie van Elementor niet had, ons uit hoe hij aangepaste CSS aan zijn website kon toevoegen.

Omdat het probleem wat complexer is, dachten we dat meerdere gebruikers met dit probleem te maken zouden kunnen krijgen. Daarom hebben we besloten om een gedetailleerd artikel te geven over hoe je daar kunt komen.

In dit artikel laten we u zien hoe u eenvoudig aangepaste CSS kunt toevoegen aan een Elementor-pagina of website.

De drie manieren om aangepaste CSS toe te voegen aan een Elementor-pagina of website zijn als volgt:

Voeg CSS-code toe via het HTML-element.
Via de plug-in Fragmentcode.
De thema-aanpasser van Elementor gebruiken

Methode 1: CSS-code toevoegen vanuit het HTML-element van Elementor

Gebruik deze methode als u alleen CSS aan één pagina wilt toevoegen.

Stap 1: Versleep het HTML-element van Elementor drop

Je kunt dit HTML-element overal op de pagina plaatsen en het werkt prima.

add-custom-CSS-to-Elementor-vrij » BlogPasCher

Stap 2: Klik op het pictogram HTML bewerken

add-custom-CSS-to-Elementor-free-1 » BlogPasCher

Klik op het pictogram html bewerken rechts van het Elementor HTML-element. Als u erop klikt, wordt een HTML-bewerkingstoolbox aan de linkerkant van het scherm weergegeven.

Stap 3: Voeg uw CSS-code toe

add-custom-CSS-to-Elementor-free-2 » BlogPasCher

Klik op het tabblad Inhoud en open de vervolgkeuzelijst HTML-code.
Plaats uw CSS-code in de bakens.

Methode 2: Aangepaste CSS voor Elementor via de plug-in Code Snippets

Voordelen van het gebruik van de plug-in Code Snippets:

Als u uw WordPress-thema wilt wijzigen of bijwerken, wordt de CSS altijd toegepast.
Dit is de handigste en meest efficiënte manier om CSS-code toe te voegen, omdat u CSS-code-achtige plug-ins kunt in- of uitschakelen.

Stap 1: Open het extensiemenu op uw dashboard

add-custom-CSS-to-Elementor-free-3 » BlogPasCher

Stap 2: Een nieuwe plug-in toevoegen

add-custom-CSS-to-Elementor-free-4 » BlogPasCher

Klik op de knop toevoegen »Om toegang te krijgen tot de pagina voor het toevoegen van nieuwe plug-ins.

add-custom-CSS-to-Elementor-free-5 » BlogPasCher

Zoek de plug-in " code Snippets ".
Installeer het door op de knop te klikken Installeer nu zodra de onderzoeksresultaten positief zijn.

Stap 3: Activeer de plug-in

Klik op de knop activeren »Zodra de installatie is voltooid om de plug-in te activeren Codefragmenten.

Stap 4: Open de plug-inpagina en voeg een codefragment toe

add-custom-CSS-to-Elementor-free-7 » BlogPasCher

Open het menu extracten vanaf je dashboard
Klik op de knop Nieuw om een nieuw codefragment toe te voegen

Stap 5: Maak een fragment en activeer het

add-custom-CSS-to-Elementor-free-8-1 » BlogPasCher

Geef uw codefragment een naam.
Schrijf je code in de tag. Deze code is hieronder beschikbaar om te kopiëren.
Klik op de knop Wijzigingen opslaan Om het codefragment op te slaan.
Klik na het opslaan van de CSS op " activeren Om de CSS-code te activeren.

Kopieer code

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

Methode 3: Gebruik de Elementor-thema-aanpasser

Let op: Wees voorzichtig voordat u deze methode gebruikt, want als u het thema wijzigt, verliest u deze aangepaste CSS.

Stap 1: Open de thema-aanpasser

Ga naar uw website en klik op de optie aanpassen in de bovenste navigatiebalk. Dit opent een thema-aanpassingsvenster.