Hoe u sticky header- en scrolleffecten gebruikt met Elementor

Een header is over het algemeen het eerste dat mensen zien wanneer ze uw website bezoeken, en dient als basis voor hoe ze uw website verkennen.

Of u nu een e-commercewebsite, een persoonlijke website, een website voor onderwijs, een communityforum of een website voor de media heeft, de header zorgt ervoor dat u eenvoudig kunt bladeren en prettig kunt gebruiken.

Sticky headers worden steeds populairder onder webontwerpers om een ​​website te organiseren en te structureren voor verbeterde gebruikersnavigatie.

In deze tutorial laten we u zien hoe u uw sticky header kunt maken met Elementor.

Met vastgezette kopteksten kunnen gebruikers de koptekst en het menugedeelte van de pagina bekijken, ongeacht hoe ver ze naar beneden scrollen.

• Stap 1: een menu maken
• Stap 2: Uw header maken in Elementor
• Stap 3: Gebruik Elementor om een ​​headersjabloon te maken
• STAP 4: Hoe u uw Elementor-header plakkerig kunt maken
• Stap 5: pas onze CSS aan
• Conclusie

Stap 1: een menu maken

Om een ​​sticky header aan uw website toe te voegen, gaat u naar wp-admin > Vormgeving > Menu's en maakt u een Hoofdmenu. Typ in de koptekst de sectie die u wilt weergeven.

Stap 2: Uw header maken in Elementor

Ga naar Elementor-sjablonen > Themabouwer als je klaar bent met het samenstellen van het hoofdmenu. Selecteer het kopgebied op de themabouwerpagina en klik op ' Nieuwe kop toevoegen '.

Geef de headersjabloon een naam en klik op " Create Template " in het pop-upscherm.

Daarna wordt u naar de Elementor-bewerkingspagina geleid. U kunt een van de vooraf gemaakte koptekstsjablonen gebruiken of uw eigen koptekstsjablonen ontwerpen.

In deze tutorial beginnen we helemaal opnieuw met onze Elementor sticky header.

Voordat we beginnen met het ontwerpen van een template, kun je in de Elementor-editor verschillende headerwidgets bekijken. Met behulp van deze secties kunnen we snel en eenvoudig een header ontwerpen.

Stap 3: Gebruik Elementor om een ​​headersjabloon te maken

Maak een lay-out met twee kolommen. Zorg ervoor dat de inhoudsbreedte van de sectie is ingesteld op ' Boxed '.

In de instellingen voor de breedte van de inhoud in de sectie Elementor Bewerken stelt u de eerste kolombreedte in op 20% onder de kolom ' Bewerken '.

Plaats het sitelogo van uw website in de eerste kolom en lijn het links uit.

Voeg een Nav-menu toe in de tweede kolom en selecteer het hoofdmenu dat u in stap 1 hebt gebouwd. Lijn het navigatiemenu aan de rechterkant uit.

Voor deze zelfstudie houden we de koptekst eenvoudig. U kunt uw koptekst gedetailleerder maken door een achtergrondkleur, zwevende animatie-effecten, knoppen en andere elementen toe te voegen.

STAP 4: Hoe u uw Elementor-header plakkerig kunt maken

Nu we onze basis Elementor-header hebben gemaakt, is het tijd om er een Sticky-header van te maken.

Ga hiervoor naar de sectie Bewerken (sectie Hele koptekst). Selecteer Geavanceerd > Bewegingseffecten in het vervolgkeuzemenu.

Selecteer ' klevend bovenaan ' onder bewegingseffecten en vervolgens ' apparaten ' waar je de plakkerige kop wilt laten verschijnen.

Een sticky header is bijna altijd ongewenst op apparaten van tabletformaat, en ook bijna altijd ongewenst op mobiele schermen. Klik daarom op de “x” naast beide opties onder Sticky On, waarbij alleen “Bureaublad” geselecteerd blijft.

Wanneer u tevreden bent met uw werk, klikt u op “ Publiceren ”; hierdoor wordt de sticky header geactiveerd, maar deze vervangt op dit moment niet je huidige themaheader.

