Elementor site instellingen: stijlen zonder thema

Hoe gebruik je Elementor site-instellingen? Sinds Elementor 3.0 kun je via Site-instellingen de styling van je website instellen. Waarom is dit handig? Voorheen moest je dit altijd doen via je Thema instellingen, maar het idee van werken met Elementor is juist dat je geen thema meer nodig hebt. Doordat Elementor steeds meer functionaliteiten van het thema overneemt, kun je thema onafhankelijk werken. De site-instellingen zijn hierbij een belangrijke ontwikkeling. In dit artikel leg ik je uit wat je kunt doen met de site instellingen van Elementor.

Schakel de stijlen van het thema uit

Voordat je kunt werken met de Elementor site instellingen, moet je eerst de stijlen van het thema uitschakelen. Hier heeft Elementor een functie voor ingebouwd. Zorg dat de onderstaande hokjes zijn aangevinkt bij je Elementor instellingen:

De Elementor site instellingen beheren

Om bij je site instellingen te komen, klik je linksbovenin het Elementor panel op het hamburgericoontje. Klik vervolgens op site instellingen:

Je kunt de Elementor site instellingen ook openen via de WordPress admin balk:

Als je daar op klikt zie je een overzicht van alle globale site instellingen die je kunt beheren. Als je gewend bent om te werken met een thema, dan herken je deze instellingen misschien. We nemen ze hieronder allemaal door.

Elementor site instellingen: thema stijl instellen

Globale kleuren

Onder ‘globale kleuren’ kun je alle standaard kleuren instellen die je gebruikt voor je site. De vier type kleuren Primair, secundair, text en accent staan al klaar. Je kunt daarnaast nog extra kleuren toevoegen. Bijvoorbeeld achtergrondkleuren, nog meer accentkleuren of de kleur wit (die je altijd wel gebruikt) kun je toevoegen. Het idee van globale kleuren is dat je deze straks overal kunt toepassen, zonder dat je de kleurcode hoeft in te voeren. Super handig dus.

Ben je nog bezig met het designen van de site en weet je nog niet welke kleuren je wilt gebruiken? Dan kun je de site gewoon bouwen met deze standaard kleuren en later aanpassen. Je ziet dan direct hoe de website eruit ziet met bijvoorbeeld een andere primaire kleur. Het kan ook handig zijn als je de website dupliceert voor een andere klant. Als je de kleuren aanpast, heeft de website direct een andere look!

Hoe gebruik je de globale kleuren?

Als je de globale kleuren hebt ingesteld, kun je deze aan elke widget toevoegen door op het globaal icoontje te klikken. Je ziet dan vervolgens een dropdown met alle kleuren die je hebt ingesteld. Is het icoontje blauw gekleurd? Dan weet je dat je deze hebt gekoppeld aan een globale kleur.

Globale lettertypen

Het instellen van de typografie heeft dezelfde functionaliteit als de globale kleuren; je stelt ze in voor je hele site. In de stappen hieronder kun je verder invulling geven aan de verschillende stijlen voor headings, teksten en knoppen op je site. Daarnaast kun je ook een extra font instellen. Denk bijvoorbeeld aan introteksten die je in een iets groter font wilt weergeven, maar wel overal op de site terugkomen. Zo hoef je de styling maar één keer in te stellen.

Typografie

Met de typografie bepaal hoe je de styling van de verschillende html elementen op je pagina eruit moeten komen te zien. Je kunt hierbij de globale fonts en kleuren gebruiken die je hebt ingesteld door op global icoontje te klikken.

Body: de teksten op je site die je invoegt met de tekstwidget van Elementor. Maar ook als je andere widgets gebruikt, zal je het standaard font hier terug zien. Je kunt ook de paragraaf marge hier instellen.

Link: de hyperlink kleur die je wilt gebruiken op je site. Vergeet niet om ook de hoverkleur in te stellen.

Heading 1 t/m 6: stel verschillende stijlen in voor je headings zodat je deze consistent kunt gebruiken op je site.

Knoppen (buttons)

