Trasforma il modulo Divi Shop in mappe di prodotto dinamiche su dispositivo mobile

Trasforma il modulo Divi Shop in mappe di prodotto dinamiche su dispositivo mobile

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.

Animazione negozio modulo prodotto Divi

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.

Crea prodotti woocommerce

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.

Crea una pagina divi
Crea una nuova pagina divi

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.

Scegli un layout divi

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.

Individua il modulo del negozio

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)
Modifica del design reattivo

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
Configurazione visibilità Divi

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
Modifica il design della colonna divi

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)
Configurazione responsive design

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
Cambia attributo css module store divi

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
Configurazione overflow

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 modulo codice sotto il modulo divi shop

Aggiungi il codice CSS al modulo

Il seguente codice CSS trasformerà automaticamente il nostro modulo negozio di 8 prodotti in carte magnetiche reattive:

<style> @media all and (max-width: 980px) { .product-swipe-cards ul.products {display: grid !important;grid-template-columns: repeat(8, 8.8%) !important;grid-column-gap: 0.7%;} .product-swipe-cards .woocommerce ul.products::before {content: none;display: block;} .product-swipe-cards.et_pb_shop ul.products li.product {width: 100% !important;} .product-swipe-cards .woocommerce {width: 255% !important;margin-left: 5%;} .product-swipe-cards::-webkit-scrollbar {display: none;} .product-swipe-cards {-ms-overflow-style: none;} } </style>

Aggiungi il codice divi css

Abbina diversi account di prodotto

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
Abbina account di prodotto diversi

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).

grid-template-colonne: ripeti (4, 14%)! importante;

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 ulteriore codice css divi

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

Personalizza il codice css

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.

Riutilizza il modulo officina divi

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.

Duplica il modulo codice divi

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!

Clona il modulo quanto necessario
Modulo divi duplicato

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!

Anteprima demo su dispositivo mobile

Panoramica

Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata a come appare su schermi di dimensioni diverse.

Animazione negozio modulo prodotto Divi

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.

Come aggiungere un contatore animato allo scorrimento su Divi

Come aggiungere un contatore animato allo scorrimento su Divi

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.

Registra un modulo sezione divi

Quindi aggiungi un nuovo modulo di testo alla riga.

Aggiorna il contenuto del modulo di testo con il seguente:

Salva la data
Salva la data 1

Quindi aggiorna lo stile del testo dell'intestazione come segue:

  • Titolo intestazione 2: Prata
  • Voce 2 Dimensioni del testo: 130 px (desktop), 70 px (tablet), 40 px (telefono)
Modifica del titolo Divi

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
Configurazione bordo Divi

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
Configurazione della spaziatura delle colonne Divi

Aggiungi un modulo di testo

Quindi aggiungere un modulo di testo alla colonna.

Aggiungi un modulo di testo divi

Contenuto / etichetta

Per il contenuto del modulo di testo, aggiungi la parola "mese".

Specificare il divi del 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
Modulo wordpress Prata

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 il modulo di testo del narratore

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".

Aggiungi modulo numero divi

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
Configurazione colore Divi

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
Configurazione del testo divi del modulo di animazione

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.

Duplica il modulo di testo divi 1

Aggiorna numero / contenuto

Apri i parametri del secondo modulo di testo digitale e aggiorna il contenuto con il numero "02".

Salva numero 2 divi

Posizione di aggiornamento

Quindi aggiornare le opzioni di posizione come segue:

  • Posizione: assoluta
  • Offset verticale: 126px
Modifica della posizione del modulo di testo divi

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%)
Animazione effetto scorrimento divi

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.

Duplica il modulo di testo numero 3

Aggiorna numero / contenuto

Aggiorna il contenuto con il numero "03".

Modifica modulo testo divi

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%)
Modifica l'animazione del modulo di testo

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.

Duplica il numero di divi del modulo di testo 4

Aggiorna numero / contenuto

Aggiorna il contenuto con il numero "04".

