Divi Tutorial: Slik bruker du Divi Full Screen Card Module

pari Blair Jersyer | Divi

Helskjermkartmodulene på Divi muliggjør integrering av personlige Google Maps overalt på siden din. Du kan til og med legge til ubegrensede pinner på kartet og angi et egendefinert startsted. Modulekart er også i normal bredde, så husk å sjekke det også!

full bredde-map-overview.png

Google Maps API-nøkkel

En API-nøkkel er krav for å bruke Maps-modulen. For å få tak i en API-nøkkel, logg inn på Google Developers Console, som vil lede deg gjennom prosessen og automatisk aktivere JavaScript Maps API for Google Maps og alle tilknyttede tjenester. Det første du blir bedt om er å lage et nytt prosjekt.

opprett en Google.jpg API-nøkkel

Deretter vil du bli bedt om å navngi prosjektet ditt. Du kan navngi prosjektet hva du vil. I dette eksemplet kalte jeg det ganske enkelt "Kart". Du kan også gå inn i domenenavn av nettstedet ditt (legg til en * foran den hvis du tillater tilgang fra www.domain.com og domain.com) for å sikre at de er autorisert til API-nøkkelen din.

legg til en API-nøkkel til et project.jpg

Etter at du har opprettet et navngitt prosjekt, ser du en API-nøkkel du kan bruke.

bilde docs

Etter å ha fått en API-nøkkel, må du kopiere / lime den inn i temalternativpanelet ved å gå til: Divi >> Temaalternativer >> Generelle innstillinger >> Google Maps API-nøkkel

Slik legger du til Divi Full Screen Card-modulen

Før du kan legge til en kartmodul i fullskjerm på siden din, må du først hoppe inn i Divi Builder. Først når Divi-tema installert på nettstedet ditt, vil du legge merke til en knapp Bruk Divi Builder over innleggsredaktøren når du oppretter en ny side. Klikk på denne knappen for å aktivere Divi Builder og få tilgang til alle Divi Builder-modulene. Klikk deretter på knappen Bruk Visual Builder for å starte generatoren i visuell modus. Du kan også klikke på knappen Aktiver Visual Builder når du surfer på nettstedet ditt i forgrunnen hvis du er koblet til WordPress-dashbordet.

bruk divi byggmester

Når du har gått inn i Visual Builder, kan du klikke på den grå pluss-knappen for å legge til en ny modul på siden din. Nye fullbreddemoduler kan bare legges til i fullbreddeseksjoner.

full seksjon divi builder.png

Hvis du starter en ny side, ikke glem å legge til en fullbreddeseksjon på siden din først.

full kartskjerm.png

Finn kortmodulen i full bredde i listen over moduler, og klikk på den for å legge den til siden din. Listen over moduler er søkbar, noe som betyr at du også kan skrive ordet "fullskjermskart" og deretter klikke enter for automatisk å finne og legge til kartmodulen i full bredde! Når modulen er lagt til, vil du bli møtt av modulalternativlisten. Disse alternativene er delt inn i tre hovedgrupper: Innhold , Conception et avansert .

Bruk sakseksempel: Legg til en kartmodul i full bredde til en kontaktside

En kartmodul i full bredde er en fin måte å vise bedriftens beliggenhet på kontaktsiden din. Og muligheten til å legge til flere pinner på kartet for å fremheve forskjellige steder og forretningsinformasjon er en nyttig og attraktiv funksjon.

For dette eksemplet vil jeg legge til en kartmodul i full bredde for å vise plassering og forretningsinformasjon ved å legge til en egendefinert nål på kartet.

legg til et fullverdig kart divi builder.jpg

Viktig : Sørg for at en gyldig Google API-nøkkel er angitt i alternativpanelet i Divi-tema. Kartmodulen vil ikke fungere uten den.

Bruk Visual Builder til å legge til en fullbreddseksjon nederst på kontaktsiden. Sett deretter inn Fullwidth Map-modulen i den nye delen. I kategorien Innhold i innstillingene for kart over full bredde, skriv inn firmaadressen under alternativet Kart senteradresse. Kortsenteradressen er midtpunktet på kartet.

legg til et kart divi example.jpg

Klikk deretter + Legg til en ny vare for å lage din første pin. Oppdater følgende:

Tittel: [skriv inn tittelen på posisjonen din] Innhold: [skriv inn innholdet på PIN-koden din (adresse og telefonnummer)] Kartadresse: [skriv inn adressen for dette bestemte stedet]

legg til detaljer i full bredde kart divi.jpg

Lagre innstillinger

Det er alt. Du har nå en dynamisk kartmodul i full bredde nederst på kontaktsiden med en klikkbar pin som viser firmainformasjon.

resultat kart i full bredde divi.jpg

