Maak een krimpende plakkerige kop met Elementor

Wil je een header maken die kleiner wordt naarmate de pagina wordt geladen? Als een bezoeker naar beneden scrolt op de pagina, zal een kleiner wordende header een leuk effect zijn om indruk te maken op de bezoeker. Zelfs als u niet van plan bent dit effect te gebruiken, is het de moeite waard om na te denken of het een goede aanvulling op uw website zou zijn.

Hier leren we u precies hoe u Elementor Pro kunt gebruiken om de koptekst van uw WordPress-site te verkleinen. Met behulp van aangepaste CSS laten we u precies zien wat u moet doen om de klus te klaren.

Wat is een krimpende header?

Een kleiner wordende koptekst is exact dezelfde kop die u ziet wanneer een website verschijnt, maar wordt een beetje kleiner wanneer u begint te scrollen. Om te beginnen is er een standaard bovenkop. De kop zal "krimpen" als de gebruiker naar beneden scrolt op de pagina, en je kunt aanpassen hoeveel het krimpt en hoe doorschijnend het wordt.

Hoewel het kleiner wordt, is de koptekst er nog steeds wanneer u naar beneden scrolt. Er zijn verschillende opties, zoals het volledig begraven van de koptekst en deze pas onthullen wanneer de gebruiker weer omhoog scrolt.

Maak geweldige websites

Met de beste gratis paginabuilder Elementor

Begin nu

Een krimpende koptekst maken

Als je je premadeheader klaar hebt, ben je klaar om te gaan. De rest van het bericht zal je helpen om het te verkleinen. Je hebt veel aangepaste CSS nodig. We geven u echter de code die u nodig heeft en laten u zien hoe u deze kunt wijzigen zodat deze overeenkomt met uw site.

Bewerken met Elementor

Bewerk om te beginnen de header-sjabloon met Elementor Theme Builder.

Om je header-sjabloon te bewerken met Elementor, ga je naar Templates Theme Builder in je WordPress-dashboard en selecteer je Bewerken met Elementor.

Basis CSS-huishouding

U moet uw koptekst een beetje opschonen voordat u de CSS-code toepast die u in de volgende secties zult zien.

De eerste stap is om toegang te krijgen tot de instellingen van het kopgedeelte. Stel de vervolgkeuzelijst HTML-tag in op de koptekst op het tabblad Indeling.

Er mag geen minimale hoogte zijn en de verticale uitlijning moet in het midden op het tabblad Opmaak worden ingesteld.

Ga naar het tabblad Geavanceerd en wijzig de CSS-klasse van de koptekst in stick-header.

Open ten slotte de afbeeldingswidget met uw logo en selecteer de optie Geavanceerd in het vervolgkeuzemenu. Voer vervolgens in het gebied CSS-klassen van uw logo-afbeelding logo in:

Bewegingseffecten om je header te laten plakken

De Motion Effects-functionaliteit van Elementor kan worden gebruikt om uw kop boven aan de pagina te houden terwijl kijkers naar beneden scrollen.

U krijgt toegang tot de koptekstinstellingen van de sectie door erop te klikken. Klik daarna op de pagina Geavanceerd en bekijk de opties voor Bewegingseffecten

• Stel dat Top is geselecteerd onder Sticky in het vervolgkeuzemenu.

• Verwijder alle andere apparaten die niet worden vermeld in het vak "Sticky On".

• De Effects Offset moet worden ingesteld op 90 (de hoogte van uw kop).

Aangepaste CSS

De laatste stap voordat we klaar zijn, is het toevoegen van de aangepaste CSS-code. Dit is de basiscode die je gaat gebruiken. We zullen in de volgende secties bespreken hoe u het kunt aanpassen:

De volgende CSS-code zal:

• Om toegang te krijgen tot het hamburgermenu, gaat u naar de linkerbovenhoek van de Elementor-interface en klikt u erop.

• Themastijl kan worden geselecteerd in het vervolgkeuzemenu Globale stijl.

