Je website wordt aantrekkelijk door een goed mix van tekst en afbeeldingen. Met je afbeeldingen kun je sfeer neerzetten, en zo laten zien wie je bent.
Aan de slag
Je hebt je pagina geopend met de Divi pagebuilder en je kunt nu klikken op de afbeeldingsmodule die je wilt bewerken. Klik op het tandwiel van het grijze vakje om de module instellingen te openen.
De imagemodule opties
De afbeeldingsmodule is verdeeld in drie groepen: Content, Design en Advanced.
Het eerste tabblad content gebruik je voor het wijzigen van de afbeelding en alles wat er met de afbeelding moet gebeuren.
In het tweede tabblad design kun je alle stylingsopties bepalen. Denk aan een gekleurd laagje over je afbeelding (overlay) of een rand om je afbeelding heen.
Het tabblad Advanced gebruik je voor geavanceerde instellingen zoals CSS en zichtbaarheid.
Klik op het groene vinkje om je wijzigingen in de module op te slaan.
Imagemodule Content opties
Image: Hier kun je je afbeelding wijzigen of uploaden vanuit de mediabibliotheek. Klik op het tandwiel in de afbeelding of klik op de afbeelding zelf om de mediabibliotheek te openen. Je kunt dan een plaatje kiezen uit je bibliotheek of iets uploaden van je computer.
- Tip: Geef de afbeelding een passend formaat en een passende omschrijving voor je deze upload.
Image Link URL: Wil je de afbeelding ‘klikbaar’ maken zodat een andere pagina opent wanneer je erop klikt? Dan kun je hier de link invoeren.
Open in Lightbox: Kies of je de afbeelding wilt uitvergroten wanneer erop wordt geklikt. Een leuke optie voor portfolio’s bijvoorbeeld. Standaard staat dit uit.
Image link target: Kies of je de link wilt openen in een nieuw tabblad van de webbrowser. Kies In the same window als de link verwijst naar een andere pagina binnen je eigen website. Kies In new tab als de link verwijst naar een pagina buiten je eigen website of wanneer je verwijst naar een PDF of document.
Admin label: Standaard krijgt deze module het label image. Hier kun je dat aanpassen als je dat wilt.
Voorbeeld van een ‘image overlay’ en de functie ‘open in lightbox
Imagemodule Design opties
In het tabblad Design options kun je de stylingsopties aanpassen. Iedere module heeft een scala aan design mogelijkheden.
Image overlay: Als je dit aanzet enable, kun je een kleur en icoon over de afbeelding leggen.
* De optie overlay komt alleen tevoorschijn als je in het tabblad Content > Link > Open in lightbox hebt aangezet.
Overlay icon color: Kies de kleur van het icoon.
Hover overlay color: Kies de kleur van het laagje wat je over de afbeelding legt.
Hover icon picker: Kies je icoon, bijvoorbeeld een + of →
Remove space below the image: Deze optie werkt alleen als de module de laatste in de kolom is. Het haalt de ruimte onder de afbeelding weg waardoor direct erna de volgende sectie begint.
Image alignement: Kies of je je afbeelding links, midden of rechts binnen de module wilt uitlijnen.
Zet de uitlijning voor mobiele telefoon altijd op centered voor een mooie weergaven.
Use border: Als je dit aanzet ‘enable’ krijg je opties te zien om een rand om je afbeelding te maken.
Border color: Kies de kleur van je rand.
Border width: Kies het aantal pixels van je rand.
Border style: Kies je soort lijn, door het venster te openen. Kies bijvoorbeeld voor een enkele, dubbele of gestippelde lijn.
Image max width: Standaard zal je afbeelding de breedte hebben van je kolom. Je kunt dit hier aanpassen naar bijvoorbeeld 50%.
Imagemodule Advanced opties
Hier kun je de o.a. de zichtbaarheid op verschillende apparaten instellen. Soms wil je bepaalde modules alleen laten zien op desktop of juist alleen op tablet en mobiele telefoon.
In het tabblad Advanced opties > Visibility kun je instellen voor welk apparaat de module zichtbaar is. Standaard staat dit ingesteld op zichtbaar voor desktop, tablet en mobiel en hoef je hier dus niets aan te veranderen.
Je kunt dit ook gebruiken wanneer je nog niet klaar bent met een module maar je deze wel wil opslaan om er een volgende keer mee verder te gaan. Zet de Visibility dan voor alle apparaten op niet zichtbaar en voilà, het staat er wel voor jou maar nog niet voor je bezoekers.
Tip: Bij iedere optie staat een ?, als je daarop klikt krijg je meer uitleg over de instellingen.