Fuldskærmskortmodulerne på Divi letter integrationen af personlige Google Maps overalt på din side. Du kan endda tilføje ubegrænsede stifter til kortet og indstille en brugerdefineret startplacering. Modulkort er også i formatet Normal bredde, så sørg også for at tjekke det ud!
Google Maps API-nøgle
En API-nøgle er Krav at bruge kortmodulet. Log ind på for at få en API-nøgle Google Developers Console, som fører dig gennem processen og automatisk aktiverer Google Maps JavaScript API og alle relaterede tjenester. Den første ting, du bliver bedt om, er at oprette et nyt projekt.
Dernæst bliver du bedt om at navngive dit projekt. Du kan navngive projektet, hvad du vil. I dette eksempel kaldte jeg det simpelthen "Maps". Du kan også indtaste domænenavn af dit websted (tilføj en * foran det, hvis du tillader adgang fra www.domain.com og domain.com) for at sikre, at de er autoriseret til din API-nøgle.
Når du har oprettet et navngivet projekt, ser du en API-nøgle, som du kan bruge.
Når du har fået en API-nøgle, skal du kopiere / indsætte den i panelet med temaindstillinger ved at gå til: Divi >> Temaindstillinger >> Generelle indstillinger >> Google Maps API-nøgle
Sådan tilføjes Divi Full Screen Card-modulet
Før du kan tilføje et fuldskærmskortmodul til din side, skal du først hoppe ind i Divi Builder. En gang Divi-tema installeret på din hjemmeside, vil du bemærke en knap Brug Divi Builder over indlægseditoren, når du opretter en ny side. Klik på denne knap for at aktivere Divi Builder og få adgang til alle Divi Builder-modulerne. Klik derefter på knappen Brug Visual Builder for at starte generatoren i visuel tilstand. Du kan også klikke på knappen Aktivér Visual Builder når du gennemser dit websted i forgrunden, hvis du er tilsluttet dit WordPress-dashboard.
Når du har indtastet Visual Builder, kan du klikke på den grå plus-knap for at tilføje et nyt modul til din side. Nye fuldbreddemoduler kan kun tilføjes i fuldbreddesektioner.
Hvis du starter en ny side, skal du først glemme at tilføje en fuldbreddesektion til din side.
Find kortmodulet i fuld bredde på listen over moduler, og klik på det for at føje det til din side. Listen over moduler er søgbar, hvilket betyder, at du også kan skrive ordet "fuldskærmskort" og derefter klikke på Enter for automatisk at finde og tilføje kortmodulet i fuld bredde! Når modulet er tilføjet, vil du blive mødt af listen over modulindstillinger. Disse muligheder er opdelt i tre hovedgrupper: Indhold , Conception et avanceret .
Brug case-eksempel: Føj et kortmodul i fuld bredde til en kontaktside
Et kortmodul i fuld bredde er en fantastisk måde at vise din virksomheds placering på din kontaktside. Og muligheden for at tilføje flere nåle til dit kort for at fremhæve forskellige steder og virksomhedsoplysninger er en nyttig og attraktiv funktion.
I dette eksempel tilføjer jeg et kortmodul i fuld bredde for at vise placering og virksomhedsoplysninger ved at tilføje en brugerdefineret nål til kortet.
Vigtig : Sørg for, at der er indtastet en gyldig Google API-nøgle i panelet Indstillinger i Divi-tema. Kortmodulet fungerer ikke uden det.
Brug Visual Builder til at tilføje et afsnit med fuld bredde nederst på kontaktsiden. Indsæt derefter Fullwidth Map-modulet i dit nye afsnit. På fanen Indhold i kortindstillingerne i fuld bredde skal du indtaste din virksomhedsadresse under indstillingen Kortcenteradresse. Kortets centeradresse er kortets midtpunkt.
Klik derefter på + Tilføj en ny vare for at oprette din første pin. Opdater følgende:
Titel: [indtast titlen på din placering] Indhold: [indtast indholdet af din pin (adresse og telefonnummer)] Kortadresse: [indtast adressen for denne specifikke placering]
Gem indstillinger
Det er alt. Du har nu et dynamisk kortmodul i fuld bredde nederst på kontaktsiden med en klikbar pin, der viser virksomhedsoplysninger.
Indholdsindstillinger for fuld bredde
I fanen indhold finder du alle modulets indholdselementer, såsom tekst, billeder og ikoner. Alt det der styrer hvad vises i dit modul vil altid findes på denne fane.
Google API-nøgle
Maps-modulet bruger Google Maps API og kræver en gyldig Google API-nøgle for at fungere. Før du bruger kortmodulet, skal du sørge for, at du har tilføjet din API-nøgle i panelet Indstillinger i Divi-tema.
Kortcenteradresse
Indtast en adresse til kortets centrum, og adressen vil blive geokodet og vises på kortet nedenfor. Dette er nyttigt, hvis du har flere ben, og du ønsker, at kortet skal forstørres på en bestemt og mere præcis placering. Du kan bare skrive en adresse i et standardformat, såsom "1235 Sunny Road, Some City, State, 88343".
Administration etiket
Dette vil ændre moduletiketten i konstruktøren for nem identifikation. Når du bruger WireFrame-visningen i Visual Builder, vises disse etiketter i modulblokken i Divi Builder-grænsefladen.
Fuldbredde kortdesign muligheder
Under fanen Design finder du alle indstillingerne for modulstyling, såsom skrifttyper, farver, størrelse og afstand. Dette er den fane, du vil bruge til at ændre udseendet på dit modul. Hvert Divi-modul har en lang liste over designindstillinger, som du kan bruge til at ændre alt.
Mushjul Zoom
Her kan du vælge, om zoomniveauet skal styres af musen eller ej. Ofte er det bedst at slå denne indstilling fra, så de besøgende ikke forstyrres, da de ruller ned på siden og sætter mushjulet i kortet iframe. Dette gælder især for kortbreddemoduler i fuld bredde.
Trækbar zoom
Du kan her vælge, om kortet kan flyttes på mobile enheder.
Brug gråtonerfilteret
Aktivering af denne mulighed vil gøre dit kort til et gråtonebillede.
Avancerede kortindstillinger i fuld bredde
På den avancerede fane finder du muligheder, som mere erfarne webdesignere måske finder nyttige, såsom tilpassede CSS- og HTML-attributter. Her kan du anvende brugerdefineret CSS på ethvert af modulets mange elementer. Du kan også anvende tilpassede CSS-klasser og ID'er til modulet, som kan bruges til at tilpasse modulet i dit barns temas style.css-fil.
CSS ID
Indtast et valgfrit CSS-ID, der skal bruges til dette modul. Et ID kan bruges til at oprette en brugerdefineret CSS-stil eller til at linke til bestemte sektioner på din side.
CSS klasse
Indtast de valgfri CSS-klasser, der skal bruges til dette modul. En CSS-klasse kan bruges til at oprette brugerdefineret CSS-styling. Du kan tilføje flere klasser adskilt af et mellemrum. Disse klasser kan bruges i dit Divi-underordnede tema eller i det brugerdefinerede CSS-stilark, som du føjer til din side eller til dit websted ved hjælp af Divi-temaindstillingerne eller Divi Builder-sideindstillingerne.
Tilpasset CSS
Brugerdefineret CSS kan også anvendes på modulet og ethvert af modulets interner. I sektionen Custom CSS finder du et tekstfelt, hvor du kan tilføje tilpassede CSS-stilark direkte til hvert element. CSS-poster i disse indstillinger er allerede pakket i typografikoder. Så indtast bare CSS-reglerne adskilt af semikolon.
synlighed
Denne mulighed giver dig mulighed for at kontrollere de enheder, som dit modul vises på. Du kan vælge at deaktivere dit modul på tablets, smartphones eller desktops individuelt. Dette er nyttigt, hvis du vil bruge forskellige mods på forskellige enheder, eller hvis du vil forenkle mobildesignet ved at fjerne visse elementer fra siden.
Individuelle indstillinger for fuld bredde af kortindhold
titel
Når du opretter en ny pin, kan du tildele en titel. Denne titel vises i feltet, når du svæver over stiften på kortet.
Indhold
Når du opretter en ny pin, kan du tildele en teksttekstblok. Denne tekst vises i feltet, når du svæver over stiften på kortet.
Kort adresse
Dette er det nøjagtige sted på kortet, hvor din nye pin vises. Du kan indtaste adressen i et 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=”flad” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD 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”]DOWNLOAD THE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
Andre Divi tutorials
- 5 websteder, der bruger Divi restaurant tema
- Sådan tilføjer du tekst på et Divi WooCommerce-produkt
- Sådan ændres menuen farve mellem Divi sider
- Sådan tilpasses tavlerne på en blog med Divi
- Sådan bruges rolle Divi redaktør på WordPress
- Sådan opretter du en Divi-skyder på fuld skærm
- Sådan ændres menuenes farve mellem Divi-sider
- Funktioner, som du sandsynligvis ikke kender til Divi
- Sådan bruger du Divi Builder på WordPress
- Sådan bruges Divi-video-rullemodulet
- Sådan bruges Divi Builder Flip-modulet
- Sådan tilføjes et vidnesbyrdsmodul om Divi Builder
- Sådan bruges Divi-tekstmodulet
- Sådan opretter du en skyder på Divi
- Sådan redigeres en Divi-brugerrolle
- Sådan bruges Divi Social Media-modulet
- Sådan bruges butikmodulet med temaet WordPress Divi
- Sådan bruges Divi sidebar modul
- Sådan bruges Divi Price Table Module
- Sådan bruges titelmodulet i Divi-publikationer
- Sådan tilføjes et videomodul til Divi
- Sådan bruges artikelnavigationsmodulet
- Sådan bruges Divi-søgemodulet
- Sådan bruges Divi wallet-modulet
- Sådan bruges personmodulet på Divi Builder
- Sådan bruges tegnebogen modulet med Divi filter
- Sådan bruges glidemodulet i fuld bredde
- Sådan bruges Divi Builder Image Module
- Sådan bruger du navigationsmodulet med fuld bredde i Divi Builder
- Sådan bruges billedgallerimodulet
- Sådan bruges Divi Builder Fuldbredde-kortmodul
- Sådan bruges Divi Full Width Portfolio Module
- Sådan bruges Divi-modulet i fuld bredde
- Sådan bruges Divi Counter Module
- Sådan bruges artikelskyderen på Divi Builder
- Sådan bruges Divi Email Optin-modulet
