Share on email
Share on whatsapp
Share on twitter
Share on linkedin
Share on facebook

Een fotogalerij toevoegen WordPress met Elementor Pro

Hoe maak je een fotogalerij op je website? Beelden zijn bepalend voor de uitstraling van je website. Onlangs heeft Elementor een nieuwe gallery widget uitgebracht van Elementor Pro. Hiermee hebben ze weer een extra WordPress plugin voor je website vervangen. De nieuwe galerij widget biedt namelijk tal van mogelijkheden!

fotogalerij wordpress elementor pro

Fotogalerij met filter

Om te beginnen kun je kiezen tussen een single of multiple galerij. Met de multiple galerij kun je meerdere galerijen toevoegen, waarbij automatisch filters boven de fotogalerij worden getoond. Een handige optie als je de fotogalerij wilt gebruiken om je portfolio te tonen. En goed om te weten: gebruik je een afbeelding in meerdere categorieën? Dan wordt deze in het volledige overzicht maar één keer getoond. Dat zit wel goed dus 🙂

fotogalerij toevoegen wordpress elementor pro widget

Opties voor filtering

Als je kiest voor de multiple galerij met filter kun je een aantal filteropties instellen. Zo kun je uitschakelen of je ook het filter ‘Alle’ wilt tonen of niet. De titel van ‘Alle’ aanpassen (erg fijn!), de stijl van de pointer aanpassen en een animatie effect toepassen voor het switchen tussen de filters.

Filteropties elementor pro fotogalerij

Layout stijlen voor fotogalerij

Als je een keuze hebt gemaakt voor een single of multiple galerij kun je de foto’s toevoegen en bepalen welke layout je wilt gebruiken. Zo kun je de galerij instellen op:

  • Regular: grid gebaseerd op een bepaald aspectratio
  • Masonry: behoud de afmetingen van de afbeelding en geef ze over de volledige breedte weer
  • Justified: stel een bepaalde hoogte in per rij en de afbeeldingen worden uitgerekt over de volledige breedte

Afhankelijk van de layout die je kiest heb je nog een aantal opties voor de layout:

  • Aantal kolommen: stel in over hoeveel kolommen je de afbeeldingen wilt tonen (bij masonry en grid layout)
  • Spacing: hiermee kun je instellen hoeveel witruimte je tussen de foto’s wilt
  • Rij hoogte: als je kiest voor de justified layout kun je instellen hoe hoog de rijen moeten zijn
  • Link: geef aan of en welke link je achter de foto wilt plaatsen (bv. een link naar het mediabestand)

Design opties fotogalerij

Zoals je gewend bent van Elementor, heeft ook deze Pro widget uitgebreide design mogelijkheden. Bepaal eenvoudig welke informatie je wilt tonen bij de afbeeldingen en op welke manier. Zo kun je de titel, caption, alt-beschrijving toevoegen bij de afbeelding. Ook de typografie en positionering van de content aanpassen voor alle apparaten. Uiteraard kun je ook de styling van al deze elementen weer eenvoudig aanpassen via het tabblad ‘Stijl’.

Elementor pro widget hover titel en caption

 

Sanne IJspeerd

Sanne IJspeerd

Sanne is eigenaar van SIJ Web. Ze ontwikkelt WordPress websites met Elementor en heeft een achtergrond in marketing- en communicatie.
Share on email
Share on whatsapp
Share on linkedin
Share on twitter
Share on facebook

Deze post heeft 2 reacties

  1. hallo, kan je met Elementor foto’s vergroten als je met de muis aanklikt? Bvb je hebt allemaal kleine foto’s en je kan deze aanklikken in een rolvorm en dan wil ik deze vergroten zodat ik de deatils kan zien. Is dit mogelijk met Elementor?

  2. Hoi Patricia,

    Er zit een optie in Elementor waarmee een foto vergroot wordt weergegeven als je erop klikt. Je vindt deze optie als je de widget bewerkt, je ziet dan een optie Link. Deze staat standaard op none, maar hier kun je dan Media file selecteren (of een custom url). Dit geldt overigens niet alleen voor de fotogalerij widget, maar ook voor andere widgets waarin je afbeeldingen kunt plaatsen.

    Hopelijk geeft dit antwoord op je vraag!

    Groetjes,

    Sanne

Geef een reactie

Hulp nodig?

We helpen je graag! Stel hieronder je vraag:

Elementor Expert gezocht

tips ontvangen?

Schrijf je in voor onze nieuwsbrief!

We respecteren je privacy.
Je ontvangt max. 1 keer per maand een mail.