Divi: come includere un pulsante di scorrimento verso il basso nel modulo dell'intestazione a larghezza intera

Vorresti aggiungere al tuo modulo di intestazione a larghezza intera di Divi un pulsante di scorrimento verso il basso?

Il modulo di intestazione a larghezza intera di Divi include un pulsante che dice all'utente che può scorrere verso il basso. Dopo aver fatto clic su di esso, vengono automaticamente reindirizzati alla sezione successiva. È un semplice pulsante con più icone tra cui scegliere e il suo colore e le sue dimensioni sono completamente personalizzabili. 

In questo articolo, vedremo come personalizzarlo e vedremo quattro pulsanti di scorrimento verso il basso che puoi includere nel modulo dell'intestazione a larghezza intera. Vedremo anche come personalizzarlo con CSS per ancora più opzioni di design.

Cominciamo!

Panoramica dei pulsanti di scorrimento verso il basso

Per prima cosa, diamo un'occhiata ai progetti che creeremo in questo articolo.

Esempio 1

Esempio 2

Scarica DIVI ora!!!

Esempio 3

Esempio 4

Scarica DIVI ora!!!

Pulsanti di scorrimento verso il basso Design dell'intestazione a tutta larghezza

Innanzitutto, creeremo il nostro design dell'intestazione a larghezza intera. Lo sto costruendo da zero usando i disegni di pacchetto di layout della terapia gratuito disponibile in Divi . Crea una nuova pagina e aggiungi a modulo di intestazione a larghezza intera in una nuova sezione a larghezza intera.

Guarda anche: Divi: Come creare un organigramma con il modulo Blurb

Divisorio di sezione a tutta larghezza

Aggiungeremo un divisore per questa intestazione a larghezza intera. Apri le impostazioni di sezione a tutta larghezza .

Quindi scorri verso il basso fino a Divisore . Fare clic sulla scheda Parte inferiore e scegli l'8° stile separatore. Imposta il colore su # e5e8f0 e inserisci 10vw per l'altezza. Chiudi le impostazioni della sezione.

• Divisori: bassi
• Stile: 8° stile
• Colore: #e5e8f0
• Altezza: 10vw

Titolo

Successivamente, apri il modulo Intestazione a larghezza intera e aggiungi il titolo, il sottotitolo e il testo del pulsante. Rimuovi il testo fittizio per il file contenuto del corpo e lasciarlo vuoto.

• Titolo: Inizia il tuo viaggio per sentirti meglio oggi.
• Sottotitolo: Leslie Saindon, terapista autorizzata
• Pulsante n. 1: fissa un appuntamento
• body: nessuno

Immagini di intestazione

Scorri fino a Immagini e scegli un'immagine di intestazione. Scelgo un'immagine fornita con il Pacchetto layout terapia.

Sfondo dell'intestazione

Scorri fino a sfondo. Rimuovi il colore di sfondo e seleziona la scheda Gradiente di sfondo.

• Gradiente si ferma:
  • 25%: #2e5b61
  • 100%: RGBA (46, 91, 97, 0,5)

permettere Posiziona il gradiente sopra l'immagine di sfondo .

• Gradiente quadrato sopra l'immagine di sfondo: SÌ

Immagine di sfondo dell'intestazione a larghezza intera

Quindi selezionare ilScheda Immagine di sfondo e scegli un'immagine a schermo intero. Sto usando un'altra immagine dal Therapy Layout Pack.

• Posizione dell'immagine di sfondo: in alto al centro

Layout dell'intestazione a tutta larghezza

Quindi selezionare ilscheda di progettazione e attivare Crea a schermo intero .

• Rendi schermo intero: SÌ

Icona di scorrimento dell'intestazione a larghezza intera

Quindi attiva Mostra il pulsante di scorrimento verso il basso. Daremo uno stile a questo pulsante nei nostri esempi, quindi per ora lo lasceremo nelle impostazioni predefinite.

