Come aggiungere una mappa fissa al modello di pagina Divi

Se gestisci un negozio fisico e crei un sito web per esso, molte persone potrebbero visitare il tuo sito web per ottenere informazioni pratiche, come il tuo indirizzo. Naturalmente, è qui che la tua pagina di contatto è utile, ma non è l'unico modo per condividere facilmente i dettagli di contatto con i tuoi visitatori. Se stai cercando un modo creativo per affrontare la condivisione dell'indirizzo della tua azienda, ti piacerà questo tutorial. Ti mostriamo come aggiungere una mappa fissa in modo dinamico a ciascuna pagina utilizzando il Theme Builder di Divi. Inizieremo creando un nuovo modello di pagina. Quindi, includeremo il contenuto della pagina dinamica nel corpo del modello e aggiungeremo un interruttore a mappa fissa sopra il contenuto della pagina dinamica. Potrai anche scaricare gratuitamente il file JSON del modello!

Andiamo ad esso.

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Scarica il modello di pagina GRATUITAMENTE

Per mettere le mani sul modello di pagina gratuito, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

1. Crea un modello di pagina all'interno di Divi Theme Builder

Vai al Divi Theme Builder e aggiungi un nuovo modello di pagina

Inizieremo questo tutorial accedendo al Divi Theme Builder e aggiungendo un nuovo modello di pagina.

Inserisci l'area del corpo del modello

Quindi, inserisci il corpo del modello selezionando "Crea corpo personalizzato".

2. Aggiungi contenuto dinamico della pagina all'area del corpo

Impostazioni della sezione

Spaziatura

Una volta all'interno dell'editor dei modelli, noterai una sezione. Apri le impostazioni della sezione e rimuovi tutto il riempimento superiore e inferiore predefinito.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi riga n. 1

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

Dimensionamento

Senza ancora aggiungere moduli, apri le impostazioni di riga e modifica le impostazioni di dimensionamento come segue:

• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi modulo contenuto post alla colonna

Per consentire la visualizzazione dinamica del contenuto di ogni pagina, utilizzeremo il modulo Post Content all'interno di questa riga.

3. Crea design pin mappa fissa

Aggiungi la riga n. 2 alla sezione

Struttura della colonna

Alla riga successiva, che utilizza la seguente struttura a colonne:

Dimensionamento

Apri le impostazioni della riga, vai alla scheda Design e modifica le impostazioni di dimensionamento come segue:

• Larghezza: 90%
• Larghezza massima:
  • Desktop: 600 px
  • Tablet e telefono: 100%

Spaziatura

Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Impostazioni colonna 1

Colore di sfondo

Quindi, apri le impostazioni della colonna 1 e usa un colore di sfondo nero.

• Colore di sfondo: #000000

Immagine di sfondo

Carica successivamente un'immagine di sfondo a tua scelta. Puoi trovare l'immagine di sfondo nella cartella zippata che puoi scaricare all'inizio di questo tutorial.

Elemento principale CSS

Aggiungi anche le seguenti righe di codice CSS all'elemento principale della colonna:

width: 80% !important;
max-height: 80vh;

Visibilità

Quindi, imposta l'overflow verticale su automatico. Questo, in combinazione con l'altezza massima nel passaggio precedente, assicura che una barra di scorrimento appaia non appena la colonna supera un'altezza di 80vh.

• Overflow verticale: automatico

Impostazioni colonna 2

Elemento principale CSS

Apri quindi le impostazioni della colonna 2 e applica la seguente riga di codice CSS all'elemento principale:

width: 12% !important;

Aggiungi modulo mappa alla colonna 1

È ora di aggiungere moduli, iniziando con un modulo mappa nella colonna 1. Aggiungi un segnaposto a tua scelta.

Dimensionamento

Passa alla scheda di progettazione del modulo e modifica le impostazioni di dimensionamento come segue:

• Larghezza: 88%
• Allineamento del modulo: Centro

Spaziatura

Successivamente, rimuovi il margine inferiore predefinito.

• Margine inferiore: 0px

Aggiungi modulo Blurb alla colonna 1

Aggiungi contenuto

Aggiungi un modulo Blurb sotto il modulo mappa nella colonna 1. Usa alcuni contenuti a tua scelta.

Seleziona icona

Seleziona un'icona successiva.

Impostazioni immagine/icona

Passa alla scheda Design e modifica le impostazioni dell'icona come segue:

• Colore icona: #ffffff
• Posizionamento immagine/icona: a sinistra

Impostazioni del testo del titolo

Stile successivo al testo del titolo.

• Peso del carattere del titolo: grassetto
• Colore del testo del titolo: #ffffff
• Dimensione del testo del titolo: 16px
• Altezza della riga del titolo: 1,6 em

