De startpagina bewerken met Elementor: modules toevoegen (tekst, afbeeldingen, knoppen, etc.)

Het leren toevoegen van basismodules is een essentiële vaardigheid voor het ontwerpen van pagina's met Elementor. In deze sectie wordt u stap voor stap uitgelegd hoe u veelgebruikte elementen, zoals tekst, afbeeldingen en knoppen, kunt toevoegen en hoe u de stijl hiervan kunt aanpassen om uw startpagina vorm te geven.

Voorbereiding: Ga naar de bewerkingsmodus van Elementor.

1. Log in op de WordPress-back-end, ga naar 'Pagina's' en zoek naar 'Home' (of de pagina die je wilt bewerken) en klik op 'Bewerken'.
2. Klik op de knop 'Bewerken met Elementor' (blauw, met het Elementor-pictogram) boven aan de pagina om toegang te krijgen tot de visuele bewerkingsinterface.

Na het inloggen is de interface onderverdeeld in drie delen:

• Aan de linkerkant: het modulepaneel.(Inclusief alle elementen die kunnen worden toegevoegd)
• Midden: bewerkingsgebied(De effecten van de pagina worden in realtime weergegeven)
• Aan de rechterkant: het stijlpanel.(Nadat je het element hebt geselecteerd, kun je de detailsstijl aanpassen)

De eerste stap: voeg de module 'Titel' toe (teksttitel)

De kop is het 'raamwerk' van de pagina en helpt bezoekers het hiërarchische overzicht van de inhoud te begrijpen.

1. Zoek de titelmodule.In het linkerdeelvenster van de module vind je de module 'Titel' onder de categorie 'Basis' (met het pictogram 'T').
2. Slepen en neerzetten om toe te voegen aan de paginaHoud de 'Titel'-module ingedrukt en sleep deze naar de positie '+ Element hierheen slepen' in het middelste bewerkingsgebied. Laat de muisknop los. Er verschijnt dan een standaardtitel op de pagina: 'Dit is de titel'.
3. Wijzig de inhoud van de titel.Selecteer de net toegevoegde titelmodule en er verschijnt een bewerkingspaneel aan de rechterkant:
   • In 'Inhoud' → 'Titeltekst' verwijder je de standaardtekst en voer je je eigen titel in (bijvoorbeeld 'Welkom op mijn persoonlijke blog').
   • Selecteer het niveau in de 'Kopniveaus' (H1 is het hoogste niveau, geschikt voor hoofdkoppen; H2 is het tweede niveau, geschikt voor onderkoppen, afhankelijk van de hiërarchie van de inhoud).
4. De titelstijl aanpassenKlik op het tabblad 'Stijl' in het rechterpaneel om dit aan te passen:
   • Het lettertypeSelecteer het gewenste lettertype in het drop-downmenu 'Lettertype' (bijvoorbeeld 'Microsoft YaHei' of 'Arial').
   • MaatVerplaats de schuifregelaar 'Lettergrootte' of voer direct een waarde in (het wordt aanbevolen om de titelgrootte tussen 24 en 48 px te houden).
   • KleurKlik op het vakje 'Tekstkleur' en selecteer een kleur voor de titel (bijvoorbeeld zwart of donkerblauw).
   • AanpassenKlik op de knop 'Tekst uitlijnen' en stel de titel in op links, middenin of rechts (voor de hoofdtitel op de startpagina wordt middenin aanbevolen).

De tweede stap: voeg de module 'Paragraaf' toe (tekst van het hoofdgedeelte)

Paragrafen worden gebruikt om gedetailleerde informatie weer te geven, zoals een introductie, uitleg, etc.

1. Voeg een paragraafmodule toe.Zoek de module 'Paragraaf' (met het pictogram van een paragraaf) in de categorie 'Basis' aan de linkerkant en sleep deze naar beneden, onder de titelmodule.
2. Wijzig de inhoud van de paragraaf.Selecteer de paragraafmodule en voer de inhoud in onder 'Inhoud' → 'Tekst' aan de rechterkant (bijvoorbeeld: 'Hier deel ik mijn levenswijsheden en studieopmerkingen. Voel je vrij om hier regelmatig een bijdrage te leveren!').
3. Het optimaliseren van de stijl van een paragraaf.Switch naar het tabblad 'Stijlen':
   • De lettergrootteHet wordt aanbevolen om dit op 16-18 px in te stellen (om het gemakkelijk leesbaar te maken).
   • De rijhoogteAanpassen naar 1,5-1,8 keer (voor een comfortabele tussenruimte tussen de tekstregels).
   • KleurKies een kleur die verschilt van de titel (bijvoorbeeld donkergrijs), zodat deze niet te veel op de achtergrondkleur lijkt.

De derde stap: voeg de module 'Afbeeldingen' toe (afbeeldingen invoegen)

Afbeeldingen maken een pagina levendiger. Het is raadzaam om duidelijke, relevante afbeeldingen te selecteren (zoals persoonlijke foto's, productafbeeldingen of landschapsfoto's).

1. Upload of selecteer een fotoZoek de module 'Afbeeldingen' in de categorie 'Basis' aan de linkerkant en sleep deze naar beneden, onder de paragraaf. Selecteer de module 'Afbeeldingen' en klik op 'Afbeelding selecteren' in 'Inhoud' → 'Afbeeldingen' aan de rechterkant:
   • Als de afbeelding al op je computer is opgeslagen, klik je op 'Bestand uploaden', selecteer je de afbeelding en klik je op 'Selecteren'.
   • Als je ze eerder hebt geüpload, selecteer je de bestaande afbeeldingen in de 'mediabibliotheek'.
