Come aggiungere una carta Floating About al tuo sito Divi

Su quasi tutti i siti web che visiti, gli elementi compaiono e si attaccano alla pagina. Avvisi sui cookie e opt-in, registrazioni e-mail e caselle di chat. Tutti tendiamo a ignorarli a un certo punto, diventando ciechi a qualunque cosa il sito web stia cercando di dirci. Facciamo semplicemente clic sulla X senza leggere. Ma ciò non significa che questo tipo di elementi non possano essere utili né avere un posto. Con Divi, puoi facilmente creare una carta fluttuante che aggiunge valore al tuo sito, spiegando in modo discreto chi sei e cosa fa il tuo marchio. Vediamo quanto è facile.

Anteprima

Desktop

Mobile

1. Crea un modello di pagina

La prima cosa che vuoi fare è decidere quali pagine vuoi includere questa carta fluttuante. Potresti volerlo su ogni pagina del tuo sito web o potresti volerlo solo su pagine di destinazione specifiche. In entrambi i casi, puoi utilizzare Divi Theme Builder per configurarlo. Sia come modello globale che come modello che si applica solo a determinate pagine.

Usa il generatore di temi per creare il modello

Per iniziare, vai su Divi – Theme Builder nella dashboard di WordPress. Scegli la sezione Corpo personalizzato delle pagine a cui vuoi applicare la carta fluttuante o il Corpo globale per applicarlo ovunque.

Dopo aver caricato Divi Visual Builder, scegli Avvia da zero quando hai la possibilità.

Aggiungi una riga a 1 colonna e inserisci un modulo di contenuto

E poi scegli una riga a colonna singola quando richiesto.

Successivamente, scegli il modulo Post Content . Questo è un esempio della nostra funzione di contenuto dinamico. Il modulo mostra il design di accompagnamento costruito all'interno della stessa pagina Divi, il che significa che questo modulo mostrerà contenuti diversi per pagine diverse con questo modello. Per i post del blog, sarà il contenuto del blog. Per le pagine del negozio, saranno i prodotti. E per le singole pagine, i contenuti personalizzati che hai creato utilizzando Divi.

Regolare la spaziatura tra le righe e la sezione

Con quelli a posto, dobbiamo fare un paio di regolazioni della spaziatura. Vai nelle impostazioni della sezione (bordo blu nel generatore Divi) e rimuovi tutto il riempimento superiore e inferiore. Lo fai nella scheda Design , l'intestazione Spaziatura , quindi imposta 0px su Top e Bottom sotto Padding .

Salva le modifiche e inserisci le impostazioni della riga . Ancora una volta, imposta il riempimento superiore e inferiore su 0px .

Quindi, trova l'intestazione Ridimensionamento e attiva Usa larghezza grondaia personalizzata e imposta il suo valore su 1. Quindi, imposta Larghezza e Larghezza massima su 100%.

Una volta completata la preparazione, iniziamo a creare la carta fluttuante!

2. Aggiungi carta fluttuante

Aggiungi una nuova sezione e riga

Innanzitutto, vorrai aggiungere una nuova sezione. Fallo scorrendo fino alla fine della pagina e facendo clic sul cerchio blu + e scegliendo Normale quando richiesto per il tipo di sezione.

Aggiungi un modulo Blurb

Questa sarà la sezione dedicata alla carta fluttuante. All'interno, vogliamo aggiungere un'altra riga a colonna singola. E al suo interno, vogliamo usare un modulo Blurb per la carta mobile stessa. Il modulo Divi Blurb potrebbe essere il modulo più versatile nel builder, quindi vogliamo sfruttare ciò che offre per questa funzione.

Regola le impostazioni di sezione e riga

Con questo in atto, dobbiamo regolare l'imbottitura e il posizionamento di questa riga e sezione. Quindi, per prima cosa, vai nelle impostazioni della sezione e imposta il riempimento superiore e inferiore su 0 px in Display - Spaziatura .

Quindi, nella scheda Avanzate , trova l'intestazione Posizione . Imposta l' indice Z su 12. Più alto è il numero, più "anteriore" sarà la sezione e il suo contenuto. E poiché è una carta fluttuante, vogliamo che galleggi sopra tutti gli altri elementi.

Infine, vai nelle impostazioni della riga e imposta ancora una volta il suo riempimento in alto e in basso su 0 px .

Il contenuto del modulo Blurb

Ora è il momento di modellare la carta stessa. Inserisci le Impostazioni per il modulo Blurb. Dal momento che è un elemento che descrive la tua attività, vorrai avere una breve menzione di ciò che fa la tua azienda o il tuo marchio. Poiché questo è un post di esempio, lo abbiamo riempito con un po' di lorem ipsum al gusto di zombie. Puoi impostare il titolo e il contenuto del corpo nella scheda Contenuto .

Imposta il colore di sfondo

Ovviamente vuoi che la carta mobile corrisponda visivamente al tuo sito, quindi la scelta del colore di sfondo giusto è molto importante. Andiamo con #ffffff (bianco). La scheda Contenuto ospita anche questo e lo troverai sotto l'intestazione Sfondo e il Paint Can .

Scegli un'immagine della carta

