De Divi Volle Breedte Map Module

Met de kaartenmodules kunt u eenvoudig aangepaste Google Maps overal op uw pagina insluiten. Je kunt zelfs onbeperkte pinnen aan de kaart toevoegen en een aangepaste startlocatie voor het kijkvenster definiëren. De kaartenmodules worden ook geleverd in een normale breedte- indeling, dus vergeet dat ook niet!

volledige kaartmodule

BEKIJK EEN LIVE DEMO VAN DEZE MODULE

Google Maps API Key

Een API-sleutel is vereist om de Maps Module te gebruiken. Om een ​​API-sleutel te verkrijgen, logt u in op de Google Developers Console , die u door het proces zal leiden, en activeert de Google Maps JavaScript API en alle gerelateerde services automatisch. Het eerste dat u wordt gevraagd, is een nieuw project maken.

docs afbeelding

Vervolgens wordt u gevraagd uw project een naam te geven. U kunt het project een naam geven die u maar wilt. In dit voorbeeld noemde ik het eenvoudigweg ‘Kaarten’. U kunt ook de domeinnaam van uw website invoeren (er een * voor toevoegen als u toegang verleent vanaf zowel www.domain.com als domain.com) om ervoor te zorgen dat andere websites zijn toegestaan ​​voor uw uw API-sleutel.

docs afbeelding

Nadat u een project met een naam hebt gemaakt, krijgt u een API-sleutel te zien die u kunt gebruiken.

docs afbeelding

Nadat u een API-sleutel hebt verkregen, moet u deze kopiëren / plakken in het thema-optiespaneel door te navigeren naar: Divi >> Thema-opties >> Algemene instellingen >> Google Maps API-sleutel

Hoe u een kaart met volledige breedte aan uw pagina kunt toevoegen

Voordat u een kaart met volledige breedte aan uw pagina kunt toevoegen, moet u eerst in Divi Builder springen. Nadat het Divi-thema op uw website is geïnstalleerd, ziet u elke keer dat u een nieuwe pagina bouwt een knop Divi Builder gebruiken boven de berichteditor. Als u op deze knop klikt, wordt Divi Builder ingeschakeld en hebt u toegang tot alle modules van Divi Builder. Klik vervolgens op de knop Visual Builder gebruiken om de builder in Visual Mode te starten. U kunt ook klikken op de knop Visual Builder inschakelen tijdens het browsen op uw website aan de voorkant als u bent aangemeld bij uw WordPress-dashboard.

volledige kaartmodule

Nadat u Visual Builder hebt ingevoerd, kunt u op de grijze plusknop klikken om een ​​nieuwe module aan uw pagina toe te voegen. Nieuwe fullwidth-modules kunnen alleen binnen fullwidth-secties worden toegevoegd. Als u een nieuwe pagina start, vergeet dan niet eerst een sectie met volledige breedte aan uw pagina toe te voegen. We hebben een aantal geweldige tutorials over het gebruik van Divi’s sectie- elementen.

volledige kaartmodule

Zoek de volledige kaartmodule in de lijst met modules en klik erop om deze aan uw pagina toe te voegen. De modulelijst is doorzoekbaar, wat betekent dat u ook het woord “fullwidth map” kunt typen en vervolgens op enter kunt klikken om de fullwidth map module automatisch te zoeken en toe te voegen! Nadat de module is toegevoegd, wordt u begroet met de lijst met opties van de module. Deze opties zijn onderverdeeld in drie hoofdgroepen: Inhoud , Ontwerp en Geavanceerd .

Gebruiksvoorbeeld: voeg een kaart met volledige breedte toe aan een contactpagina

Een kaartmodule met volledige breedte is een geweldige manier om uw bedrijfslocatie op uw contactpagina te tonen. En de mogelijkheid om meerdere pinnen aan uw kaart toe te voegen om verschillende bedrijfslocaties en informatie te tonen, is een handige en boeiende functie.

Voor dit voorbeeld ga ik een Fullwidth-kaartmodule toevoegen om de bedrijfslocatie en informatie te tonen door een aangepaste pin aan de kaart toe te voegen.

volledige kaartmodule

Belangrijk : zorg ervoor dat een geldige Google API Key is ingevoerd in het Divi Theme Options-paneel. De kaartmodule werkt niet zonder.

Voeg met Visual Builder een sectie met de volledige breedte toe aan de onderkant van de contactpagina. Voeg vervolgens de Fullwidth Map-module toe aan uw nieuwe sectie. Voer op het tabblad Inhoud van de kaartinstellingen voor de volledige breedte uw bedrijfsadres in onder de optie Map Center Address. Het Map Center-adres is voor het middelpunt van de kaart.

volledige kaartmodule

Klik vervolgens op + Nieuw item toevoegen om uw eerste pin te maken. Update het volgende:

Titel: [voer de titel van uw locatie in]
Inhoud: [voer de inhoud van uw pincode in (bijv. Adres en telefoonnummer)]
Kaart Pin Adres: [voer het adres voor deze specifieke locatie in]

volledige kaartmodule

Instellingen opslaan