Elementor vraagt ​​u om een ​​voorwaarde voor uw header toe te voegen nadat u deze heeft gepubliceerd. U kunt de header waar u maar wilt op de site weergeven door voorwaarden toe te voegen.

We wilden dat deze header over de hele site zou verschijnen, zonder de 404-pagina. Daarom hebben we de hele site meegenomen in de keuze en de 404-pagina weggelaten.

Zoals u kunt zien, is het gebruik van Elementor om uw gepersonaliseerde Sticky header te maken eenvoudig en pijnloos!

Laat uw Sticky Header van Elementor er een stuk beter uitzien met behulp van aangepaste CSS. Met Elementor kunt u een sticky header aanpassen door een CSS-klasse toe te voegen om deze stijlvoller te maken.

U kunt hier de hoogte, de achtergrondkleur, de overgang en de plakkerige effecten van de sticky header aanpassen.

Keer terug naar het gebied Bewerken om uw vastgezette koptekst stijlvoller te maken (sectie Hele koptekst). Selecteer Geavanceerd > Bewegingseffecten in het vervolgkeuzemenu.

in dit geval de “ Effects Offset Wanneer een bezoeker uw website gebruikt, is dit de scrollafstand waarop het scrolleffect plaatsvindt.

Stel de bewegingsoffset in op 100.

Houd er rekening mee dat de opties voor offset-effecten alleen werken als aangepaste CSS wordt gebruikt. Als u dus geen eigen aangepaste CSS toevoegt, kunt u de laatste optie overslaan.

Voordat u de laatste sticky header publiceert, kunt u optioneel voorwaarden toevoegen aan de laatste sticky header. Een voorbeeld amp een voorwaarde voor een sticky header is de plaats waar u de sticky header wilt weergeven. bijvoorbeeld het criterium ' hele site amp .

U wilt nu wat aangepaste CSS op uw website opnemen. Aangepaste CSS is vrij flexibel en u kunt alles opnemen wat u maar wilt, als u bekend bent met de werking ervan.

We hebben de schoonmaak afgerond; we gaan nu over naar de fijne kneepjes van de website, inclusief de toevoeging van de aangepaste CSS-code. We zullen zowel de basisprincipes als de geavanceerde technieken demonstreren voor het verkrijgen van gratis sticky header-effecten voor Elementor. Als u Elementor 2.9 of hoger gebruikt, kunt u de Global Style Rules gebruiken om deze CSS in uw site op te nemen.

Volg de onderstaande procedures om de aangepaste CSS op te nemen:

• Om toegang te krijgen tot het hamburgermenu, zoekt u het in de linkerbovenhoek van het Elementor-menu en selecteert u het.
• Selecteer Themastijlen kiezen in het vervolgkeuzemenu onder het gedeelte Globale stijl.
• Selecteer Aangepaste CSS in het vervolgkeuzemenu in dat gedeelte (de kleur verandert in blauw ten opzichte van de vorige genetische rode kleur).

Plak daarna de onderstaande CSS-code.

