De achtergrond

Op mijn huidige website (degene waar je nu op staat) heb ik Elementor Pro en WPML geïnstalleerd. Ik spreek 3 talen: Engels, Nederlands en Frans. Ik heb een sjabloon gemaakt in Elementor Pro voor de Blogpost-pagina maar mijn andere talen gebruikten de sjabloon om de een of andere reden niet!! Ze gebruikten de standaardsjabloon van WordPress. Alleen de hoofdtaal (Engels) gebruikte de sjabloon. Wat gebeurde er? 

De Engelse berichten maakten gebruik van het sjabloon Elementor (onder ‘voorwaarden’ in de sjabloonbouwer heb ik de sjablonen correct toegewezen aan de weergave voor alle berichten). De vertaalde versies van deze pagina’s maakten echter geen gebruik van de sjabloon, dus ik gokte (correct) dat het een probleem was met WPML (ja, het staat bekend om problemen). 

Nou, na uren zoeken en verschillende dingen proberen, ben ik erachter gekomen. Dus hier is de oplossing, die je hopelijk wat tijd en hoofdpijn bespaart:

1. Ga naar WPML -> Vertaalbeheer.
2. Gebruik onder ‘1. Items selecteren voor vertaling’ het filter en filter op ‘Sjablonen’.
3. Zoek de sjabloon die u in Elementor hebt gemaakt in de lijst.
4. Klik op ‘Weergeven’ onder de sjabloon.
5. Klik op ‘Sjabloon bewerken’.
6.  Wijzig de taal in de WPML taalswitcher dropdown
7. Het kan zijn dat je een WPML-waarschuwing krijgt, maar kies toch voor ‘Bewerken’.
8. Je zult zien dat de sjabloon in concept staat. Klik dus op Publiceren. 
9. Herhaal dit indien nodig voor uw andere talen. 

En viola! Probleem opgelost! 

Godverdomme WPML, ik haat je zo!

The post Elementor Pro sjabloon werkt niet met WMPL appeared first on Aidan McNally.

Hoe het moet

Ik zal je eerst laten zien hoe je dit kunt doen met containers (wat nu de standaard is in 2024), maar ik zal je ook laten zien hoe je dit kunt bereiken met secties, die veel sites die gebouwd zijn voor de laatste upgrade zullen hebben.

Stap 1 is het maken van een nieuwe container en het toevoegen van een achtergrondafbeelding aan de container. Ga naar Stijl -> Achtergrond overlay en voeg je afbeelding toe. Voeg niet zomaar een achtergrondafbeelding toe aan de container, maar zorg ervoor dat je de afbeelding toevoegt met ‘Background overlay’, anders werkt het niet.

Klik vervolgens op ‘Geavanceerd’ en voeg een klasse toe aan deze container. Ga naar Geavanceerd -> CSS Klassen en voeg een klassenaam in. Dat kan van alles zijn, maar voor deze tutorial noem ik het‘my-fade-container‘ (zie de afbeelding hieronder).

Als je de ‘background overlay’ in Elementor gebruikt, wordt de afbeelding toegevoegd met de CSS-pseudoklasse ‘::before‘. Dit is wat we gaan manipuleren wanneer de gebruiker met de muis over de container beweegt.

				
					.my-fade-container::before{
    opacity:0;
    transition:opacity 0.7s;  
}
				
			

In de bovenstaande code richten we ons op het ::before element dat Elementor toevoegt wanneer een achtergrondoverlay wordt toegevoegd aan een container. We maken de opaciteit 0 zodat het in eerste instantie verborgen is. We voegen een overgangslengte van 0,7 seconden toe, zodat de fade-in niet onmiddellijk is (je kunt dit veranderen in elke duur die je wilt).

				
					.my-fade-container:hover::before{
    opacity:0.5;
}
				
			

Het volgende stukje CSS-code dat we toevoegen staat hierboven. Hiermee wordt de achtergrond weergegeven wanneer de gebruiker met de muisaanwijzer over onze container beweegt door de ondoorzichtigheid te wijzigen in iets boven 0 (in dit geval heb ik gekozen voor 0,5 – dus half transparant).