• Mostra il pulsante di scorrimento verso il basso: SÌ

Immagine intestazione

Quindi scorri verso il basso fino a Immagine e cambia gli angoli arrotondati in alto a sinistra a 200px per i desktop. Imposta il resto degli angoli arrotondati su 0px. Cambia gli angoli arrotondati a 100 pixel per tablet e telefoni.

• Angoli arrotondati dell'immagine:
  • Desktop: 200px in alto a sinistra, 0px tutti gli altri
  • Tablet e telefono: 100px in alto a sinistra, 0px tutti gli altri

Testo del titolo dell'intestazione

Quindi scorri verso il basso fino a Titolo del testo. Usa H1 per il livello di intestazione. Scegli Cormorant Garamond per il carattere del titolo, imposta il peso su Grassetto e il colore su #e1ecea.

• Titolo:
  • Livello di intestazione: H1
  • Fonte: Cormorano Garamond
  • Peso del carattere: grassetto
  • Colore del testo: #e1ecea

Quindi impostare il taille per tutte e tre le dimensioni dello schermo. Usa 90 pixel per desktop, 40 pixel per tablet e 24 pixel per telefoni. Cambia l'altezza della linea a 1.1 em.

• Dimensione del testo del titolo: 90px, 40px, 24px
• Altezza riga del titolo: 1,1 em

Testo del sottotitolo dell'intestazione a larghezza intera

Quindi scorri verso il basso fino a Testo dei sottotitoli. Cambia il carattere in Inter, il peso in grassetto e il colore in #e1ecea.

• Sottotitolo:
  • Fonte: Inter
  • Peso del carattere: grassetto
  • Colore del testo: #e1ecea

Definisci il taille a 22px per desktop, 20px per tablet e 16px per telefoni. Cambiarlo altezza della riga a 1,6 em.

• Dimensioni del testo dei sottotitoli: 22px, 20px, 16px
• Altezza della linea dei sottotitoli: 1,6 em

pulsante di intestazione

Scorri verso il basso fino a Impostazioni Pulsante uno e attivare Usa stili personalizzati per Button One . Cambia la dimensione in 14px, il colore del testo in # 2e5b61 e il colore di sfondo in # e1ecea.

• Usa stili personalizzati per il pulsante uno: SÌ
• Pulsante uno
  • Dimensione del testo: 14px
  • Colore del testo: #2e5b61
  • Sfondo: #e1ecea

Cambia la larghezza del confine a 0px e il raggio del confine a 50px. Usa Inter per il carattere e cambia il peso in semi-grassetto.

• Pulsante uno:
  • Larghezza bordo: 0px
  • Raggio di confine: 50px
  • Fonte: Inter
  • Peso: grassetto

per Imbottitura bottoni , usa 20px per Alto e Basso e 40px per Sinistra e Destra.

• Button One Padding: 20 px in alto e in basso, 40 px a sinistra e a destra

Leggi anche: Divi: come creare una sezione Fluid Hero

Esempi di pulsanti di scorrimento

Ora che abbiamo la nostra intestazione a larghezza intera, vediamo come personalizzare i pulsanti di scorrimento verso il basso. Vedremo quattro esempi con varie combinazioni di icone, colori e dimensioni.

I pulsanti di scorrimento verso il basso includono tre parametri. Ogni impostazione può essere regolata indipendentemente per ogni dimensione dello schermo. I parametri includono:

• Selezione di icone – scegli tra 11 icone. Includono vari design di frecce con o senza sfondo, inclusi non cerchiati, cerchiati e pieni.
• Colore – il selettore di colori Divi standard.
• Misura – la regolazione della dimensione Divi standard.

Include anche un campo CSS nella scheda Avanzate. 

Useremo tutti questi parametri.

Guarda anche: Divi: 5 sovrapposizioni di maschere e motivi applicabili a un'immagine di sfondo

Esempio 1

