Ti piacerebbe creare una mappa con più posizioni in WordPress con Elementor e componenti aggiuntivi essenziali?
Supponi di avere un'attività che ha già diverse filiali in città e di voler creare una mappa digitale che mostri l'ubicazione di tali filiali. Se disponi di un sito Web basato su WordPress, puoi creare una mappa di questo tipo senza sforzo. C'è un ottimo plugin che puoi usare per creare una mappa multi-posizione: Componenti aggiuntivi essenziali.
Componenti aggiuntivi essenziali è un componente aggiuntivo Elementor premium quindi è necessario installare anche Elementor prima di poterlo utilizzare. Puoi utilizzare la versione gratuita di Elementor per creare una carta con il modulo Componenti aggiuntivi essenziali.
La versione gratuita di componenti aggiuntivi essenziali è anche disponibile. Tuttavia, il widget per creare una mappa è disponibile solo nella versione a pagamento. Puoi scaricare la versione a pagamento di Essential Addons sul suo Sito ufficiale.
Utilizzeremo la piattaforma Google Maps per creare una mappa sul tuo WordPress utilizzando Essential Addons. Prima di iniziare, assicurati di installare Elementor ed Essential Addons.
Integra Google Maps con il modulo Essential Addons
Prima di poter aggiungere una mappa di Google Maps con Essential Addons, devi prima integrarli. Hai bisogno di una chiave API per integrare Google Maps con i moduli Essential Addons.
Per prima cosa, visita il Console dell'API di Google e accedi con il tuo account Google. Crea un nuovo progetto cliccando sul menu a tendina in alto e clicca su NUOVO PROGETTO.
Assegna un nome al tuo nuovo progetto e fai clic sul pulsante CREATE .
Una volta creato il tuo nuovo progetto, selezionalo dal menu a discesa e fai clic su Biblioteca sul pannello di sinistra.
Google divide l'API di Google Maps Platform in 17 tipi. Puoi vederli cliccando sul link VISUALIZZA TUTTO nella sezione Cartoline d'auguri. È necessario abilitare le API a seconda di ciò che si desidera ottenere.
Scopri anche: Come creare un modello di prodotto singolo personalizzato in WooCommerce con Elementor
Nel nostro caso, devi abilitare le seguenti API per aggiungere una mappa da Google Maps utilizzando Essential Addons.
- API delle indicazioni stradali
- API di geocodifica
- Mappe JavaScript API
- API Places
Per attivare un'API, seleziona un'API che desideri attivare (facendo clic su di essa) e fai clic sul pulsante ATTIVARE.
Dopo aver completato l'abilitazione delle API richieste, torna alla dashboard principale della console API di Google e fai clic su Identifiers sul pannello di sinistra. Fare clic sul pulsante Crea credenziali e seleziona Chiave API. Copia la chiave API nel popup che appare.
Accedi alla dashboard di WordPress e fai clic Componenti aggiuntivi essenziali sul pannello di sinistra. Fare clic sulla scheda Elementi e scorri verso il basso nella sezione Google Map avanzata. Cliquez sur Impostazioni profilo e incolla la chiave API che hai appena copiato.
Fare clic sul pulsante SALVA LE IMPOSTAZIONI per applicare la nuova modifica.
Inizia a creare la mappa
Una volta integrati Google Maps e i componenti aggiuntivi essenziali, puoi iniziare a creare la mappa. Per fare ciò, crea una nuova pagina (Pagine -> Aggiungi ) o un nuovo elemento (Articoli – > Aggiungi) e modificalo con Elementor.
Prima di creare la pagina, imposta il layout facendo clic sull'icona a forma di ingranaggio nell'angolo in basso a sinistra per aprire il pannello Impostazioni. Imposta il layout dal menu a discesa.
Crea una nuova sezione facendo clic sul pulsante più nella casella di modifica. Per avere un'area più ampia per la mappa, puoi selezionare la struttura a colonna singola. Trascina il widget Google Maps dal pannello di sinistra all'area di modifica.
Vai al pannello di sinistra e imposta il tipo di carta su marcatore multiplo.
Apri la sezione Impostazioni indicatore mappa e fai clic sull'indicatore di mappa esistente per modificarlo. Incolla la latitudine e la longitudine della prima posizione che desideri aggiungere alla mappa. Impostare anche il titolo e la descrizione.
Per ottenere la latitudine e la longitudine di una posizione, apri Google Maps e cerca la posizione (luogo) di cui desideri ottenere la latitudine e la longitudine. Una volta trovato, clicca con il tasto destro del mouse e un clic sinistro sul numero che compare nel menu contestuale.
Questa azione permette quindi di copiare la latitudine (il primo valore) e la longitudine (il secondo valore).
Dopo aver aggiunto la latitudine e la longitudine della prima posizione, fare clic sul pulsante AGGIUNGI UN ELEMENTO per aggiungere un'altra posizione alla mappa.
Apri di nuovo Google Maps e trova la nuova posizione che desideri aggiungere alla mappa e copia la longitudine e la longitudine e incollale nei rispettivi campi come quello sopra. Ripeti i passaggi precedenti per aggiungere più posizioni alla mappa.
Leggi anche: Come utilizzare il widget dei post di Elementor
Al termine dell'aggiunta delle posizioni, apri il blocco Controlli della mappa per abilitare/disabilitare i comandi che vuoi fornire sulla tua scheda. Puoi anche impostare il livello di zoom qui.
Puoi anche aprire il blocco Tema della mappa per selezionare il tema di Google Maps che desideri utilizzare.
Finora hai creato con successo una mappa con più posizioni. Puoi aprire la scheda Style per definire l'altezza e la larghezza della mappa.
Se vuoi avere una mappa a tutta larghezza, imposta la sezione che contiene la mappa a tutta larghezza. Per fare ciò, fare clic sulla maniglia della sezione.
In scheda e blocco disposizione imposta Larghezza contenuto su intera larghezzar e Spazio tra le colonne attivo Nessuna deviazione
Fare clic sul pulsante PUBBLICATOER nella parte inferiore del pannello di sinistra per pubblicare la tua pagina.
Incorpora la mappa in una pagina o in un post
Se per qualche motivo preferisci incorporare la tua mappa in una pagina/post (la pagina/post creata con l'editor predefinito di WordPress — Gutenberg), puoi utilizzare il WordPress Plugin Blocchi Elementor per Gutenberg. Questo plugin convertirà un modello Elementor in un blocco Gutenberg.
Per salvare la mappa appena creata come modello Elementor, fai clic sull'icona della freccia accanto al pulsante PUBBLICARE / AGGIORNARE e selezionare Salva come modello.
Dai un nome al tuo modello e clicca sul pulsante REGISTRARE.
Quindi, crea una nuova pagina o post (assicurati di aver installato il file Plugin elementor Blocchi per Gutenberg). Aggiungi un nuovo blocco e seleziona Libreria Elementor e seleziona il modello appena creato.
Nota: Se visualizzi il messaggio "Solo per scopi di sviluppo" quando aggiungi una carta, assicurati di abilitare la fatturazione di Google Cloud. La nuova politica di Google richiede agli sviluppatori di attivare l'account di fatturazione (puoi comunque utilizzare l'API di Google Maps gratuitamente).
Ottieni subito Elementor Pro!!!
Conclusione
Ecco ! Questo è tutto per questo articolo che ti mostra come creare una mappa con più posizioni con Elementor. Se hai dei dubbi su come arrivarci, faglielo sapere nel commentaires.
Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