Je zult zien dat er nog wat ruimte zit tussen de inhoud van je container en de achtergrondafbeelding. Dit komt doordat Elementor nog een element toevoegt met de class ‘e-conn-inner’. In het volgende stukje code richten we ons op dat element, waardoor de padding en marge 0 worden.

				
					.my-fade-container .e-con-inner{
    padding:0;
    margin:0;
}
				
			

En dat is het wel zo’n beetje! Om een afbeelding uit te faden in plaats van in te faden, begin je gewoon met een ondoorzichtigheid van meer dan 0 en verander je deze naar 0 bij de hover. 

In het bovenstaande voorbeeld heb ik ook een rand en wat opvulling aan de container toegevoegd, evenals de regel ‘cursor:pointer’ voor het zweven over de container, maar in wezen heb je alleen de bovenstaande CSS-regels nodig om het effect te laten werken. 

Hoe het wordt gedaan met secties

Als u uw site vóór de laatste update van Elementor hebt gemaakt, gebruikt uw site mogelijk Sections in plaats van Containers, waardoor de bovenstaande code niet werkt. Maar vrees niet, de code voor secties is net zo eenvoudig.

Stap 1 is het maken van een nieuwe sectie en het toevoegen van een achtergrondafbeelding aan de sectie. Ga naar Stijl -> Achtergrond overlay en voeg je afbeelding toe. Voeg niet zomaar een achtergrondafbeelding toe aan de sectie, maar zorg ervoor dat je de afbeelding toevoegt met ‘Background overlay’, anders werkt het niet.

Klik vervolgens op ‘Geavanceerd’ en voeg een class toe aan deze sectie. Ga naar Geavanceerd -> CSS Klassen en voeg een klassenaam in. Dat kan van alles zijn, maar voor deze tutorial noem ik het‘mijn-fade-sectie‘ (zie de afbeelding hieronder).

Wanneer je de‘background-overlay‘ gebruikt voor secties voegt Elementor een nieuwe div met de class‘elementor-background-overlay‘ toe aan de sectie en dan worden alle containers die je hebt binnen de sectie toegevoegd als aparte divs op hetzelfde niveau als de background-overlay div (dus geen kinderen, maar broers en zussen). Dit is wat we gaan manipuleren wanneer de gebruiker met de muis over de container beweegt.

				
					section.my-fade-section .elementor-background-overlay{
    opacity:0 !important;
    transition:opacity 0.7s;  
}
				
			

In de bovenstaande code richten we ons op het .my-fade-section-element dat Elementor toevoegt wanneer een achtergrondoverlay wordt toegevoegd aan een sectie. We maken de opaciteit 0 zodat het in eerste instantie verborgen is. We voegen een overgangslengte van 0,7 seconden toe, zodat de fade-in niet onmiddellijk is (je kunt dit veranderen in elke duur die je wilt).

				
					section.my-fade-section:hover .elementor-background-overlay{  
	opacity:0.5 !important;
}
				
			

Het volgende stukje CSS-code dat we toevoegen staat hierboven. Hierdoor wordt de achtergrond weergegeven wanneer de gebruiker met de muisaanwijzer over onze sectie gaat door de opaciteit van de overlay div te wijzigen in iets boven 0 (de hoogste instelling voor opaciteit is 1). In dit geval verander ik het in 0,5, of ‘half’ transparant. 

En dat is het wel zo’n beetje! Om een afbeelding te laten fade-out in plaats van fade-in, begin je gewoon met een ondoorzichtigheid boven 0 en verander je deze naar 0 bij hover. 

In het bovenstaande voorbeeld heb ik een rand toegevoegd om het beter zichtbaar te maken, en wat opvulling voor de container, evenals de regel ‘cursor:pointer’ voor het zweven over de container, maar in wezen heb je alleen de bovenstaande CSS-regels nodig om het effect te laten werken. 

Laat me in de reacties hieronder weten of dit voor jou heeft gewerkt. 

The post Handleiding: Fade Elementor achtergrondafbeelding met 3 regels CSS appeared first on Aidan McNally.

Er zijn twee basisstappen om reCAPTCHA toe te voegen aan Contact Form 7:

1. Registreer je website voor reCAPTCHA (gratis) en ontvang je sleutels
2. Uw reCAPTCHA-sleutels toevoegen aan Contact Form 7