• Selecteer Custom CSS (het zal blauw zijn in plaats van het "gewone" Elementor rood zodra de Theme Style-interface is geopend)

/***
* class: .sticky-header
*/
header.sticky-header {
	--header-height: 100px;
	--shrink-header-to: 0.6;
	--transition: .45s cubic-bezier(.4, 0, .2, 1);
	background-color: rgba(244, 245, 248, 1);
	transition: background-color var(--transition),
				backdrop-filter var(--transition),
				box-shadow var(--transition);
}

/***
* Sticky header activated
*/
header.sticky-header.elementor-sticky--effects {
	background-color: rgba(244, 245, 248, .8);
	box-shadow: 0px 4px 33px 1px rgba(0, 0, 0, .07);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
}
header.sticky-header > .elementor-container {
	min-height: var(--header-height);
	transition: min-height var(--transition);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
	min-height: calc( var(--header-height) * var(--shrink-header-to) );
}

/***
* Shorter header on mobile (70px instead of 100px)
*/
@media only screen and (max-width: 767px) {
	header.sticky-header {
		--header-height: 70px;
	}
}

/***
* class: .logo
*/
header.sticky-header .logo img {
	transition: transform var(--transition);
}
header.sticky-header.elementor-sticky--effects .logo img {
	transform: scale(.8);
}

CSS aanpassen

Deze CSS kan worden aangepast om aan uw specifieke behoeften te voldoen, dus laten we eens kijken hoe u dat nu kunt doen. Het gebruik van een code-editor zoals Visual Studio Code of Atom wordt aanbevolen boven het rechtstreeks bewerken van CSS in de Elementor-interface. Windows-, Mac- en Linux-gebruikers kunnen allemaal profiteren van deze open-source-editors.

Aangepaste CSS-eigenschappen zijn onze favoriete tool (of CSS-variabelen). Met deze bedieningselementen kunt u het afnemende kopteksteffect verfijnen. Als u een enkele wijziging aanbrengt in een aangepaste eigenschap, wordt de volledige CSS-code bijgewerkt om die wijziging weer te geven.

Er zijn in totaal vijf factoren die u kunt aanpassen. Je hoeft ze niet eens te veranderen als je – niet wilt, houd ze gewoon zoals ze zijn als je de manier waarop ze werken leuk vindt!

Om u te helpen, hebben we de vijf CSS-variabelen en hun standaardwaarden hieronder opgenomen:

• –header-hoogte: 90px;
• –opaciteit: 0,90;
• –shrink-header-naar: 0,80;
• –sticky-achtergrondkleur: #0e41e5;
• –overgang: 300ms gemak-in-uit;

Als je naar onze voorbeeldcode kijkt, zul je merken dat we een paar aangepaste eigenschappen hebben toegevoegd in plaats van het dubbele streepje "–". Na de dubbele punt en vóór de puntkomma hoeft u alleen nog een kleine bewerking uit te voeren.

Het wijzigen van de kopteksthoogte naar 100px, bijvoorbeeld, ziet er voor en na als volgt uit:

• Voor : –header-hoogte: 90px;
• Na : –header-hoogte: 100px;

Laten we kennismaken met deze variabelen.

Kleverige achtergrondkleur (--kleverige-achtergrondkleur)

De achtergrondkleur van de "gekrompen" kop, die wordt weergegeven wanneer bezoekers naar beneden scrollen, wordt bepaald door de eigenschap Sticky Background Color. Het wijzigen van de kleur hoeft niet overeen te komen met de kleur van uw koptekst als u daar niet de voorkeur aan geeft.

In de sjabloon Digitaal Agentschap heeft de achtergrond van de koptekst bijvoorbeeld eerst een verloop. De kleur van de koptekst wordt effen blauw als bezoekers naar beneden scrollen en de koptekst wordt kleiner (u kunt dit vanaf het begin in de voorbeeldvideo zien).

Header Hoogte (--header-height)

In Elementor bepaalt het Header Height-attribuut de hoogte van je header - het moet overeenkomen met de hoogte van je header-sectie. Dit instellen op 90px was een mooi beginpunt in de instructie.