Il modulo Blurb ti offre la possibilità di includere un'immagine o un'icona per il modulo e vogliamo un'immagine che rappresenti la nostra azienda. Ancora una volta, nella scheda Contenuto , trova Immagine e Icona e carica semplicemente l'immagine che funziona per il tuo modulo.

Modella gli angoli delle carte

Quindi, vai nella scheda Design e nell'intestazione Border . Trova le opzioni Angoli arrotondati e imposta ogni angolo a 25 px . Questo appianerà i bordi affilati e squadrati senza modificare la forma della carta complessiva.

Allineamento del testo

Sotto l'intestazione Testo , imposta l' allineamento del testo al centro.

Dai uno stile al testo del titolo della carta mobile

Il testo del titolo che hai impostato in precedenza è impostato su H4 . Per modellarlo, vai nell'intestazione Testo del titolo, scegli la scheda H4 e modifica le seguenti opzioni del titolo :

• Carattere: Poppins
• Peso del carattere: grassetto
• Colore del testo: # 22303f
• Dimensione del testo: 20px
• Altezza della linea: 1.3 em

Quindi, dobbiamo andare nelle impostazioni di Reattività e modificare la dimensione del titolo per i dispositivi mobili. Cambia la dimensione del testo del titolo in 14px .

Dai uno stile al testo della carta

Quindi, vai a Corpo del testo e cambia il carattere del corpo in Poppins in modo che corrisponda al carattere del titolo.

Quindi fare clic sulla scheda Collegamento (icona a catena) e scambiare il colore del testo del collegamento con un colore complementare per il tuo sito. Abbiamo scelto #97c357 .

Dimensionamento della scheda Informazioni

Sotto l'intestazione Ridimensionamento , aggiungi i seguenti valori a queste impostazioni:

• Larghezza immagine: 75%
• Larghezza contenuto: 25vw
• Larghezza: 25vw
• Larghezza massima: 30vw

Nelle impostazioni di reattività, regola i seguenti valori:

• Larghezza contenuto: 90vw
• Larghezza: 90vw
• Larghezza massima: 95vw

Questi valori assicureranno che la carta occupi l'intera larghezza dello schermo sui dispositivi mobili perché una carta mobile nell'angolo è in genere impossibile da leggere.

Spaziatura per il Blurb

L'intestazione Spaziatura è una soluzione rapida, in cui è necessario impostare il margine sinistro su 0px , l' imbottitura superiore e inferiore su 2vw e l' imbottitura sinistra e destra su 1vw.

Per le impostazioni reattive, cambierà solo l' imbottitura superiore e inferiore . Li imposteremo al 5% .

Aggiungi ombra casella

Poiché la scheda fluttuante rimarrà fissa nella sua posizione, vogliamo che appaia come se fluttuasse effettivamente sopra il contenuto. Questo effetto è abbastanza semplice aggiungendo un'ombra di scatola di base al modulo. Questa opzione può essere trovata sotto Box Shadow e abbiamo scelto l'ombra inferiore di base.

Regolazione del CSS reattivo

Ora è la parte divertente. Ci stiamo spostando nella scheda Avanzate in cui faremo in modo che la carta mobile si appoggi alla pagina. Per fare ciò, il nostro primo passo è disattivare l'immagine che abbiamo aggiunto per il desktop. Le immagini nel modulo Blurb possono davvero influenzare le dimensioni e l'usabilità sui dispositivi mobili, inoltre è qualcos'altro da caricare per la pagina.

Quindi vogliamo aggiungere display:none; nel campo Immagine Blurb solo per dispositivi mobili in CSS personalizzato .

Fissare e far fluttuare la carta con l'impostazione della posizione

Infine, posizioneremo la carta dove vogliamo che galleggi. Innanzitutto, vogliamo andare alla scheda Avanzate e scorrere fino a Posizione . Seleziona Risolto dal menu a discesa.

Quindi, trova le opzioni di posizione . Questo è il punto sullo schermo in cui rimarrà la carta mobile. Per il desktop, vogliamo che si trovi nell'angolo inferiore dello schermo. Quindi facciamo clic sul quadrato che è correlato a quello. Vogliamo anche che sia leggermente sfalsato dal bordo della finestra, quindi cambieremo l' offset verticale al 3% e l' offset orizzontale al 2%.

Successivamente, vogliamo creare una posizione e un offset diversi per i dispositivi mobili. Sopra, impostiamo la larghezza della scheda per allungare l'intera larghezza dello schermo. Con questo in mente, cambieremo la posizione fissa in basso al centro in modo che la carta galleggi sempre nella parte inferiore dello schermo.

Inoltre, cambieremo solo l' offset verticale per i dispositivi mobili. Imposta questo valore al 3% . Non c'è bisogno di offset orizzontale perché è la larghezza dello schermo mobile e centrato.

Risultati finali

Quando tutto è impostato correttamente e regolato per il tuo sito personale, il prodotto finale dovrebbe essere simile a questo.

Desktop

Mobile

Conclusione

Con le potenti opzioni di Divi e l'interfaccia intuitiva, puoi progettare e apporre una carta fluttuante sul tuo sito in pochissimo tempo. Facendo sapere ai tuoi utenti con chi hanno a che fare fin dall'inizio, sei destinato a guadagnare un po' di fedeltà al marchio.

Per cosa hai usato le carte mobili sui tuoi siti web? Fateci sapere nei commenti!