1) Registreer uw website voor reCAPTCHA en ontvang uw sleutels

Meld u aan bij uw Google-account (bijvoorbeeld door u aan te melden bij Gmail) en ga vervolgens naar de ReCAPTCHA beheerconsole. Je ziet het onderstaande scherm. Je kunt ook naar https://www.google.com/recaptcha gaan en op de link‘V3 Admin Console‘ klikken.

Schermafbeelding van de reCAPTCHA beheerconsole

Standaard zul je een‘Enterprise reCAPTCHA key‘ aanmaken, die gratis is tot 1 miljoen beoordelingen per maand, maar daarna geld gaat kosten. Voor kleine sites is dit meestal prima omdat je deze limiet nooit zult overschrijden, maar ik gebruik nog steeds liever de gratis versie van reCAPTCHA voor het geval de voorwaarden van de Enterprise versie veranderen. Als je ook de gratis versie wilt gebruiken, kun je gewoon op de link‘Overstappen op klassieke sleutel‘ klikken, zoals aangegeven in de onderstaande schermafbeelding.

Schermafbeelding van de link om een klassieke reCAPTCHA-sleutel te maken

Je moet nu drie dingen doen om je reCAPTCHA te registreren:

i) Een label toevoegen

Het label is gewoon een manier voor u om uw reCAPTCHA te herkennen in uw reCAPTCHA console de volgende keer dat u inlogt. Het kan van alles zijn, maar de meeste mensen gebruiken gewoon het domein waar de reCAPTCHA-code voor is – bijvoorbeeld example.com.

ii) Kies uw reCAPTCHA type

Er zijn momenteel twee soorten reCAPTCHA beschikbaar. Versie 2 (V2) is de oudere versie van reCAPTCHA en vereist dat de gebruiker het selectievakje‘Ik ben geen robot‘ aanvinkt of slaagt voor een zichtbare test, zoals hieronder afgebeeld.

ReCAPTCHA versie 3 (V3) is de nieuwere versie, waarbij de beoordeling of de bezoeker een mens is of niet automatisch op de achtergrond plaatsvindt, wat betekent dat de gebruiker niet op een selectievakje hoeft te klikken of voor een test hoeft te slagen.

In dit voorbeeld gebruik ik V3 omdat dit de versie is die de meeste mensen gebruiken en de versie die compatibel is met de nieuwste versies van de Contact Form 7 plugin.

Opmerking: u kunt ReCAPTCHA V3 alleen gebruiken met Contact Form 7 versie 5.1 en hoger. U kunt V2 gebruiken met oudere versies van Contact Form 7. Daarom kunt u V2-sleutels niet gebruiken op Contact Form 7 5.1 of hoger, en V3 op Contact Form 7 5.0 en lager.

Schermafbeelding van een reCAPTCHA V2 test

iii) Voeg het domein van uw website toe

Voeg onder‘Domeinen‘ gewoon het domein toe waar de reCAPTCHA voor is – bijvoorbeeld example.com. Zodra je op verzenden klikt, kom je op een nieuwe pagina met je reCAPTCHA‘Site key‘ en‘Secret key‘ zoals hieronder weergegeven.

Opmerking: Je kunt ervoor kiezen om dezelfde reCAPTCHA voor meerdere domeinen te gebruiken, en daarom heb je de optie om meer dan één domein toe te voegen. De meeste mensen zullen hier echter maar één domein toevoegen.

Schermafbeelding van reCAPTCHA toetsen

2) Voeg uw reCAPTCHA-sleutels toe aan Contact Form 7

Om de reCAPTCHA toe te voegen aan al je Contact Form 7 formulieren, ga je naar je WordPress backend (admin pagina) en klik je op Contact > Integratie zoals in de schermafbeelding hieronder.

Scroll naar beneden naar het vak‘reCAPTCHA‘ en klik op Integratie instellen.

Screenshot van Contactformulier 7 integratiepagina

De volgende stap is het nemen van de‘Site key‘ en‘Secret key‘ van de reCAPTCHA die je net hebt ingesteld, voeg ze toe aan de invoervakken en klik op Opslaan, zoals in de schermafbeelding hieronder.

