Hoe koptekst en voettekst te maken met de gratis versie van Elementor - DeLaatbusiness
leads chatbot

Hoe koptekst en voettekst te maken met de gratis versie van Elementor

4 min


126

De secties Header en Footer zullen vaak de prestaties van een site dicteren in termen van het genereren van leads, het ondersteunen van bezoekers of het gewoon een aangename sfeer geven aan de website. 

Niet alleen omdat ze beschikbaar zijn voor bijna elk onderdeel van de website, maar ook omdat ze de norm van internet zijn. Als u het e-mailadres of de link naar de contactpagina van een website niet in hun koptekst of voettekst vindt, is dat al een rode vlag voor slecht webontwerp.

De Elementor Page Builder stelt ons ook in staat om dat te doen, maar met behulp van een add-on genaamd Elementor Header, Footer & Blocks . Installeer het eerst voordat u aan deze tutorial begint.

headerfooter-tutorial-1

Dus nu je de plug-in hebt geïnstalleerd, kunnen we beginnen met deze tutorial!

Stap 1: Op het uiterlijk ziet u een nieuwe optie die verschijnt met de naam “Header Footer Builder”. Ga verder en klik erop.

headerfooter-tutorial-2

Stap 2: Klik bij het openen op “Nieuwe toevoegen” om een ​​nieuw blok te maken.

headerfooter-tutorial-3

Stap 3: We maken eerst de voettekst. Kies Voettekst bij “Type sjabloon”.

headerfooter-tutorial-4

Stap 4: Hierdoor wordt een paneel geopend dat op normale pagina’s lijkt. Zoek naar de knop “Bewerken met Elementor” en klik erop.

headerfooter-tutorial-5

Stap 5: Als je eenmaal op de visuele editor van Elementor bent, kies je het allereerste blok “Structuur”.

headerfooter-tutorial-6

Stap 6: Ga dan in de linkerzijbalk naar “Stijl” en stel de achtergrondkleur van de sectie in Stijl / Achtergrondtype / Klassiek.

headerfooter-tutorial-7

Stap 7: Klik met de rechtermuisknop op de sectie die u hebt gemaakt en voeg een binnenste sectie toe aan de kolom en voeg er nog een kolom aan toe.

headerfooter-tutorial-8

Stap 8: Maak uw gewenste inhoud voor deze blokken.

headerfooter-tutorial-9

Stap 9: Zoek vervolgens in de zijbalk Widgets-sectie naar “Zoeken” en sleep het naar uw sectie om een ​​zoekbalk te maken.

headerfooter-tutorial-10

Stap 10: Voeg een spacer toe onder de zoekbalk.

headerfooter-tutorial-11

Stap 11: Nu voeg je pictogrammen toe onder de spacer. Kies de socialemediapictogrammen die u wilt en ga naar Stijl en stel hun kleur in op wit, grootte op 30 pixels, en ga vervolgens naar Verder en stel margin-left in op 10. Zorg ervoor dat u geen waarden aan elkaar koppelt. ga dan naar aangepaste positionering nog steeds onder Geavanceerd en ga naar breedte en stel in op “Inline (auto)”.

Klik vervolgens op de derde kolom en stel in de lay-out Verticaal uitlijnen in het midden en Horizontaal uitlijnen in het midden in.

headerfooter-tutorial-12

Stap 12: Voeg nog een enkele kolom toe en stel de achtergrondkleur in op # 222222.

headerfooter-tutorial-13

Voeg vervolgens een kop voor copyright toe en stel de uitlijning in op het midden en de HTML-tag op “p” in de inhoud, ga dan naar stijlen en stel Kleur in op wit en de lettergrootte op 14.

Nu we een voettekst hebben, gaan we nu de koptekst maken.

Stap 13: Zelfde procedure als de voettekst, u maakt uw koptitel en stelt “Type sjabloon” in als koptekst, en klikt vervolgens op “Bewerken met Elementor” om de visuele editor te openen.

headerfooter-tutorial-14

Stap 14: Voeg opnieuw een nieuwe sectie toe en klik vervolgens op de eerste voor de enkele kolom.

headerfooter-tutorial-15

Stap 15: Voeg een binnenste sectie toe aan de sectie en klik met de rechtermuisknop op de sectie en voeg vervolgens nog een kolom toe.

headerfooter-tutorial-16

Stap 16: Voeg in het gedeelte Widgets een afbeelding toe aan het eerste gedeelte. Hier plaatsen we onze logo-afbeelding. Sleep de afbeeldingswidget naar de sectie.

headerfooter-tutorial-17

Stap 17: Laten we vervolgens Menu toevoegen aan de tweede kolom door de Nav Menu-widget te slepen.

headerfooter-tutorial-18

Stap 18: Klik op het Nav Menu dat je hebt toegevoegd in de tweede kolom en kies het menu dat je wilt. Het menu wordt aangemaakt bij de customizer.

headerfooter-tutorial-19

Stap 19: Stel op de zijbalk de uitlijning in als gecentreerd (de tweede).

headerfooter-tutorial-20

Stap 20:  Voeg nu een knop toe aan de laatste kolom.

headerfooter-tutorial-21

Stap 21: Stel de tekst van de knop in op “login” en stel de uitlijning naar rechts in.

headerfooter-tutorial-22

Nu is onze Header klaar!


What's Your Reaction?

hate hate
0
hate
confused confused
0
confused
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format