De kop van a website is het eerste stuk informatie dat wordt waargenomen door bezoekers van uw website. Hiermee kunt u uw merklogo benadrukken, de pagina's van uw site ordenen en andere belangrijke functies bieden (zoeken, verbinding maken, enz.). Daarnaast is het hebben van een zwevende en transparante koptekst noodzakelijk omdat dit de gebruikerservaring verbetert.

In dit artikel laten we je zien hoe je een header maakt en transparant maakt met Elementor. Maar eerst zullen we zien wat een zwevende en transparante koptekst is.

Wat is een zwevende en transparante koptekst?

Een zwevende koptekst is een navigatiebalk die altijd vast blijft staan, zelfs wanneer de bezoeker naar beneden scrolt op de webpagina. Het is zeer geschikt voor sites met pagina's met lange artikelen, recensies en sites van één pagina. En dankzij het transparante aspect kunt u zowel de achtergrondkleur van de pagina als de inhoud ervan zien.

Waarom zwevende en transparante kopteksten gebruiken?

Moderne websites gebruiken steeds vaker zwevende en transparante headers omdat deze een visuele impact hebben op de bezoekers van de website. De redenen om ze aan te nemen zijn gericht op:

• Vergroot de naamsbekendheid van uw merk,
• Boost de gebruikerservaring,
• Verbeter de navigatie

Ontdek ook Hoe maak je een tweekleurige titel in Elementor

Pin en maak een header transparant met Elementor

Om een ​​transparante en zwevende koptekst te maken, moet u beide versies van . hebbenElementor (Pro en Lite). Download anders de (Elementor, Elementor Pro) voor het starten.

Volg na installatie de volgende stappen.

Stap 1: maak een menu met Elementor

Volg deze stappen om een ​​menu te maken:

• achtereenvolgens selecteren Uiterlijk >> Menu's
• Geef het menu een naam
• Geef de locatie van het menu aan
• Bevestig door op de knop te klikken menu opslaan

• Controleer de pagina's, artikelen of berichten in de groep Items toevoegen aan het menu
• Klik op Voeg toe aan winkelwagen om de gemarkeerde items aan het menu toe te voegen
• Klik ten slotte op Sla het menu op

Lire aussi Elementor: tekst boven een afbeelding weergeven

Stap 2: Selecteer Header-sjabloon uit Elementor-sjabloonbibliotheek

gebruikers vanElementor Pro heeft toegang tot een bibliotheek met kant-en-klare sjablonen die handig zijn voor het ontwerpen van verschillende secties van een Site web. U vindt hier ook een verscheidenheid aan header-sjablonen. Om dit te doen,

• Ga achtereenvolgens naar Modellen >> Toevoegen

• U ziet een modale pop-up
• Selecteer hoofd
• Klik ten slotte op Maak een sjabloon

Vanaf dan wordt de bibliotheek getoond. Standaard toont het koptekstblokken. Blader door de aangeboden sjablonen en voeg vervolgens de sjabloon in die u interesseert.

De kopsjabloon wordt geopend in het Elementor-canvas.

Stap 3: Pin header met Elementor

Volg deze stappen om de koptekst vast te zetten:

• Klik op de knop Koptekstsectie bewerken
• Selecteer vervolgens het tabblad avancé
• Vervolgens Bewegingseffect

• Open het menu Pin en selecteer de waarde Aan de top, bevriest dit de koptekst van uw site terwijl de bezoeker door de pagina's scrolt.
• Standaard wordt de kop automatisch vastgezet op media zoals desktop, tablet en mobiel

Blader ook door Elementor: sjablonen exporteren en importeren

Stap 4: Maak koptekst transparant met Elementor

Herhaal hiervoor de onderstaande methode:

• gaan naar stijl >> achtergrond >> kleurkiezer

• Wijzig vervolgens de dekking van de achtergrond

Als u de koptekst volledig transparant wilt maken, wijzigt u het achtergrondtype door het type te selecteren klassiek. Daarom zijn de navigatiemenu's onzichtbaar vanwege het tekstkleurcontrast (wit).

Ga als volgt te werk om deze situatie te verhelpen:

• Klik achtereenvolgens op Wijzig Menu van bladeren >> stijlen
• dan op de kleur kiezer
• Kies de gewenste kleur (in ons geval was het niet nodig om deze te wijzigen).

Als u klaar bent, kunt u uw webpagina publiceren. Maar laten we eerst eens kijken hoe we de navigatiemenu's in onze sjabloon kunnen vervangen door degene die we hebben gemaakt. Onthoud dat de naam die aan onze is toegewezen is kopmenu (zie stap 1):

• Selecteer het tabblad inhoud
• Pas dan de aan MENU door de naam van uw koptekst te selecteren

En daar ga je :).

Conclusie

Transparante en zwevende headers kunnen in verschillende gevallen nuttig voor u zijn. We hopen dat dit artikel aan uw behoeften heeft voldaan over het maken van transparante en zwevende headers met Elementor. Als je nog andere zorgen hebt over dit onderwerp, laat het ons dan weten in de comments.