Share on email
Share on whatsapp
Share on twitter
Share on linkedin
Share on facebook

Globale stijlen in Elementor: het is zover! 😍

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.

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 straks 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

Sanne is eigenaar van SIJ Web. Ze ontwikkelt WordPress websites met Elementor en heeft een achtergrond in marketing- en communicatie.
Share on email
Share on whatsapp
Share on linkedin
Share on twitter
Share on facebook

Eén reactie

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Offerte aanvragen

Een nieuwe website laten bouwen? Of hulp nodig bij een probleem of het bouwen van je website? Laat ons weten wat je precies nodig hebt en je ontvangt zo snel mogelijk een prijsindicatie:

Elementor Expert gezocht

tips ontvangen?

Schrijf je in voor onze nieuwsbrief!

We respecteren je privacy.
Je ontvangt max. 1 keer per maand een mail.