Configura il valore del modulo di testo divi

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%)
Modulo di configurazione animazione 4 divi

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.

Aggiungi il modulo separatore divi

Quindi selezionare NO per visualizzare il separatore.

Non visualizzare il separatore divi

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 intera colonna divi

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à.

Risultato finale

Ecco il risultato finale.

Altre risorse

Considerazioni finali

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!

Come creare cassetti animati su Divi

Come creare cassetti animati su Divi

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.

Importa modello divi

Infine, salva le modifiche nel generatore di temi e visualizza una pagina live per visualizzare la barra a piè di pagina fissa.

Salva le modifiche al layout divi

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.

Selezione dell'editor Divi

Quindi seleziona l'opzione "Crea piè di pagina globale" dall'elenco a discesa.

Aggiungi un piè di pagina modello divi

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".

Scegli il modello divi precostruito

Nella finestra a comparsa Carica dalla libreria, trova il layout della pagina di destinazione degli elementi decorativi. Quindi fare clic su "Usa questo layout".

Usa un modello divi

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.

Elimina la sezione non necessaria

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.

Piè di pagina Divi

Modificare la dicitura nella sezione inferiore per leggere "Footer Drawer". Questa sarà la sezione che useremo come contenuto del nostro footer drawer.

Modifica l'etichetta del piè di pagina divi

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.

cassetto piedi fisso

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.

Layout di selezione divi

Imbottitura di fila

Prima di aggiungere un modulo, apri le impostazioni della riga e aggiorna il riempimento come segue:

  • Imbottitura: 0px alta, 0px bassa
Spaziatura divi di configurazione

Imbottitura di sezione

Quindi aprire le impostazioni nella sezione "Footer drawer" e aggiornare l'imbottitura come segue:

Configurazione della spaziatura delle sezioni Divi

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.

Cassetto piè di pagina divi
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.

Scegli l'icona del cassetto piè di pagina
BlurbDesign

Quindi dare il testo di presentazione come segue:

  • Colore di sfondo: # 081540
Modifica sfondo divi

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
Personalizza il pulsante divi di blurb
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.

Modifica il design del pulsante divi
Posizione Blurb

Quindi assegna al testo di presentazione una posizione assoluta nella parte superiore centrale della sezione.

  • Posizione: assoluta
  • Posizione: in alto al centro
Modifica la posizione del pulsante divi
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
Pulsante di ritorno divi

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
Definisci un selettore divi

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.

Trasforma sezione divi

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
Aggiungi classe ha trasformazione divi

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
Modifica la posizione sull'angolo divi

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.

Nascondi sezione su dispositivo mobile

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.

Controllo visibilità sezione divi

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.

Aggiungi il codice del modulo

Quindi incollare il seguente codice nell'area del codice:

.has-transform, .drawer-target {transition: all 400ms ease-in-out;} .toggle-drawer-animation {transform: none !important;}.toggle-icon-animation {transform: rotate(-135deg) !important;}  .drawer-target {cursor: pointer;}(function($) {$(document).ready(function(){$('.drawer-target').click(function(){$(this).toggleClass('toggle-icon-animation');      $('.has-transform').toggleClass('toggle-drawer-animation');   });    });})( jQuery );   
Aggiungi modulo codice divi

Salva le modifiche

Ricordati di salvare il layout prima di uscire dall'editor.

Salva modifiche divi

Salvare anche le modifiche nel generatore di temi.

Salva le modifiche

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.

Tradotto da: Temi eleganti

Crea una sezione di contatto mobile con effetti di scorrimento su Divi

Crea una sezione di contatto mobile con effetti di scorrimento su 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
Immagine di sfondo Divi

spaziatura

Successivamente, personalizza le impostazioni di spaziatura delle sezioni nella scheda Progettazione.

  • Margine superiore e inferiore: 50vh
  • Imbottitura inferiore: 0vw
Configurazione spaziatura sezioni Divi 1

