Come utilizzare l'esclusivo pacchetto di layout per panetteria del Cyber ​​Monday per creare una pagina delle posizioni per la tua attività?

Quest'anno, ottenere un'offerta per il Cyber ​​Monday significa anche ottenere un sacco di cose gratis! Oltre a godere di uno sconto del 25%, tutti coloro che acquistano un nuovo abbonamento Elegant Themes o aggiornano il proprio account esistente (o che hanno già un abbonamento a vita) riceveranno anche 6 pacchetti di layout gratuiti ed esclusivi che possono essere scaricati SOLO durante i saldi del Cyber ​​Monday.

Scarica il layout esclusivo prima che scompaia!

Sei già un membro a vita? Puoi scaricare il pacchetto in questo momento, non è necessario partecipare alla nostra vendita del Cyber ​​Monday!

Uno sguardo all'interno dell'esclusivo Cyber ​​Monday Bakery Layout Pack

Uno degli esclusivi pacchetti di layout che ti offriamo come membri a vita e nuovi clienti del Cyber ​​Monday è questo per le panetterie. Si compone di 5 gustose pagine che renderanno irresistibile qualsiasi sito di pasticceria.

Progettazione della pagina di destinazione

Scarica il layout esclusivo prima che scompaia!

Sei già un membro a vita? Puoi scaricare il pacchetto in questo momento, non è necessario partecipare alla nostra vendita del Cyber ​​Monday!

Design della pagina della ricetta

Scarica il layout esclusivo prima che scompaia!

Sei già un membro a vita? Puoi scaricare il pacchetto in questo momento, non è necessario partecipare alla nostra vendita del Cyber ​​Monday!

Design della pagina del menu

Scarica il layout esclusivo prima che scompaia!

Sei già un membro a vita? Puoi scaricare il pacchetto in questo momento, non è necessario partecipare alla nostra vendita del Cyber ​​Monday!

Informazioni sul design della pagina

Scarica il layout esclusivo prima che scompaia!

Sei già un membro a vita? Puoi scaricare il pacchetto in questo momento, non è necessario partecipare alla nostra vendita del Cyber ​​Monday!

Progettazione della pagina di contatto

Scarica il layout esclusivo prima che scompaia!

Sei già un membro a vita? Puoi scaricare il pacchetto in questo momento, non è necessario partecipare alla nostra vendita del Cyber ​​Monday!

Ottieni l'esclusivo pacchetto di layout per panetteria del Cyber ​​Monday

Prima di entrare in questo caso d'uso, dovrai mettere le mani sull'esclusivo Cyber ​​Monday Bakery Layout Pack che puoi ottenere diventando un nuovo membro di Elegant Themes, aggiornando il tuo account esistente o essendo già un membro a vita con noi. Se sei già un membro a vita puoi accedere alla nostra area membri e scaricare tutti i nostri pacchetti di layout esclusivi qui. Tutti gli altri dovranno utilizzare il pulsante in basso per acquistare o aggiornare prima di poter seguire il resto del nostro tutorial.

Scarica il layout esclusivo prima che scompaia!

Sei già un membro a vita? Puoi scaricare il pacchetto in questo momento, non è necessario partecipare alla nostra vendita del Cyber ​​Monday!

Come utilizzare l'esclusivo pacchetto di layout per panetteria del Cyber ​​Monday per creare una pagina delle posizioni per la tua attività?

Per il resto di questo post assumeremo che tu abbia approfittato della nostra offerta del Cyber ​​Monday o che tu sia già un membro a vita e abbia accesso al Bakery Layout Pack.

Dopo aver scaricato il nuovo Bakery Layout Pack dalla nostra area membri, puoi guardare il video qui sotto per vedere quanto è facile da configurare. Ti invitiamo inoltre a seguire questo tutorial per preparare il tuo sito per un'ulteriore personalizzazione.

Ora entriamo nel caso d'uso stesso.