Opmerking: Gebruik de onderstaande toetsen niet. Deze zijn alleen bedoeld als voorbeeld. Gebruik je eigen reCAPTCHA-sleutels die in de vorige stappen zijn gegenereerd.

Screenshot van Contactformulier 7 reCAPTCHA-integratiepagina

Zodra u uw sleutels opslaat, zullen alle Contact Form 7 formulieren op uw site automatisch reCAPTCHA V3 gebruiken. Nu gebruiken je contactformulieren de score van reCAPTCHA om te verifiëren of de formulierinzending afkomstig is van een mens of van een spam-bot.

Als u reCAPTCHA V2 zou gebruiken, zou u [recaptcha] form-tags moeten toevoegen aan elk formulier waarop u een V2 reCAPTCHA wilt laten verschijnen. Dit is zodat het selectievakje‘Ik ben geen robot‘ verschijnt.

Als je een upgrade uitvoert van V2 naar V3, hoef je niet terug te gaan en de [recaptcha] form-tags van je formulieren te verwijderen. Als ze gevonden worden in een formuliertemplate, negeert Contact Form 7 5.1 of hoger ze en vervangt ze door een lege tekenreeks.

Zodra u op Opslaan hebt geklikt, ziet u een vak zoals hieronder, waarin staat dat reCAPTCHA nu actief is op al uw Contact Form 7-formulieren.

Screenshot van succesvolle Contactformulier 7 reCAPTCHA integratie

Wat denk jij? Was deze handleiding makkelijk te volgen? Heeft het je geholpen? Laat het me weten in de reacties hieronder!

The post Handleiding: ReCAPTCHA toevoegen aan Contactformulier 7 in WordPress (2024) appeared first on Aidan McNally.

Mijn cliënt maakt zijn eigen biermerk, en de bieren zijn verkrijgbaar in verschillende bars in New York City. Hij wilde een eenvoudige kaart waarop de verschillende plaatsen stonden aangegeven waar het bier te koop was. Gelukkig kunt u met Google Maps aangepaste kaarten maken, met locatiepins voor elk doel dat u wenst.

In het kader van deze gids heb ik de naam van het bier veranderd en heb ik mijn eigen fictieve bier gecreëerd, GoldenBeer genaamd. Het is een heerlijk bier, en het is vrij onmogelijk om er een kater van te krijgen.

Deze gids is opgesplitst in de volgende stappen:

1. Een Google-kaart maken
2. Handmatig locaties toevoegen
3. Importeren van meerdere locaties tegelijk
4. Uw kaart aanleggen
5. Verschillende lagen gebruiken
6. De basiskaart wijzigen
7. Uw kaart insluiten op uw website

1) Een Google-kaart maken

De eerste stap is om naar Mijn Kaarten te gaan in Google Maps – https://www.google.com/maps/about/mymaps/ of https://www.google.com/maps/d/ en te klikken op ‘Aan de slag’ (zie de schermafbeelding hieronder).

Klik op de knop “Maak een nieuwe kaart”. Dit geeft je een kaart met de naam ‘Naamloze kaart’ en maakt een laag voor je aan met de naam‘Naamloze laag‘.

Zoals je misschien al geraden hebt, kun je lagen gebruiken om je informatie te ordenen. In mijn geval zal ik bijvoorbeeld een laag hebben voor bars die GoldenBeer verkopen, en een laag voor slijterijen (of “off-licenses” in Brits Engels) die GoldenBeer verkopen.

Lagen zijn handig omdat gebruikers lagen kunnen selecteren en deselecteren, waardoor ze gemakkelijker locaties kunnen vinden. U kunt ook alle locaties in een laag tegelijk stijlen, zodat de afzonderlijke locaties visueel worden aangegeven.

Je hoeft het niet meteen te doen, maar je kunt je kaart een andere naam geven door op de huidige naam te klikken (Untitled map). Deze naam verschijnt wanneer mensen je kaart bekijken, dus je kunt hem net zo goed een naam geven zoals‘GoldenBeer Bar Locations‘.

Handmatig locaties toevoegen

