Maak zelf een Elementor Gallery Widget met Unlimited Elements

Ik heb je eerder al eens verteld hoe je Unlimited Elements kan gebruiken om zelf widgets voor Elementor te maken. In dit artikel ga ik een stapje verder en laat je stap voor stap zien, hoe je zelf een Elementor Gallery Widget kan maken met Unlimited Elements.

Jouw eerste vraag is waarschijnlijk ‘moet ik hiervoor kunnen programmeren’. En gelukkig voor jou, hoeft dat niet. Wat wel noodzakelijk is, is dat je HTML en CSS kan lezen. Ook al weet je niet wat er precies gebeurt, is het belangrijk dat je een globaal idee hebt, wat de code doet.

De code die we hier gebruiken komt van de site CSS-Tricks.com, een site met heel wat artikelen over mooie dingen, die je met CSS kan doen. Aan de hand van het artikel CSS Grid and Custom Shapes van Temani Afif gaan we de de ‘honingraat gallery’ die hij in zijn artikel bespreekt omzetten naar een Elementor Widget.

Wanneer je de stappen in dit artikel wilt volgen, dan adviseer ik je dit niet direct op je live website te doen, maar eerder op een staging kopie hiervan, of misschien zelfs op een lokale website die je speciaal voor dit doel gebruikt.

Het uiteindelijke eindresultaat -met andere afbeeldingen- kan je hieronder zien.

See the Pen Honeycomb image gallery by Temani Afif (@t_afif) on CodePen.

Je krijg dus een zevental zeshoeken met in iedere zeshoek een deel van een foto. Ga je met je muis over de foto heen, dan zoomt deze enigszins in.

Hoe deze code werkt legt Temani Afif uitgebreid uit in zijn eerder genoemde blogpost op CSS Tricks. Dat verhaal ga ik niet nog eens een keer navertellen. Bovendien is het helemaal niet zo belangrijk om te weten waarom het zo werkt. Het is belangrijk dat we een werkend eindresultaat hebben, wat we om kunnen zetten naar een Elementor Widget.

Alle magie van bovenstaand voorbeeld is verstopt onder de knoppen ‘HTML’ en ‘CCS’ in de afbeelding hierboven, maar omdat we regelmatig met de code gaan ‘knutselen’, herhaal ik de code hieronder ook graag even.

<div class="gallery">
  <img src="https://picsum.photos/id/1040/300/300" alt="a house on a mountain">
  <img src="https://picsum.photos/id/106/300/300" alt="sime pink flowers">
  <img src="https://picsum.photos/id/136/300/300" alt="big rocks with some trees">
  <img src="https://picsum.photos/id/1039/300/300" alt="a waterfall, a lot of tree and a great view from the sky">
  <img src="https://picsum.photos/id/110/300/300" alt="a cool landscape">
  <img src="https://picsum.photos/id/1047/300/300" alt="inside a town between two big buildings">
  <img src="https://picsum.photos/id/1057/300/300" alt="a great view of the sea above the mountain">
</div>
.gallery {
  --s: 150px; 
  --g: 10px;  
  display: grid;
  margin: calc(var(--s) + var(--g));
}

.gallery > img {
  grid-area: 1/1;
  width: var(--s);
  aspect-ratio: 1.15;
  object-fit: cover;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%,75% 100%,25% 100%,0 50%);
  transform: translate(var(--_x,0),var(--_y,0)) scale(var(--_t,1));
  cursor: pointer;
  filter: grayscale(80%);
  transition: .2s linear;
}
.gallery > img:hover {
  filter: grayscale(0);
  z-index: 1;
  --_t: 1.2;
}

.gallery > img:nth-child(1) {--_y: calc(-100% - var(--g))}
.gallery > img:nth-child(7) {--_y: calc( 100% + var(--g))}
.gallery > img:nth-child(3),
.gallery > img:nth-child(5) {--_x: calc(-75% - .87*var(--g))}
.gallery > img:nth-child(4),
.gallery > img:nth-child(6) {--_x: calc( 75% + .87*var(--g))}
.gallery > img:nth-child(3),
.gallery > img:nth-child(4) {--_y: calc(-50% - .5*var(--g))}
.gallery > img:nth-child(5), 
.gallery > img:nth-child(6) {--_y: calc( 50% + .5*var(--g))}