Per il nostro primo esempio, utilizzeremo un'icona non cerchiata senza sfondo. Seleziona la prima icona, cambia il colore in #e1ecea e cambia la dimensione in 66px per desktop, 60px per tablet e 50px per telefoni.

• Icona: 1a icona
• Colore: #e1ecea
• Dimensioni: 66px (desktop e tablet), 50px (telefono)

Questo crea una freccia verso il basso verde chiaro che funziona bene con il resto del design e si distingue abbastanza da informare l'utente.

Esempio 2

Per il nostro secondo esempio, useremo un'icona cerchiata. Seleziona la settima icona e cambia il colore in # e8c553. Ingrandiremo l'icona per questo. Modifica la dimensione in 78px per desktop, 70px per tablet e 60px per telefoni.

• Icona: 7a icona
• Colore: #e8c553
• Dimensioni: 78px (desktop), 70px (tablet), 60px (telefono)

Questo colore è una variazione del giallo nel layout pack, ma è più chiaro e funziona meglio sullo sfondo verde. L'icona ha spigoli vivi, ma il cerchio corrisponde al design arrotondato del layout.

Esempio 3

Per il nostro terzo esempio, useremo un'icona che ha un cerchio attorno ad essa e uno sfondo. Questo colora lo sfondo e crea l'icona con un'apertura che rivela l'immagine di sfondo del sito web. 

Per ottenere i migliori risultati, dovremo prestare molta attenzione alla dimensione dell'icona e al colore di sfondo del pulsante.

Seleziona l'ottava icona e cambia il suo colore in # 0e4951. Imposta la dimensione su 60px per desktop, 56pc per tablet e 50px per telefoni.

• Icona: 8a icona
• Colore: #0e4951
• Dimensioni: 60px (desktop), 56px (tablet), 50px (telefono)

Il verde è una tonalità di verde più scura sullo sfondo. La tonalità più scura risalta sul verde e si abbina ancora al resto del layout.

Esempio 4

E se volessi combinare i colori in modo da avere un colore di sfondo dietro l'icona del ritaglio? Possiamo farlo con CSS. 

Per questo esempio, useremo i CSS per creare una forma di sfondo dietro l'icona che verrà mostrata attraverso l'icona del ritaglio. L'icona stessa utilizzerà le impostazioni standard.

Seleziona l'undicesima icona e cambia il colore in #e1ecea. Imposteremo l'icona più piccola per questo e creeremo una grande forma di sfondo. Modifica la dimensione in 50px per desktop, 40px per tablet e 30px per telefoni.

• Icona: 11^esimo
• Colore: #e1ecea
• Dimensioni: 50px (desktop), 40px (tablet), 30px (telefono)

Quindi vai alla scheda Tecnologia e scorri fino al campo Pulsante Scorri verso il basso e inserisci questo CSS:

border-radius: 45%;
padding:12px 40px 14px 40px;
background-color:#2e5b61

Questo formato CSS aggiunge il riempimento in alto, a destra, in basso e a sinistra. Ho usato questo riempimento per creare uno sfondo ovale che si sposa bene con il design dell'intestazione utilizzando le guide di progettazione del layout.

Risultati dei vari esempi

Esempio 1

Esempio 2

Scarica DIVI ora!!!

Esempio 3

Esempio 4

Scarica DIVI ora!!!

Conclusione

Questa è la nostra panoramica dei quattro pulsanti di scorrimento verso il basso che puoi includere nel modulo Divi intestazione a larghezza intera. Il pulsante di scorrimento include diverse icone tra cui scegliere e puoi impostarne il colore e le dimensioni. 

Utilizzando il campo CSS, puoi personalizzare ulteriormente il pulsante. Le combinazioni di opzioni di stile dei pulsanti e CSS ti offrono molte possibilità di design con i pulsanti di scorrimento verso il basso.

Spero che questo sarà utile per il tuo prossimo blog. Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.

Puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet.

Non esitate a consultare anche la nostra guida sul Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.

Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.

...