Met kaartmodules kunt u eenvoudig aangepaste Google Maps overal op uw pagina integreren. U kunt zelfs een onbeperkt aantal pinnen aan de kaart toevoegen en een aangepaste startlocatie instellen. Kaartmodules zijn ook verkrijgbaar in volledige breedte, dus bekijk dat ook zeker eens!
Google Maps API-sleutel
Een API-sleutel is eisen om de kaartmodule te gebruiken. Om een API-sleutel te verkrijgen, logt u in op het Google Developers Console, die u door het proces leidt en automatisch de Google Maps JavaScript API en alle bijbehorende services activeert. Het eerste dat u wordt gevraagd, is om een nieuw project te maken.
Vervolgens wordt u gevraagd uw project een naam te geven. Je kunt het project elke naam geven die je wilt. In dit voorbeeld noemde ik het simpelweg "Kaarten". U kunt ook de domeinnaam van uw website (voeg een * ervoor toe als u toegang toestaat vanaf www.domain.com en domain.com) om ervoor te zorgen dat uw API-sleutel is geautoriseerd.
Nadat u een benoemd project heeft gemaakt, ziet u een API-sleutel die u kunt gebruiken.
Na het verkrijgen van een API-sleutel, moet u deze kopiëren / plakken in het thema-optiepaneel door naar: Divi >> Thema-opties >> Algemene instellingen >> Google Maps API-sleutel
Een kaartmodule toevoegen aan uw pagina
Voordat u een kaartmodule aan uw pagina kunt toevoegen, moet u eerst naar Divi Builder springen. Zodra de Divi-thema geïnstalleerd op uw website, ziet u een knop Gebruik Divi Builder boven de berichteditor wanneer u een nieuwe pagina maakt. Klik op deze knop om Divi Builder te activeren en toegang te krijgen tot alle Divi Builder-modules. Klik vervolgens op de knop Gebruik Visual Builder om de generator in visuele modus te starten. U kunt ook op de knop klikken Gebruik Visual Builder wanneer u door uw website op de voorgrond bladert en u bent verbonden met uw WordPress-dashboard.
Nadat u Visual Builder heeft geopend, kunt u op de grijze plusknop klikken om een nieuwe module aan uw pagina toe te voegen. Nieuwe modules kunnen alleen binnen rijen worden toegevoegd. Als u een nieuwe pagina begint, vergeet dan niet om eerst een rij aan uw pagina toe te voegen.
Zoek de kaartmodule in de lijst met modules en klik erop om deze aan uw pagina toe te voegen. De lijst met modules is doorzoekbaar, wat betekent dat u ook het woord "kaart" kunt typen en vervolgens op enter kunt klikken om de kaartmodule automatisch te zoeken en toe te voegen! Zodra de module is toegevoegd, wordt u begroet door de lijst met moduleopties. Deze opties zijn onderverdeeld in drie hoofdgroepen: Inhoud , Ontwerpfase et vergevorderd .
Gebruiksvoorbeeld: Voeg een kaartmodule toe aan een contactpagina
Een kaartmodule is een geweldige manier om uw bedrijfslocatie op uw contactpagina te laten zien. En de mogelijkheid om meerdere spelden aan uw kaart toe te voegen om verschillende locaties en bedrijfsinformatie te markeren, is een handige en aantrekkelijke functie.
Voor dit voorbeeld ga ik een kaartmodule toevoegen om locatie- en bedrijfsinformatie weer te geven door een aangepaste speld aan de kaart toe te voegen.
belangrijk : zorg ervoor dat er een geldige Google API-sleutel is ingevoerd in het paneel Opties van de Divi-thema. De kaartmodule werkt niet zonder.
Voeg met Visual Builder een standaardgedeelte toe onderaan de contactpagina. Voeg vervolgens de kaartmodule in uw nieuwe sectie in. Voer op het tabblad Inhoud van de kaartinstellingen uw bedrijfsadres in onder de optie Adres kaartcentrum. Het centrumadres van de kaart is het middelpunt van de kaart.
Klik dan op + Voeg een nieuw item toe om je eerste pin te maken. Werk het volgende bij:
Titel: [vul de titel van uw locatie in]
Inhoud: [vul de inhoud van uw pincode in (adres en telefoonnummer)]
Kaartadres: [vul het adres voor deze specifieke locatie in]
Instellingen opslaan
Dat is alles. Nu heb je een dynamische kaartmodule onderaan de contactpagina met een klikbare pin die bedrijfsinformatie weergeeft.
Opties voor kaartmodule-inhoud
Op het inhoudstabblad vind je alle inhoudselementen van de module, zoals tekst, afbeeldingen en iconen. Dat alles controleert wat verschijnt in uw module, vindt u altijd op dit tabblad.
+ Voeg een nieuw artikel toe
Hier voegt u nieuwe pinnen (of slots) toe aan uw bordmodule. Als je op "nieuw item toevoegen" klikt, wordt een hele nieuwe lijst met ontwerpinstellingen (inclusief inhoud, ontwerp, geavanceerd) voor je nieuwe pin geopend. Zie hieronder voor individuele pin-instellingen.
Nadat je je eerste punaise hebt toegevoegd, zie je een grijze balk verschijnen met je pintitel als tag. De grijze balk heeft ook drie knoppen waarmee u de punaise kunt bewerken, dupliceren of verwijderen.
Google API-sleutel
De Maps-module maakt gebruik van de Google Maps API en vereist een geldige Google API-sleutel om te werken. Voordat u de Kaartmodule gebruikt, moet u ervoor zorgen dat u uw API-sleutel hebt toegevoegd in het paneel Opties van de Divi-thema.
Kaartcentrumadres
Voer een adres in voor het middelpunt van de kaart, en het adres wordt geocodeerd en weergegeven op de kaart hieronder. Dit is handig als u meerdere pinnen heeft en u wilt dat de kaart wordt vergroot op een specifieke en nauwkeurigere locatie. U kunt eenvoudig een adres in een standaardformaat typen, zoals "1235 Sunny Road, Some City, State, 88343".
Beheerderlabel
Hierdoor wordt het modulelabel in de constructor gewijzigd voor gemakkelijke identificatie. Wanneer u de WireFrame-weergave in Visual Builder gebruikt, verschijnen deze labels in het moduleblok van de Divi Builder-interface.
Ontwerpopties kaartmodule
Op het tabblad Ontwerpen vindt u alle stijlopties voor de module, zoals lettertypen, kleuren, grootte en spatiëring. Dit is het tabblad dat u gaat gebruiken om het uiterlijk van uw module te wijzigen. Elke Divi-module heeft een lange lijst met ontwerpinstellingen die u kunt gebruiken om te wijzigen wat u maar wilt.
Muiswiel zoom
Hier kunt u kiezen of het zoomniveau wordt bestuurd door het muiswiel of niet. Vaak is het het beste om deze optie uit te schakelen, zodat bezoekers niet gestoord worden als ze door de pagina scrollen en het muiswiel in het kaart-iframe steken. Dit geldt vooral voor kaartmodules over de volledige breedte.
Draggable Zoom
U kunt hier kiezen of de kaart op mobiele apparaten kan worden verplaatst.
Gebruik het grijswaardenfilter
Als u deze optie inschakelt, wordt uw kaart omgezet in een afbeelding in grijstinten.
Geavanceerde kaartopties
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 elk van de vele elementen van de module. U kunt ook aangepaste CSS-klassen en ID's op de module toepassen, die kunnen worden gebruikt om de module aan te passen in het style.css-bestand van uw child-thema.
CSS ID
Voer een optionele CSS-ID in om voor deze module te gebruiken. Een ID kan worden gebruikt om een aangepaste CSS-stijl te maken of om naar bepaalde secties van uw pagina te linken.
CSS-klasse
Voer de optionele CSS-klassen in die voor deze module moeten worden gebruikt. Een CSS-klasse kan worden gebruikt om een aangepaste CSS-stijl 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-stylesheet die u aan uw pagina of aan uw website toevoegt met behulp van de Divi-thema-opties of de instellingen op de Divi Builder-pagina.
Aangepaste CSS
Aangepaste CSS kan ook worden toegepast op de module en elk van de interne onderdelen van de module. In de sectie Aangepaste CSS vindt u een tekstveld waar u aangepaste CSS-stijlpagina's rechtstreeks aan elk element kunt toevoegen. CSS-vermeldingen in deze instellingen zijn al verpakt in stijltags. Voer dus gewoon de CSS-regels in, gescheiden door puntkomma's.
zichtbaarheid
Met deze optie kunt u de apparaten bedienen waarop uw module verschijnt. U kunt ervoor kiezen om uw module afzonderlijk op tablets, smartphones of desktops te deactiveren. Dit is handig als u verschillende mods op verschillende apparaten wilt gebruiken, of als u het mobiele ontwerp wilt vereenvoudigen door bepaalde elementen van de pagina te verwijderen.
Individuele kaartpin-opties
Titel
Bij het aanmaken van een nieuwe pin kunt u een titel toekennen. Deze titel verschijnt in het vak wanneer u de muisaanwijzer over de pin op de kaart beweegt.
Inhoud
Wanneer u een nieuwe pin maakt, kunt u een inhoudstekstblok toewijzen. Deze tekst verschijnt in het vak wanneer u de muisaanwijzer over de pin op de kaart beweegt.
Kaart adres
Dit is de exacte plek op de kaart waar uw nieuwe pin zal verschijnen. U kunt het adres in een standaardformaat invoeren.
[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD DIVI THEMA [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD DE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
Andere Divi-zelfstudies
- 5 websites voor restaurant gebruik Divi thema
- Tekst toevoegen aan een Divi WooCommerce-product
- Hoe de menukleur tussen Divi-pagina's te veranderen
- Hoe de rasters van een blog personaliseren met Divi
- Hoe de rol Divi editor op WordPress
- Een Divi-schuifregelaar op volledig scherm maken
- Hoe de kleur van menu's tussen Divi-pagina's te veranderen
- Functies die u waarschijnlijk niet kent over Divi
- Divi Builder gebruiken op WordPress
- Hoe de Divi-scrolmodule video te gebruiken
- Hoe de Divi Builder Flip-module te gebruiken
- Hoe een getuigenismodule op Divi Builder toe te voegen
- Hoe de Divi-tekstmodule te gebruiken
- Hoe maak je een schuifregelaar op Divi
- Hoe u een Divi-gebruikersrol kunt bewerken
- Hoe de Divi Social Media-module te gebruiken
- Hoe de shopmodule te gebruiken met het thema WordPress Divi
- Hoe de Divi zijbalkmodule te gebruiken
- Hoe de Divi Price Table-module te gebruiken
- Hoe de titelmodule van Divi-publicaties te gebruiken
- Hoe een videomodule van Divi toe te voegen
- Hoe de artikelnavigatiemodule te gebruiken
- Hoe de Divi-zoekmodule te gebruiken
- Hoe de Divi wallet-module te gebruiken
- Hoe de persoonsmodule op Divi Builder te gebruiken
- De walletmodule gebruiken met Divi-filter
- De schuifregelaarmodule op de volledige breedte gebruiken
- Hoe de Divi Builder-beeldmodule te gebruiken
- De navigatiemodule op de volledige breedte van Divi Builder gebruiken
- Hoe de afbeeldingengalerij-module te gebruiken
- Hoe de Divi Builder kaartmodule met volledige breedte te gebruiken
- Hoe de Divi Full Width Portfolio Module te gebruiken
- Hoe de Divi header-module over de volle breedte te gebruiken
- Hoe de Divi Counter-module te gebruiken
- De schuifregelaar voor artikelen gebruiken in Divi Builder
- Hoe de Divi Email Optin-module te gebruiken