Quando si crea un sito Web per un'azienda con più di una sede, è importante pensare al modo migliore per comunicare tali informazioni ai visitatori. Devono sapere quale posizione è più vicina a loro e qualsiasi informazione importante specifica per quella posizione. E creare una pagina Posizioni per il sito Web è un ottimo inizio.

In questo caso d'uso, ti mostrerò quanto sia incredibilmente facile creare una pagina di sedi professionali per la tua attività utilizzando il Bakery Layout Pack.

Utilizzando la struttura del layout della pagina di contatto del panificio, ti mostrerò come aggiungere ulteriori puntine al modulo della mappa per riflettere tutte le sedi della tua attività insieme a sezioni ben organizzate e progettate per visualizzare informazioni importanti per ciascuna posizione. Poiché possiamo utilizzare gli elementi di design già forniti dal layout, questo processo è rinfrescante e divertente (almeno lo è per me).

Iniziamo.

Inizia utilizzando il layout del contatto per creare la tua pagina delle località

Il layout della pagina Bakery Contact è perfetto da utilizzare come base per la nostra nuova pagina Locations. Ha un modulo mappa nella parte superiore che useremo per mostrare ciascuna delle nostre sedi aziendali. Inoltre ha alcuni altri elementi come i moduli di testo già progettati che possiamo riorganizzare e modificare secondo necessità.

Crea nuova pagina

Innanzitutto, dovrai creare una nuova pagina e assegnarle un titolo (qualcosa come "Le nostre posizioni") e fare clic per utilizzare divi Builder e quindi il visual builder.

Carica il layout della pagina di contatto del forno

A questo punto dovresti già avere i layout di pagina caricati nella tua libreria Divi. Fare clic per aprire il menu viola nella parte inferiore della pagina e selezionare il pulsante "Aggiungi dalla libreria" con l'icona più. Selezionare la scheda Carica dalla libreria e quindi selezionare il layout Contatto panetteria dall'elenco. Il layout verrà caricato immediatamente sulla pagina.

Pubblicare.

Aggiunta di sezioni per le informazioni sulla posizione specifica

Non abbiamo davvero molti contenuti nella pagina dei contatti da utilizzare per creare contenuti aggiuntivi per le nostre località specifiche. Quindi, andiamo alla pagina di destinazione Bakery e selezioniamo la riga dalla seconda sezione della pagina e salviamola nella Libreria.

Ora torna alla pagina delle posizioni. Duplica la sezione in fondo alla pagina contenente il modulo di contatto (non cancellarlo ci servirà in seguito). Nella sezione direttamente sotto la mappa, elimina l'intera riga dalla sezione e aggiungi la riga che hai salvato dalla tua libreria.

Quindi cambia il layout della colonna della riga in un layout due terzi un terzo.

Individua il modulo di testo con il contenuto dell'indirizzo nella colonna di destra della sezione inferiore. Trascinalo sotto il modulo immagine nella colonna di destra della riga nella sezione sopra di esso.

Quindi aggiorna il contenuto nei moduli di testo nella colonna di sinistra per rappresentare la posizione specifica della tua azienda. Per il mio esempio aggiungerò quanto segue:

Sede principale
New York City

Ora aggiorna il modulo immagine nella colonna di destra per includere un'immagine della sede della tua azienda.

Questo servirà come una bella sezione per ciascuna delle tue specifiche località.

Ora tutto ciò che devi fare è duplicare questa sezione per aggiungere ulteriori posizioni.

Duplica questa sezione due volte in modo da avere un totale di 3 sezioni di posizione. Quindi cambia il colore di sfondo della sezione della posizione centrale in bianco per aiutare a dividere meglio le sezioni.

Quindi aggiorna le sezioni duplicate con contenuti specifici della posizione. Per questo esempio, oltre alla mia sede di New York, creerò anche una sezione per San Francisco e Houston.

Progetta la sezione piè di pagina del modulo di contatto

Ricorda quella sezione che abbiamo salvato in fondo contenente il nostro modulo di contatto. Questo servirà come un'ottima sezione a piè di pagina per la nostra pagina della posizione. Tutto quello che dobbiamo fare è modificarlo un po'.