2. Het aanpassen van de weergave van afbeeldingen.Switch naar het tabblad 'Stijlen':
   • MaatIn 'Breedte' stel je de verhouding van de afbeelding ten opzichte van de pagina in (bijv. 100% voor de volledige schermbreedte en 80% voor een smallere weergave).
   • Afgeronde hoeken: Sleep de schuifregelaar 'Kaderradius' om de randen van de afbeelding rond te maken (hoe hoger de waarde, hoe duidelijker de ronde randen).
   • SchaduwAls je 'Doosenschaduw' inschakelt, wordt er een lichte schaduw toegevoegd aan de afbeelding (waardoor de afbeelding meer diepte krijgt).
3. Voeg een beschrijving van de afbeelding toe (optioneel)Als je een beschrijving van de afbeelding invoert in 'Inhoud' → 'Alternatieve tekst' (bijvoorbeeld 'Mijn reisfoto's'), helpt dit zoekmachines de inhoud van de afbeelding te begrijpen en de SEO te verbeteren.

Stap 4: Voeg de module 'knoppen' toe (om klikken te stimuleren)

Knoppen worden vaak gebruikt om bezoekers te stimuleren om een actie te ondernemen, zoals 'Meer weergeven', 'Contact opnemen' of 'Nu kopen'.

1. \nToevoegingsknopmoduleZoek de 'Knoppen'-module in de categorie 'Basis' aan de linkerkant en sleep deze onder de afbeelding.
2. De knop-inhoud en de link instellenSelecteer de knopmodule in de 'Inhoud' aan de rechterkant:
   • Text: Voer de tekst van de knop in (bijvoorbeeld 'Bekijk mijn artikelen').
   • link (op een website)Klik op het invoerveld naast 'Dynamisch' en voer de linkadressen in (bijvoorbeeld het adres van je bloglijstpagina of externe links).
     • Als u naar een pagina binnen de site wilt linken, kunt u klikken op het pictogram 'Pagina selecteren' rechts van het invoerveld om de doelpagina rechtstreeks te selecteren.
3. Het ontwerp van de knopstijl.Ga naar het tabblad 'Stijlen' en maak opvallende knoppen:
   • KleurSelecteer 'Wit' voor de 'Tekstkleur' en selecteer een 'Felle kleur' (zoals blauw of oranje) voor de 'Achtergrondkleur', zodat deze past bij de hoofdkleur van de pagina.
   • MaatKies voor 'gemiddeld' of 'groot' bij 'knopgrootte', zodat de knop gemakkelijker te klikken is.
   • VormStel de 'randradius' in op 5-10 px (een lichte ronding ziet er mooier uit).
   • **Hover-effect**: Klik op het tabblad 'hover' en stel de kleur in die wordt weergegeven wanneer je met de muis over een object zweeft (bijvoorbeeld een donkere kleur), zodat de interactie nog duidelijker wordt.

Stap 5: Pas de tussenruimte tussen de modules aan (zodat de pagina er netter uitziet)

Als je meerdere modules toevoegt, kan er een probleem met te veel of te weinig ruimte ontstaan. In dat geval moet je de lay-out aanpassen:

1. Selecteer de moduleklikken op de rand van de module (waarna een blauwe rand verschijnt);
2. De buitenranden aanpassen.In het rechterpaneel, onder 'Geavanceerd' → 'Marges', stel je de afstand tussen de module en de boven- en onderste elementen in (bijvoorbeeld, stel 'Bovenmarge' op 30px om de afstand tot de bovenste module te vergroten).
3. Uniform uitlijnen: Houd het ingedrukt Ctrl De sleutel (of Command Als je meerdere modules tegelijk selecteert met de toets Shift, kun je klikken op de knop 'Uitlijnen' in de bovenste werkbalk (bijvoorbeeld 'Midden uitlijnen') om de elementen netter te ordenen.

Stap 6: Opslaan en voorvertonen

1. Het opslaan van wijzigingenKlik op de knop 'Bijwerken' in de linkerbenedenhoek van de pagina (het wordt aanbevolen om na elke wijziging direct op te slaan).
2. Het voorbeeld effectKlik op de knop 'Voorvertoning' in de linkerbovenhoek en selecteer 'Desktopvoorvertoning', 'Tabletvoorvertoning' of 'Mobiele voorvertoning' om het weergave-effect op verschillende apparaten te controleren (ervoor te zorgen dat de tekst op mobiele apparaten niet wordt overlapt en dat de afbeeldingen niet worden vervormd).

Tips voor beginners

• De modules kunnen meerdere keren worden toegevoegd: als je bijvoorbeeld meerdere alinea's of afbeeldingen nodig hebt, hoef je de betreffende module gewoon meerdere keren te slepen.
• Modulen verwijderen: Nadat je een module hebt geselecteerd, druk je op de toetsenbord. Delete Druk op de toets of klik op het pictogram van de prullenmand bovenin de module.
• Kopieer module: Nadat je een module hebt geselecteerd, kun je door op het pictogram 'Kopiëren' te klikken snel elementen met dezelfde stijl kopiëren (met de mogelijkheid om deze te bewerken).

Na de bovenstaande stappen beschik je over de basisvaardigheden om modules toe te voegen aan Elementor. Vervolgens kun je proberen modules toe te voegen als 'pictogrammen', 'scheidingslijnen' en 'lijsten' om je startpagina nog interessanter te maken!