Vai al contenuto principale

Divi Tutorial: Come utilizzare il modulo Divi Full Screen Card

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 701.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

I moduli mappa a schermo intero su Divi facilitano l'integrazione di Google Maps personalizzato ovunque sulla tua pagina. Puoi persino aggiungere un numero illimitato di pin alla mappa e impostare una posizione di partenza personalizzata. Anche le mappe dei moduli sono in formato Larghezza normale, quindi assicurati di controllare anche quello!

fullwidth-map-overview.png

Chiave API di Google Maps

Una chiave API è requisiti per utilizzare il modulo Mappe. 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.

crea una chiave API di Google.jpg

Quindi ti verrà chiesto di dare un nome al tuo progetto. Puoi nominare il progetto come preferisci. In questo esempio, l'ho chiamato semplicemente "Carte". Puoi anche inserire il nome di dominio del tuo sito web (aggiungi un * prima di esso se stai consentendo l'accesso da www.domain.com e domain.com) per assicurarti che la tua chiave API sia autorizzata.

aggiungi una chiave API a project.jpg

Dopo aver creato un progetto denominato, vedrai una chiave API che puoi utilizzare.

documenti di immagine

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 il modulo Divi Full Screen Card

Prima di poter aggiungere un modulo mappa a schermo intero alla tua pagina, devi prima passare a Divi Builder. Una volta installato il tema Divi 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 Abilita Visual Builder quando navighi sul tuo sito Web in primo piano se sei connesso alla dashboard di WordPress.

usa il costruttore di divi

Una volta entrato in Visual Builder, puoi fare clic sul pulsante più grigio per aggiungere un nuovo modulo alla tua pagina. I nuovi moduli a larghezza intera possono essere aggiunti solo all'interno di sezioni a larghezza intera.

sezione completa divi builder.png

Se stai iniziando una nuova pagina, non dimenticare di aggiungere prima una sezione a tutta larghezza alla tua pagina.

mappa completa screen.png

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

Individua il modulo della scheda a larghezza intera 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 a schermo intero" e quindi fare clic su Invio per trovare e aggiungere automaticamente il modulo mappa a larghezza intera! 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 .

Esempio di caso d'uso: aggiungi un modulo mappa a larghezza intera a una pagina di contatto

Un modulo mappa a larghezza intera è un ottimo modo per mostrare la sede della tua attività sulla pagina dei contatti. E la possibilità di aggiungere più segnaposto alla mappa per mostrare diverse località e informazioni sulla società è una caratteristica utile e interessante.

Per questo esempio, aggiungerò un modulo mappa a larghezza intera per mostrare la posizione e le informazioni sull'azienda aggiungendo un segnaposto personalizzato alla mappa.

aggiungi una mappa ingrandita div builder.jpg

Consigli  : Assicurati di aver inserito una chiave API di Google valida nel pannello Opzioni del tema Divi. Il modulo della scheda non funzionerà senza di esso.

Utilizzando Visual Builder, aggiungi una sezione Fullwidth nella parte inferiore della pagina dei contatti. Quindi inserisci il modulo Mappa a larghezza intera nella nuova sezione. Nella scheda Contenuto delle impostazioni della mappa a larghezza intera, inserisci l'indirizzo della tua azienda sotto l'opzione Indirizzo del centro mappa. L'indirizzo del centro della mappa è il punto centrale della mappa.

aggiungi una mappa divi example.jpg

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]

aggiungi dettagli mappa a larghezza intera divi.jpg

Salva le impostazioni

È tutto. Ora hai un modulo di mappa dinamica a larghezza intera nella parte inferiore della pagina dei contatti con un segnaposto cliccabile che mostra le informazioni sulla società.

risultato mappa a larghezza intera divi.jpg

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Opzioni di contenuto del modulo mappa a larghezza intera

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.

opzione contenuto div builder full width map module.png

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 di amministrazione

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 di mappe a larghezza intera

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 qualsiasi cosa.

opzione design module full width map.png

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 a larghezza intera

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.

sezione anticipo modulo full-width card divi.png

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.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

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 di contenuto cartografico a larghezza intera

pin parameter module card full width.png

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.

Altri tutorial di Divi

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
18 azioni
quota10
Tweet3
Enregistrer5