WordPress & Elementor kennisbank

Globale stijlen in Elementor: zo werkt het!

Inhoud van dit artikel:

Globale stijlen instellen met Elementor; dít is echt waar ik al op wacht sinds ik begon te werken met Elementor. Het was dé reden waarom ik nog niet werkte met het Hello thema van Elementor. Ik wilde namelijk meer controle over de globale stijlen van headings, hyperlinks etc. Maar.. ik heb heel goed nieuws! De nieuwe Elementor update 2.9 heeft een functie voor het instellen van globale stijlen voor je website. Hierdoor kun je bijna werken zonder thema in WordPress.

Update: in Elementor 3.0 is theme style nog verder uitgebreid met globale stijlen en fonts. 

Elementor globale stijlen instellen

Waarom werken met globale stijlen?

Eén van de grootste verleidingen van werken met Elementor is dat je gaat lopen knoeien met de styling. Of het nu gaat om fontgroottes, diktes, kleuren, tekstdecoraties, noem maar op; in Elementor zitten al die mogelijkheden en het is niet zo gek dat je deze dan ook gebruikt. Maar écht handig is het niet. Het instellen van globale stijlen is beter voor de snelheid van je website, het doorvoeren van een consistente stijl en het bespaart je een hoop tijd!

Globale stijlen Elementor: zo werkt het!

Je vindt de globale styling opties in je Elementor panel. Klik linksbovenin op het hamburger menu en klik dan op ‘Theme Style’.

Globale achtergrond instellen

De achtergrondkleur wijzigen voor je hele website? Of een achtergrond afbeelding instellen? Dit kun je voortaan doen via Theme Style. Ook kun je er voor kiezen om een verloop als achtergrond te gebruiken.

Fontstijl van standaard tekst

Als je een tekstvak toevoegt met de Tekst widget krijgt de tekst automatisch de ‘body’ stijl. Deze kon je al instellen in Elementor, maar met deze uitbreiding krijg je nog wat meer opties. Zo kun je de fontdikte aanpassen, paragraafruimtes aanpassen en niet geheel onbelangrijk: de hyperlink stijlen! Vooral die laatste mogelijkheid is een vraag die vaak bij ons binnenkwam (en waar ik al een blogartikel over klaar had staan). Dit werkte nog heel omslachtig, dat hoeft nu niet meer!

Heading stijlen instellen

Naast het aanpassen van de bodystijl kun je ook de styling van alle headings aanpassen. Zo kun je verschillende kleuren gebruiken, ander font instellen of fontdiktes aanpassen.

Globale buttons instellen

Eén van mijn grootste ergernissen; overal verschillende buttons op de website! Dit kun je, als het goed is, ook instellen via je thema. Maar het kan nu ook met Elementor en dat werkt een stuk makkelijker. Ook kun je eenvoudig de hover styling aanpassen, schaduwrand toevoegen of afgeronde hoeken instellen.

Stijl van formulieren globaal instellen

Gebruik je meerdere formulieren op je website? Dan werd je er misschien gek van om de styling hiervan steeds opnieuw in te stellen (tenzij je werkte met global widgets, dat deed ik meestal). Met de nieuwe update hoeft dit ook niet meer. Je kunt nu instellen welke kleuren je voor labels wilt gebruiken, welke achtergrondkleur de velden moeten hebben etc.

Weergave van afbeeldingen op website

Steeds vaker zie je in webdesigns afbeeldingen met schaduwrand. Ziet er leuk uit, maar het is nogal een gedoe om dit voor elke afbeelding apart in te stellen. En wat als je de schaduwrand toch net iets anders wilt hebben? Als je handig bent met custom css, dan was je dit waarschijnlijk al gelukt. Straks kun je dit ook doen via de Theme Styler van Elementor. Ook kun je hovers instellen voor afbeeldingen, afgeronde hoeken, randen en andere css filters toepassen.

Geen thema meer nodig?

Met deze nieuwe functionaliteit in Elementor, heb je eigenlijk geen thema meer nodigHet enige wat ik nog mis (en wat ze hopelijk nog gaan toevoegen): globale instellingen paddings en marges van kolommen. Dat kun je bijvoorbeeld wel met deze gratis plugin Style Kits for Elementor. Een bijkomend voordeel van die plugin is dat je ook meerdere skins kunt maken en opslaan. Ideaal als je vaker websites bouwt.

Nog een stapje verder?

Heb je net zo’n efficiëntiedrang als ik? Dan kun je nog iets verder doorslaan met de addon JetStyleManager van Crocoblock. Daarmee kun je namelijk ook globale stijlen instellen en simpel toepassen voor widgets. Bijvoorbeeld voor het plaatsen van berichten op verschillende pagina’s met de posts widget. Dan hoef je niet steeds opnieuw de styling in te stellen. Daarnaast is deze plugin nu ook ideaal als je websites voor klanten bouwt. Je kunt hiermee namelijk de Elementor opties ‘locken’, zodat je klant geen (grote) aanpassingen kan doen in de styling die je globaal hebt ingesteld.

Sanne IJspeerd

Sanne IJspeerd

Eigenaar SIJ Web | WordPress & Elementor Specialist
Website Strateeg | Marketing Manager in de IT

Ook bloggen op
SIJ Web?
Vergroot je zichtbaarheid en meld je aan als partner!

Populaire plugins

4/5
5/5
4.5/5
Meer doen met Elementor?
Schrijf je in voor de nieuwsbrief
No worries. Ik ga je niet spammen. Je ontvangt max. 2 keer per maand een nieuwsbrief.

Ook interessant voor jou

Extra breakpoints Elementor instellen in 2 stappen

Elementor site instellingen: stijlen zonder thema

Elementor update 3.2: Nóg meer grenzeloze design opties!

Eén reactie

  1. Geweldig nieuws! Ik ga het nu snel proberen met het Hello thema

Mis geen updates

Blijf op de hoogte van de laatste
Elementor Trends & Ontwikkelingen!

No worries, je ontvangt max. 2 keer per maand een mailing.