Impostazioni del corpo del testo

Quindi, modifica di conseguenza le impostazioni del testo del corpo:

• Colore del corpo del testo: #ffffff
• Dimensione del testo del corpo:
  • Desktop: 16px
  • Tablet: 14px
  • Telefono: 13px
• Altezza della linea del corpo: 1,8 em

Spaziatura

Applica anche i seguenti valori di riempimento:

• Imbottitura superiore: 70px
• Imbottitura inferiore: 70px
• Imbottitura sinistra: 7%
• Imbottitura destra: 7%

Animazione

E rimuovi l'animazione del modulo predefinito nelle impostazioni di animazione.

• Animazione immagine/icona: nessuna animazione

Aggiungi modulo Blurb alla colonna 2

Lascia le caselle dei contenuti vuote

Alla colonna 2. Lì, aggiungeremo un modulo Blurb senza contenuto.

Seleziona icona

Seleziona un'icona successiva.

Colore di sfondo

Quindi, cambia il colore di sfondo.

• Colore di sfondo: #0045ff

Impostazioni immagine/icona

Passa alla scheda Design e modella le impostazioni dell'icona di conseguenza:

• Colore icona: #ffffff
• Posizionamento immagine/icona: in alto
• Allineamento immagine/icona: centro
• Usa dimensione carattere icona: Sì
• Dimensione carattere icona: 25px

Dimensionamento

Modificare le impostazioni di dimensionamento successivamente.

• Larghezza: 70px
• Altezza: 70 px

Spaziatura

Quindi, rimuovere il margine inferiore predefinito.

• Margine inferiore: 0px

Scatola ombra

Includi anche un'ombra di scatola.

• Posizione orizzontale dell'ombra del riquadro: 6px
• Posizione verticale dell'ombra del riquadro: 6px
• Colore ombra: rgba(0,0,0,0.3)

Elemento principale e immagine sfocata CSS

Quindi, vai alla scheda Avanzate e usa le seguenti righe di codice CSS per l'elemento principale:

display: flex;
justify-content: center;
align-items: center;

E aggiungi questa riga di codice CSS all'interno della casella Immagine Blurb:

margin-bottom: 0;

4. Aggiungi funzionalità di commutazione

Aggiungi la classe CSS alla riga n. 2

Ora che abbiamo tutti gli elementi a posto, è il momento di concentrarci sulla funzionalità. Inizia aprendo la seconda riga e applicando la seguente classe CSS:

• Classe CSS: map-toggle-row

Aggiungi la classe CSS al modulo Blurb nella colonna 2

Apri il modulo Blurb nella colonna 2 e usa la seguente classe CSS:

• Classe CSS: attiva/disattiva mappa

Aggiungi modulo codice sotto il modulo Blurb nella colonna 2

Quindi, aggiungi un modulo di codice sotto il modulo Blurb nella colonna 2.

Aggiungi tag stile e script

Inserisci alcuni tag di stile e script all'interno della casella del codice.

Inserisci codice CSS

Stiamo utilizzando il seguente codice CSS all'interno dei tag di stile:

.map-toggle-row {
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}

.reveal-map{
left: 0 !important;
}

.map-toggle {
cursor: pointer;
}

Inserisci codice JQuery

E il seguente codice JQuery all'interno dei tag script:

jQuery(function($){
$(document).ready(function(){

var toggleIcon = $('.map-toggle');
var toggleRow = $('.map-toggle-row');

toggleIcon.click(function(){
toggleRow.toggleClass('reveal-map');
});

});
});

Aggiungi posizione fissa con offset orizzontale alla riga n. 2

Ultimo ma non meno importante, dovremo modificare di conseguenza le impostazioni di posizione della seconda riga:

• Posizione: fissa
• Posizione: Centro Sinistra
• Spostamento orizzontale:
  • Desktop: -500 px
  • Tablet e telefono: -72%
• Indice Z: 11

5. Salva le modifiche alla pagina e al generatore di temi

Una volta applicate tutte le modifiche, puoi salvare tutte le modifiche di Divi Theme Builder e visualizzare il risultato sul tuo sito web!

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Pensieri finali

In questo tutorial, ti abbiamo mostrato come includere in modo creativo i dettagli dell'indirizzo della tua attività commerciale nei progetti di pagina. Più specificamente, ti abbiamo mostrato come creare un modello di pagina che includa un interruttore a mappa fisso, in modo che i tuoi visitatori possano accedere alla posizione della tua attività in ogni momento! Sei stato anche in grado di scaricare gratuitamente il file JSON del modello. Se hai domande o suggerimenti, non esitare a lasciare un commento nella sezione commenti qui sotto.

Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.