visibilità

Quindi impostare gli overflow su visibile.

  • Troppopieno orizzontale e verticale: visibile
sezione contatti flottanti

Posizione

Infine, imposta l'indice Z della sezione su 10.

  • Indice Z: 10
Posizione della sezione Divi

Aggiungi una nuova linea

Struttura a colonne

Adesso è il momento di aggiungere alcune cose. Innanzitutto, aggiungi una riga con 2 colonne.

La riga ha due colonne divi

dimensionamento

Aprire i parametri della linea e regolare il dimensionamento come segue.

  • Larghezza
    • Ufficio: 90%
    • Tablet e telefono: 80%
  • Larghezza massima: 90%
Parametro della linea Divi

visibilità

Fare clic sulla scheda Avanzate e quindi regolare gli overflow.

  • Troppopieno orizzontale e verticale: visibile
Configurazione overflow della linea Divi

Posizione

Completa le impostazioni della riga modificando le impostazioni della posizione.

  • Posizione: relativa
  • Origine offset: in alto a sinistra
  • Offset verticale
    • Desktop: -8vw
Configurare la posizione della linea divi

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
Colore colonna 1 divi

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
Configurazione della spaziatura delle sezioni a due colonne

Confine

Quindi, aggiungi alcuni angoli arrotondati alle impostazioni del bordo.

  • Angoli arrotondati: 10px tutti e quattro gli angoli
Sezione divi bordi arrotondati

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
Personalizza l'effetto di scorrimento della sezione Div

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
Personalizzazione della colonna Divi

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
Effetto di scorrimento Divi

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.

Modulo contenuto colonna 1

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
Personalizzazione del font Divi in ​​alto

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
Aggiungi modulo di contatto divi

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
Protezione antispam del modulo di contatto Divi

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
Personalizza i campi dei colori 1

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
Personalizza lo stile del pulsante divi 1
Configurazione del colore del pulsante Divi

dimensionamento

Modifichiamo quindi i parametri di dimensionamento.

  • Larghezza: 100%
  • Larghezza massima: 100%
Configurazione del dimensionamento Divi

spaziatura

Aggiungeremo anche l'imbottitura superiore.

  • Imbottitura superiore: 4vw
Spaziatura Divi

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
Configurazione bordo Divi

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
Modulo seguici sui social network

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
Modifica sfondo divi 1

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
Personalizza il divi di colore

Spaziatura degli oggetti

Quindi aggiungi un piccolo margine per separare le icone l'una dall'altra.

  • Margine destro: 1vw
Configurazione spaziatura condivisione social

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.

Copia elemento di stile
Incolla l'elemento di stile divi

allineamento

Passa alla scheda di progettazione principale e assicurati che il modulo sia allineato a sinistra.

  • Allineamento del modulo: a sinistra
Scegli l'allineamento

dimensionamento

Quindi regolare il dimensionamento del modulo.

  • Larghezza: 100%
Configurare il dimensionamento dei divi

spaziatura

Cancella anche tutto il riempimento predefinito.

  • Imbottitura superiore, inferiore, sinistra e destra: 0vw
Configurare la spaziatura divi

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
Configurazione del bordo del modulo Divi

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.
  • Punto di vendita : Emporium Mall, 2 ° piano
  • Telefono: (321) 564 2398
  • e-mail: [email protected]
Configurazione dell'indirizzo del modulo di testo Divi

contesto

Cambia il colore di sfondo del modulo.

  • Colore: Blu scuro # 25274d
Configurazione dello sfondo del modulo di testo

Testo

Passa alla scheda Progettazione e applica uno stile al testo.

  • Carattere: Palanquin
  • Colore: giallo # ffd868
  • Dimensioni: 18px
Carattere del testo del modulo Divi

spaziatura

Aggiungi anche valori di spaziatura personalizzati.

  • Margine massimo
    • Ufficio: -60px
    • Tablet e telefono: -50 pixel
  • Imbottitura superiore, inferiore, sinistra e destra
    • Ufficio: 3vw
    • Tablet: 6vw
    • Telefono: 8vw
