Het aanpassen van je website kan aanzienlijk worden beïnvloed door het gebruik van beeldmateriaal. Met de Afbeeldingen-Box in Elementor heb je de mogelijkheid om afbeeldingen samen met koppen en beschrijvingsteksten op een creatieve manier te presenteren. Laten we samen de belangrijkste stappen doornemen om deze functie effectief te benutten.
Belangrijkste inzichten
- De Afbeeldingen-Box maakt het mogelijk om afbeeldingen, koppen en teksten in te voegen.
- Je kunt afbeeldingen uit de mediabibliotheek of extern uploaden.
- HTML-elementen helpen bij de opmaak van tekst.
- Verschillen in het ontwerp van afbeeldingen zoals typografische eigenschappen en Hover-effecten zijn belangrijk.
Stap-voor-stap handleiding
1. Invoegen van de Afbeeldingen-Box
Je moet eerst de Afbeeldingen-Box toevoegen in je Elementor-editor. Je kunt het element direct uit de selectie in het nieuwe tabblad slepen en op de gewenste tekstlocatie van je website plaatsen. Dit geeft je een basisopmaak met ruimte voor een afbeelding, een kop en een beschrijvingstekst.
2. Afbeelding selecteren
Kies nu een afbeelding. Ga naar je mediabibliotheek of upload een nieuwe afbeelding. Zorg ervoor dat de afbeelding van goede kwaliteit is en optimaal gedimensioneerd is. Bij voorkeur moet deze niet groter zijn dan 200 MB om de laadtijd van je website niet te beïnvloeden.
3. Afmetingen van de afbeelding instellen
Om de weergave van de afbeelding aan te passen, kun je verschillende grootte-opties kiezen: Thumbnail, Medium, Groot of Origineel. Let op dat de gekozen afbeelding past bij het totale ontwerp van je pagina. Een te grote afstand door een ongeschikt beeldformaat kan de visuele indruk verminderen.
4. Titel opmaken
Ga naar het titelgebied van de Afbeeldingen-Box. Hier kun je de titel van je fotocollectie invoeren, zoals "Oostenrijkse vlag". Bedenk een pakkende kop die meteen opvalt.
5. Beschrijvingstekst toevoegen
Indien gewenst kun je ook een beschrijving onder de titel toevoegen. Dit is optioneel, maar een goede manier om je bezoekers meer informatie te bieden. Als de beschrijving lang is, moet je HTML-tags gebruiken om alinea's te creëren.
6. Tekst opmaken met HTML
Om een regelovergang binnen de tekst te creëren, moet je HTML-elementen gebruiken. Zo wordt bijvoorbeeld de tag
gebruikt om een regelovergang te maken. Zoek online naar HTML-codes als je meer wilt weten over tekstopmaak.
7. Link toevoegen
Je kunt ook links toevoegen in verband met de afbeelding. Dit kan linken naar je algemene pagina's of specifieke inhoud zoals je YouTube-kanaal. Zorg ervoor dat de link correct is ingevoerd, zodat gebruikers er direct toegang toe hebben.
8. Afbeeldingspositie en uitlijning
Je kunt nu de plaatsing van de afbeelding in de box bepalen: links, rechts of gecentreerd. Informeer je ook over de typografie voor de titel en beschrijving, zodat het lettertype er uitnodigend uitziet voor je bezoekers.
9. Stijl aanpassen
In het gedeelte Stijlopties kun je de achtergronden van afbeeldingen en tekst, marges en de randradius instellen. Houd er rekening mee dat het aanpassen van de randradius de afbeelding kan afronden en een elegantere uitstraling kan geven.
10. Hover-effecten configureren
Bepaal hoe de afbeeldingen moeten reageren wanneer de gebruiker er met de muis overheen beweegt. Je hebt de mogelijkheid om animaties toe te voegen, zoals het iets vergroten van de afbeelding of de dekking te wijzigen. Dergelijke effecten dragen bij aan de gebruikerservaring van je website en maken deze dynamischer.
11. Typografie instellen voor titel en beschrijving
Tenslotte kun je de typografie voor de titel en de beschrijving aanpassen. Experimenteer met verschillende lettertypen en kleuren om het ontwerp van je website te verbeteren. Hierdoor wordt de tekst leesbaarder en visueel aantrekkelijker.
Samenvatting
De afbeeldingen-box in Elementor biedt veelzijdige mogelijkheden voor het tonen van beeldinhoud. Je kunt creatief werken en tegelijkertijd de gebruikerservaring verbeteren. Door geschikte opmaak, hover-effecten en aansprekende links maak je je afbeeldingen nog interessanter.