Innholdsalternativer for full bredde på kartmodul

I Innhold-fanen finner du alle innholdselementene i modulen, for eksempel tekst, bilder og ikoner. Alt som styrer hva vises i modulen din, vil du alltid finne i denne fanen.

alternativ innhold divi byggmester full bredde map module.png

Google API-nøkkel

Maps-modulen bruker Google Maps API og krever en gyldig Google API-nøkkel for å fungere. Før du bruker kartmodulen, sørg for at du har lagt til API-nøkkelen din i alternativpanelet i Divi-tema.

Kartsenteradresse

Skriv inn en adresse for midtpunktet på kartet, og adressen blir geokodet og vises på kartet nedenfor. Dette er nyttig hvis du har flere pinner og vil at kartet skal forstørres på en bestemt og mer presis plassering. Du kan ganske enkelt skrive en adresse i et standardformat, for eksempel "1235 Sunny Road, Some City, State, 88343".

Administrasjonsmerke

Dette vil endre moduletiketten i konstruktøren for enkel identifisering. Når du bruker WireFrame-visningen i Visual Builder, vises disse etikettene i modulblokken i Divi Builder-grensesnittet.

Full-bredde kartdesign alternativer

I kategorien Design finner du alle stilalternativene for modulen, for eksempel skrifter, farger, størrelse og avstand. Dette er fanen du vil bruke til å endre utseendet til modulen din. Hver Divi-modul har en lang liste over designinnstillinger som du kan bruke til å endre hva som helst.

alternativ designmodul full bredde map.png

Mushjul Zoom

Her kan du velge om zoomnivået skal styres av mushjulet eller ikke. Ofte er det best å slå av dette alternativet slik at besøkende ikke blir forstyrret når de ruller nedover siden og stikker mushjulet i iframe-kartet. Dette gjelder spesielt for kortmoduler i full bredde.

Draggable Zoom

Du kan velge om kortet kan flyttes på mobile enheter.

Bruk gråtonerfilteret

Aktivering av dette alternativet vil gjøre kartet ditt til et gråtonebilde.

Avanserte kartalternativer i full bredde

I den avanserte fanen finner du alternativer som mer erfarne webdesignere kan finne nyttige, for eksempel tilpassede CSS- og HTML-attributter. Her kan du bruke tilpasset CSS på alle modulens mange elementer. Du kan også bruke tilpassede CSS-klasser og IDer til modulen, som kan brukes til å tilpasse modulen i barnets temas style.css-fil.

seksjon forhåndsmodul full bredde kort divi.png

CSS ID

Skriv inn en valgfri CSS-ID som skal brukes til denne modulen. En ID kan brukes til å lage en tilpasset CSS-stil eller for å koble til bestemte deler av siden din.

CSS klasse

Angi de valgfrie CSS-klassene som skal brukes til denne modulen. En CSS-klasse kan brukes til å lage tilpasset CSS-styling. Du kan legge til flere klasser, atskilt med et mellomrom. Disse klassene kan brukes i Divi-barnetemaet eller i det tilpassede CSS-stilarket du legger til på siden eller nettstedet ditt ved hjelp av Divi-temaalternativene eller innstillingene på Divi Builder-siden.

Tilpasset CSS

Tilpasset CSS kan også brukes på modulen og hvilken som helst av modulens interner. I Custom CSS-delen finner du et tekstfelt der du kan legge til tilpassede CSS-stilark direkte til hvert element. CSS-oppføringer i disse innstillingene er allerede pakket inn i stilkoder. Så bare skriv inn CSS-reglene atskilt med semikolon.

synlighet

Dette alternativet lar deg kontrollere enhetene som modulen din vises på. Du kan velge å deaktivere modulen din på nettbrett, smarttelefoner eller stasjonære datamaskiner hver for seg. Dette er nyttig hvis du vil bruke forskjellige mods på forskjellige enheter, eller hvis du vil forenkle mobildesignet ved å eliminere visse elementer fra siden.

Individuelle fullverdige kartinnholdsalternativer

pin parameter modul kort full width.png

Tittel

Når du oppretter en ny pin, kan du tilordne en tittel. Denne tittelen vises i boksen når du svever over pinnen på kartet.

Innhold

Når du oppretter en ny pin, kan du tilordne en innholdstekstblokk. Denne teksten vises i boksen når du svever over pinnen på kartet.

Kartadresse

Dette er det nøyaktige stedet på kartet der den nye nålen din vises. Du kan angi 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=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]LAST 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”]LAST NED DEN MALER DIVI[/vcex_button][/vc_column][/vc_row]

Andre divisjoner

Legg inn kommentaren

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket *

Dette nettstedet bruker Akismet for å redusere uønsket. Lær mer om hvordan dine kommentarer data blir brukt.