I moduli mappa semplificano l'integrazione di Google Maps personalizzato ovunque sulla tua pagina. Puoi anche aggiungere un numero illimitato di pin alla mappa e impostare una posizione di partenza personalizzata. I moduli della scheda sono disponibili anche in un formato a larghezza intera, quindi assicurati di controllare anche quello!
Chiave API di Google Maps
Una chiave API è requisiti per utilizzare il modulo Mappa. Per ottenere una chiave API, accedi a Google Developers Console, che ti guiderà attraverso il processo e attiverà automaticamente l'API JavaScript di Google Maps e tutti i servizi correlati. La prima cosa che ti verrà chiesto è di creare un nuovo progetto.
Successivamente, ti verrà chiesto di nominare il tuo progetto. Puoi nominare il progetto come preferisci. In questo esempio, l'ho chiamato semplicemente "Mappe". Puoi anche inserire il nome di dominio del tuo sito web (aggiungi un * davanti ad esso se consenti l'accesso da www.domain.com e domain.com) per assicurarti che la tua chiave API sia autorizzata.
Dopo aver creato un progetto denominato, vedrai una chiave API che puoi utilizzare.
Dopo aver ottenuto una chiave API, è necessario copiarla / incollarla nel pannello delle opzioni del tema andando a: Divi >> Opzioni tema >> Impostazioni generali >> Chiave API di Google Maps
Come aggiungere un modulo mappa alla tua pagina
Prima di poter aggiungere un modulo mappa alla tua pagina, devi prima passare a Divi Builder. Una volta il Tema Divi installato sul tuo sito web, noterai un pulsante Usa Divi Builder sopra l'editor dei post ogni volta che crei una nuova pagina. Fare clic su questo pulsante per attivare Divi Builder e accedere a tutti i moduli Divi Builder. Quindi fare clic sul pulsante Usa Visual Builder per avviare il generatore in modalità visuale. Puoi anche fare clic sul pulsante Usa Visual Builder quando navighi sul tuo sito Web in primo piano se sei connesso alla dashboard di WordPress.
Una volta entrato in Visual Builder, puoi fare clic sul pulsante più grigio per aggiungere un nuovo modulo alla tua pagina. I nuovi moduli possono essere aggiunti solo all'interno delle righe. Se stai iniziando una nuova pagina, ricordati di aggiungere prima una riga alla tua pagina.
Individua il modulo mappa nell'elenco dei moduli e fai clic su di esso per aggiungerlo alla tua pagina. L'elenco dei moduli è ricercabile, il che significa che puoi anche digitare la parola "mappa" e quindi fare clic su Invio per cercare e aggiungere automaticamente il modulo mappa! Una volta aggiunto il modulo, sarai accolto dall'elenco delle opzioni del modulo. Queste opzioni sono suddivise in tre gruppi principali: Contenuto , Design et avanzato .
Caso d'uso di esempio: aggiunta di un modulo mappa a una pagina di contatto
Un modulo mappa è un ottimo modo per mostrare la posizione della tua attività nella pagina dei contatti. E la possibilità di aggiungere più segnaposto alla mappa per evidenziare diverse località e informazioni sull'attività è una caratteristica utile e interessante.
Per questo esempio, aggiungerò un modulo mappa per mostrare informazioni sulla posizione e sull'attività aggiungendo un segnaposto personalizzato alla mappa.
Consigli : assicurati di aver inserito una chiave API di Google valida nel pannello Opzioni del Tema Divi. Il modulo mappa non funzionerà senza di esso.
Utilizzando Visual Builder, aggiungi una sezione standard nella parte inferiore della pagina dei contatti. Quindi inserisci il modulo Mappa nella tua nuova sezione. Nella scheda Contenuto delle impostazioni della carta, inserisci l'indirizzo della tua azienda sotto l'opzione Indirizzo del centro della carta. L'indirizzo del centro della mappa è il punto centrale della mappa.
Quindi fare clic su + Aggiungi un nuovo elemento per creare il tuo primo pin. Aggiorna quanto segue:
Titolo: [inserisci il titolo della tua posizione]
Contenuto: [inserisci il contenuto del tuo pin (indirizzo e numero di telefono)]
Indirizzo mappa: [inserisci l'indirizzo per questa posizione specifica]
Salva le impostazioni
È tutto. Ora hai un modulo mappa dinamico nella parte inferiore della pagina dei contatti con un segnaposto cliccabile che mostra le informazioni sulla società.
Opzioni del modulo del modulo Mappa
Nella scheda dei contenuti troverai tutti gli elementi di contenuto del modulo, come testo, immagini e icone. Tutto ciò che controlla cosa appare nel tuo modulo si troverà sempre in questa scheda.
+ Aggiungi un nuovo articolo
Qui è dove aggiungi nuovi pin (o slot) al modulo della scheda. Facendo clic su "aggiungi nuovo elemento" si aprirà un elenco completamente nuovo di impostazioni di progettazione (inclusi contenuto, design, avanzate) per il tuo nuovo pin. Vedi sotto per le impostazioni dei pin individuali.
Dopo aver aggiunto il tuo primo pin, vedrai apparire una barra grigia con il titolo del pin come tag. La barra grigia ha anche tre pulsanti che consentono di modificare, duplicare o eliminare il simbolo.
Chiave API di Google
Il modulo Maps utilizza l'API di Google Maps e richiede una chiave API di Google valida per funzionare. Prima di utilizzare il modulo Mappa, assicurati di aver aggiunto la tua chiave API nel pannello Opzioni del Tema Divi.
Indirizzo Centro Mappa
Immettere un indirizzo per il punto centrale della mappa e l'indirizzo verrà geocodificato e visualizzato sulla mappa sottostante. Ciò è utile se si dispone di più pin e si desidera che la mappa venga ingrandita in una posizione specifica e più precisa. È sufficiente digitare un indirizzo in un formato standard, ad esempio "1235 Sunny Road, Some City, State, 88343".
Etichetta dell'amministratore
Questo cambierà l'etichetta del modulo nel costruttore per una facile identificazione. Quando si utilizza la visualizzazione WireFrame in Visual Builder, queste etichette vengono visualizzate nel blocco del modulo dell'interfaccia di Divi Builder.
Opzioni di progettazione del modulo della mappa
Nella scheda Design, troverai tutte le opzioni di stile del modulo, come caratteri, colori, dimensioni e spaziatura. Questa è la scheda che utilizzerai per modificare l'aspetto del tuo modulo. Ogni modulo Divi ha un lungo elenco di impostazioni di progettazione che puoi utilizzare per modificare ciò che desideri.
Zoom rotellina del mouse
Qui puoi scegliere se il livello di zoom sarà controllato o meno dalla rotellina del mouse. Spesso, è meglio disattivare questa opzione in modo che i visitatori non siano disturbati mentre scorrono la pagina e la rotellina del mouse rimane bloccata nell'iframe della mappa. Ciò è particolarmente vero per i moduli della scheda a larghezza intera.
Zoom trascinabile
Puoi scegliere qui se la scheda può essere spostata su dispositivi mobili.
Usa il filtro scala di grigi
Abilitando questa opzione trasformerai la tua mappa in un'immagine in scala di grigi.
Opzioni avanzate della mappa
Nella scheda Avanzate troverai le opzioni che i web designer più esperti potrebbero trovare utili, come gli attributi CSS e HTML personalizzati. Qui puoi applicare CSS personalizzati a uno qualsiasi dei molti elementi del modulo. Puoi anche applicare classi e ID CSS personalizzati al modulo, che possono essere utilizzati per personalizzare il modulo nel file style.css del tema figlio.
ID CSS
Immettere un ID CSS opzionale da utilizzare per questo modulo. Un ID può essere utilizzato per creare uno stile CSS personalizzato o per collegarsi a particolari sezioni della tua pagina.
Classe CSS
Immettere le classi CSS opzionali da utilizzare per questo modulo. Una classe CSS può essere utilizzata per creare uno stile CSS personalizzato. Puoi aggiungere più classi, separate da uno spazio. Queste classi possono essere utilizzate nel tema figlio Divi o nel foglio di stile CSS personalizzato che aggiungi alla tua pagina o al tuo sito Web utilizzando le opzioni del tema Divi o le impostazioni nella pagina Divi Builder.
CSS personalizzato
Il CSS personalizzato può anche essere applicato al modulo ea qualsiasi parte interna del modulo. Nella sezione CSS personalizzato, troverai un campo di testo in cui puoi aggiungere fogli di stile CSS personalizzati direttamente a ciascun elemento. Le voci CSS in queste impostazioni sono già inserite nei tag di stile. Quindi inserisci le regole CSS separate da punto e virgola.
visibilità
Questa opzione ti consente di controllare i dispositivi su cui appare il tuo modulo. Puoi scegliere di disattivare singolarmente il tuo modulo su tablet, smartphone o desktop. Questo è utile se vuoi usare diverse mod su diversi dispositivi, o se vuoi semplificare il design mobile eliminando alcuni elementi dalla pagina.
Opzioni per i singoli biglietti da visita
titolo
Quando crei un nuovo segnaposto, puoi assegnare un titolo. Questo titolo apparirà nella casella quando si passa con il mouse sopra il segnaposto sulla mappa.
Contenuto
Quando si crea un nuovo segnaposto, è possibile assegnare un blocco di testo del contenuto. Questo testo verrà visualizzato nella casella quando si passa con il mouse sopra il segnaposto sulla mappa.
Indirizzo della mappa
Questo è il punto esatto sulla mappa in cui apparirà il tuo nuovo segnaposto. È possibile inserire l'indirizzo in un formato standard.
[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”]SCARICA TEMA DIVI [/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”]SCARICA IL MODELLI DIVI[/vcex_button][/vc_column][/vc_row]
Altri tutorial di Divi
- siti 5 che utilizzano Divi ristorante a tema
- Come aggiungere testo su un prodotto Divi WooCommerce
- Come cambiare il colore del menu tra le pagine Divi
- Come personalizzare le griglie di un blog con Divi
- Come utilizzare il ruolo di Editor Divi su WordPress
- Come creare un dispositivo di scorrimento Divi a schermo intero
- Come cambiare il colore dei menu tra le pagine di Divi
- Funzionalità che probabilmente non conosci su Divi
- Come usare Divi Builder su WordPress
- Come usare il modulo di scorrimento video Divi
- Come utilizzare il modulo Divi Builder Flip
- Come aggiungere un modulo di testimonianza su Divi Builder
- Come usare il modulo di testo Divi
- Come creare un dispositivo di scorrimento su Divi
- Come modificare un ruolo utente Divi
- Come usare il modulo Divi Social Media
- Come utilizzare il modulo negozio sul tema WordPress Divi
- Come utilizzare il modulo barra laterale Divi
- Come utilizzare il modulo Tabella prezzi Divi
- Come utilizzare il modulo del titolo delle pubblicazioni Divi
- Come aggiungere un modulo video di Divi
- Come utilizzare il modulo di navigazione dell'articolo
- Come usare il modulo di ricerca Divi
- Come utilizzare il modulo portafoglio Divi
- Come usare il modulo persona su Divi Builder
- Come usare il modulo portafoglio con filtro Divi
- Come utilizzare il modulo di scorrimento a larghezza piena
- Come utilizzare il modulo immagine Divi Builder
- Come utilizzare il modulo di navigazione a larghezza intera di Divi Builder
- Come utilizzare il modulo della galleria di immagini
- Come utilizzare il modulo Divi Builder Full-Width Card
- Come utilizzare il modulo Divi Full Width Portfolio
- Come utilizzare il modulo di intestazione a tutta larghezza Divi
- Come utilizzare il modulo contatore Divi
- Come utilizzare il dispositivo di scorrimento degli articoli su Divi Builder
- Come utilizzare il modulo Divi Email Optin