Per prima cosa eliminiamo i moduli rimanenti nella colonna di destra. Quindi aggiorna il layout della colonna di riga in un layout di una colonna. Ora tutto ciò che dovresti vedere è il modulo di contatto in una riga di una colonna.

Fare quindi clic per modificare le impostazioni della riga e aggiornare quanto segue:

Nella scheda dei contenuti...

colore di sfondo: #ffffff

Nella scheda Progettazione...

imbottitura personalizzata: 5% in alto, 5% a destra, 5% in basso, 5% a sinistra

Ombra riquadro: [seleziona ombra riquadro]

Ora aggiungiamo un'immagine di sfondo per la nostra sezione. Vai alle impostazioni della sezione e seleziona una delle immagini di sfondo incluse nel layout.

Grande! Passiamo ora al modulo mappa.

Aggiungi la tua chiave API di Google

A questo punto, dovrai assicurarti di creare la tua chiave API di Google e quindi aggiungerla alle Opzioni del tema.

Aggiorna il modulo mappa con nuovi pin di posizione

A questo punto, la maggior parte della nostra pagina è stata completata. Tutto ciò che rimane sono gli aggiornamenti al modulo mappa nella parte superiore della pagina. Dobbiamo aggiungere le nuove posizioni dei pin per le tre sezioni che abbiamo creato nelle sezioni della pagina (New York City, San Francisco e Houston).

Fare clic per modificare il modulo mappa e aggiornare le impostazioni come segue:

Cancella il pin mostrato nel modulo in modo da ricominciare da capo. Quindi aggiungi un nuovo pin e aggiorna le impostazioni come segue:

Titolo: New York City Bakery
Contenuto: maggiori informazioni
Mappa Pin Indirizzo: New York City

Fare clic sul pulsante Trova.

Quindi aggiungi un nuovo pin e aggiorna le impostazioni come segue:

Titolo: San Francisco Bakery
Contenuto: maggiori informazioni
Mappa Pin Indirizzo: San Francisco

Fare clic sul pulsante Trova.

Quindi aggiungi un nuovo pin e aggiorna le impostazioni come segue:

Titolo: Houston Bakery
Contenuto: maggiori informazioni
Indirizzo mappa: Houston, TX

Fare clic sul pulsante Trova.

Puoi lasciare l'indirizzo del centro mappa come New York City. Ma regola la visualizzazione della mappa per rimpicciolire abbastanza da essere in grado di vedere tutte le posizioni quando il visitatore visualizza per la prima volta la mappa.

Aggiungi collegamenti di ancoraggio alle caselle di contenuto dei pin

Come funzionalità aggiuntiva puoi migliorare l'esperienza dell'utente aggiungendo un link di ancoraggio all'interno del contenuto del pin che viene visualizzato quando fai clic sul pin. Questo link di ancoraggio porterà l'utente lungo la pagina alla sezione specifica della pagina che mostra le informazioni di quella posizione.

Aprire l'impostazione del modulo mappa e quindi modificare le prime impostazioni dei pin. Evidenzia il testo nella casella del contenuto che dice "Ulteriori informazioni", quindi fai clic sull'icona del collegamento per trasformarlo in un collegamento. Per l'URL, inserisci "#newyork" e fai clic su OK.

Fai la stessa cosa per il pin di San Francisco (usa l'URL "#sanfran") e il pin di Houston (usa l'URL "#houston").

Ora tutto ciò che devi fare è aggiungere un ID CSS personalizzato a ciascuna delle tue sezioni che corrisponderà agli URL dei link che hai appena creato nei pin.

Per la sezione "New York City", aggiorna le impostazioni della sezione nella scheda Avanzate con l'ID CSS "newyork" e salva le impostazioni.

Ora, quando l'utente fa clic sul collegamento "ulteriori informazioni" (con l'URL #newyork) nel pin di New York, la pagina passerà a quella sezione.

Fai lo stesso per la sezione di San Francisco (usa l'ID CSS "sanfran") e la sezione di Houston (usa l'ID CSS "houston")

Questo è tutto. Hai finito!