Hoe plakkerige kop- en scrolleffecten te gebruiken met Elementor

Een koptekst is over het algemeen het eerste wat een persoon ziet wanneer ze uw website bezoeken, en het dient als basis voor hoe ze uw website verkennen.

Of u nu een eCommerce-website, een persoonlijke website, een website voor het onderwijs, een communityforum of een website voor de media heeft, de header maakt het eenvoudig om te bladeren en plezierig in het gebruik.

Sticky 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 je sticky header kunt maken met Elementor.

Met plakkerige kopteksten kunnen gebruikers de koptekst en menusectie van de pagina bekijken, ongeacht hoe ver ze naar beneden scrollen.

• Stap 1: een menu maken
• Stap 2: Uw koptekst maken in Elementor
• Stap 3: Elementor gebruiken om een ​​kopsjabloon 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 je website toe te voegen, ga je naar wp-admin > Uiterlijk > Menu's en maak je een Hoofdmenu. Typ in de koptekst de sectie die u wilt weergeven.

Stap 2: Uw koptekst maken in Elementor

Ga naar Elementor Templates > Theme Builder als je klaar bent met het samenstellen van het hoofdmenu. Selecteer het koptekstgebied op de themabouwerpagina en klik op " Nieuwe koptekst toevoegen ".

Geef de header-sjabloon een naam en klik op " Sjabloon maken " in het pop-upscherm.

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

We beginnen helemaal opnieuw met onze Elementor sticky header in deze tutorial.

Je kunt verschillende header-widgets zien in de Elementor-editor voordat we beginnen met het ontwerpen van een sjabloon. Met behulp van deze secties kunnen we snel en eenvoudig een koptekst ontwerpen.

Stap 3: Elementor gebruiken om een ​​kopsjabloon te maken

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

In de Inhoudsbreedte-instellingen in Elementor Bewerken Sectie, Stel de eerste kolombreedte in op 20% onder de " Bewerken " Kolom.

Plaats het sitelogo 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 u in stap 1 hebt gebouwd. Lijn het navigatiemenu naar rechts uit.

We gaan de koptekst eenvoudig houden voor deze zelfstudie. U kunt uw kop 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 elementaire Elementor-header hebben gemaakt, is het tijd om er een Sticky-header van te maken.

Ga hiervoor naar het gedeelte Bewerken (Gehele koptekstgedeelte). Selecteer Geavanceerd > Bewegingseffecten in het vervolgkeuzemenu.

Selecteer " sticky to the Top " onder bewegingseffecten en vervolgens " apparaten " waar je de sticky header wilt laten verschijnen.

Een plakkerige header is bijna altijd ongewenst op apparaten van tabletformaat, en het is ook bijna altijd ongewenst op mobiele schermen. Klik daarom op de "x" naast beide opties onder Sticky On, zodat alleen "Desktop" is geselecteerd.

Als je tevreden bent met je werk, klik je op “ Publiceren ”; dit activeert de sticky header, maar vervangt op dit moment niet je huidige thema-header.

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

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

Zoals je kunt zien, is het eenvoudig en pijnloos om Elementor te gebruiken om je gepersonaliseerde Sticky-header te maken!

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

U kunt hier de hoogte, achtergrondkleur, overgang en plakeffecten van de plakkerige koptekst aanpassen.

Keer terug naar het gebied Bewerken om uw plakkerige kop stijlvoller te maken (hele koptekstgedeelte). Selecteer Geavanceerd > Bewegingseffecten in het vervolgkeuzemenu.

Stel in dit geval de " Effects Offset " in op 100. Wanneer een bezoeker uw website gebruikt, is dit de scrollafstand waar 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 plakkoptekst publiceert, kunt u optioneel voorwaarden toevoegen aan de laatste plakkoptekst. Een amp is waar u wilt dat de plakkerige koptekst wordt weergegeven. bijvoorbeeld amp ' hele site ' kiezen.

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 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 Algemene stijl.
• Selecteer Aangepaste CSS in het vervolgkeuzemenu in die sectie (de kleur verandert in blauw van de vorige genetische rode kleur).

