De header is over het algemeen het eerste wat iemand ziet wanneer hij of zij uw website bezoekt, en vormt de basis voor hoe die persoon de website verder verkent.
Of je nu een webshop, een persoonlijke website, een educatieve website, een communityforum of een mediawebsite hebt, de header maakt het navigeren eenvoudig en het gebruik ervan prettig.
Vaste headers worden steeds populairder onder webdesigners om een website te organiseren en te structureren voor een betere gebruikersnavigatie.
In deze tutorial laten we je zien hoe je een sticky header maakt met Elementor.
Dankzij sticky headers blijven de paginakop en het menu zichtbaar, ongeacht hoe ver ze naar beneden scrollen.
Om een vaste header aan je website toe te voegen, ga je naar wp-admin > Weergave > Menu's en maak je een hoofdmenu aan. Typ in de header de sectie die je wilt weergeven.
Ga naar Elementor Templates > Theme Builder zodra je klaar bent met het samenstellen van het hoofdmenu. Selecteer het gedeelte 'Header' op de Theme Builder-pagina en klik op ' Nieuwe header toevoegen '.
Geef de headersjabloon een naam en klik op ' Sjabloon maken ' in het pop-upvenster.
Je wordt vervolgens doorgestuurd naar de Elementor-bewerkingspagina. Daar kun je een van de vooraf gemaakte header-sjablonen gebruiken of zelf een header ontwerpen.
In deze tutorial beginnen we helemaal vanaf nul met onze Elementor sticky header.
Voordat we een template gaan ontwerpen, kun je in de Elementor-editor verschillende header-widgets bekijken. Met behulp van deze secties kunnen we snel en eenvoudig een header ontwerpen.
Maak een lay-out met twee kolommen. Zorg ervoor dat de inhoudsbreedte van de sectie is ingesteld op ' Kader '.
In de instellingen voor de breedte van de inhoud in het Elementor-bewerkingsgedeelte stelt u de breedte van de eerste kolom in op 20% onder de kolom Bewerken
Plaats het logo van uw website in de eerste kolom en lijn het links uit.
Voeg een navigatiemenu toe in de tweede kolom en selecteer het hoofdmenu dat je in stap 1 hebt gemaakt. Lijn het navigatiemenu rechts uit.
Voor deze tutorial houden we de header simpel. Je kunt je header natuurlijk gedetailleerder maken door een achtergrondkleur, hover-animaties, knoppen en andere elementen toe te voegen.
Nu we onze basis Elementor-header hebben gemaakt, is het tijd om er een sticky header van te maken.
Ga hiervoor naar het gedeelte Bewerken (het gedeelte 'Hele koptekst'). Selecteer Geavanceerd > Bewegingseffecten in het下拉菜单.
Selecteer ' Vastmaken aan de bovenkant ' onder bewegingseffecten en vervolgens ' Apparaten ' waar u de vastgeplakte koptekst wilt laten verschijnen.
Een vastgeplakte koptekst is vrijwel altijd ongewenst op tablets en ook op mobiele schermen. Klik daarom op het kruisje naast beide opties onder 'Vastplakken aan' en laat alleen 'Bureaublad' geselecteerd staan.
Als je tevreden bent met je werk, klik dan op ' Publiceren '; hiermee activeer je de sticky header, maar deze vervangt op dit moment nog niet de huidige header van je thema.
Elementor vraagt je om een voorwaarde toe te voegen aan je header nadat je deze hebt gepubliceerd. Je kunt de header vervolgens op elke gewenste plek op de site weergeven door voorwaarden toe te voegen.
We wilden dat deze koptekst over de hele website zou verschijnen, met uitzondering van de 404-pagina. Daarom hebben we de hele website in de selectie opgenomen en de 404-pagina weggelaten.
Zoals je ziet, is het maken van je eigen Sticky header met Elementor heel eenvoudig en probleemloos!
Geef je Elementor-stickyheader een veel mooier uiterlijk met aangepaste CSS. Met Elementor kun je een stickyheader aanpassen door een CSS-klasse toe te voegen om hem stijlvoller te maken.
Je kunt hier de hoogte, achtergrondkleur, overgang en plakeffecten van de sticky header aanpassen.
Ga terug naar het bewerkingsgebied om je sticky header stijlvoller te maken (gedeelte 'Hele header'). Selecteer 'Geavanceerd' > 'Bewegingseffecten' in het下拉菜单.
Stel in dit geval de " Effectenverschuiving " in op 100. Wanneer een bezoeker uw website gebruikt, is dit de scrollafstand waarop het scrolleffect optreedt.
Stel de bewegingscompensatie in op 100.
Houd er rekening mee dat de opties voor offset-effecten alleen werken als er aangepaste CSS wordt gebruikt. Als u geen eigen aangepaste CSS toevoegt, kunt u de laatste optie dus overslaan.
Voordat je de definitieve sticky header publiceert, kun je optioneel voorwaarden toevoegen. Een voorbeeld amp een voorwaarde voor een sticky header is waar je de sticky header wilt weergeven. Je kunt bijvoorbeeld amp criteria ' hele site ' kiezen.
Je wilt nu wat aangepaste CSS aan je website toevoegen. Aangepaste CSS is erg flexibel en je kunt er alles in opnemen wat je wilt, zolang je maar weet hoe het werkt.
We hebben de website opgeschoond; nu gaan we verder met de details, waaronder het toevoegen van de aangepaste CSS-code. We laten zowel de basisprincipes als de geavanceerde technieken zien voor het verkrijgen van gratis sticky header-effecten in Elementor. Als je Elementor 2.9 of hoger gebruikt, kun je de globale stijlregels gebruiken om deze CSS in je site te integreren.
Volg de onderstaande stappen om de aangepaste CSS toe te voegen:
Plak daarna de onderstaande CSS-code erin.
header.sticky-header { --header-height: 90px; --opacity: 0.90; --shrink-me: 0.80; --sticky-background-color: #0e41e5; --transition: .3s ease-in-out; transition: background-color var(--transition), background-image var(--transition), backdrop-filter var(--transition), opacity var(--transition); } header.sticky-header.elementor-sticky--effects { background-color: var(--sticky-background-color) ; background-image: none ; opacity: var(--opacity) ; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } header.sticky-header > .elementor-container { transition: min-height var(--transition); } header.sticky-header.elementor-sticky--effects > .elementor-container { min-height: calc(var(--header-height) * var(--shrink-me)); height: calc(var(--header-height) * var(--shrink-me)); } header.sticky-header .elementor-nav-menu .elementor-item { transition: padding var(--transition); } header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item { padding-bottom: 10px; padding-top: 10px; } header.sticky-header > .elementor-container .logo img { transition: max-width var(--transition); } header.sticky-header.elementor-sticky--effects .logo img { max-width: calc(100% * var(--shrink-me)); }
De bovenstaande instructies helpen je bij het maken van een aflopende sticky header in Elementor. Wil je meer weten over hoe je de header verder kunt personaliseren, bekijk dan de onderstaande CSS-code. Hiermee kun je creatiever te werk gaan met het ontwerp van de header. Afhankelijk van je wensen kun je de sticky header in Elementor personaliseren door verschillende instellingen aan te passen en de sticky header meer of minder sticky te maken. We raden je aan een code-editor te gebruiken om deze CSS-wijziging direct in Elementor te implementeren. Je kunt bijvoorbeeld Visual Studio Code of Atom gebruiken. Deze editors zijn gratis te gebruiken en toegankelijk via verschillende besturingssystemen, waaronder Windows, Mac OS X en Linux.
In dit gedeelte wordt gedemonstreerd hoe u het effect van de Elementor-header die kleiner wordt kunt aanpassen met behulp van het CSS-stijlbestand. Als u slechts één wijziging aanbrengt in de aangepaste eigenschap, wordt deze direct doorgevoerd in de rest van de CSS-code.
Er zijn in totaal vijf verschillende aanpassingsmogelijkheden voor de aflopende koptekst. Niet alle variabelen hoeven te worden aangepast, maar u hebt wel de mogelijkheid om dit te doen. Zodra u hebt besloten welke variabelen u wilt wijzigen, kunt u alleen die variabelen aanpassen en de overige parameters ongewijzigd laten.
Hieronder staan de vijf CSS-variabelen, met de standaardwaarden voor elke variabele in het rood weergegeven.
De achtergrondkleur van de sticky is #0e41e5 en de hoogte van de header is 90px. Andere stylingopties zijn: dekking van 0,90, shrink-me van 0,80, dekking van 0,90 en een ease-in/ease-out overgang van 300ms.
De aangepaste eigenschappen zijn de elementen die na het dubbele streepje “–” in onzeampverschijnen. U vindt ze bovenaan in onzeamp. Het enige wat u hoeft te doen, is de waarde aanpassen die na de dubbele punt en vóór de puntkomma in de zin staat.
Als jeampde hoogte van de header wilt vergroten naar 100px, dan ziet het er voor en na de hoogteaanpassing als volgt uit:
Voorheen was de hoogte van de koptekst 90 pixels; nu is de hoogte van de koptekst 100 pixels.
Met Elementor kun je op verschillende manieren een vast menu in de header ontwerpen. Je kunt niet alleen een gratis vast menu in Elementor maken, maar je kunt de header ook personaliseren door er aangepaste CSS aan toe te voegen. In deze stapsgewijze handleiding vind je gedetailleerde instructies voor het maken van een aflopend vast menu in Elementor en hoe je de CSS kunt aanpassen.
Elementor bevat diverse header-sjablonen; elk is uniek en elegant en helpt bezoekers bij het navigeren op uw website.
Met Elementor heb je volledige controle over de stijl van de headers van je website. Je kuntamphet logo van de site in het midden van de pagina plaatsen en het hoofdmenu eronder. Boven de hoofdheader kun je een koptekst toevoegen om het telefoonnummer, links naar sociale media en andere informatie weer te geven.
Hieronder vindt u slechts enkeleampvan de vele mogelijkheden voor het ontwerpen van headers die Elementor-gebruikers ter beschikking staan.
Door een vastgemaakte header op uw website te plaatsen, kunt u het voor bezoekers gemakkelijker maken om door uw site te navigeren en het aantal klikken naar alle delen van uw site verhogen.
Elementor maakt het handmatig genereren van sticky headers met JavaScript en CSS overbodig, iets wat voorheen wel nodig was. Dankzij Elementor is het maken van een sticky header voor je website nu eenvoudiger dan ooit.
De kop- en voetteksten van een website zijn essentiële elementen. In de meeste gevallen biedt de kop navigatie...
Twee van de meest populaire WordPress-thema’s op de markt zijn Astra en OceanWP. Professioneel…
Voor het maken van een uitstekende nieuwswebsite hoeft u geen webdesigner te worden. Wij…
Het krantenthema is een van de belangrijkste WordPress-thema's ontworpen door tagDiv, een…
Als het gaat om het opzetten van een online winkel, is WooCommerce de go-to plugin. Het…
Onze eigen paginabouwer, de Avada Builder, is nu beschikbaar in twee interfaces: Avada…
Bekijk opmerkingen
Heel goed artikel! Kun je me alsjeblieft helpen met mijn probleem met het sticky menu op mijn one-page website? Het sticky menu bedekt de sectie die ik als ankerlink in het menu heb gedefinieerd.
Hoi,
Je moet een opvulling aan de bovenkant van je eerste sectie toevoegen, omdat het menu nu een vaste positie heeft.
Meneer! Is er een manier om een megamenu toe te voegen aan de vastgezette header?
Tuurlijk, waarom niet? Ondervind je een probleem?
Als u een header van css gebruikt, kunt u deze verwijderen en geen element meer gebruiken om te verwijderen, maar geen element of luisteraar.
Hallo, ik denk dat je ofwel met de rechtermuisknop kunt klikken, ofwel de sectieverkenner kunt gebruiken