Sticky headers zijn een geweldige manier om het navigatiemenu van uw website te allen tijde zichtbaar te houden, waardoor u gemakkelijk toegang krijgt tot belangrijke links en informatie. Een statische header kan echter in de loop van de tijd eentonig worden en misschien wilt u de kleur van de scroll wijzigen om een meer dynamische en boeiende gebruikerservaring te creëren. In deze handleiding laten we u zien hoe u de kleur van een sticky header bij scrollen in Elementor kunt wijzigen, met behulp van eenvoudige en gemakkelijk te volgen stappen. Of u nu een beginner of een ervaren Elementor-gebruiker bent, u kunt dit effect eenvoudig implementeren en uw website een frisse en moderne uitstraling geven.
Ontwerpmethode
Als u dat nog niet heeft gedaan, moet u de themabouwer gebruiken om een aangepaste koptekstsjabloon te maken. Begin door uw logo in een afbeeldingswidget en een navigatiewidget in een koptekstgedeelte met twee kolommen te plaatsen.
Het tabblad Geavanceerd
Het tabblad Geavanceerd in de sectiebediening wordt gebruikt voor de volgende stappen.
Marge-instellingen
De meest gebruikelijke manier om een transparante koptekst te maken, is door de sectie een negatieve marge te geven die gelijk is aan de hoogte. Ontgrendel de margecontroles op het tabblad Geavanceerd en stel de onderkant in op een negatieve waarde (bijvoorbeeld: -125px). Hierdoor wordt het gedeelte onder de koptekst naar de bovenkant van de pagina verplaatst.
Maak geweldige websites
Met de beste gratis paginabuilder Elementor
Begin nuDe Z-index
U zult ook de Z-index van de sectie moeten vergroten om ervoor te zorgen dat deze altijd bovenaan de inhoud staat. U kunt elk getal invoeren dat groter is dan de rest van de inhoud op uw website, maar veel ontwerpers gebruiken 1.000.
Vaste instellingen
Selecteer de optie Sticky van de Motion Effects-accordeon en stel deze in op Top.
Effect toevoegen
Nu we een eenvoudig transparant koptekstgedeelte hebben gemaakt, voegen we het scrolleffect toe.
Tabblad Stijl
Het tabblad Stijl in de sectiebediening wordt gebruikt voor de volgende stappen.
Uiteindelijke kleur
Stel de kleur van de uiteindelijke achtergrond of het verloop in de kleurenkiezer in.
Scrolleffect
Schakel de selector Scrolleffecten in het regelpaneel in of uit.
Stel de waarden in
We moeten nu de waarden in de viewport-schuifregelaars aanpassen om het gewenste effect te bereiken. Scroll naar de locatie op uw pagina waar u de volledige dekking wilt hebben en verlaag de waarde Top totdat uw kop volledig ondoorzichtig is (bijvoorbeeld: 25%). U kunt nu de waarde van de Bottom verhogen. In het voorgaande voorbeeld willen we dat het effect snel optreedt, dus stellen we de waarden heel dicht bij elkaar in (bijvoorbeeld: 22%). Dit zal ertoe leiden dat het effect optreedt bij een scroll van 3% van de pagina.
Afsluiten
Concluderend kan het veranderen van de kleur van de sticky header op de scroll in Elementor de visuele aantrekkingskracht en gebruikerservaring van uw website verbeteren. Het is een eenvoudige en effectieve manier om uw website te laten opvallen en een onvergetelijke indruk op uw bezoekers te maken. Houd er echter rekening mee dat u mobiele apparaten en tablets moet aanpassen of er rekening mee moet houden, aangezien het gedrag van de header kan variëren op verschillende schermformaten. Het vinden van die goede plek zal wat testen en aanpassingen vergen, maar het eindresultaat zal de moeite zeker waard zijn. Dus ga je gang en probeer deze techniek uit om je website een frisse en moderne uitstraling te geven.