Dat is het. Nu hebt u een dynamische kaart met volledige breedte onderaan de contactpagina met een klikbare pin die bedrijfsinformatie weergeeft.

volledige kaartmodule

Opties voor kaartinhoud op volledige breedte

Op het tabblad inhoud vindt u alle inhoudselementen van de module, zoals tekst, afbeeldingen en pictogrammen. Alles wat bepaalt wat er in uw module verschijnt, vindt u altijd op dit tabblad.

volledige kaartmodule

Google API Key

De Maps-module gebruikt de Google Maps API en vereist een geldige Google API-sleutel om te functioneren. Voordat u de kaartmodule gebruikt, moet u ervoor zorgen dat u uw API-sleutel in het Divi Theme Options-paneel hebt toegevoegd. Meer informatie over het maken van uw Google API Key vindt u hier .

Adres adreskaart

Voer een adres in voor het middelpunt van de kaart en het adres wordt geocodeerd en weergegeven op de onderstaande kaart. Dit is handig als u meerdere pinnen hebt en u wilt op de kaart inzoomen op een specifieke, meer gerichte locatie. U kunt eenvoudig een adres in een standaardindeling typen, zoals “1235 Sunny Road, Some City, State, 88343.”

Beheerderslabel

Dit zal het label van de module in de bouwer veranderen voor gemakkelijke identificatie. Wanneer u de WireFrame-weergave in Visual Builder gebruikt, verschijnen deze labels in het moduleblok in de Divi Builder-interface.

Fullwidth-kaartontwerpopties

Op het ontwerptabblad vindt u alle stijlopties van de module, zoals lettertypen, kleuren, grootte en afstand. Dit is het tabblad dat u zult gebruiken om het uiterlijk van uw module te wijzigen. Elke Divi-module heeft een lange lijst met ontwerpinstellingen die u kunt gebruiken om vrijwel alles te wijzigen.

volledige kaartmodule

Mouse Wheel Zoom

Hier kunt u kiezen of het zoomniveau wordt bestuurd door het muiswiel of niet. Vaak is het beter om deze optie uit te schakelen, zodat bezoekers niet worden gestoord terwijl ze naar beneden scrollen en hun muiswiel vast komen te zitten in het iframe van de kaart. Dit geldt met name voor kaarten met volledige breedte.

Sleepbare zoom

Hier kunt u kiezen of de kaart op mobiele apparaten kan worden gesleept.

Gebruik grijswaardenfilter

Als u deze optie inschakelt, wordt uw kaart een afbeelding in grijswaarden.

Fullwidth Map Geavanceerde opties

Op het tabblad Geavanceerd vindt u opties die meer ervaren webontwerpers nuttig kunnen vinden, zoals aangepaste CSS- en HTML-kenmerken. Hier kunt u aangepaste CSS toepassen op de vele elementen van de module. U kunt ook aangepaste CSS-klassen en ID’s toepassen op de module, die kunnen worden gebruikt om de module aan te passen in het style.css-bestand van uw kindthema.

volledige kaartmodule

CSS ID

Voer een optionele CSS-ID in die voor deze module moet worden gebruikt. Een ID kan worden gebruikt om aangepaste CSS-stijlen te maken of om koppelingen naar bepaalde delen van uw pagina te maken.

CSS-klasse

Voer optionele CSS-klassen in die voor deze module moeten worden gebruikt. Een CSS-klasse kan worden gebruikt om aangepaste CSS-stijlen te maken. U kunt meerdere klassen toevoegen, gescheiden door een spatie. Deze klassen kunnen worden gebruikt in uw Divi Child-thema of in de aangepaste CSS die u toevoegt aan uw pagina of uw website met behulp van de Divi Theme Options of Divi Builder-pagina-instellingen.

Aangepaste CSS

Aangepaste CSS kan ook worden toegepast op de module en alle interne elementen van de module. In het gedeelte Aangepaste CSS vindt u een tekstveld waar u aangepaste CSS rechtstreeks aan elk element kunt toevoegen. CSS-invoer in deze instellingen is al ingepakt in stijltags, dus u hoeft alleen CSS-regels in te voeren gescheiden door puntkomma’s.

Zichtbaarheid

Met deze optie kunt u bepalen op welke apparaten uw module wordt weergegeven. U kunt ervoor kiezen om uw module afzonderlijk uit te schakelen op tablets, smartphones of desktopcomputers. Dit is handig als u verschillende modules op verschillende apparaten wilt gebruiken of als u het mobiele ontwerp wilt vereenvoudigen door bepaalde elementen van de pagina te verwijderen.

Individuele opties voor kaartinhoud op de volledige breedte

volledige kaartmodule

Titel

Terwijl u een nieuwe pin maakt, kunt u een titel toewijzen. Deze titel verschijnt in het vak wanneer u over de pin op de kaart zweeft.

Inhoud

Tijdens het maken van een nieuwe pin kunt u een inhoudstekstblok toewijzen. Deze tekst verschijnt in het vak wanneer u over de pin op de kaart zweeft.

Map Pin Adres

Dit is de specifieke locatie op de kaart waar uw nieuwe pin verschijnt. U kunt het adres in een standaardformaat invoeren