Helskärmskartmodulerna på Divi underlättar integrationen av personliga Google Maps överallt på din sida. Du kan till och med lägga till obegränsade stift på kartan och ange en anpassad startplats. Modulkartor har också formatet Normal bredd, så se till att kolla in det också!
Google Maps API-nyckel
En API-nyckel är krav för att använda kartmodulen. Logga in på för att få en API-nyckel Google Developers Console, som leder dig igenom processen och automatiskt aktiverar JavaScript Maps API för Google Maps och alla relaterade tjänster. Det första du blir ombedd är att skapa ett nytt projekt.
Därefter kommer du att bli ombedd att namnge ditt projekt. Du kan namnge projektet vad du vill. I det här exemplet kallade jag det helt enkelt "kartor". Du kan också ange domännamn på din webbplats (lägg till en * framför den om du tillåter åtkomst från www.domain.com och domain.com) för att säkerställa att de är auktoriserade till din API-nyckel.
När du har skapat ett namngivet projekt ser du en API-nyckel som du kan använda.
När du har fått en API-nyckel måste du kopiera / klistra in den i temalternativpanelen genom att gå till: Divi >> Temalternativ >> Allmänna inställningar >> Google Maps API-nyckel
Hur man lägger till Divi Full Screen Card-modulen
Innan du kan lägga till en helskärmskartmodul på din sida måste du först hoppa in i Divi Builder. När Divi-tema installerat på din webbplats kommer du att märka en knapp Använd Divi Builder ovanför inläggsredigeraren när du skapar en ny sida. Klicka på den här knappen för att aktivera Divi Builder och få tillgång till alla Divi Builder-moduler. Klicka sedan på knappen Använd Visual Builder för att starta generatorn i visuellt läge. Du kan också klicka på knappen Aktivera Visual Builder när du surfar på din webbplats i förgrunden om du är ansluten till din WordPress-instrumentpanel.
När du har gått in i Visual Builder kan du klicka på den grå plusknappen för att lägga till en ny modul på din sida. Nya fullbreddsmoduler kan bara läggas till i fullbreddssektionerna.
Om du börjar en ny sida, glöm inte att lägga till ett avsnitt med full bredd på din sida först.
Leta upp kartmodulen med full bredd i listan över moduler och klicka på den för att lägga till den på din sida. Listan med mods är sökbar, vilket innebär att du också kan skriva ordet "helskärmskarta" och klicka sedan på Enter för att automatiskt hitta och lägga till kartmodulen i full bredd! När modulen har lagts till hälsas du av listan över modulalternativ. Dessa alternativ är uppdelade i tre huvudgrupper: Innehåll , Conception et advanced .
Använd fallexempel: Lägg till en kartmodul i full bredd till en kontaktsida
En kartmodul i full bredd är ett utmärkt sätt att visa upp din företagsplats på din kontaktsida. Och möjligheten att lägga till flera nålar på din karta för att markera olika platser och affärsinformation är en användbar och attraktiv funktion.
I det här exemplet lägger jag till en kartmodul i full bredd för att visa plats- och företagsinformation genom att lägga till en anpassad nål på kartan.
Viktigt : Se till att en giltig Google API-nyckel har angetts i panelen Alternativ på Divi-tema. Kartmodulen fungerar inte utan den.
Använd Visual Builder och lägg till ett avsnitt med full bredd längst ner på kontaktsidan. Sätt sedan in Fullwidth Map-modulen i ditt nya avsnitt. På fliken Innehåll i kortinställningarna för full bredd anger du din företagsadress under alternativet Kortcenteradress. Kartcentrets adress är kartans mittpunkt.
Klicka sedan på + Lägg till en ny artikel för att skapa din första stift. Uppdatera följande:
Titel: [ange titeln på din plats] Innehåll: [ange innehållet på din PIN-kod (adress och telefonnummer)] Kartadress: [ange adressen för denna specifika plats]
Spara inställningar
Det är allt. Du har nu en dynamisk kartmodul i full bredd längst ner på kontaktsidan med en klickbar pin som visar företagsinformation.
Innehållsalternativ för hela breddskartmodulen
På fliken innehåll hittar du alla innehållselement i modulen, till exempel text, bilder och ikoner. Allt som styr vad visas i din modul hittas alltid på den här fliken.
Google API-nyckel
Maps-modulen använder Google Maps API och kräver en giltig Google API-nyckel för att fungera. Innan du använder kartmodulen, se till att du har lagt till din API-nyckel i panelen Alternativ på Divi-tema.
Kartcenteradress
Ange en adress för mittpunkten på kartan och adressen kommer att geokodas och visas på kartan nedan. Detta är användbart om du har flera stift och vill att kartan ska förstoras på en specifik och mer exakt plats. Du kan helt enkelt skriva en adress i ett standardformat, till exempel "1235 Sunny Road, Some City, State, 88343".
Administrationsetikett
Detta ändrar moduletiketten i konstruktorn för enkel identifiering. När du använder vyn WireFrame i Visual Builder visas dessa etiketter i modulblocket i Divi Builder-gränssnittet.
Fullständiga kartdesignalternativ
På fliken Design hittar du alla stilalternativ för modulen, som teckensnitt, färger, storlek och avstånd. Det här är fliken du använder för att ändra utseendet på din modul. Varje Divi-modul har en lång lista med designinställningar som du kan använda för att ändra vad som helst.
Mushjul Zoom
Här kan du välja om zoomnivån ska kontrolleras av mushjulet eller inte. Ofta är det bäst att stänga av det här alternativet så att besökarna inte störs när de rullar ner på sidan och fastnar mushjulet i kartan iframe. Detta gäller särskilt för kortmoduler i full bredd.
Draggable Zoom
Här kan du välja om kortet kan flyttas på mobila enheter.
Använd gråskalfiltret
Aktivera det här alternativet gör din karta till en gråskalebild.
Avancerade kartalternativ i full bredd
På den avancerade fliken hittar du alternativ som mer erfarna webbdesigners kan hitta användbara, till exempel anpassade CSS- och HTML-attribut. Här kan du använda anpassad CSS på något av modulens många element. Du kan också tillämpa anpassade CSS-klasser och ID på modulen, som kan användas för att anpassa modulen i ditt barns temas style.css-fil.
CSS ID
Ange ett valfritt CSS-ID som ska användas för den här modulen. Ett ID kan användas för att skapa en anpassad CSS-stil eller för att länka till vissa delar av din sida.
CSS klass
Ange de valfria CSS-klasserna som ska användas för den här modulen. En CSS-klass kan användas för att skapa anpassad CSS-styling. Du kan lägga till flera klasser, åtskilda av ett mellanslag. Dessa klasser kan användas i ditt Divi-underordnade tema eller i det anpassade CSS-stilarket som du lägger till på din sida eller på din webbplats med hjälp av Divi-temalternativ eller Divi Builder-sidinställningarna.
Anpassad CSS
Anpassad CSS kan också tillämpas på modulen och vilken modul som helst. I avsnittet Anpassad CSS hittar du ett textfält där du kan lägga till anpassade CSS-formatmallar direkt till varje element. CSS-poster i dessa inställningar är redan inslagna i stiltaggar. Så skriv bara in CSS-reglerna åtskilda av semikolon.
synlighet
Med det här alternativet kan du styra enheterna där din modul visas. Du kan välja att inaktivera din modul på surfplattor, smartphones eller stationära datorer individuellt. Detta är användbart om du vill använda olika mods på olika enheter, eller om du vill förenkla mobildesignen genom att eliminera vissa element från sidan.
Individuella alternativ för hela innehållsbredden
Titel
När du skapar en ny stift kan du tilldela en titel. Denna titel kommer att visas i rutan när du svävar över nålen på kartan.
Innehåll
När du skapar en ny stift kan du tilldela ett innehållstextblock. Denna text visas i rutan när du svävar över nålen på kartan.
Kartaadress
Det här är den exakta platsen på kartan där din nya stift kommer att visas. Du kan ange adressen i ett standardformat.
[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=”platt” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]LADDA NED DIVI TEMA [/vcex_button][/vc_column 1 ][vc_column] /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”]LADDA NED DEN TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
Andra Divi tutorials
- 5 webbplatser för restaurang användning Divi tema
- Så här lägger du till text på en Divi WooCommerce-produkt
- Så här byter du menyfärg mellan Divi-sidor
- Hur du anpassar rutorna på en blogg med Divi
- Hur man använder roll Divi editor på Wordpress
- Hur man skapar en Divi-skjutreglage på full skärm
- Hur man ändrar menyens färg mellan Divi-sidor
- Funktioner du antagligen inte känner till Divi
- Så här använder du Divi Builder på WordPress
- Så här använder du Divi video-rullningsmodulen
- Så här använder du Divi Builder Flip-modulen
- Hur man lägger till en vittnesmodul om Divi Builder
- Så här använder du Divi-textmodulen
- Hur man skapar en reglage på Divi
- Hur man redigerar en Divi-användarroll
- Så här använder du Divi Social Media-modulen
- Hur man använder butikmodulen på temat WordPress Divi
- Så här använder du Divi sidebar-modulen
- Så här använder du Divi Price Table Module
- Hur man använder titelfodulen i Divi-publikationer
- Hur lägger jag till en videomodul av Divi
- Så här använder du artikelnavigationsmodulen
- Så här använder du Divi-sökmodulen
- Så här använder du Divi-plånboksmodulen
- Hur man använder personmodulen på Divi Builder
- Hur man använder plånboksmodulen med Divi-filter
- Hur man använder skjutreglaget med hela bredden
- Så här använder du Divi Builder Image Module
- Så här använder du Divi Builder med fullbredd navigationsmodul
- Hur man använder modulen för bildgalleri
- Så här använder du Divi Builder Full-Width Card Module
- Så här använder du Divi Full Width Portfolio Module
- Hur du använder Divi-modulen med full bredd
- Så här använder du Divi Counter Module
- Hur man använder artiklarna på Divi Builder
- Så här använder du Divi Email Optin-modulen