{"id":43276,"date":"2022-05-04T16:52:17","date_gmt":"2022-05-04T14:52:17","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=43276&preview=true&preview_id=43276"},"modified":"2024-10-09T14:58:39","modified_gmt":"2024-10-09T12:58:39","slug":"elementor-sticky-headers","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/elementor-sticky-headers\/","title":{"rendered":"De ultieme handleiding voor Elementor sticky headers"},"content":{"rendered":"

Of je nu een beginnende webontwikkelaar<\/a> of een e-commerce ondernemer bent, je websites delen waarschijnlijk enkele essenti\u00eble elementen. Elke site heeft bijvoorbeeld een duidelijke header nodig om bezoekers te helpen navigeren tussen verschillende pagina’s. Als je echter een paginabuilder<\/a> zoals Elementor gebruikt zodat je minder hoeft te coderen, vraag je je misschien af \u200b\u200bof het nog steeds mogelijk is om een \u200b\u200bgeavanceerde maar gebruiksvriendelijke Elementor sticky header te maken.<\/p>\n

Gelukkig kan het gebruik van een Elementor<\/a> header je gebruikers een gestroomlijnde manier bieden om je website te verkennen. Met deze populaire paginabuilder<\/a>\u00a0kun je een breed scala aan headers maken die niet verdwijnen wanneer gebruikers naar beneden scrollen op een site. Deze feature maakt ze \u2018sticky\u2019.<\/p>\n

In dit bericht bespreken we hoe een sticky header werkt en wat de voordelen zijn van het gebruik ervan. Vervolgens laten we je zien hoe je een sticky header met Elementor kunt maken met zowel de gratis als de pro versie van de tool. Ten slotte bieden we je extra aanpassingsopties voor je sticky headers met behulp van CSS. Laten we beginnen!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Een inleiding tot Elementor sticky headers<\/h2>\n

Geen twee websites zijn hetzelfde. Er zijn echter wel een paar features die alle goede websites gemeen hebben.<\/p>\n

Als je een site met meerdere pagina’s hebt, is een van deze elementen een header. Dit is de horizontale balk bovenaan elke pagina die nuttige informatie bevat.<\/p>\n

Meestal bevat een header je navigatiemenu met pagina’s zoals Over <\/strong>of Contact<\/strong>:<\/p>\n

\"Kinsta
Kinsta website headergebied<\/figcaption><\/figure>\n

Wanneer bezoekers je pagina verkennen, verwachten ze waarschijnlijk een georganiseerde header om hen door je site te leiden. Aangezien gebruikerservaring (UX) de sleutel is tot het succes van een website, is het verstandig om een \u200b\u200bheader te maken die intu\u00eftief en duidelijk is. Dat is waar een sticky header, ontworpen met Elementor, een groot verschil kan maken.<\/p>\n\n

Hoe een sticky header werkt<\/h3>\n

Voordat we leren hoe een Elementor sticky header werkt, laten we eens kijken hoe een standaard header zich gedraagt \u200b\u200bwanneer je naar beneden scrolt op een pagina:<\/p>\n

\"Standaardheader
Standaardheader voorbeeld<\/figcaption><\/figure>\n

Zoals je in het bovenstaande voorbeeld kunt zien, bevat deze kop een complexe navigatiebalk met categorie\u00ebn zoals Sales<\/strong>,\u00a0Clothing<\/strong>,\u00a0Shoes<\/strong>, en meer. Deze tabbladen zullen shoppers ongetwijfeld helpen te vinden wat ze zoeken. Wanneer je echter op de pagina naar beneden scrolt, verdwijnt de header.<\/p>\n

Gebruikers kunnen dit frustrerend vinden, omdat ze terug moeten scrollen naar de bovenkant van de pagina om toegang te krijgen tot het navigatiemenu. Gelukkig biedt een sticky header een simpele oplossing.<\/p>\n

Door bovenaan je pagina te blijven of te \u2018plakken\u2019, kan een sticky header de UX van je website drastisch verbeteren:<\/p>\n

\"Sticky
Sticky header voorbeeld<\/figcaption><\/figure>\n

Wanneer je siteontwerp een sticky header bevat, kunnen je gebruikers snel naar nieuwe pagina’s springen zonder tijd te verspillen met scrollen.<\/p>\n

Bovendien kun je met dit vaste element te allen tijde je logo vooraan en in het midden opnemen. Met deze feature kunnen gebruikers je merk makkelijker onthouden en worden ze aangemoedigd om langer op je site te blijven.<\/p>\n

Wanneer je moet overwegen een sticky header te gebruiken<\/h3>\n

Bezoekers zullen minder snel verdwalen bij het verkennen van grotere sites met een sticky header. Als zodanig wil je misschien profiteren van deze feature als je website veel pagina’s heeft. Daarom zie je vaak sticky headers op e-commercesites<\/a>.<\/p>\n

Een sticky header kan met name handig zijn als je een zoekfeature in je header wilt opnemen. Op die manier kunnen gebruikers, terwijl ze scrollen en beseffen dat ze niet kunnen vinden wat ze zoeken, snel een zoekopdracht in de zoekbalk invoeren.<\/p>\n

Bovendien kan een sticky header een gamechanger zijn als je een blog hebt waarmee inkomsten worden gegenereerd<\/a> en waarin al je berichten op de homepage worden weergegeven. Over het algemeen kan deze header ervoor zorgen dat je website onderhoudbaar en schaalbaar<\/a> is.<\/p>\n

Als je site echter maar \u00e9\u00e9n pagina heeft, heeft het weinig zin om je header op deze manier te transformeren. Bovendien, als je een groot aantal pagina’s op je website hebt, maar elke pagina is relatief kort, heb je waarschijnlijk ook geen sticky header nodig.<\/p>\n

Over het algemeen vermindert een sticky header de scrolltijd en verhoogt het de bruikbaarheid en navigatie van de site. Als je niet zeker weet of deze feature je website ten goede zou komen, wil je misschien een snelle check van je paginalengtes doen en vervolgens beslissen.<\/p>\n

Zo maak je een Elementor sticky header<\/h2>\n

Voor deze tutorial zullen we je door de stappen leiden om een \u200b\u200bElementor sticky header te maken. We gaan ervan uit dat je de Elementor plugin<\/a> al op je site hebt ge\u00efnstalleerd en geactiveerd.<\/p>\n

We zullen bespreken hoe je deze header kunt maken met zowel de gratis versie als Elementor Pro<\/a>. Je zult waarschijnlijk blij zijn te weten dat je geen HTML hoeft te leren<\/a> of veel code<\/a> hoeft te bewerken om dit te doen!<\/p>\n

Zo maak je een sticky header met Elementor (gratis)<\/h3>\n

De gratis versie van Elementor biedt een aantal krachtige features voor paginabuilding. Als je echter wijzigingen wilt aanbrengen in je headers en footers, heb je wat extra (ook gratis) tools nodig.<\/p>\n

Laten we met dat in gedachten eens kijken hoe je een sticky header kunt maken met Elementor!<\/p>\n

Stap 1: Installeer en activeer je essenti\u00eble plugins<\/h4>\n

Gelukkig kunnen een paar betrouwbare tools de functionaliteit van de gratis versie van Elementor eenvoudig uitbreiden.<\/p>\n

Navigeer naar je WordPress dashboard om je eerste tool te vinden. Ga naar Plugins > Nieuwe toevoegen<\/strong> en zoek naar ElementsKit Elementor addons<\/a> met behulp van de zoekfunctie:<\/p>\n

\"Installeer
Installeer en activeer ElementsKit<\/figcaption><\/figure>\n

Installeer en activeer<\/a> deze plugin zoals je dat gewoonlijk zou doen. Wanneer je dit proces voltooit, word je naar je hoofdpagina met plugins geleid:<\/p>\n

\"Plugin
Plugin nu geinstalleerd<\/figcaption><\/figure>\n

Klik nu opnieuw op Add New<\/strong> om de plugin Sticky Header Effects for Elementor<\/a> te vinden met de zoekbalk:<\/p>\n

\"Sticky
Sticky Header Effects for Elementor<\/figcaption><\/figure>\n

Herhaal het installatie- en activeringsproces voor deze tool en je bent klaar voor de volgende stap!<\/p>\n

Stap 2: Maak je menu<\/h4>\n

Voordat je een header kunt maken, heb je een navigatiemenu nodig. We gaan een eenvoudig menu maken met de meest voorkomende elementen. Het bevat een logo, pagina’s en een Call To Action (CTA).<\/p>\n

Om je eigen menu in je WordPress dashboard te maken, ga je naar Appearance > Menus<\/strong>. Geef de jouwe een beschrijvende naam naast het Menu Name<\/strong> veld. We gaan de onze “Sticky Header Menu” noemen:<\/p>\n

\"Geef
Geef je sticky header menu een naam<\/figcaption><\/figure>\n

Zorg ervoor dat je Header<\/strong>\u00a0kiest als de Display location<\/strong>. Je kunt ook het vakje selecteren naast \u201cAdd new pages to your menu automatically\u201d.<\/p>\n

Vervolgens moet je enkele pagina’s aan je menu toevoegen. Vink in het Pages <\/strong>gedeelte aan de linkerkant de vakjes aan voor pagina’s die je wilt opnemen en klik vervolgens op Add to Menu<\/strong>:<\/p>\n

\"Pagina's
Pagina’s toevoegen aan je sticky header menu<\/figcaption><\/figure>\n

Vervolgens zie je je pagina’s naar je menu aan de rechterkant worden overgebracht. Ga je gang en klik op Save Menu<\/strong>\u00a0rechtsonder in je scherm:<\/p>\n

\"Bewaar
Bewaar je sticky header menu<\/figcaption><\/figure>\n

Zoals je kunt zien, hebben we enkele basispagina’s toegevoegd, waaronder Contact Us<\/strong>,\u00a0About<\/strong><\/a>, en Sample Page<\/strong>. Misschien wil je je pagina’s opnieuw ordenen, zodat de volgorde intu\u00eftief aanvoelt voor bezoekers.<\/p>\n

Stap 3: Maak je header<\/h4>\n

Nu bestaat je navigatiemenu, maar je kunt het nergens openen. Dat komt omdat je er een header van moet maken.<\/p>\n

Ga hiervoor naar het ElementsKit <\/strong>tabblad in je linkermenu. Als je dat nog niet hebt gedaan, moet je op dit punt door een paar \u2018Getting started\u2019 pagina’s klikken.<\/p>\n

Iedereen zal waarschijnlijk andere voorkeuren hebben, dus neem de tijd om te selecteren welke features je wilt activeren. Zorg er echter voor dat de Header Footer <\/strong>module is ingesteld op ON<\/strong>:<\/p>\n

\"Schakel
Schakel de header footer optie in Elements Kit in<\/figcaption><\/figure>\n

Ga nu naar\u00a0ElementsKit > Header Footer<\/strong>:<\/p>\n

\"Nieuwe
Nieuwe template toevoegen<\/figcaption><\/figure>\n

Deze pagina is leeg omdat je nog geen templates voor headers of footers hebt. Klik op Add New<\/strong> bovenaan je scherm om je eerste header template te maken:<\/p>\n

\"
Template-instellingen invullen<\/figcaption><\/figure>\n

Voer in het bovenstaande scherm een \u200b\u200bbeschrijvende naam in en zorg ervoor dat Header<\/strong> is geselecteerd als Type<\/strong>. Aangezien je de gratis versie gebruikt, verschijnt deze kop op de Entire Site<\/strong>.<\/p>\n

Zorg ervoor dat je de Activate\/Deactivate<\/strong>\u00a0schakelaar op ON<\/strong>\u00a0zet en klik op SAVE CHANGES<\/strong>. Je wordt nu teruggebracht naar je templatespagina, waar je je nieuwe headertemplate kunt zien:<\/p>\n

\"Nieuwe
Nieuwe headertemplate is nu beschikbaar voor gebruik<\/figcaption><\/figure>\n

Mogelijk zie je ook een groen Active<\/strong>\u00a0pictogram naast deze header. Het is echter nog niet live.<\/p>\n

Om je header te voltooien, plaats je de muisaanwijzer erop in de lijst met templates en klik je op\u00a0Edit in Elementor<\/strong>, net onder de naam. Dit brengt je naar het Elementor Builder scherm.<\/p>\n

Klik hier op het ElementsKit <\/strong>pictogram:<\/p>\n

\"Klik
Klik op het ElementsKit pictogram<\/figcaption><\/figure>\n

Selecteer op het volgende scherm het\u00a0Sections<\/strong> tabblad:<\/p>\n

\"Selecteer
Selecteer het “Sections” tabblad<\/figcaption><\/figure>\n

Scroll een beetje naar beneden om een \u200b\u200bheadersectie te vinden die je leuk vindt en klik vervolgens op Insert<\/strong>. We kozen voor Header \u2013 Section 5<\/strong>:<\/p>\n

\"Voeg
Voeg de header in waar je wilt<\/figcaption><\/figure>\n

Zoals je waarschijnlijk kunt zien, is ons navigatiemenu niet zichtbaar. Dus laten we doorgaan en het toevoegen aan onze headertemplate. Om dit te doen, beweeg je de muisaanwijzer over het navigatiemenugedeelte van je header. In dit geval is het precies in het midden:<\/p>\n

\"Plaats
Plaats de muisaanwijzer op het navigatiemenugedeelte van de header<\/figcaption><\/figure>\n

Klik op dit gebied en je Menu Settings <\/strong>zouden in het linkervenster moeten verschijnen. Zoek nu het Select Menu<\/strong> veld. Kies in de dropdown het menu dat je eerder hebt gemaakt:<\/p>\n

\"Kies
Kies het menu dat je eerder hebt gemaakt<\/figcaption><\/figure>\n

Op dit punt zou je het menu moeten zien in je headertemplate. Klik op UPDATE <\/strong>in de linkerbenedenhoek van het scherm, en je standaard header is klaar.<\/p>\n

Laten we het eens bekijken:<\/p>\n

\"Nieuwe
Nieuwe header<\/figcaption><\/figure>\n

Zoals je kunt zien, ziet onze header er geweldig uit. Het verdwijnt echter als we naar beneden scrollen. Laten we eens kijken hoe we ervoor kunnen zorgen dat het blijft “sticken”.<\/p>\n

Stap 4: Maak je header sticky<\/h4>\n

Navigeer voor onze laatste stap naar ElementsKit > Header Footer > Edit with Elementor<\/strong>. Selecteer vervolgens je header en klik op het middelste pictogram met zes stippen:<\/p>\n

\"Klik
Klik op het gestippelde pictogram<\/figcaption><\/figure>\n

Als je erover beweegt, zul je hiermee de Edit Section <\/strong>knop zien. Zodra je erop klikt, verschijnen je bewerkingsopties in het linkerdeelvenster.<\/p>\n

Klik op het Advanced<\/strong> tabblad en scrol omlaag naar Sticky Header Effects<\/strong>. Er zal een waarschuwingsbericht zijn dat zegt dat de plugin geen controle heeft over de sticky header, maar je kunt dat negeren. Omdat we ook de Sticky Header Effects for Elementor plugin hebben toegevoegd, werkt het prima.<\/p>\n

Schakel nu de Sticky header van Elementor in door de schakelaar op ON te zetten:<\/p>\n

\"Schakel
Schakel de sticky header van Elementor in<\/figcaption><\/figure>\n

Afhankelijk van je thema kan je sticky header er transparant uitzien. Als dat het geval is, wil je misschien \u00e9\u00e9n stilistische wijziging aanbrengen.<\/p>\n

Ga in je Edit Section <\/strong>venster onder\u00a0Style <\/strong>naar Background > Color<\/strong>\u00a0 en zorg ervoor dat je een tint hebt geselecteerd die opvalt tegen je normale achtergrond:<\/p>\n

\"Maak
Maak een stilistische verandering indien nodig<\/figcaption><\/figure>\n

Klik dan op\u00a0UPDATE<\/strong>. Je kunt nu een preview van je site bekijken om het eindresultaat te zien:<\/p>\n

\"Sticky
Sticky header in actie<\/figcaption><\/figure>\n

Dat is alles! Dit is een simpele Elementor sticky header, maar het kan je site makkelijk naar een hoger niveau tillen.<\/p>\n

Zo maak je een sticky header met Elementor Pro<\/h3>\n

Bij het gebruik van Elementor Pro is het maken van een sticky header iets eenvoudiger. Je kunt deze feature in slechts drie eenvoudige stappen aan je site toevoegen.<\/p>\n

Stap 1: Maak je menu<\/h4>\n

Om je menu te maken, ga je naar Appearance > Menus<\/strong> in je WordPress dashboard:<\/p>\n

\"Maak
Maak een menu<\/figcaption><\/figure>\n

Geef je menu een beschrijvende naam, selecteer Primary Menu<\/strong> naast Display location <\/strong>en klik op Create Menu<\/strong>:<\/p>\n

\"Geef
Geef je menu een naam en selecteer een locatie<\/figcaption><\/figure>\n

Op dit punt zou je een paar bestaande pagina’s op je website moeten hebben. Selecteer de pagina’s die je in je menu wilt opnemen in het linker venster.<\/p>\n

Klik dan op\u00a0Add to Menu<\/strong>, gevolgd door Save Menu<\/strong>:<\/p>\n

\"Selecteer
Selecteer pagina’s om op te nemen in het menu<\/figcaption><\/figure>\n

Nu zouden je pagina’s aan de rechterkant onder Menu Structure <\/strong>moeten worden weergegeven.<\/p>\n

Stap 2: Maak je header<\/h4>\n

Vervolgens moeten we onze basis maken. Laten we een klassieke header maken.<\/p>\n

Zoek om te beginnen het Elementor <\/strong>tabblad in je linkerzijbalk. Ga net daaronder naar Templates > Theme Builder<\/strong>. De volgende pagina ziet er als volgt uit:<\/p>\n

\"Zoek
Zoek \u201cTemplates\u201d in \u201cTheme Builder\u201d<\/figcaption><\/figure>\n

Zoals je waarschijnlijk kunt zien, kun je met Elementor Pro eenvoudig beginnen met het ontwerpen van elk element van je site.<\/p>\n

Klik op het pluspictogram (+<\/strong>) op het\u00a0Header<\/strong> element. Nu zou je een pop-up moeten zien met meerdere headerblokken waaruit je kunt kiezen:<\/p>\n

\"Kies
Kies uit meerdere headerblokken<\/figcaption><\/figure>\n

Als je al een headertemplate hebt, kun je deze selecteren op het My Templates <\/strong>tabblad. Anders wil je misschien een van de sectieblokken gebruiken die bij Elementor Pro worden geleverd.<\/p>\n

Als je je keuze hebt gemaakt, beweeg je de muis over het gewenste blok en klik je op Insert<\/strong>:<\/p>\n

\"Plaats
Plaats het gewenste blok<\/figcaption><\/figure>\n

Hier zie je dat dit blok een eigen logo heeft, maar ons navigatiemenu is automatisch weergegeven. Klik nu op PUBLISH<\/strong>:<\/p>\n

\"Klik
Klik op \u201cAdd Condition\u201d in Publish Settings<\/figcaption><\/figure>\n

In het volgende scherm word je\u00a0 gevraagd je PUBLISH SETTINGS<\/strong> te bepalen. Selecteer hier ADD CONDITION<\/strong>\u00a0om te beslissen waar je je header wilt weergeven:<\/p>\n

\"Selecteer
Selecteer waar je de template wilt weergeven<\/figcaption><\/figure>\n

Je zult waarschijnlijk Entire Site<\/strong> willen selecteren naast INCLUDE<\/strong>. Je kunt ook bepaalde sitegebieden uitsluiten door op de pijl naast INCLUDE <\/strong>te klikken en naar het alternatief te wisselen. Als je tevreden bent met je selecties, klik je op SAVE & CLOSE<\/strong>.<\/p>\n

Op dit punt verschijnt een pop-upbericht in de rechterbenedenhoek van je scherm. Als het niet verdwijnt voordat je erop kunt klikken, selecteer je de optie om je live site te bekijken.<\/p>\n

Je kunt ook teruggaan naar je WordPress dashboard<\/a> en een preview van je site bekijken door op het huispictogram in de linkerbovenhoek te klikken en vervolgens Visit Site<\/strong> te selecteren:<\/p>\n

\"Header
Header is nu beschikbaar<\/figcaption><\/figure>\n

Zoals je kunt zien, werkt onze header nu, maar wanneer we naar beneden scrollen op de pagina, verdwijnt deze. Laten we eens kijken wat we daaraan kunnen doen!<\/p>\n

Stap 3: Maak je header sticky<\/h4>\n

Laten we nu eens kijken hoe we een Elementor sticky header kunnen maken met de pro tool!<\/p>\n

Ga naar Templates > Theme Builder<\/strong> en selecteer de header die je zojuist hebt gemaakt. Klik vervolgens op Edit<\/strong>\u00a0naast het potloodpictogram op het volgende scherm. Dit brengt je terug naar de Elementor editor.<\/p>\n

Plaats de muisaanwijzer op je headertemplate en klik vervolgens op het pictogram met de zes stippen in het midden. Dit opent je Edit Section<\/strong>\u00a0venster aan de linkerkant:<\/p>\n

\"Klik
Klik op de gestippelde optie om te bewerken<\/figcaption><\/figure>\n

Navigeer nu naar het Advanced\u00a0<\/strong>tabblad en zoek het Motion Effects<\/strong> gedeelte. Schakel hier Scrolling Effects<\/strong> in door de schakelaar op ON<\/strong> te zetten:<\/p>\n

\"Schakel
Schakel de optie “Scrolling Effects” in op “On”<\/figcaption><\/figure>\n

Blader vervolgens naar beneden in het Motion Effects <\/strong>gedeelte om het veld Sticky <\/strong>te vinden. Selecteer Top <\/strong>in het dropdownmenu:<\/p>\n

\"Selecteer
Selecteer “Top” in de “Sticky” option dropdownlijst<\/figcaption><\/figure>\n

Klik nu op\u00a0UPDATE<\/strong>. Houd er rekening mee dat, afhankelijk van het kleurenschema van je thema, je sticky header van Elementor er transparant uit kan zien:<\/p>\n

\"Sticky
Sticky header werkt nu naar behoren<\/figcaption><\/figure>\n

Als dat het geval is, en je houdt niet van hoe het eruit ziet, kun je altijd je achtergrondkleur wijzigen. Ga in je Edit Section<\/strong>\u00a0venster naar Style > Background<\/strong> en selecteer Classic\u00a0<\/strong>als je achtergrondtype.<\/p>\n

Selecteer nu een nieuwe achtergrondkleur voor je headertemplate. Kies een tint die complementair is aan de rest van de pagina, maar die ook een mooi contrast cre\u00ebert:<\/p>\n

\"Bewerk
Bewerk de sticky header indien van toepassing<\/figcaption><\/figure>\n

Omdat dit slechts een voorbeeld is, kiezen we gewoon een grijze kleur om onze kop minder transparant te maken.<\/p>\n

Klik nu op UPDATE <\/strong>om je wijzigingen op te slaan. \u00a0Nu kan je een preview zien van het eindresultaat:<\/p>\n

\"Wijzigingen
Wijzigingen bekijken<\/figcaption><\/figure>\n

Dat is alles! Je wilt waarschijnlijk de stijl en kleuren aanpassen aan je merk. Zorg ervoor dat je je wijzigingen altijd opslaat als je klaar bent.<\/p>\n

Zo gebruik je CSS om je Elementor Sticky Header te verbeteren<\/h2>\n

Wanneer je een sticky header van Elementor op je website implementeert, kan dit aanvoelen als een aanzienlijke facelift voor je siteontwerp. Mogelijk ben je echter ge\u00efnteresseerd in verdere aanpassingen of meer dynamische features.<\/p>\n

Nu je weet hoe je een eenvoudige sticky header kunt maken, gaan we eens kijken hoe je je ontwerp naar een hoger niveau kunt tillen. Je kunt dit doen door Cascading Style Sheets (CSS)<\/a> code in WordPress te gebruiken.<\/p>\n

Maak je geen zorgen als je een beginner bent of geen ervaring hebt met coderen. Je ontwerpen verbeteren is een fluitje van een cent met Elementor.<\/p>\n

Ga hiervoor naar Templates > Theme Builder > Header<\/strong>:<\/p>\n

\"Aangepaste
Aangepaste CSS toevoegen om headerwijzigingen aan te brengen<\/figcaption><\/figure>\n

Onder Edit Section > Advanced > Custom CSS<\/strong>,<\/em> kun je een klein CSS fragment toevoegen om stilistische wijzigingen aan te brengen.<\/p>\n

Soorten Elementor sticky headers<\/h2>\n

Hier zijn een paar populaire verbeteringen die je misschien wilt overwegen voor je Elementor sticky header!<\/p>\n

Transparante sticky header<\/h3>\n

Sommige thema’s kunnen sticky header automatisch instellen op transparant. Als je dit echter met CSS <\/a>wilt doen, kun je een codefragment<\/a> zoals dit gebruiken:<\/p>\n

selector.elementor-sticky--effects{ background-color: rgba(133,130,255,0.5) !important }\n\nselector{ transition: background-color 4s ease !important; }\n\nselector.elementor-sticky--effects >.elementor-container{ min-height: 80px; }\n\nselector > .elementor-container{ transition: min-height 1s ease !important; }<\/code><\/pre>\n
Kopieer en plak deze code eenvoudig in het veld Custom CSS<\/strong> en pas de velden aan je voorkeuren aan. Dit fragment verandert de achtergrondkleur, transparantie en hoogte van je header, met een animatie-effect:<\/p>\n
\"CSS
CSS voor het aanpassen van headerachtergrond<\/figcaption><\/figure>\n
Alleen al voor dit type zijn de mogelijkheden eindeloos.<\/p>\n
Krimpende sticky header<\/h3>\n
Een andere populaire keuze is een header die groter en kleiner wordt naarmate bezoekers scrollen. Hier is de code die je nodig hebt voor dit type Elementor sticky header:<\/p>\n
header.sticky-header {\n\u00a0\u00a0\u00a0\u00a0--header-height: 90px;\n\u00a0\u00a0\u00a0\u00a0--opacity: 0.90;\n\u00a0\u00a0\u00a0\u00a0--shrink-me: 0.80;\n\u00a0\u00a0\u00a0\u00a0--sticky-background-color: #0e41e5;\n\u00a0\u00a0\u00a0\u00a0--transition: .3s ease-in-out;\n\n\u00a0\u00a0\u00a0\u00a0transition: background-color var(--transition),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0background-image var(--transition),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0backdrop-filter var(--transition),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0opacity var(--transition);\n}\nheader.sticky-header.elementor-sticky--effects {\n\u00a0\u00a0\u00a0\u00a0background-color: var(--sticky-background-color) !important;\n\u00a0\u00a0\u00a0\u00a0background-image: none !important;\n\u00a0\u00a0\u00a0\u00a0opacity: var(--opacity) !important;\n\u00a0\u00a0\u00a0\u00a0-webkit-backdrop-filter: blur(10px);\n\u00a0\u00a0\u00a0\u00a0backdrop-filter: blur(10px);\n}\nheader.sticky-header > .elementor-container {\n\u00a0\u00a0\u00a0\u00a0transition: min-height var(--transition);\n}\nheader.sticky-header.elementor-sticky--effects > .elementor-container {\n\u00a0\u00a0\u00a0\u00a0min-height: calc(var(--header-height) * var(--shrink-me))!important;\n\u00a0\u00a0\u00a0\u00a0height: calc(var(--header-height) * var(--shrink-me));\n}\nheader.sticky-header .elementor-nav-menu .elementor-item {\n\u00a0\u00a0\u00a0\u00a0transition: padding var(--transition);\n}\nheader.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {\n\u00a0\u00a0\u00a0\u00a0padding-bottom: 10px !important;\n\u00a0\u00a0\u00a0\u00a0padding-top: 10px !important;\n}\nheader.sticky-header > .elementor-container .logo img {\n\u00a0\u00a0\u00a0\u00a0transition: max-width var(--transition);\n}\nheader.sticky-header.elementor-sticky--effects .logo img {\n\u00a0\u00a0\u00a0\u00a0max-width: calc(100% * var(--shrink-me));\n}\n<\/code><\/pre>\n
Als je niet vertrouwd bent met zo’n uitgebreide brok codede, wil je misschien Elementor’s handleiding raadplegen voor het maken van een krimpende sticky header<\/a>.<\/p>\n
Met dit ontwerp krijg je dit effect:<\/p>\n
\"New
New header effect<\/figcaption><\/figure>\n
Hoewel deze header een subtiel tintje heeft, kan deze verfijning je ontwerp een professionelere uitstraling geven.<\/p>\n
Fade-In \/ Fade-Out<\/h3>\n
Naast deze trendy opties is er ook de fade-in\/fade-out feature (ook wel \u2018reveal\u2019 genoemd). Het ziet er ongeveer zo uit:<\/p>\n
\"Fade
Fade in fade out<\/figcaption><\/figure>\n
Voor dit effect hoef je helemaal geen code aan te raken. Navigeer eenvoudig naar je header in je themabuilder. Ga dan naar Edit Section > Advanced > Motion Effects > Scrolling Effects<\/strong>:<\/p>\n
\"Bewerk
Bewerk de \u201cTransparency\u201d optie<\/figcaption><\/figure>\n
Klik hier op het potloodpictogram naast het\u00a0Transparency <\/strong>veld en verander de Direction <\/strong>naar Fade In<\/strong>\u00a0of Fade Out<\/strong>. Pas vervolgens je ontwerp aan je voorkeuren aan.<\/p>\n
Er zijn veel opties voor deze transparantie effecten, dus we raden aan om de documentatie van Elementor<\/a> te bekijken. Op die manier kun je de exacte look bereiken die je wilt.<\/p>\n\n
Samenvatting<\/h2>\n
Werken met een vertrouwde websitebuilder is een uitstekend alternatief voor het betalen voor een ervaren webontwikkelaar<\/a> om je site te maken. Wanneer je enkele van de beste websiteontwerpsoftware<\/a> gebruikt, kun je eenvoudig de essenti\u00eble elementen voor elke website maken. Deze bevatten praktische maar mooie sticky headers.<\/p>\n
Een sticky header kan een aangenamere ervaring voor je gebruikers cre\u00ebren. Je kunt kiezen uit verschillende dynamische headerstijlen, waaronder transparant en krimpend. Sterker nog, je kunt deze verbluffende headerontwerpen maken met zowel Elementor Pro<\/a> als de gratis versie.<\/p>\n
Het ontwerpen van je website is een van de eerste stappen om deze te lanceren. Je hebt echter eerst betrouwbare hosting nodig. Bekijk de managed hostingpakketten<\/a> van Kinsta om te zien hoe we de prestaties van je site kunnen optimaliseren!<\/p>\n","protected":false},"excerpt":{"rendered":"
Of je nu een beginnende webontwikkelaar of een e-commerce ondernemer bent, je websites delen waarschijnlijk enkele essenti\u00eble elementen. Elke site heeft bijvoorbeeld een duidelijke header nodig …<\/p>\n","protected":false},"author":117,"featured_media":43277,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[402,626],"topic":[892],"class_list":["post-43276","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-elementor","tag-page-builder","topic-wordpress-ontwikkeling"],"yoast_head":"\nDe ultieme gids voor Elementor sticky headers<\/title>\n<meta name=\"description\" content=\"Een sticky header zorgt dat belangrijke informatie te zien blijft. Leer hoe je eenvoudig met Elementor sticky headers maakt om je publiek betrokken te houden.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/nl\/blog\/elementor-sticky-headers\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"De ultieme handleiding voor Elementor sticky headers\" \/>\n<meta property=\"og:description\" content=\"Een sticky header zorgt dat belangrijke informatie te zien blijft. Leer hoe je eenvoudig met Elementor sticky headers maakt om je publiek betrokken te houden.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/elementor-sticky-headers\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-04T14:52:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-09T12:58:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/05\/elementor-sticky-header.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Een sticky header zorgt dat belangrijke informatie te zien blijft. Leer hoe je eenvoudig met Elementor sticky headers maakt om je publiek betrokken te houden.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/05\/elementor-sticky-header.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"25 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/elementor-sticky-headers\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/elementor-sticky-headers\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"De ultieme handleiding voor Elementor sticky headers\",\"datePublished\":\"2022-05-04T14:52:17+00:00\",\"dateModified\":\"2024-10-09T12:58:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/elementor-sticky-headers\/\"},\"wordCount\":3588,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/elementor-sticky-headers\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/05\/elementor-sticky-header.jpg\",\"keywords\":[\"Elementor\",\"page builder\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/elementor-sticky-headers\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/elementor-sticky-headers\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/elementor-sticky-headers\/\",\"name\":\"De ultieme gids voor Elementor sticky headers\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/elementor-sticky-headers\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/elementor-sticky-headers\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/05\/elementor-sticky-header.jpg\",\"datePublished\":\"2022-05-04T14:52:17+00:00\",\"dateModified\":\"2024-10-09T12:58:39+00:00\",\"description\":\"Een sticky header zorgt dat belangrijke informatie te zien blijft. Leer hoe je eenvoudig met Elementor sticky headers maakt om je publiek betrokken te houden.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/elementor-sticky-headers\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/elementor-sticky-headers\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/elementor-sticky-headers\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/05\/elementor-sticky-header.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/05\/elementor-sticky-header.jpg\",\"width\":1460,\"height\":730,\"caption\":\"De ultieme handleiding voor Elementor sticky headers\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/elementor-sticky-headers\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress ontwikkeling\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/wordpress-ontwikkeling\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"De ultieme handleiding voor Elementor sticky headers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/nl\/#website\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.\",\"sameAs\":[\"https:\/\/salmanravoof.com\",\"https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/\",\"https:\/\/x.com\/salmanravoof\"],\"url\":\"https:\/\/kinsta.com\/nl\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"De ultieme gids voor Elementor sticky headers","description":"Een sticky header zorgt dat belangrijke informatie te zien blijft. Leer hoe je eenvoudig met Elementor sticky headers maakt om je publiek betrokken te houden.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/nl\/blog\/elementor-sticky-headers\/","og_locale":"nl_NL","og_type":"article","og_title":"De ultieme handleiding voor Elementor sticky headers","og_description":"Een sticky header zorgt dat belangrijke informatie te zien blijft. Leer hoe je eenvoudig met Elementor sticky headers maakt om je publiek betrokken te houden.","og_url":"https:\/\/kinsta.com\/nl\/blog\/elementor-sticky-headers\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2022-05-04T14:52:17+00:00","article_modified_time":"2024-10-09T12:58:39+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/05\/elementor-sticky-header.jpg","type":"image\/jpeg"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"Een sticky header zorgt dat belangrijke informatie te zien blijft. Leer hoe je eenvoudig met Elementor sticky headers maakt om je publiek betrokken te houden.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/05\/elementor-sticky-header.jpg","twitter_creator":"@salmanravoof","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Salman Ravoof","Geschatte leestijd":"25 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/elementor-sticky-headers\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/elementor-sticky-headers\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"De ultieme handleiding voor Elementor sticky headers","datePublished":"2022-05-04T14:52:17+00:00","dateModified":"2024-10-09T12:58:39+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/elementor-sticky-headers\/"},"wordCount":3588,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/elementor-sticky-headers\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/05\/elementor-sticky-header.jpg","keywords":["Elementor","page builder"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/elementor-sticky-headers\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/elementor-sticky-headers\/","url":"https:\/\/kinsta.com\/nl\/blog\/elementor-sticky-headers\/","name":"De ultieme gids voor Elementor sticky headers","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/elementor-sticky-headers\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/elementor-sticky-headers\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/05\/elementor-sticky-header.jpg","datePublished":"2022-05-04T14:52:17+00:00","dateModified":"2024-10-09T12:58:39+00:00","description":"Een sticky header zorgt dat belangrijke informatie te zien blijft. Leer hoe je eenvoudig met Elementor sticky headers maakt om je publiek betrokken te houden.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/elementor-sticky-headers\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/elementor-sticky-headers\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/elementor-sticky-headers\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/05\/elementor-sticky-header.jpg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2022\/05\/elementor-sticky-header.jpg","width":1460,"height":730,"caption":"De ultieme handleiding voor Elementor sticky headers"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/elementor-sticky-headers\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"WordPress ontwikkeling","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/wordpress-ontwikkeling\/"},{"@type":"ListItem","position":3,"name":"De ultieme handleiding voor Elementor sticky headers"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/nl\/#website","url":"https:\/\/kinsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.","sameAs":["https:\/\/salmanravoof.com","https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/","https:\/\/x.com\/salmanravoof"],"url":"https:\/\/kinsta.com\/nl\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/43276","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=43276"}],"version-history":[{"count":4,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/43276\/revisions"}],"predecessor-version":[{"id":49013,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/43276\/revisions\/49013"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/43276\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/43276\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/43276\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/43276\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/43276\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/43276\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/43276\/translations\/nl"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/43276\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/43277"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=43276"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=43276"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=43276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}