header.sticky-header { --header-hoogte: 90px; --dekking: 0,90; --verklein mij: 0,80; --sticky-achtergrondkleur: #0e41e5; --overgang: .3s gemak-in-uit; overgang: achtergrondkleur var(--transition), achtergrondafbeelding var(--transition), achtergrondfilter var(--transition), dekking var(--transition); } header.sticky-header.elementor-sticky--effecten { achtergrondkleur: var(--sticky-achtergrondkleur)! belangrijk; achtergrondafbeelding: geen !belangrijk; dekking: var(--dekking) !belangrijk; -webkit-achtergrondfilter: vervagen (10px); achtergrondfilter: vervagen(10px); } header.sticky-header > .elementor-container { transitie: min-height var(--transition); } header.sticky-header.elementor-sticky--effecten > .elementor-container { min-height: calc(var(--header-height) * var(--shrink-me))!belangrijk; height: calc(var(--header-height) * var(--shrink-me)); } header.sticky-header .elementor-nav-menu .elementor-item { transitie: opvulling var(--transition); } header.sticky-header.elementor-sticky--effecten .elementor-nav-menu .elementor-item {padding-bottom: 10px!important; opvulling-top: 10px!belangrijk; } header.sticky-header > .elementor-container .logo img { transitie: max-width var(--transition); } header.sticky-header.elementor-sticky--effecten .logo img { max-width: calc(100% * var(--shrink-me)); }

Stap 5: pas onze CSS aan

De bovenstaande instructies begeleiden u bij het maken van een afnemende sticky header in Elementor. Als je meer details wilt weten over hoe je de header verder kunt personaliseren, kun je de onderstaande CSS-code bekijken, waarmee je creatiever kunt zijn met het headerontwerp. Afhankelijk van uw behoeften kunt u de Sticky Header van Elementor personaliseren door talrijke instellingen te wijzigen en deze min of meer sticky te maken. We raden u aan een code-editor te gebruiken om deze CSS-wijziging rechtstreeks in Elementor op te nemen. U kunt Visual Studio Code of Atom gebruiken, waarmee u de code snel kunt samenstellen en de vruchten kunt plukken. Deze editors zijn gratis te gebruiken en toegankelijk vanaf verschillende systemen, waaronder Windows, Mac OS X en Linux.

In deze sectie wordt gedemonstreerd hoe u de effecten van de krimpende header van Elementor kunt aanpassen met behulp van het CSS-stijlblad. Als u slechts één wijziging aanbrengt in de aangepaste eigenschap, wordt deze onmiddellijk aangepast zodat deze overeenkomt met de rest van de CSS-code.

Aanpassingsopties voor de afnemende koptekst zijn in totaal op vijf verschillende manieren beschikbaar. Niet alle variabelen hoeven te worden aangepast, maar u kunt dit wel doen als u dat wilt. Zodra u hebt besloten welke variabelen u wilt wijzigen, kunt u alleen die variabelen wijzigen en de rest van de parameters ongewijzigd laten.

Hier zijn de vijf CSS-variabelen, waarbij de standaardwaarden voor elke variabele in rood worden weergegeven.

De achtergrondkleur van de sticky is #0e41e5 en de hoogte van de header is 90px. Andere stijlopties zijn: dekking van 0,90, verkleining van 0,80, dekking van 0,90 en gemak-in/uit-overgang van 300 ms.

De aangepaste eigenschappen zijn de elementen die verschijnen na het dubbele streepje “–” in onze amp , en u kunt ze bovenaan onze amp vinden. Het enige dat nodig is, is het aanpassen van de waarde die na de dubbele punt en vóór de puntkomma in de zin verschijnt.

Als u amp de hoogte van de header wilt verhogen naar 100px, ziet u hier hoe deze eruit zou zien voor en na het wijzigen van de hoogte:

Voorheen was de headerhoogte 90 pixels; daarna was de headerhoogte 100 pixels.

Met Elementor kunt u op verschillende manieren een sticky header-menu ontwerpen. Je kunt niet alleen een gratis Elementor sticky header maken, maar je kunt de header ook personaliseren door er aangepaste CSS aan toe te voegen. Het is mogelijk om gedetailleerde instructies te krijgen over hoe u een afnemende sticky Elementor-header kunt maken met behulp van Elementor en hoe u uw CSS kunt aanpassen met deze stapsgewijze handleiding.

Elementor bevat een verscheidenheid aan headersjablonen; elk is onderscheidend en elegant en helpt uw ​​kijkers bij het navigeren op uw website.

Met Elementor heeft u volledige controle over de stijl van uw websiteheaders. U kunt amp het sitelogo in het midden van de pagina plaatsen en het hoofdmenu eronder. U kunt een koptekst boven de hoofdkop toevoegen om het telefoonnummer, links naar sociale media en andere informatie weer te geven.

Hier zijn slechts enkele amp van de talrijke opties voor headerontwerp die beschikbaar zijn voor Elementor-gebruikers.

Conclusie

Als u een sticky header op uw website plaatst, kunnen bezoekers uw site gemakkelijk bezoeken en kunt u het aantal klikken naar alle delen van uw site verhogen.

Elementor elimineert de noodzaak om handmatig sticky headers te genereren met Javascript en CSS, wat voorheen vereist was. Het maken van een sticky header voor uw website is nog nooit zo eenvoudig geweest als nu, dankzij de sticky headers van Elementor.