De vertaling van buttons naar ‘knoppen’ heb ik nooit begrepen, maar we moeten het ermee doen. Knoppen zijn dus gewoon de buttons op je site. Over het algemeen komen buttons veelvuldig voor op je site. Vanuit de Elementor site instellingen kun je de globale stijl van de buttons op je site instellen. Niet alleen de kleur, maar ook het font, de grootte, de paddings en border-radius kun je hier aanpassen.

Jammer genoeg kun je maar één stijl instellen voor al je buttons. Wil je af en toe een andere kleur gebruiken voor je buttons? Pas dan alleen de kleur aan als je de widget toevoegt. De andere instellingen (paddings, fontgrootte, border-radius) blijven dan gewoon gewaardborgd.

Afbeeldingen

Met deze functie kun je een globale stijl instellen voor al je afbeeldingen. Als je bijvoorbeeld alle afbeeldingen in zwart/wit wilt tonen, ze een rand of schaduwrand wilt meegeven. Ik vind het zelf niet handig, omdat het nog wel eens per afbeelding verschilt hoe je deze wilt tonen. Als je het anders wilt, moet je stijl voor die afbeelding steeds herstellen. Maar als je alle afbeeldingen een border-radius wilt geven, kan deze functie uitkomst bieden! (let op: dit past ie dan ook toe voor je logo, bij deze widget moet je de stijl dan zeer waarschijnlijk herstellen).

Formulieren

Deze functie vind ik wel heel handig. Je hebt tenslotte geen zin om alle formulieren te stijlen. Stel de randdikte en kleur in, de border-radius, paddings, focus kleur etc.
Let op: om een of andere reden is de achtergrondkleur van de velden standaard ingesteld op wit als je de Elementor formulieren widget toevoegt. Deze moet je dus steeds bij de widget zelf herstellen om de globale ingestelde kleur over te nemen.

Overige instellingen

De benaming is niet ideaal; de instellingen aanpassen bij je site-instellingen. Maar ik begrijp wat ze ermee bedoelen. Het zijn de overige functionaliteiten die je normaal in een thema ziet:

Site identiteit

Geef je site een naam een ondertitel. Upload je logo en voeg een favicon toe (dat icoontje dat je boven in je browser tab ziet).

Achtergrond

Wil je een dark theme maken? Of een andere achtergrondkleur instellen dan standaard wit? Dan kun je dat hier instellen. Het is ook mogelijk om een achtergrondafbeelding in te stellen of een verloopkleur te gebruiken. Ook kun je voor mobiel een andere achtergrond instellen.

Lay-out

Bij lay-out stel je in welke paginabreedte je wilt gebruiken. Deze staat standaard op 1140 px en dit is een prima breedte voor een website. Zelf gebruiken we 1170 px. Wil je de content breder tonen op het beeldscherm? Pas de breedte dan hier aan. De overige instellingen zou ik ook gewoon laten staan.

Breakpoints

Onder lay-out vind je ook de breakpoints die zijn ingesteld voor je site. Met een breakpoint geef je aan op welke schermbreedte je website over moet gaan op een andere lay-out. Dus voor tablet en mobiel. Deze staan standaard op 767 en 1024. Sinds 2021 is het ook mogelijk om extra breakpoints in te stellen in Elementor.

Lightbox

Afbeeldingen of video’s kun je tonen in een soort van popup; oftewel: lightbox. Hier kun je die instellingen beheren. Zo kun je bijvoorbeeld de achtergrondkleur aanpassen en bepaalde knoppen wel of niet tonen. Vooral interessant als je veel gebruik maakt van galerijen of foto carousels op je site.

Aangepaste CSS

Tot slot vind je in de Elementor site instellingen de functie voor het toevoegen van custom css. Tip: stel als je css in op deze plek, zo heb je altijd alle aangepaste css bij elkaar op één plek en kun je ze altijd terugvinden.

Aanvullende instellingen:

Linkt door naar de Elementor instellingen in je back-end, waar je nog wat extra opties hebt voor je site. Zo kun je daar bepalen voor welke post types je Elementor wilt gebruiken of juist niet, schakel je de thema instellingen uit en kun je een super bijdrager worden. Ook kun je via Elementor Instellingen integraties toevoegen met bijvoorbeeld mailingtools. Tot slot is er nog een aantal aanvullende functies en experimenten die we binnenkort uitlichten in een nieuwe blog!