Als u echter besluit de hoogte te wijzigen, moet u dit zowel in de CSS-eigenschap als in de instellingen van de koptekstsectie doen.

Om problemen met het verkleinende effect te voorkomen, pleiten we niet voor kopteksthoogten van meer dan 100px.

Dekking (--dekking)

De mate waarin uw afnemende koptekst doorschijnend is, wordt bepaald door de eigenschap Dekking:

• 0 betekent dat de koptekst onzichtbaar is.

• 1 betekent dat er helemaal geen koptekst zichtbaar is (geen transparantie)

De dekking is in onze voorbeeldcode ingesteld op 0,9, waardoor deze bijna volledig ondoorzichtig is. Dit nummer kan naar uw wensen worden gewijzigd. Verlaag de waarde naar nul om het duidelijker te maken.

Header verkleinen naar (--shrink-header-to)

Wanneer een bezoeker naar beneden begint te scrollen, bepaalt het Shrink Me-attribuut hoeveel uw koptekst en logo zullen krimpen. Dit betekent dat uw koptekst en logo bijvoorbeeld worden verkleind tot 80% van hun oorspronkelijke grootte.

Overgang (--overgang)

Als het overgangskenmerk is ingesteld op 'verkleind', wordt de kop kleiner van de oorspronkelijke grootte naar die waarde.

Het is het beste om iets te laten zoals het is, maar je hebt de mogelijkheid om het indien nodig te wijzigen.

Dus de bijgewerkte CSS voor de krimpende koptekst zal zijn -

header.sticky-header {
	--header-height: 100px; /* Set your own header height */
	--shrink-header-to: 0.6; /* Shrinks to 60%, values: 0.1 to 1 */
	--transition-timing: .45s cubic-bezier(.4, 0, .2, 1); /* values: .1s to 0.5s (or more), replace "cubic-bezier(.4, 0, .2, 1)" with "ease" if you need a simpler transition */
	background-color: rgba(244, 245, 248, 1); /* Set your own background color */

	transition: background-color var(--transition-timing),
				backdrop-filter var(--transition-timing),
				box-shadow var(--transition-timing);
}
header.sticky-header.elementor-sticky--effects {
	background-color: rgba(244, 245, 248, .8); /* Set your own background color on scroll */
	box-shadow: 0px 4px 33px 1px rgba(0, 0, 0, .07); /* Delete this line if you don't want shadow on scroll */
	-webkit-backdrop-filter: saturate(180%) blur(20px); /* Delete this line if you don't use transparency on scroll */
	backdrop-filter: saturate(180%) blur(20px); /* Delete this line if you don't use transparency on scroll */
}
header.sticky-header > .elementor-container {
	min-height: var(--header-height);
	transition: min-height var(--transition-timing);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
	min-height: calc( var(--header-height) * var(--shrink-header-to) );
}

/***
* class: .logo
* Add the class "logo" to your logo to scale your logo to 80% on scroll
*/
header.sticky-header .logo img,
header.sticky-header .logo.elementor-widget-theme-site-logo img,
header.sticky-header .logo .elementor-icon svg {
	transition: transform var(--transition-timing);
}
header.sticky-header.elementor-sticky--effects .logo img,
header.sticky-header.elementor-sticky--effects .logo.elementor-widget-theme-site-logo img,
header.sticky-header.elementor-sticky--effects .logo .elementor-icon svg {
	transform: scale(.80); /* Shrinks logo to 80%, values: 0.10 to 1 */
}
header.sticky-header .logo .elementor-icon svg {
	width: auto;
}

Gedachten beëindigen

Het is heel gemakkelijk om met Elementor te werken, aangezien het een van de meest gewilde paginabuilders is geworden voor talloze webontwikkelaars over de hele wereld. Het hebben van zo'n interactief ontwerp zal meer bezoekers naar uw site trekken. Als je vragen hebt, stel ze gerust. We hebben een groot aantal Elementor-tutorials op onze site, bekijk ze en laat ons weten wat we nu moeten behandelen.