Margine di spaziatura Divi

confine

E completa il modulo aggiungendo angoli arrotondati nelle impostazioni del bordo. Questo è tutto!

  • Angoli arrotondati: 10 pixel in alto a destra, in basso a sinistra e in basso a destra.
Modulo di testo divi con bordo arrotondato

Panoramica

Ora che abbiamo finito di ricreare la sezione dei contatti mobili, dai un'ultima occhiata al risultato su schermi di dimensioni diverse.

sezione contatti flottanti

Risorse aggiuntive

Le sue risorse possono essere complementari a ciò che hai appena letto. Possono essere utilizzati in aggiunta o da coloro che non hanno il tema Divi.

to Finish

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!

Come creare un'animazione di scorrimento dello sfondo del testo colorato con Divi

Come creare un'animazione di scorrimento dello sfondo del testo colorato con Divi

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.

Scegli il layout della colonna divi

Aggiungi un modulo di testo

Quindi aggiungi un nuovo modulo di testo alla colonna.

Aggiungi modulo di testo divi

Contenuto

Per il contenuto della colonna, incolla il seguente codice HTML nell'area contenuto:

Salva il codice del frammento

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.

Configurazione della spaziatura del modulo di testo Divi

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.

Aggiungi il modulo separatore divi
Impostazioni di separazione più elevate

Aprire le impostazioni del separatore e selezionare NO per visualizzare il separatore.

effetti di scorrimento sfondo testo divi

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
Configurazione del separatore di colori

Quindi aggiorna l'altezza del divisore sullo schermo del telefono come segue:

  • Altezza: 15 px (telefono)
Configurazione separatore Divi

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.

Inserto separatore Divi

Quindi invertire i colori sullo sfondo sfumato.

Inserimento di 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
Personalizza il parametro della linea divi

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.

Inserimento separatore

Quindi selezionare NO per visualizzare il separatore.

Mostra divi seprator

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%
Divisorio posteriore Divi

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
Altezza divisoria divisoria

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
Separatore di indice
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
Configurazione dell'animazione

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
Configurazione dimensioni sezione divi

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!

Non vedo l'ora di sentirti nei commenti.

Alla tua salute!

Come creare una barra a piè di pagina fissa con Divi

Come creare una barra a piè di pagina fissa con Divi

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.

Salva modifiche divi

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.

Sezione a 3 file

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
Configurazione altezza sezione Divi 1

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
Accesso alle impostazioni di linea

Dimensioni e spaziatura

  • Larghezza della grondaia: 1
  • Larghezza: 100%
  • Larghezza massima: 100%
  • Imbottitura: 0px su, 0px giù, 3% a sinistra, 3% a destra
Personalizza sezione divi

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:

ufficio

altezza: eredita! importante; display: flessibile; align-items: center;

Telefono

altezza: eredita! importante; display: blocco;
Aggiungi un codice css

Posizionamento fisso

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
Posizione piè di pagina

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.

Selezione del menu di Wordpress

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.

Menu di selezione modulo wordpress

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.

Aggiungi un logo

Rimuovi sfondo

Quindi rimuovere lo sfondo del menu predefinito in modo che sia trasparente.

Elimina lo sfondo

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
Cambia il colore del carattere

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.

Modulo di selezione testo divi

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.

Data di selezione

Nella finestra a comparsa Data corrente, aggiorna quanto segue:

  • prima:
  • 01Copyright &copy;
  • dopo:
  • 01| Tous Droits Reservés
  • Formato data : personalizzato
  • Formato data personalizzato : 20 anni
Personalizza la data

Formattazione del testo

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
Modulo di testo per la selezione dei caratteri Divi

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.

Aggiungi il modulo di monitoraggio dei social network

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)
Personnalsier polizia divi

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
piede fisso bar div

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.