Quando crei una pagina di destinazione per prodotti specifici, che si tratti di un nuovo lancio o di una vendita per la quale ti stai preparando, è molto probabile che prima o poi utilizzerai il modulo Negozio. Il modulo Divi's Shop ti consente di estrarre dinamicamente i prodotti dal plug-in WooCommerce e di modellarli utilizzando le opzioni integrate di Divi.
Ora, per impostazione predefinita, il modulo negozio viene fornito con alcune strutture di colonne che si traducono tutte in due colonne su schermi di dimensioni inferiori. Ciò significa che più prodotti scegli di visualizzare, maggiore è lo scorrimento verticale necessario per arrivare alla parte successiva della tua pagina di destinazione.
Nel moderno web design, una tecnica spesso utilizzata per limitare lo scorrimento verticale e gli elementi di visualizzazione in base alle preferenze dei tuoi visitatori è quella di utilizzare tessere magnetiche. In questo tutorial, ti mostreremo come trasformare il modulo del negozio Divi in mappe di prodotto dinamiche su schermi di dimensioni inferiori senza utilizzare un plug-in.
Inizieremo preparando i diversi elementi della nostra sezione prodotto e utilizzeremo una piccola quantità di codice CSS per attivare l'effetto sweep. È un ottimo modo per mostrare una vasta gamma di prodotti sulla tua pagina di destinazione senza travolgere i tuoi visitatori.
Possibile risultato
Prima di immergerci nel tutorial, diamo un'occhiata al risultato. Attiviamo le carte magnetiche del prodotto solo su tablet e cellulari. Sul desktop, manteniamo la struttura delle colonne che determiniamo nel modulo Negozio.
1. Configura WooCommerce e le pagine dei prodotti
Prima di entrare nella parte Divi di questo tutorial, è importante che il plugin WooCommerce sia installato e attivato sul tuo sito web. Se non lo hai già fatto, aggiungi più prodotti, a seconda del numero di prodotti che desideri visualizzare nel modulo Negozio.
2. Creare una nuova pagina e scaricare il layout della pagina di elementi decorativi
Crea una nuova pagina
Una volta che i prodotti sono a posto, aggiungi una nuova pagina nel tuo backend di WordPress. Dai un titolo alla tua pagina, pubblica la pagina e attiva Divi Visual Builder.
Scarica il layout della pagina di destinazione
Una volta all'interno della nuova pagina, vai ai layout preimpostati e scarica il layout della pagina di destinazione della cancelleria. Sebbene utilizziamo questo layout specifico, sei libero di utilizzare qualsiasi altro layout desideri, a condizione che tu aggiunga o individui un modulo negozio all'interno di questo layout.
3. Modifica la sezione negozio
Individua la sezione con il modulo Shop
Se scorriamo verso il basso fino alla nostra nuova pagina che abbiamo creato utilizzando il layout della home page della cancelleria, ci imbatteremo in una sezione con un modulo negozio. Useremo questa sezione durante i passaggi successivi di questo tutorial.
Impostazioni linea
Dimensionamento reattivo
Inizia aprendo le impostazioni della riga della riga contenente il modulo Negozio. Come accennato prima, manteniamo lo stesso design sul desktop, attiveremo le schede magnetiche del prodotto solo su schermi di dimensioni inferiori.
Per creare un'esperienza senza sforzo, consentiremo alla riga di toccare i lati sinistro e destro del nostro schermo modificando la larghezza nelle impostazioni di dimensionamento.
Utilizzare una larghezza della grondaia personalizzata: 1
Larghezza: 80% (desktop), 100% (tablet e telefono)
visibilità
Ci assicureremo inoltre che nulla vada oltre il contenitore delle righe impostando le impostazioni di visibilità su nascosto.
Straripamento orizzontale: nascosto
Straripamento verticale: nascosto
Acquista le impostazioni del modulo
Scegli il numero di prodotti e la struttura delle colonne dell'ufficio che preferisci
Successivamente, apriremo le impostazioni del modulo Negozio. Le modifiche che apportiamo al nostro codice CSS (che aggiungeremo in seguito) dipendono dal numero di prodotti che stiamo mostrando.
Inizieremo mostrandoti come trasformare un modulo negozio con 8 prodotti in schede prodotto. Puoi scegliere qualsiasi layout di colonna che desideri per il desktop.
Numero di prodotti: 8
Layout delle colonne: 4 colonne
Dimensionamento reattivo
Per aumentare le dimensioni del nostro modulo negozio, modificheremo i parametri di dimensionamento nella scheda di progettazione. Tieni presente che lo stiamo facendo solo per tablet e telefono.
Larghezza: 100% (desktop), 250% (tablet e telefono)
Larghezza massima: 100% (scrivania), 250% (tablet e telefono)
Classe CSS
Aggiungeremo anche una classe CSS al nostro modulo del negozio. Successivamente, quando aggiungiamo il codice CSS, possiamo trasformare il modulo Shop che contiene solo questa classe CSS. In altre parole, se vuoi che un altro modulo Shop appaia in uno stato normale, tralasciare questa classe CSS ti permetterà di farlo.
Classe CSS: schede a scorrimento del prodotto
Overflow reattivi
Integreremo le impostazioni della linea modificando le impostazioni di visibilità su diverse dimensioni dello schermo. Come puoi vedere nelle impostazioni, vogliamo che l'effetto di scorrimento si verifichi solo su schermi di dimensioni inferiori.
Straripamento orizzontale: nascosto (scrivania), scorrimento (tablet e telefono)
Straripamento verticale: nascosto
Aggiungi un modulo di codice sotto il modulo Shop
Dopo aver modificato il modulo Shop, puoi aggiungere un modulo di codice appena sotto.
Aggiungi il codice CSS al modulo
Il seguente codice CSS trasformerà automaticamente il nostro modulo negozio di 8 prodotti in carte magnetiche reattive:
Ora, se stai cercando di aggiungere meno (o più) prodotti al modulo del tuo negozio, il codice cambia leggermente in due punti. Entrambe queste posizioni devono essere modificate manualmente per corrispondere al risultato desiderato. Ad esempio, cambiamo il numero di prodotti nel nostro modulo negozio in "4".
Numero di prodotti: 4
Quando torniamo al nostro codice, dobbiamo apportare due modifiche. Innanzitutto, dovremo modificare le colonne del modello di griglia. Invece di 8, usiamo 4 (lo stesso numero del nostro numero di prodotti). Stiamo anche aumentando la dimensione percentuale che questi prodotti occupano nelle nostre schede prodotto (più prodotti, meno spazio).
Quindi cambieremo anche la larghezza del contenitore in cui vengono inseriti i prodotti. Per 4 prodotti, ciò equivale al 150%. Questi valori non sono fissi, si ottengono giocando e trovando un'armonia tra le colonne del modello a griglia e la larghezza del contenitore.
Per trovare il giusto equilibrio, passa alla visualizzazione mobile all'interno di Visual Builder e regola attentamente i valori mentre visualizzi il risultato di tali modifiche.
width: 150%!important;
Aggiungi uno snap alla pergamena
Se vuoi portare l'esperienza dell'utente un ulteriore passo avanti nella progettazione della tua scheda magnetica, puoi anche aggiungere uno snap di scorrimento. L'acquisizione dello scorrimento consente ai tuoi visitatori di scorrere fissando l'inizio di un nuovo prodotto.
Ciò significa che la loro scansione non deve essere esatta, lo scroll slam prenderà il sopravvento ad un certo punto e il display regolerà la sua posizione all'interno del meccanismo di scorrimento laterale.
Per abilitare l'acquisizione a scorrimento sulle schede magnetiche del prodotto, aggiungere una riga di codice CSS a ciascun prodotto individualmente nel codice CSS (vedere la schermata di stampa di seguito).
scroll-snap-align: inizia
Attiveremo anche l'acquisizione dello scorrimento sul nostro modulo negozio aggiungendo la seguente riga di codice CSS:
scroll-snap-type: x obbligatorio
Riutilizza il modulo workshop per visualizzare altre categorie
Clonare un'intera riga una volta
Dopo aver completato il primo set di carte magnetiche, puoi clonare l'intera linea una volta.
Rimuovere il modulo di codice in una riga duplicata
Finché il modulo del tuo negozio contiene la stessa classe CSS del precedente, andrà bene un modulo di codice. Vai avanti e rimuovi il modulo del codice nella riga duplicata.
Clona la linea duplicata quanto vuoi
E clona la linea duplicata ora tutte le volte che è necessario, a seconda del numero di set di carte magnetiche che vuoi visualizzare sulla tua landing page!
4. Salva le modifiche alla pagina e visualizza i risultati su un dispositivo mobile
Assicurati che una volta che hai finito di aggiungere le schede magnetiche del prodotto, salvi la pagina prima di uscire da Visual Builder e il gioco è fatto!
Panoramica
Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata a come appare su schermi di dimensioni diverse.
Considerazioni finali
In questo articolo, ti abbiamo mostrato come trasformare il modulo Divi Shop integrato in schede magnetiche del prodotto su schermi di dimensioni inferiori. Sul desktop, abbiamo mantenuto la struttura delle colonne originale assegnata al modulo Negozio.
L'utilizzo delle mappe di scorrimento del prodotto consente di aggiungere infiniti prodotti a un meccanismo di scorrimento orizzontale senza sovraccaricare i visitatori a scorrimento verticale.
Questa è una tendenza spesso utilizzata nella progettazione di siti Web moderni perché si concentra sul comportamento degli utenti e semplifica l'accesso a un'ampia gamma di elementi su schermi più piccoli.
Puoi utilizzare queste schede prodotto su qualsiasi pagina, ma è particolarmente utile per qualsiasi pagina di destinazione del prodotto che crei. Puoi anche scaricare gratuitamente il file JSON per il layout!
Se hai domande o suggerimenti, sentiti libero di lasciare un commento nella sezione commenti qui sotto.
I contatori di numeri animati sono popolari sul Web come un modo per visualizzare dati numerici per evidenziare il valore di servizi, casi di studio, ecc. Divi ha un modulo contatore di numeri dedicato che può essere utilizzato per generare facilmente contatori di numeri animati.
Tuttavia, in questo tutorial, ti mostreremo come creare contatori digitali che si animano nello scorrimento utilizzando Divi. Utilizzando le opzioni di posizione di Divi e gli effetti di scorrimento, progetteremo un layout semplice per visualizzare una data con numeri a scorrimento.
Parte 1: creazione della sezione del titolo
In questa prima parte, creeremo un titolo semplice per il layout.
Innanzitutto, aggiungi una riga di una colonna alla sezione.
Quindi aggiungi un nuovo modulo di testo alla riga.
Aggiorna il contenuto del modulo di testo con il seguente:
Salva la data
Quindi aggiorna lo stile del testo dell'intestazione come segue:
Parte 2: Creazione di contatori con animazione a scorrimento
In questa parte successiva, creeremo i tre contatori che animeranno i numeri a scorrimento finché non smetteranno di visualizzare una data (mese, giorno e anno). Ogni contatore sarà costruito utilizzando un totale di 5 moduli di testo e un modulo separatore. Il primo modulo di testo fungerà da etichetta del contatore (cioè mese, giorno, anno). I successivi quattro moduli di testo conterranno ciascuno un numero diverso (in corso) che verrà animato durante lo scorrimento utilizzando gli offset del movimento verticale in Divi. Il modulo di separazione inferiore aiuterà a nascondere l'overflow di numeri.
Ecco come.
Aggiungi una seconda riga
Sotto la riga esistente, aggiungi un'altra riga a una colonna.
Impostazioni linea
Prima di aggiungere un modulo, aggiorna i parametri di riga come segue:
Larghezza della grondaia: 1
Imbottitura: 0px alta, 0px bassa
Parametri della colonna
Quindi aprire le impostazioni della colonna e aggiornare il riempimento come segue:
Imbottitura (scrivania): 100px bassa
Imbottitura (tablet e telefono): 0px basso
Aggiungi un modulo di testo
Quindi aggiungere un modulo di testo alla colonna.
Contenuto / etichetta
Per il contenuto del modulo di testo, aggiungi la parola "mese".
Impostazioni di progettazione del testo
Dopo aver aggiunto il contenuto, aggiorna le impostazioni di progettazione come segue:
Colore di sfondo: #ffffff
Carattere testo: parla
Dimensione del testo: 40px
Altezza della riga di testo: 2em
Larghezza: 100%
Imbottitura: 20 pixel nella parte superiore, 20 pixel nella parte inferiore, 20 pixel a sinistra, 20 pixel a destra
Larghezza del bordo inferiore: 5px
Colore del bordo inferiore: #eeeeee
Posizione
Quindi, nella scheda Avanzate, aggiorna le opzioni di posizione come segue:
Posizione: relativa
Indice Z 1
Aggiungi un modulo di testo per il primo numero
Una volta che il primo modulo di testo è a posto, possiamo iniziare ad aggiungere i numeri che si sposteranno sullo scorrimento. Per aggiungere il primo numero, aggiungi un nuovo modulo di testo sotto il modulo di testo "Mese" esistente.
Aggiungi numero / contenuto
Quindi aggiornare l'etichetta del modulo di testo per leggere "num1" per un riferimento più semplice. Quindi aggiornare il contenuto con il numero "01".
Impostazioni di progettazione per il numero
Nella scheda progettazione, aggiorna quanto segue:
Carattere testo: Prata
Testo Colore testo: # 8ab2d3
Testo Dimensione del testo: 70px
Spaziatura lettere di testo: 4px
Altezza della riga di testo: 1.5em
Imbottitura: 20 px a sinistra
NOTA: i numeri hanno una dimensione del testo di 70px e un'altezza della linea di 1.5em, il che significa che l'altezza totale del modulo di testo sarà vicina a 100px. Questo è importante da tenere a mente ogni volta che iniziamo ad aggiungere gli offset del movimento verticale. Ad esempio, l'aggiunta di un offset verticale di "1" al modulo di testo sposterà il modulo di testo esattamente 100px, che è l'altezza del modulo di testo.
Effetti di scorrimento per il primo numero
Aggiungi i seguenti effetti di scorrimento al modulo di testo.
Nella scheda Movimento verticale, aggiorna quanto segue:
Abilita movimento verticale: SÌ
Avvia offset: 1 (al 10%)
Offset medio: 0 (al 20%)
Fine offset: -1 (all'30%)
Nella scheda Fade In e Fade Out, aggiorna quanto segue:
Attiva dissolvenza in entrata e in uscita: SÌ
Opacità iniziale: 0% (al 10%)
Opacità media: 100% (al 20%)
Opacità finale: 0% (al 30%)
Assicurati di impostare il trigger per l'effetto di movimento nella parte superiore della clip:
Trigger effetto movimento: elemento superiore
Crea il modulo di testo per il secondo numero
Duplica il primo numero
Una volta creato il primo numero, duplicalo per creare il secondo modulo di testo numerico. Quindi aggiorna l'etichetta nella vista dei livelli per una migliore consultazione.
Aggiorna numero / contenuto
Apri i parametri del secondo modulo di testo digitale e aggiorna il contenuto con il numero "02".
Posizione di aggiornamento
Quindi aggiornare le opzioni di posizione come segue:
Posizione: assoluta
Offset verticale: 126px
Aggiorna effetti di scorrimento
Quindi aggiorna gli effetti di scorrimento come segue:
Nella scheda Movimento verticale, aggiorna quanto segue:
Avvia offset: 1 (al 20%)
Offset medio: 0 (al 30%)
Fine offset: -1 (all'40%)
Nella scheda Fade In e Fade Out, aggiorna quanto segue:
Opacità iniziale: 0% (al 20%)
Opacità media: 100% (al 30%)
Opacità finale: 0% (al 40%)
Crea un modulo di testo per il terzo numero
Duplica il secondo numero
Per creare il modulo di testo per il terzo numero, duplicare il modulo di testo per il secondo numero.
Aggiorna numero / contenuto
Aggiorna il contenuto con il numero "03".
Aggiorna effetti di scorrimento
Quindi aggiorna gli effetti di scorrimento:
Nella scheda Movimento verticale, aggiorna quanto segue:
Avvia offset: 1 (al 30%)
Offset medio: 0 (al 40%)
Fine offset: -1 (all'50%)
Nella scheda Fade In e Fade Out, aggiorna quanto segue:
Opacità iniziale: 0% (al 30%)
Opacità media: 100% (al 40%)
Opacità finale: 0% (al 50%)
Crea un modulo di testo per il quarto numero
Terzo problema duplicato
Per creare il quarto numero per il contatore di scorrimento, duplicare il modulo di testo per il terzo numero.
Aggiorna numero / contenuto
Aggiorna il contenuto con il numero "04".
Aggiorna effetti di scorrimento
Quindi aggiorna gli effetti di scorrimento:
Nella scheda Movimento verticale, aggiorna quanto segue:
Avvia offset: 1 (al 40%)
Offset medio: 0 (al 50%)
Fine offset: 0 (al 60%)
Nella scheda Fade In e Fade Out, aggiorna quanto segue:
Opacità iniziale: 0% (al 40%)
Opacità media: 100% (al 50%)
Opacità finale: 100% (al 60%)
Aggiungi un separatore inferiore
Sotto l'ultimo modulo di testo, aggiungi un nuovo modulo separatore. Questo verrà utilizzato per nascondere l'overflow inferiore del testo scorrevole in vista.
Quindi selezionare NO per visualizzare il separatore.
Impostazioni di stile e posizione
Aggiorna il design del separatore come segue:
Colore di sfondo: #ffffff
Larghezza: 100%
Altezza: 100px
Larghezza del bordo superiore: 5 px
Nella scheda Avanzate, aggiorna quanto segue:
Disattiva su: telefono e tablet
Posizione: assoluta
Posizione: in basso a sinistra
IMPORTANTE: lo spazio che occuperà il separatore è stato creato in precedenza aggiungendo un riempimento inferiore di 100 pixel alla colonna. Se non aggiungi questo riempimento, il separatore si sovrapporrà alle cifre.
Creazione di contatori e colonne aggiuntivi
Duplica la colonna 1 e aggiorna il contenuto
Per creare un nuovo contatore, duplicare la colonna 1. Ciò creerà una seconda colonna con tutti gli elementi in posizione automaticamente.
Quindi tutto ciò che devi fare è aggiornare il contenuto di tutti i moduli di testo con nuovi testi e numeri.
Duplica la colonna 2 e aggiorna il contenuto
Dopo aver aggiornato il contenuto di tutti i moduli di testo nella colonna 2, duplicare la colonna 2 per creare un terzo contatore per l'anno. Quindi aggiorna il contenuto di ogni modulo di testo secondo necessità.
Questo semplice layout con contatori numerici a scorrimento animato dovrebbe essere utile per visualizzare i dati digitali in un modo nuovo e unico. Sentiti libero di abbandonare il concetto di data e usa i contatori per tutto ciò che puoi sognare!
I cassetti piè di pagina sono utili aggiunte a qualsiasi sito Web in quanto memorizzano contenuti aggiuntivi facilmente accessibili agli utenti. I cassetti piè di pagina sono contenitori di contenuti web (come una sezione Divi) che possono essere aperti e chiusi facendo clic su un pulsante o passando il mouse su di esso. È come avere una piccola scorta di contenuti premium.
In questo tutorial, progetteremo un cassetto del piè di pagina mobile in Divi. Aggiungeremo il cassetto del piè di pagina all'intera area del piè di pagina del modello del sito Web in modo che il cassetto del piè di pagina sia accessibile in tutto il sito con il normale contenuto del piè di pagina.
Con il processo che utilizzeremo, qualsiasi sezione Divi (e il suo contenuto) può essere convertito in un cassetto piè di pagina in pochi minuti.
Come aggiungere il modello del cassetto piè di pagina al tuo sito Divi
L'aggiunta di questo modello sostituirà il modello di sito Web predefinito (se ne hai uno) sul tuo sito Divi. Ti suggeriamo di aggiungerlo a un sito di prova in modo da non rovinare nulla su un sito live.
Per importare il modello del cassetto del piè di pagina fisso sul proprio sito Web, decomprimere il file zip di download per accedere al file JSON.
Quindi vai alla dashboard di WordPress e vai a Divi> Theme Builder.
Quindi fare clic sull'icona della portabilità in alto a destra nella pagina.
Nella finestra di portabilità, scegli il file JSON che hai appena decompresso e seleziona l'opzione "Scarica backup prima dell'importazione", nel caso avessi precedentemente qualcosa nel modello di sito web predefinito che non avevi. non voleva sostituire.
Quindi fare clic sul pulsante Importa.
Infine, salva le modifiche nel generatore di temi e visualizza una pagina live per visualizzare la barra a piè di pagina fissa.
Ora passiamo al tutorial, ok?
Parte 1: aggiunta di un piè di pagina globale
Il generatore di temi Divi consente di sostituire il piè di pagina predefinito con uno nuovo aggiornando il modello di sito Web predefinito.
Per creare un piè di pagina globale, vai alla dashboard di WordPress e vai a Divi> Theme Builder. Quindi fare clic sullo spazio "Aggiungi piè di pagina globale" all'interno del modello di sito Web predefinito.
Quindi seleziona l'opzione "Crea piè di pagina globale" dall'elenco a discesa.
Aggiungi un layout predefinito a un layout piè di pagina globale
Questo distribuirà l'Editor del layout del modello dove ti verranno immediatamente richieste le tre scelte su come iniziare a costruire. Seleziona l'opzione "Scegli un layout predefinito".
Nella finestra a comparsa Carica dalla libreria, trova il layout della pagina di destinazione degli elementi decorativi. Quindi fare clic su "Usa questo layout".
Rimuovi i contenuti indesiderati dal layout predefinito
Una volta caricato il layout nell'editor, espandere la casella a comparsa Livelli facendo clic sull'icona dei livelli nel menu delle impostazioni. Quindi elimina tutte le sezioni del layout tranne le ultime due.
Sposta ed etichetta le due sezioni
Una volta rimosse le sezioni, dovresti avere due sezioni, una intitolata "Piè di pagina" e l'altra intitolata "Come funziona". Sposta la sezione "Piè di pagina" nella parte superiore del layout.
Modificare la dicitura nella sezione inferiore per leggere "Footer Drawer". Questa sarà la sezione che useremo come contenuto del nostro footer drawer.
Parte 2: creazione del cassetto dei piè di pagina fisso
Ora che abbiamo designato una delle sezioni come piè di pagina e l'altra come cassetto del piè di pagina, siamo pronti per iniziare a creare il nostro cassetto del piè di pagina fisso. Iniziamo creando l'icona blurb che useremo per attivare il cassetto del piè di pagina.
Creazione del pulsante del cassetto piè di pagina
Aggiungi una nuova linea
Nella sezione inferiore del piè di pagina, aggiungi una nuova riga a una colonna.
Etichetta la nuova riga "Pulsante cassetto" perché questa è la riga che conterrà il pulsante utilizzato per aprire e chiudere il cassetto. Quindi sposta la linea all'inizio della sezione.
Imbottitura di fila
Prima di aggiungere un modulo, apri le impostazioni della riga e aggiorna il riempimento come segue:
Imbottitura: 0px alta, 0px bassa
Imbottitura di sezione
Quindi aprire le impostazioni nella sezione "Footer drawer" e aggiornare l'imbottitura come segue:
Per creare il pulsante cliccabile che attiva o disattiva il cassetto del piè di pagina, utilizzeremo un modulo blurb con un'icona. E gli daremo una forma a goccia d'acqua unica combinando la forma quadrata del contenitore del pod Blurb con l'icona del cerchio.
Ecco come.
Aggiungi un modulo Blurb
Aggiungi un modulo di testo di presentazione alla riga "Pulsante del cassetto" nella parte superiore della sezione.
Contenuto / icona Blurb
Quindi, rimuovere il titolo predefinito e il contenuto del corpo e selezionare l'icona della freccia che punta all'angolo in alto a sinistra (vedi screenshot). Stiamo usando l'icona parzialmente ruotata perché la ruoteremo in seguito.
BlurbDesign
Quindi dare il testo di presentazione come segue:
Colore di sfondo: # 081540
Quindi aggiornare i parametri di progettazione come segue:
Colore icona: #eeeeee
Icona Cerchio: SÌ
Colore cerchio: # 081540
Usa la dimensione del carattere dell'icona: SÌ
Dimensione carattere icona: 17 pixel
Dimensione del testo di presentazione
Ora dai al modulo un'altezza e una larghezza come segue:
Larghezza: 30px
Altezza: 30px
Ciò farà sì che l'icona del cerchio trabocchi nel contenitore di testo per creare la forma della goccia d'acqua.
Posizione Blurb
Quindi assegna al testo di presentazione una posizione assoluta nella parte superiore centrale della sezione.
Posizione: assoluta
Posizione: in alto al centro
Impostazioni di trasformazione Blurb
Ora possiamo usare le opzioni di trasformazione per ruotare il blurb / icona verso l'alto e posizionarlo appena sopra il contenitore della sezione. Ora quando nascondiamo la sezione sotto la finestra del browser, l'icona rimarrà visibile / cliccabile.
Aggiorna i seguenti elementi:
Trasforma trasla asse X: -50%
Trasforma la traslazione dell'asse Y: -250%
Trasforma la rotazione dell'asse Z: -45 gradi
Quindi rimuovere l'animazione dell'icona predefinita:
Animazione immagine / icona: nessuna animazione
Useremo JQuery per attivare il cassetto, quindi dobbiamo indirizzare il testo / l'icona come elemento cliccabile con una classe CSS che useremo più avanti nel codice. Aggiungi la seguente classe CSS:
Classe CSS: cassetto target
Impostazioni sezione cassetto piè di pagina
Ora nasconderemo la sezione "Footer Drawer" utilizzando l'opzione di trasformazione della traduzione. Apri le impostazioni della sezione e aggiorna quanto segue:
Trasforma trasla asse Y: 100%
Il bello dell'utilizzo della trasformazione qui è che i valori percentuali si basano sulle dimensioni effettive dell'articolo. Pertanto, il 100% sull'asse Y sarà direttamente relativo all'altezza della sezione (indipendentemente da quale sia in un dato momento). In altre parole, l'elemento verrà spostato lungo la distanza esatta come la sua altezza.
Per riportare il Footer Drawer in vista, avremo bisogno di invertire la traduzione di trasformazione che abbiamo appena aggiunto alla sezione. Per fare ciò, dovremo indirizzare l'elemento con una classe CSS e disabilitare la trasformazione della traduzione facendo clic sull'icona (riportare l'intera sezione alla sua posizione originale).
Aggiungi una classe CSS alla sezione del cassetto piè di pagina
Nella scheda Avanzate, aggiungi la seguente classe CSS:
Classe CSS: has-transform
Sezione cassetto piè di pagina Posizione fissa
Per l'ultimo passaggio, dobbiamo fissare il cassetto del piè di pagina in modo che (con l'icona) fluttui nella parte inferiore della finestra del browser.
Aggiorna la posizione della sezione "Footer Drawer" come segue:
Posizione: fissa
Posizione: in basso a sinistra
Indice Z: 13
Disattiva i contenuti mobili
Poiché avrai una quantità limitata di contenuto del cassetto piè di pagina che si adatta sia al tablet che al telefono (a causa dell'altezza limitata dello schermo), dovrai disabilitare / nascondere gli elementi non essenziali dal display. In questo esempio, nasconderemo la riga centrale del layout della sezione.
Apri le impostazioni dalla penultima riga nella sezione "Footer Drawer". Nella scheda Avanzate, aggiorna l'opzione di visibilità per disattivare la linea sul telefono e sul tablet.
Aggiunta di codice personalizzato
Per aggiungere la funzionalità di clic e di attivazione / disattivazione nel cassetto piè di pagina, è necessario aggiungere CSS e JQuery personalizzati alla pagina. Per fare ciò, crea un nuovo modulo di codice sotto il modulo Blurb utilizzato per il pulsante.
Quindi incollare il seguente codice nell'area del codice:
Ricordati di salvare il layout prima di uscire dall'editor.
Salvare anche le modifiche nel generatore di temi.
Risultato finale
Ora possiamo andare su qualsiasi pagina del tuo sito web per vedere il risultato finale.
Considerazioni finali
Spero che il cassetto del piè di pagina mobile ti aiuti a promuovere i contenuti in modo divertente e accessibile. Come ogni cassetto, puoi riempirlo con qualsiasi cosa tu possa pensare.
Altre risorse
Ecco un elenco di tutorial che possono aiutarti a ottenere di più con le funzionalità interne di Divi.
Ogni sito web ha bisogno di una sezione di contatto, ma ciò non significa che devi scegliere un design standard. Con gli effetti di scorrimento di Divi, puoi creare una sezione di contatto mobile che risalterà. Migliora l'interazione dell'utente con un layout della sezione contatti a scorrimento verticale che inviterà i visitatori a interagire con il modulo di contatto. In questo articolo, ti mostreremo come creare una sezione di contatto mobile a larghezza intera che puoi aggiungere a qualsiasi pagina. Puoi persino aggiungerlo all'inizio di un piè di pagina a livello di sito con Divi Theme Builder.
Di seguito troverai un file scaricabile gratuitamente con il layout JSON da scaricare nella tua libreria Divi. Abbiamo anche incluso un modello PSD per aiutarti a ricreare lo sfondo della mappa, oltre a un segnaposto SVG in modo da poterlo personalizzare con i tuoi colori.
Crea una struttura di elementi
In questo progetto, utilizzeremo un'immagine di sfondo che è una rappresentazione su Google Map della posizione che desideri evidenziare. Puoi farlo con Photoshop o qualsiasi altro editor di immagini.
Aggiungi una nuova sezione
Ora è il momento di iniziare a creare la sezione dei contatti mobili con Divi Builder! La prima cosa che faremo è aprire una pagina nuova o esistente e aggiungere una nuova sezione.
Nella scheda contenuto, aggiungi lo sfondo della mappa che hai creato in Photoshop.
Immagine di sfondo: la mappa modificata
spaziatura
Successivamente, personalizza le impostazioni di spaziatura delle sezioni nella scheda Progettazione.
Margine superiore e inferiore: 50vh
Imbottitura inferiore: 0vw
visibilità
Quindi impostare gli overflow su visibile.
Troppopieno orizzontale e verticale: visibile
Posizione
Infine, imposta l'indice Z della sezione su 10.
Indice Z: 10
Aggiungi una nuova linea
Struttura a colonne
Adesso è il momento di aggiungere alcune cose. Innanzitutto, aggiungi una riga con 2 colonne.
dimensionamento
Aprire i parametri della linea e regolare il dimensionamento come segue.
Larghezza
Ufficio: 90%
Tablet e telefono: 80%
Larghezza massima: 90%
visibilità
Fare clic sulla scheda Avanzate e quindi regolare gli overflow.
Troppopieno orizzontale e verticale: visibile
Posizione
Completa le impostazioni della riga modificando le impostazioni della posizione.
Posizione: relativa
Origine offset: in alto a sinistra
Offset verticale
Desktop: -8vw
Colonna 1 Impostazioni
sfondo
Prima di aggiungere moduli, dovremo dare uno stile alle singole colonne. Aggiungi un colore di sfondo alla colonna 1.
Colore solido: # 25274d
Spaziatura
Regola successivamente le impostazioni di spaziatura.
Imbottitura superiore e inferiore
Desktop e tablet: 7vw
Imbottitura sinistra e destra
Desktop: 3 vw
Tablet e telefono: 6vw
Confine
Quindi, aggiungi alcuni angoli arrotondati alle impostazioni del bordo.
Angoli arrotondati: 10px tutti e quattro gli angoli
Effetti di scorrimento
Ultimo ma non meno importante, usa alcuni movimenti verticali nelle impostazioni degli effetti di scorrimento. Questo ci aiuterà a creare un effetto fluttuante.
Effetti di trasformazione di scorrimento: movimento verticale
Set movimento verticale / desktop
Offset iniziale: 4
Mid Offset: 0 (al 50%)
Offset finale: -4
Set movimento verticale / tablet e telefono
Offset iniziale: 4
Mid Offset: 0 (al 40% e 60%)
Fine offset: -3
Attivare l'effetto di movimento: metà dell'elemento
Impostazioni della colonna 2
Posizione
Passiamo ora ai parametri della seconda colonna. Regolare i parametri di posizione di conseguenza.
Posizione: relativa
Origine dell'offset: in alto a sinistra
Offset verticale
Ufficio: 25vw
Effetti di scorrimento
Aggiungiamo anche un movimento verticale a questa colonna.
Effetti di trasformazione di scorrimento: movimento verticale
Definire il movimento verticale / desktop
Avvia offset: 2
Offset medio: 0 (al 50%)
Fine offset: -2
Definire movimento verticale / tablet e telefono
Avvia offset: 0
Offset medio: 0 (al 50%)
Fine offset: -2
Trigger effetto movimento: elemento superiore
Aggiungi un modulo di testo alla colonna 1
Contenuto
È ora di aggiungere moduli, iniziando con un modulo di testo nella colonna 1. Aggiungi qualsiasi contenuto H2 che desideri.
Testo del titolo
Vai alla scheda Design e applica uno stile al testo H2 come segue.
Livello del titolo: H2
Carattere: Palanquin Dark
Peso carattere: grassetto
Stile carattere: TT
Colore: giallo # ffd868
Girovita
Ufficio: 5vw
Tablet: 10vw
Telefono: 12vw
Spaziatura lettere: 4px
Aggiungi un modulo del modulo di contatto alla colonna 1
Contenuto
Sotto il modulo di testo, aggiungi un modulo di contatto. Questi sono i campi che utilizziamo:
Cognome
E-mail
materiale
Messaggio
Protezione Spam
Prima di disegnare il modulo del modulo di contatto. attiva la protezione antispam e collega il tuo account ReCaptcha.
Utilizzare un servizio di protezione antispam: Sì
Fornitore servizi: ReCaptcha
Seleziona un account
i campi
Passa alla scheda Progettazione e applica uno stile ai campi come segue.
Colore di sfondo: blu scuro # 25274d
Colore del testo: grigio chiaro # d1d1d1
Colore sfondo messa a fuoco: blu scuro # 25274d
Metti a fuoco il colore del testo: grigio chiaro # d1d1d1
Carattere: Palanquin
Stile: TT
Dimensione del testo
Ufficio: 0.9vw
Tablet: 2vw
Telefono: 3vw
Spaziatura lettere: 1px
Pulsante
Quindi, stilizzare il pulsante.
Stili personalizzati: Sì
Dimensione del testo: 20px
Colore del testo: blu scuro # 25274d
Colore di sfondo: giallo # ffd868
Raggio del bordo: 7px
Colore dell'icona: blu scuro # 25274d
Margine superiore: 5px
dimensionamento
Modifichiamo quindi i parametri di dimensionamento.
Larghezza: 100%
Larghezza massima: 100%
spaziatura
Aggiungeremo anche l'imbottitura superiore.
Imbottitura superiore: 4vw
confine
Completa i parametri del modulo personalizzando i parametri del bordo.
Ingressi con angoli arrotondati: 6px ai quattro angoli
Voci Stili di bordo: tutti e quattro i lati
Larghezza bordo ingresso: 2px
Voci Colore bordo: giallo # ffd868
Aggiungi il modulo di monitoraggio dei social media alla colonna 2
Contenuto
Vai alla colonna 2 e aggiungi un modulo di social media. Usa tutti i social network di cui hai bisogno.
Facebook
Twitter
Linkedin
Collegamento
Prima di dare uno stile, aggiungi collegamenti alle reti corrispondenti.
Contesto dell'articolo
Ora apri il primo social network e cambia il colore di sfondo.
Colore: Blu scuro # 25274d
Icona dell'elemento
Nella scheda di progettazione dello stesso elemento, modificare le impostazioni dell'icona come segue.
Colore: giallo # ffd868
Dimensione carattere icona
Scrivania e tablet: 31 px
Telefono: 26 px
Spaziatura degli oggetti
Quindi aggiungi un piccolo margine per separare le icone l'una dall'altra.
Margine destro: 1vw
Copia e incolla gli stili degli elementi
Per applicare uno stile ai restanti social network, torna alla finestra del contenuto principale e copia gli stili degli elementi dalla prima icona. Quindi incolla gli stili degli elementi sui restanti social network.
allineamento
Passa alla scheda di progettazione principale e assicurati che il modulo sia allineato a sinistra.
Allineamento del modulo: a sinistra
dimensionamento
Quindi regolare il dimensionamento del modulo.
Larghezza: 100%
spaziatura
Cancella anche tutto il riempimento predefinito.
Imbottitura superiore, inferiore, sinistra e destra: 0vw
confine
Infine, aggiungi angoli arrotondati nelle impostazioni del bordo. Questo regolerà i bordi di tutte le icone contemporaneamente.
angoli arrotondati
In alto a sinistra e a destra: 7 pixel
In basso a sinistra e a destra: 0px
Aggiungi un modulo di testo alla colonna 2
Contenuto
Sotto il modulo social media, aggiungi un altro modulo di testo. Aggiungi contenuti a tua scelta. Abbiamo aggiunto due indirizzi, un numero di telefono e un'e-mail. Usa il grassetto sul titolo di ogni elemento in tutte le lettere maiuscole.
zona Generale: 1587 Sukhumvit Soi 21, Bangkok, Tailandia.
L'utilizzo dei nuovi effetti di scorrimento Divi trasforma qualsiasi layout standard in un bel design. Creando il tuo sfondo, hai un maggiore controllo sull'aspetto del design finito. Se hai domande o suggerimenti, lascia un commento nella sezione commenti qui sotto!
La creazione di un'animazione di scorrimento dello sfondo del testo è un modo unico per aggiungere trame animate colorate al testo del tuo sito web mentre un utente sta scorrendo la pagina. Con Divi, il processo è sorprendentemente facile una volta che hai imparato alcune tecniche chiave.
In questo tutorial, utilizzeremo solo la potenza delle impostazioni integrate di Divi per creare 3 design unici che presentano un'animazione di scorrimento dello sfondo del testo colorato. Ti mostreremo anche come creare una versione oscura di ogni design per un look completamente nuovo.
Cominciamo!
Possibile risultato
Ecco uno sguardo ai progetti che costruiremo oggi.
Design 1: gradiente di sfondo del testo con effetto di scorrimento orizzontale
Questo primo design presenterà un effetto di scorrimento orizzontale che anima un modulo separatore colorato dietro un modulo di testo con il filtro dello schermo.
Aggiungi una colonna
Per iniziare, aggiungi una riga di una colonna alla sezione predefinita.
Aggiungi un modulo di testo
Quindi aggiungi un nuovo modulo di testo alla colonna.
Contenuto
Per il contenuto della colonna, incolla il seguente codice HTML nell'area contenuto:
Formattazione del testo
Quindi aggiornare il disegno del testo come segue:
Colore di sfondo: #ffffff
Stile carattere testo: TT
Colore del testo: # 000000
Dimensioni del testo: 100 px (desktop), 40 px (telefono)
Spaziatura lettere di testo: 0.15em
Altezza della riga di testo: 1em
Allineamento del testo: centro
Carattere del titolo: Merriweather
Peso carattere titolo: grassetto
Stile carattere titolo: TT
Allineamento del testo dell'intestazione: centro
Colore testo intestazione: # 000000
Dimensioni del testo dell'intestazione: 200 px (desktop), 80 px (telefono)
Spaziatura della lettera del titolo: 0.15em
Altezza della riga del titolo: 1em
Imbottitura e filtro
Ora abbiamo bisogno di aggiungere un po 'di riempimento e filtro dello schermo al modulo di testo. Il filtro è necessario affinché questo design funzioni poiché è ciò che consente ai colori / modifiche di sfondo di mostrare dietro il testo.
Per aggiungere il riempimento e il filtro, aggiorna quanto segue:
imbottitura: 15px alta, 20px bassa
Metodo di fusione: schermo
Nota: la modalità di fusione schermo funziona meglio con testo nero su sfondo bianco. Se volessimo usare il testo bianco su uno sfondo nero, useremmo la modalità di fusione Moltiplica.
Separatore superiore e inferiore
Una volta completato il nostro modulo di testo, aggiungiamo alcuni separatori (sopra e uno sotto il modulo di testo) per un ulteriore elemento di design.
Aggiungi un separatore inferiore
Aggiungi un nuovo modulo di separazione sotto il modulo di testo.
Impostazioni di separazione più elevate
Aprire le impostazioni del separatore e selezionare NO per visualizzare il separatore.
Quindi aggiorna lo sfondo e assegna al divisore la stessa modalità di fusione del modulo di testo come segue:
Colore sfondo sfumato sinistro: # 000000
Colore di sfondo sfumato a destra: #ffffff
Direzione gradiente: 90deg
Posizione iniziale: 48%
Posizione finale: 0%
Metodo di fusione: schermo
Quindi aggiorna l'altezza del divisore sullo schermo del telefono come segue:
Altezza: 15 px (telefono)
Aggiungi separatore superiore
Per creare il divisore superiore, duplica il divisore inferiore precedente e trascinalo sopra il modulo di testo utilizzando l'area di visualizzazione dei livelli.
Quindi invertire i colori sullo sfondo sfumato.
Aggiorna i parametri della linea
Una volta installati i separatori superiore e inferiore, aggiorna i parametri di linea come segue:
Larghezza della grondaia: 1 (per rimuovere i margini inferiori tra i moduli)
Larghezza massima: 600 pixel (per mantenere un design coerente su desktop e tablet)
Allineamento della linea: centro
Imbottitura: 0px alta, 0px bassa
Straripamento orizzontale: nascosto
Straripamento verticale: nascosto
Crea un separatore per il colore di sfondo del testo animato
L'ultimo elemento di questo primo disegno è il divisore che useremo per animare il colore di sfondo del testo sullo scorrimento. Per fare ciò, aggiungi un nuovo modulo di separazione sotto il divisore inferiore.
Quindi selezionare NO per visualizzare il separatore.
Impostazioni del divisore di sfondo
Aggiorna il separatore con uno sfondo sfumato come segue:
Colore sfondo sfumato sinistro: # e02b20
Colore gradiente di sfondo a destra: # 8300e9
Direzione gradiente: 90deg
Posizione iniziale: 30%
Posizione finale: 70%
Vogliamo che l'altezza del separatore sia abbastanza alta da colorare tutto il nostro testo nel modulo di testo e i separatori superiore e inferiore. Per questo design, imposta l'altezza su 400 px.
Altezza: 400px
Quindi assegna al divisore una posizione assoluta per posizionarlo direttamente sopra gli altri moduli. Usa l'indice Z per posizionare il divisore dietro gli altri moduli.
Posizione: assoluta
Indice Z: -1
Effetti di scorrimento del divisore di sfondo
Con il separatore in posizione, tutto ciò che dobbiamo fare è spostare il separatore dietro il testo utilizzando gli effetti di scorrimento di Divi. Per questo design, aggiungeremo solo movimento orizzontale allo scorrimento.
Aggiorna i seguenti elementi:
Nella scheda Movimento orizzontale ...
ufficio
Attiva movimento orizzontale: SÌ
Avvia offset: 6 (al 20%)
Offset medio: 0 (al 40% -60%)
Fine offset: -6 (all'80%)
Telefono
Avvia offset: 3
Fine offset: -3
Inoltre, assicurati di impostare il trigger per l'effetto di movimento al centro della clip:
Attivare l'effetto di movimento: metà dell'elemento
Aggiungi spaziatura di sezione
Per creare uno spazio di scorrimento temporaneo per testare il disegno, aggiungere quanto segue alla sezione:
Margine: 80 vh sopra, 80 vh sotto
Considerazioni finali
I progetti di animazione dello sfondo del testo mostrati in questo articolo funzionerebbero perfettamente come un design statico senza il movimento di aggiunta sullo scorrimento. Tuttavia, gli effetti di scorrimento aggiuntivi portano davvero il design a un livello completamente nuovo. Sentiti libero di sperimentare più colori ed effetti!
Le barre a piè di pagina fisse possono essere un modo pratico per mantenere le informazioni importanti sul tuo sito web in primo piano e al centro quando l'utente interagisce con il contenuto della tua pagina su qualsiasi dispositivo.
Come con Divi, una barra del piè di pagina di solito esiste come elemento statico nella parte inferiore della pagina dopo il contenuto del piè di pagina principale. Includono cose come il testo del copyright e le icone dei social media.
Tuttavia, se non nascondi il contenuto della barra a piè di pagina nella parte inferiore della pagina, puoi creare una barra a piè di pagina personalizzata che fluttua nella parte inferiore dello schermo mentre l'utente scorre.
In questo tutorial, progetteremo una barra a piè di pagina fissa completamente personalizzata utilizzando il generatore di temi Divi. Questo ti sarà utile per tenere sempre in vista quei piccoli ma importanti contenuti.
Possibile risultato
Ecco una panoramica della barra a piè di pagina fissa che stiamo per progettare.
Come aggiungere il modello della barra del piè di pagina fisso da scaricare sul tuo sito Divi
ATTENZIONE !: l'aggiunta di questo modello sostituirà il modello di sito Web predefinito (se ne hai uno) sul tuo sito Divi. Ti suggeriamo di aggiungerlo a un sito di prova in modo da non rovinare nulla su un sito live.
Per importare il modello della barra del piè di pagina fisso sul proprio sito Web, decomprimere il file zip di download per accedere al file JSON.
Quindi vai alla dashboard di WordPress e vai a Divi> Theme Builder.
Quindi fare clic sull'icona della portabilità in alto a destra nella pagina.
Nella finestra di portabilità, scegli il file JSON che hai appena decompresso e seleziona l'opzione "Scarica backup prima dell'importazione", nel caso avessi precedentemente qualcosa nel modello di sito web predefinito che non avevi. non voleva sostituire.
Quindi fare clic sul pulsante Importa.
Infine, salva le modifiche nel generatore di temi e visualizza una pagina live per visualizzare la barra a piè di pagina fissa.
Ora passiamo al tutorial, ok?
Parte 1: aggiunta di un piè di pagina globale
Il generatore di temi Divi consente di sostituire il piè di pagina predefinito con uno nuovo aggiornando il modello di sito Web predefinito.
Per creare un piè di pagina globale, vai alla dashboard di WordPress e vai a Divi> Theme Builder. Quindi fare clic sullo spazio "Aggiungi piè di pagina globale" all'interno del modello di sito Web predefinito.
Quindi seleziona l'opzione "Crea un piè di pagina personalizzato" dall'elenco a discesa.
Questo distribuirà l'Editor del layout del modello dove ti verranno immediatamente richieste le tre scelte su come vuoi iniziare a costruire. Seleziona "Build From Scratch".
Parte 2: creazione della barra a piè di pagina fissa
Ora che stiamo modificando dall'editor del layout del modello, possiamo iniziare a progettare la barra del piè di pagina fissa. Una volta terminato, avrai una barra a piè di pagina fissa con tre colonne pronte per il contenuto.
Aggiungi un layout a tre colonne alla linea
Innanzitutto, aggiungi un layout a tre colonne alla riga.
Altezza della sezione
Una volta aggiunte le tre colonne, diamo un'altezza definita alla sezione. Questo è importante per creare uno spazio in fondo alla pagina dove finirà il telefono fisso. Rimuoveremo anche il riempimento predefinito superiore e inferiore.
Per impostare l'altezza e l'imbottitura, aprire le impostazioni della sezione e aggiornare quanto segue:
Altezza: 85px
Imbottitura: 0px alta, 0px bassa
Impostazioni linea
Ora che la nostra sezione è pronta, siamo pronti per personalizzare la riga in modo che funga da barra a piè di pagina fissa. Apri le impostazioni della riga, quindi aggiorna quanto segue:
contesto
Colore di sfondo: # 1a1e36
Dimensioni e spaziatura
Larghezza della grondaia: 1
Larghezza: 100%
Larghezza massima: 100%
Imbottitura: 0px su, 0px giù, 3% a sinistra, 3% a destra
CSS personalizzato
Sebbene la riga sia fissa, vogliamo che l'altezza della riga corrisponda all'altezza della sezione padre in modo che lo spazio nella parte inferiore della pagina contenga correttamente la riga. E vogliamo assicurarci che il contenuto della riga rimanga allineato verticalmente. A tale scopo, aggiungi il seguente CSS personalizzato all'elemento principale della riga:
Per fissare la linea in modo che fluttui nella parte inferiore dello schermo, dobbiamo assegnargli una posizione fissa nella posizione centrale inferiore come segue:
Posizione: fissa
Ubicazione: centro inferiore
Parte 2: creazione del contenuto della barra a piè di pagina fissa
A questo punto, abbiamo una barra a piè di pagina a posizione fissa pronta per il contenuto. Possiamo aggiungere qualsiasi contenuto vogliamo a ciascuna delle tre colonne. Ma poiché si tratta di una "barra" a piè di pagina limitata a 85 pixel di altezza, è necessario limitare la quantità di contenuto. Per questo motivo aggiungeremo un piccolo menu con un logo dinamico e 4 voci di menu nella colonna 1. Nella colonna 2 aggiungeremo un testo di copyright con un anno corrente dinamico. Nella colonna 3, aggiungeremo tre icone di monitoraggio dei social media.
Aggiungi un menu alla colonna 1
Nella colonna 1, aggiungi un modulo di menu.
Seleziona il menu
Quindi seleziona uno dei menu che hai già creato sul tuo sito web. Assicurati di mantenere le voci di menu su 4 o meno.
Aggiungi il logo del sito come contenuto dinamico
Per il menu del logo, aggiungeremo dinamicamente il logo del sito. Fare clic sull'icona "Usa contenuto dinamico" mentre si passa con il mouse sull'area di anteprima del logo. Quindi seleziona Logo del sito dall'elenco a discesa.
Rimuovi sfondo
Quindi rimuovere lo sfondo del menu predefinito in modo che sia trasparente.
Progettazione Menu
A questo punto siamo pronti per aggiungere un po 'di design al menu. Per questo design, lo manterremo semplice e piccolo. Aggiorna i seguenti parametri di progettazione:
Menu Font: cavalcavia
Colore testo menu: # b59c61
Immagine seppia: 100%
Altezza massima del logo: 50 px
Aggiungi testo protetto da copyright alla colonna 2
Una volta che il menu è attivo, vai alla colonna 2 per aggiungere il testo del copyright.
Aggiungi un modulo di testo
Aggiungi un nuovo modulo di testo alla colonna 2.
Aggiungi dinamicamente la data corrente con il testo prima e dopo
Qui diventeremo creativi con contenuti dinamici per visualizzare l'anno corrente nel testo del copyright. Ciò garantirà che l'anno venga aggiornato automaticamente per la vita del sito.
A tale scopo, fare clic sull'icona "Utilizza contenuto dinamico" e selezionare "Data corrente" dall'elenco.
Nella finestra a comparsa Data corrente, aggiorna quanto segue:
Aggiorna il disegno e il margine del testo come segue:
Carattere testo: cavalcavia
Colore del testo: # b59c61
Allineamento del testo: centro
Margine (solo telefono): 10 pixel nella parte superiore, 10 pixel nella parte inferiore
Questo supporta il testo protetto da copyright.
Aggiungi icone di monitoraggio dei social media alla colonna 3
Nella colonna 3, aggiungi un modulo di monitoraggio dei social media.
Aggiungi social network
Nella scheda Contenuto, aggiungi i social network necessari al sito. Per questo design, ne usiamo tre.
Impostazioni di monitoraggio dei social media
Successivamente, aggiorna le impostazioni di progettazione per tutte le icone di monitoraggio dei social media come segue:
Allineamento del modulo: dritto (desktop e tablet), al centro (telefono)
Colore icona: # 1a1e36
Usa dimensioni icona personalizzate: SÌ
Dimensione carattere icona: 16px (desktop e tablet), 14px (telefono)
Aggiorna le impostazioni dei social media
Per aggiornare il design dell'icona del singolo social network, apri le impostazioni per la prima rete e aggiorna quanto segue:
Colore di sfondo: #ffffff
Imbottitura: 8 pixel a destra, 8 pixel a sinistra
Angoli arrotondati: 8px
Estendi le impostazioni dei social media a tutti
Quindi apri il menu delle impostazioni aggiuntive per la prima rete e seleziona " Estendi gli stili degli oggetti " nella lista. Nella finestra a comparsa Estendi stili, scegli di estendere gli stili in " Questa colonna "E clicca estendersi .
Ciò estenderà il design al resto delle icone nella colonna.
Considerazioni finali
L'aggiunta di una barra a piè di pagina fissa in alcuni casi ha senso. L'altezza della barra è abbastanza piccola da non distrarre o occupare troppo spazio sul cellulare. E ti dà la possibilità di aggiungere importanti CTA per conversioni migliori e un'esperienza utente più fluida.
Per questo design, lo spazio nella parte inferiore della pagina viene creato impostando un'altezza fissa per la sezione e quindi consentendo alla linea fissa di ereditare l'altezza della sezione (sebbene sia fissa).
Altre risorse
Ecco un elenco di risorse aggiuntive che possono aiutarti a creare nella progettazione del tuo sito Web con Divi.
Riservatezza e cookies: questo sito utilizza cookies. Continuando a navigare su questo sito, acconsenti al nostro utilizzo.
Per saperne di più, compreso come controllare i cookie, vedere quanto segue:
Politica sui cookie