Deze code gaan we dus gebruiken om er een widget van te maken, waarbij je door het instellen van enkele attributen een prachtige ‘honingraat gallery’ krijgt.

De werkomgeving

Zoals al aangegeven, kan je dit het best niet op je live website uitproberen, maar liever op een lokale website. Zelf heb ik altijd een ‘klad’ website klaarstaan waar ik kleine dingen even uitprobeer. Dat is dus ook typisch de site waarop ik de ontwikkeling van een dergelijke widget zou doen.

Voor die werkomgeving hebben we drie dingen nodig: WordPress, Elementor (pro is niet noodzakelijk, wel handig) en gallery widget | Maak zelf een Elementor Gallery Widget met Unlimited Elements

We passen de code als volgt aan :
.gallery {
  --s: {{size}}px; 
  --g: {{gap}}px;  
  display: grid;
  margin: calc(var(--s) + var(--g));
}

Een andere aanpassing die we willen doen is het instelbaar maken van hoever een zeshoek ‘uitzoomd’ wanneer je er met de muis overheen gaat.

De definitie hiervoor vinden we hier in de CSS (regel 19-23)

.gallery > img:hover {
  filter: grayscale(0);
  z-index: 1;
  --_t: 1.2;
}

De variabele –_t (van ‘transformation’) controleert de zoom factor.

Hieronder zie je hoe ik het attribuut voor deze zoom factor heb ingesteld :

gallery widget | Maak zelf een Elementor Gallery Widget met Unlimited Elements
Met deze gegevens weet je nu ongetwijfeld ook, hoe je de code aan kan passen.
.gallery > img:hover {
  filter: grayscale(0);
  z-index: 1;
  --_t: {{zoom_factor}};
}

Goed zo!

Nog eentje om het af te leren!

Dit ziet er allemaal natuurlijk heel leuk uit, maar persoonlijk zou ik verwachten, dat iets ‘klikbaar’ is, wanneer het ‘groeit’ als ik er over heen ga met mijn cursor.

In de oorspronkelijke code die ik van CSS-Tricks heb overgenomen was dat niet het geval, maar laten we het in onze code wel doen.

Een afbeelding ‘klikbaar’ maken doe je door er een ‘a’ tag omheen te plaatsen. Zoiets als hier :

<a href="https://google.com/" target="_blank"><img src="google-logo.png"></a>

Maar als ik dit zou proberen gaat het helemaal fout. Ineens is mijn mooie honingraat verdwenen en krijg ik een lijst met afbeeldingen. Wat heb ik fout gedaan?

De CSS werkt uitsluitend wanneer de afbeeldingen direct onder de .gallery identifier komen te staan. Door er een ‘laagje’ tussen te zetten (de ‘anchor tag’, ‘a’) moet je in feite helemaal terug naar de tekentafel met de CSS.

Dat gaan we dus niet doen. In plaats daarvan gebruiken we JavaScript om pagina’s te openen. We maken dus gebruik van de ‘onclick’ property van HTML om een JavaScript functie aan te roepen.

Dus iets als

<img src="google-logo.png" onclick="window.location='https://google.com'">

Dit werkt ook. Tenminste, wanneer je bezoeker JavaScript actief heeft in zijn browser. Maar wie vandaag de dag geen JavaScript gebruikt heeft tot meer dan de helft van het Internet geen toegang meer.

De eerste stap die we moeten nemen is een property ‘URL’ toe te voegen aan onze ‘Items attributen’.

gallery widget | Maak zelf een Elementor Gallery Widget met Unlimited Elements

En we passen de HTML voor de Item HTML als volgt aan:

<img src="{{item.image}}" alt="{{item.alt_text}}" onclick="window.location='{{item.url}}'">

Dat was het!