Van hieruit kunt u handmatig zoeken naar een locatie (bv. een bezienswaardigheid of een bedrijf). In mijn geval zoek ik naar‘Meghan’s bar and Kitchen‘, een bar in West 45th Street, New York, en een van de beste plekken om te genieten van een GoldenBeer op een drukke middag in New York. Typ de locatie in de zoekbalk en klik op de zoekknop.

Wanneer uw locatie op de kaart wordt gevonden, verschijnt er een venster met de locatie en de details. Klik gewoon op de tekst “+ Toevoegen aan kaart” onderaan in dit vak (in de schermafbeelding hieronder geel gemarkeerd). Herhaal dit proces voor zoveel locaties als u wilt.

Importeren van meerdere locaties tegelijk

Wat als je veel locaties hebt en je ze niet allemaal één voor één handmatig wilt toevoegen? GoldenBeer is verkrijgbaar in honderden bars en slijterijen, en ik wilde ze niet allemaal handmatig intypen; dat zou uren duren! Welnu, met Google Maps kunt u gemakkelijk een aantal datatypes uit verschillende bronnen importeren. U kunt bijvoorbeeld een Excel CSV-bestand uploaden vanaf uw computer, of een GPX-bestand (GPS Exchange Format) importeren vanaf Google Drive.

In dit voorbeeld gebruik ik een Excel bestand genaamd ’test-data.xlsx’ met een lijst van New Yorkse bars die GoldenBeer verkopen. Het Excel-bestand bevat één kolom, genaamd“Locaties” en deze bevat gewoon een lijst met de naam en het adres van de bars in hetzelfde veld (zie de schermafbeelding hieronder).

Om het bestand te uploaden, klikt u op“Importeren” in het modal links op het scherm (geel gemarkeerd in de schermafbeelding hieronder). Dit importeert je locaties in de huidig geselecteerde laag, in dit geval ‘Untitled layer’ omdat ik er nog niet aan toegekomen ben hem een andere naam te geven.

U wordt dan gevraagd om te kiezen welke kolom in uw Excel-bestand door Google Maps moet worden gebruikt om uw locaties te vinden. In mijn geval is er maar één kolom, dus ik vink ‘Locaties’ aan en klik vervolgens op‘Doorgaan‘.

U wordt dan gevraagd om een kolom te kiezen als titel voor uw locaties. Mijn locatiekolom bevat alleen de naam van de bar, dus dit is ook de titel van de locatie.

*Belangrijkenota*

Aangezien de bars al als bedrijven in Google maps staan, zal Google maps de juiste naam gebruiken. Als u echter een kaart maakt met locaties die nog geen bedrijven of andere ‘plaatsen’ in Google Maps zijn, moet u meerdere kolommen hebben, zoals een ‘Bar Adres‘ kolom, en ‘Bar naam‘ kolom, dan zou je natuurlijk de ‘Bar naamkolom, en uw aangepaste kaart zou dit als de naam van die locatie hebben.

Plaats een vinkje naast de kolom die u als titel wilt gebruiken, en klik op“Voltooien“.

U ziet nu een aantal spelden op uw kaart op basis van de locaties uit uw Excel-bestand (zie de schermafbeelding hieronder). Merk op dat de linkermodal de naam toont van het bestand dat ik heb geupload (test-data.xlsx) en daaronder het aantal items dat is toegevoegd – Alle items (12).

Je kaart vormgeven

Als u iets anders wilt gebruiken dan de standaard blauwe pin die al uw locaties markeert, kunt u deze gemakkelijk aanpassen. Als ik met de muis over de tekst ‘Alle items (12)’ ga, verschijnt er een verfemmer-icoontje (zie de schermafbeelding hieronder).

De tekst boven mijn locaties op de linkermodal die zegt‘Uniforme stijl‘, verwijst naar hoe al mijn locatiepins zijn gestyled. Dit betekent dat ik de stijl van alle pins in één keer kan bijwerken. U kunt op de pijl naast deze tekst klikken om de stijlinstellingen te wijzigen.

Met de stijlinstelling op ‘Uniforme stijl’, doet klikken op de verfemmer een kleurenpalet verschijnen. Van hieruit kan ik alle items in één keer stylen. Ik kan de kleur van de locatiepin veranderen, een door Google Maps geleverd pictogram gebruiken, of zelfs een eigen pictogram uploaden via de knop ‘Meer pictogrammen’ (zie de schermafbeelding hieronder).