Plak daarna de onderstaande CSS-code in.

header.sticky-header { --header-hoogte: 90px; --ondoorzichtigheid: 0,90; --shrink-me: 0,80; --sticky-achtergrondkleur: #0e41e5; --overgang: .3s gemak-in-uit; overgang: achtergrondkleur var(--overgang), achtergrondafbeelding var(--overgang), achtergrond-filter var(--overgang), dekking var(--overgang); } header.sticky-header.elementor-sticky--effecten { background-color: var(--sticky-background-color) !important; achtergrondafbeelding: geen !belangrijk; dekking: var(--dekking) !belangrijk; -webkit-achtergrondfilter: vervagen (10px); achtergrond-filter: 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; hoogte: calc(var(--header-height) * var(--shrink-me)); } header.sticky-header .elementor-nav-menu .elementor-item {transitie: padding var(--transition); } header.sticky-header.elementor-sticky--effecten .elementor-nav-menu .elementor-item { padding-bottom: 10px!important; padding-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 leiden u door het proces van het maken van een afnemende sticky header in Elementor. Als u meer details wilt weten over hoe u de koptekst verder kunt personaliseren, kunt u de onderstaande CSS-code bekijken, zodat u creatiever kunt zijn met het ontwerp van de koptekst. Afhankelijk van uw behoeften, kunt u de plakkerige header van Elementor personaliseren door verschillende instellingen te wijzigen en deze min of meer plakkerig 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 zijn toegankelijk vanaf verschillende systemen, waaronder Windows, Mac OS X en Linux.

Deze sectie laat zien hoe u de effecten van de Elementor-krimpende koptekst kunt aanpassen met behulp van het CSS-stijlblad. Als u slechts één wijziging aanbrengt in de aangepaste eigenschap, wordt deze onmiddellijk gewijzigd zodat deze overeenkomt met de rest van de CSS-code.

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

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

De plakkerige achtergrondkleur is #0e41e5 en de kophoogte is 90px. Andere stijlopties zijn onder meer: ​​dekking van 0,90, krimp van 0,80, dekking van 0,90 en een gemakkelijke overgang van 300 ms.

De aangepaste eigenschappen zijn de elementen die verschijnen na het dubbele streepje “–” in onze amp , en u vindt ze bovenaan onze amp . Het enige dat nodig is, is de waarde die na de dubbele punt en vóór de puntkomma in de zin wordt weergegeven, aan te passen.

Voor ex amp le, als je wilt om de hoogte van de header om 100px verhogen, hier is hoe het eruit zou zien voor en na het veranderen van de hoogte:

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

Met Elementor kun je op verschillende manieren een sticky header-menu ontwerpen. U kunt niet alleen een gratis Sticky-header van Elementor maken, maar u kunt de header ook personaliseren door er aangepaste CSS aan toe te voegen. Het is mogelijk om gedetailleerde aanwijzingen te krijgen voor het maken van een afnemende sticky Elementor-header met Elementor en om je CSS aan te passen met deze stapsgewijze handleiding.

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

Met Elementor heb je volledige controle over de stijl van de headers van je website. U kunt bijvoorbeeld het amp in het midden van de pagina plaatsen en het hoofdmenu eronder. U kunt een koptekst boven de hoofdkoptekst toevoegen om het telefoonnummer, links naar sociale media en andere informatie weer te geven.

Hier zijn slechts enkele amp van de talrijke ontwerpopties voor headers die beschikbaar zijn voor Elementor-gebruikers.

Conclusie

Door een plakkerige koptekst op uw website op te nemen, kunnen bezoekers uw site gemakkelijk doorkruisen en meer klikken naar alle delen van uw site genereren.

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