Vergeet de code niet op te slaan en vanaf nu kan je URL’s toevoegen aan je gallery.

Enkele voetnoten

Je kan deze gallery widget nog veel verder uitbreiden en verfraaien. Waar we op dit moment bijvoorbeeld geen voorziening voor hebben is waar een URL geopend moet worden, in hetzelfde venster, of in een nieuw tabblad. Ook zijn er geen voorzieningen getroffen in dit voorbeeld om te voorkomen, dat je tijdens design time op een afbeelding kan klikken. Dit is wel mogelijk, maar dit zou ook meer uitgebreid JavaScript nodig hebben.

Iets anders waar je aan moet denken, is dat je in deze gallery maximaal 7 afbeeldingen op kan nemen. Neem je er meer op, dan zullen deze onder al bestaande afbeeldingen worden geplaatst… letterlijk. Niet erg effectief dus. Minder mag altijd.

Hieronder volgt nog eens alle code die je nodig hebt voor het maken van klikbare afbeeldingen in een honingraat.

<div class="gallery">
   {{put_items()}} 
</div>
<img src="{{item.image}}" alt="{{item.alt_text}}" onclick="window.location='{{item.url}}'">
.gallery {
  --s: {{size}}px; 
  --g: {{gap}}px;  
  display: grid;
  margin: calc(var(--s) + var(--g));
}

.gallery > img {
  grid-area: 1/1;
  width: var(--s);
  aspect-ratio: 1.15;
  object-fit: cover;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%,75% 100%,25% 100%,0 50%);
  transform: translate(var(--_x,0),var(--_y,0)) scale(var(--_t,1));
  cursor: pointer;
  filter: grayscale(80%);
  transition: .2s linear;
}
.gallery > img:hover {
  filter: grayscale(0);
  z-index: 1;
  --_t: {{zoom_factor}};
}

.gallery > img:nth-child(1) {--_y: calc(-100% - var(--g))}
.gallery > img:nth-child(7) {--_y: calc( 100% + var(--g))}
.gallery > img:nth-child(3),
.gallery > img:nth-child(5) {--_x: calc(-75% - .87*var(--g))}
.gallery > img:nth-child(4),
.gallery > img:nth-child(6) {--_x: calc( 75% + .87*var(--g))}
.gallery > img:nth-child(3),
.gallery > img:nth-child(4) {--_y: calc(-50% - .5*var(--g))}
.gallery > img:nth-child(5), 
.gallery > img:nth-child(6) {--_y: calc( 50% + .5*var(--g))}

Meer widgets?

Deze widget is één van de zeven widgets die deelnemers aan de cursus Elementor voor gevorderden krijgen.

Wil je ook je eigen Elementor Widgets leren bouwen met Unlimited Elements, er staat een cursus in de planning om je dat te leren. Voor meer info, neem even persoonlijk contact op via de chat wanneer ik online ben, of stuur mij een berichtje via het contactformulier.

Ben je op zoek naar een volledige cursus WordPress Developer, lees dan ook dit bericht eens…

Nog niet uitgelezen?

Vind je dit artikel interessant? Mooi! Want ik heb nog veel meer te bieden. Op deze site vind je letterlijke honderden artikelen over WordPress, marketing, e-commers, e-learning en nog veel meer onderwerpen. Op zoek naar meer informatie? Kies één van de trefwoorden hieronder of tik een zoekopdracht in.

Wees eens aardig en deel dit met je vrienden
Enkele trefwoorden om vergelijkbare posts te vinden:

Word je website de baas. Neem vandaag nog contact op!

Contact Information

WordXPression 
Imkersdreef 525
7328DG Apeldoorn
06-10449807 (van 9:00 tot 17:00 van ma-vr)

KVK : 75580152 

Social media
Stuur een bericht

Wellicht heb je interesse in één van deze trainingen van WordXPression?

Affiliate Expert Workshop

22 oktober 2022

Jouw Online Video Cursus van pre tot post

23 september, 7 oktober, 21 oktober, 4 november 2022

Elementor voor aankomende experts

12 en 13 december 2022