Zoals hierboven vermeld, kan ik, als ik pictogrammen individueel moet stijlen, dat ook doen, door op de pijl naast de tekst‘Uniforme stijl‘ te klikken, die alle individuele locaties opent (zie de schermafbeelding hieronder).

Als ik op een van de locaties klik, verschijnt deze op de kaart, en binnen de pop-up kan ik op het verfemmer-icoontje klikken om die locatie individueel te stijlen (zie de schermafbeelding hieronder).

Verschillende lagen gebruiken

Wat gebeurt er als u verschillende soorten gegevens hebt, of verschillende soorten plaatsen waar uw product wordt verkocht? Zoals ik al eerder zei, moet ik in mijn geval onderscheid maken tussen bars en slijterijen (slijterijen), zodat gebruikers gemakkelijk het verschil kunnen zien en sneller vinden wat ze zoeken.

Om dit te doen, heb ik besloten om alle locatiepins voor bars één kleur te geven (blauw), en alle locatiepins voor slijterijen een andere kleur (rood).

Ik heb de bars op één laag gezet, en een nieuwe laag gemaakt voor de slijterijen door op‘Laag toevoegen’ te klikken. Vervolgens importeerde ik een excel van de slijterijen in deze tweede laag, en hernoemde de laag ‘Liquor Stores’.

Dit had een effect van twee factoren. Zo kon ik alle locaties op elke laag in één keer stijlen in plaats van één voor één. Bovendien is de gebruikerservaring verbeterd, omdat lagen kunnen worden in- en uitgeschakeld. Gebruikers kunnen bijvoorbeeld de slijterijen uitschakelen, als ze alleen de bars op de kaart willen zien (zie de schermafbeelding hieronder).

De basiskaart wijzigen

Soms wil je de kleuren of de hoeveelheid zichtbare inhoud op je kaart (of ‘basiskaart’) veranderen. De standaardkaart bevat bijvoorbeeld veel oriëntatiepunten, wat het voor gebruikers moeilijker kan maken uw locaties te zien.

Een oplossing is om de‘Basiskaart‘ te veranderen. Deze instelling is te vinden onderaan de linkermodal, en er zijn momenteel 9 opties om uit te kiezen. Klik gewoon op ‘Basiskaart’ en kies een van de opties om te zien hoe uw kaart eruit ziet met de nieuwe achtergrond (zie de schermafbeelding hieronder).

Uw kaart insluiten op uw website

Dus nu heb je je kaart gemaakt. Hoe kun je het aan de mensen laten zien? Of zelfs later zelf gebruiken?

Ga gewoon naar uw kaartendashboard(https://www.google.com/maps/d/), zoek de kaart die u hebt gemaakt en klik op het pictogram delen (zie onderstaande schermafbeelding). Kies hier de laatste optie‘Embed on my site‘.

Een popup modal zal verschijnen met de HTML die je moet insluiten op je site (het is een iFrame). Kopieer de inhoud en plak deze in uw website.

• Als je de blokeditor van WordPress gebruikt, gebruik dan het blok‘Code‘ voor deze inhoud.
• Als u de gewone oude WordPress WYSIWYG editor gebruikt, gebruik dan het tabblad‘Tekst‘ (naast het tabblad ‘Visueel’ waar u inhoud invoert).
• Als je de Elementor page builder gebruikt, gebruik dan het‘HTML’ element.
• Andere paginabouwers hebben ook een blok/element waarmee je HTML kunt invoegen.

Dus, daar heb je het. Zo kun je een kaart maken met meerdere kaartmarkeringen. In dit geval hebben we het gebruikt om de locaties te tonen waar een product wordt verkocht, maar dit is een van de vele toepassingen van een aangepaste kaart. Waar ga je je aangepaste Google-kaart voor gebruiken?

Laat me in de reacties hieronder weten of dit u heeft geholpen, of waar u uw aangepaste Google Map voor gaat gebruiken.

The post Handleiding: Een Google-kaart met meerdere locaties maken (2024) appeared first on Aidan McNally.