3 modi utili per utilizzare le opzioni di overflow in Divi

Le opzioni di overflow integrate di Divi rendono semplicissimo aggiungere proprietà css di overflow (es. visibile, nascosto, scorrimento) a qualsiasi elemento della pagina. Questo è utile per creare design unici e contenuti scorrevoli con facilità. In questo post, esaminerò cosa fanno effettivamente queste opzioni di overflow. E illustrerò tre modi utili per utilizzare l'overflow sul tuo sito Divi.

Iniziamo.

Comprensione delle opzioni di overflow di Divi

Le opzioni di overflow di Divi ti consentono di impostare la proprietà css overflow di un elemento su uno dei seguenti valori:

1. Predefinito: il valore predefinito è visibile (vedi sotto).
2. Visibile: il contenuto in eccesso rimarrà visibile e non verrà ritagliato quando si estende all'esterno della scatola. Poiché questa è l'impostazione predefinita in Divi, raramente sarà necessario selezionarla.
3. Scorri: il contenuto in eccesso verrà nascosto, ma gli utenti potranno scorrere il contenuto nascosto verticalmente o orizzontalmente.
4. Nascosto: il contenuto in eccesso al di fuori della casella verrà nascosto (senza la possibilità di scorrere)
5. Auto: questa opzione attiva la funzionalità di scorrimento ogni volta che è necessario (ad es. il contenuto si estende oltre la casella). Ciò sarebbe utile per i progetti con un'altezza o una larghezza impostate che devono avere funzionalità di scorrimento su browser più piccoli.

Divi ha un'opzione di overflow per l'overflow sia orizzontale che verticale che consente di impostare valori di proprietà diversi per ciascuno. Ciò è utile quando si desidera aggiungere la funzionalità di scorrimento verticale a un elemento ma non si desidera che una barra di scorrimento appaia anche in orizzontale.

Ecco alcune rapide illustrazioni tratte dai progetti in questo tutorial per aiutarti a capire come funzionano le opzioni di overflow.

Visibile in eccesso (predefinito)

In questo esempio, il contenuto che è stato posizionato all'esterno del contenitore di righe rimane visibile, che è l'impostazione predefinita per tutti gli elementi in Divi.

Trabocco nascosto

Dopo aver aggiunto la proprietà nascosta di overflow alla riga, il contenuto all'esterno della casella viene ritagliato e completamente nascosto alla vista.

Scorrimento in eccesso

L'uso dello scorrimento dell'overflow consente di nascondere il contenuto all'esterno del contenitore della casella (proprio come l'overflow nascosto). La differenza principale è che viene visualizzata una barra di scorrimento che consente all'utente di scorrere il contenuto che esiste oltre i limiti del contenitore.

Ad esempio, ecco un modulo di testo con un'altezza di 400 px. Il contenuto del modulo di testo si estende oltre il modulo di testo ma rimane visibile per impostazione predefinita.

Ma una volta aggiunta la proprietà di scorrimento dell'overflow verticale al modulo di testo, viene visualizzata la barra di scorrimento che consente all'utente di scorrere il contenuto nascosto.

Ora che hai compreso un po' meglio le opzioni di overflow, tuffiamoci nella creazione di alcuni esempi funzionanti di modi utili per usarle nella vita reale.

Iscriviti al nostro canale Youtube

3 modi utili per utilizzare le opzioni di overflow di Divi in ​​Divi

#1 Utilizzo dell'overflow nascosto per ritagliare il contenuto traboccante per progetti unici

Per capire come utilizzare la proprietà nascosta di overflow, creeremo un rapido esempio di design con testo e un'immagine traboccanti. Quindi vedremo come cambia il design quando imposti la nostra riga per l'overflow nascosto.

Innanzitutto, crea una sezione regolare con una riga di una colonna. Prima di iniziare ad aggiungere moduli, diamo alla sezione il seguente riempimento:

Imbottitura personalizzata: 12vw in alto, 12vw in basso

Quindi aggiorna le impostazioni della riga come segue:

Larghezza: 80vw
Larghezza massima: 80vw
Imbottitura: 0px in alto, 0px in basso
Box Shadow: vedi screenshot
Intensità della sfocatura dell'ombra della scatola: 80 px

Quindi aggiungi un modulo di testo alla riga e aggiorna le seguenti impostazioni del modulo di testo:

Per prima cosa aggiungi un'intestazione h2 nella casella del contenuto come segue:

<h2>Overflow</h2>

Quindi aggiorna le impostazioni di progettazione come segue:

Intestazione 2 Carattere: Lato
Intestazione 2 Peso del carattere: grassetto
Stile carattere titolo 2: TT
Intestazione 2 Allineamento del testo: centro
Colore testo titolo 2: #dddddd
Intestazione 2 Dimensione del testo: 15vw
Intestazione 2 Spaziatura lettere: 0.1em
Intestazione 2 Ombra del testo: vedi screenshot
Intestazione 2 Colore ombra del testo: rgba(0,0,0,0.05)

Ora, per fare in modo che il testo trabocchi nell'area del contenuto della riga, dobbiamo utilizzare i margini personalizzati. Aggiungi il seguente margine personalizzato al modulo di testo per farlo traboccare sopra la riga (verticalmente) e su ciascun lato della riga (orizzontalmente).

Margine: -6vw superiore, -10vw sinistro, -10vw destro

Quindi, aggiungi un altro modulo di testo sotto quello appena creato e aggiorna quanto segue:

Contenuto:

<h3>design</h3>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

(A proposito, frammenti di codice come questo sono un ottimo modo per sfruttare l'opzione di scorrimento dell'overflow.)

Carattere del testo: Lato
Testo Allineamento del testo: a destra
Testo Dimensioni testo: 24 px (desktop), 16 px (telefono)
Altezza riga di testo: 1,3 em
Larghezza massima: 50%
Allineamento del modulo: a destra
Imbottitura: 4vw destra

Ora aggiungiamo un'immagine che fuoriesce dalla riga. Crea un nuovo modulo immagine sotto i due moduli di testo e poi carica un'immagine a tua scelta.

Quindi aggiorna le impostazioni dell'immagine come segue:

Larghezza massima: 35vw
Margine: -12vw in alto, -8vw in basso, -5vw a sinistra
Box Shadow: vedi screenshot
Posizione orizzontale dell'ombra del riquadro: -40 px
Posizione verticale dell'ombra del riquadro: -50 px
Colore ombra: rgba(0,0,0,0.17)

Progetta con riga impostata su Visibile in eccesso (impostazione predefinita)

Ora diamo un'occhiata al design mantenendo il nostro overflow di riga impostato su visibile (impostazione predefinita).

Come puoi vedere, queste opzioni visibili di overflow predefinite sono ottime per creare alcuni design belli e moderni.

Progetta con riga impostata su Overflow nascosto

Ora vediamo cosa succede quando usiamo la proprietà Overflow Hidden per la riga. Apri le impostazioni della riga e aggiorna quanto segue:

Overflow orizzontale: nascosto
Overflow verticale: nascosto

Ecco il risultato.

Come puoi vedere, il contenuto traboccante (l'intestazione superiore e l'immagine) è ora ritagliato e nascosto per creare un design unico. E con questa configurazione, puoi facilmente sfruttare le opzioni di trasformazione per ridimensionare e spostare gli elementi per ottenere il design giusto.

#2 Utilizzo dello scorrimento in eccesso per consentire agli utenti di scorrere i contenuti verticalmente

Questo prossimo esempio introduce lo scorrimento di overflow verticale. Questa opzione di overflow è utile per aggiungere contenuto scorrevole a elenchi di collegamenti o risorse. Puoi trasformare qualsiasi modulo o riga in un contenitore per il contenuto scorrevole. Ecco come farlo con un modulo di testo.

Crea una sezione regolare con una riga a una colonna. Quindi aggiungi un modulo di testo con il seguente contenuto:

<h3>overflow scroll</h3>
<ol>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">consectetur adipiscing elit</a></li>
<li><a href="#">sed do eiusmod tempor</a></li>
<li><a href="#">incididunt ut labore et dolore</a></li>
<li><a href="#">Ut enim ad minim veniam</a></li>
<li><a href="#">quis nostrud exercitation</a></li>
<li><a href="#">ullamco laboris nisi ut</a></li>
<li><a href="#">aliquip ex ea commodo</a></li>
<li><a href="#">Duis aute irure dolor in</a></li>
<li><a href="#">reprehenderit in voluptate</a></li>
<li><a href="#">velit esse cillum dolore eu</a></li>
<li><a href="#">fugiat nulla pariatur</a></li>
<li><a href="#">Excepteur sint occaecat</a></li>
<li><a href="#">cupidatat non proident</a></li>
<li><a href="#">sunt in culpa qui officia</a></li>
<li><a href="#">deserunt mollit anim id</a></li>
<li><a href="#">est laborum</a></li>
</ol>

Quindi aggiorna le impostazioni di progettazione del modulo di testo come segue:

Carattere del testo: Lato

Colore del testo del collegamento: #333333
Dimensione del testo del collegamento: 18px

Colore del testo dell'elenco ordinato:
Dimensioni del testo dell'elenco ordinato: 20 px
Altezza della riga dell'elenco ordinato: 1,8 em
Tipo di stile elenco ordinato: zero decimale iniziale

Intestazione 3 Peso del carattere: Ultra grassetto
Intestazione 3 Dimensioni del testo: 50 px
Larghezza massima: 500 px
Imbottitura: 3% in alto, 3% in basso, 8% a sinistra, 8% a destra

Ecco come appare il modulo di testo prima di inserire uno scorrimento di altezza e overflow.

Ora aggiorna il modulo di testo con un'altezza massima di 400 px. Poiché il valore di overflow predefinito per il modulo di testo è visibile, noterai il testo in overflow sotto il modulo.

Tutto ciò che dobbiamo fare ora è impostare l'overflow verticale per scorrere come segue:

Overflow verticale: scroll

Ecco il disegno definitivo.

Per ulteriori esempi su come utilizzare lo scorrimento verticale di overflow sul tuo sito Divi, dai un'occhiata a questi post:

• Come creare un mockup di galleria di scorrimento con le nuove opzioni di overflow di Divi
• Come progettare un'area widget scorrevole per i post recenti in Divi

#3 Utilizzo dello scorrimento in eccesso per consentire agli utenti di scorrere i contenuti orizzontalmente

L'uso dello scorrimento in eccesso per lo scorrimento orizzontale è un altro modo per mantenere i tuoi contenuti accessibili da un'unica posizione concisa. Inoltre, è anche un ottimo modo per incorporare la funzionalità di scorrimento laterale sui dispositivi mobili senza un plug-in.

Per mostrarti come farlo, costruiremo insieme un rapido esempio.

Innanzitutto, crea una sezione regolare con una riga di una colonna.

Quindi aggiungi un modulo blurb alla riga.

Puoi sostituire l'immagine predefinita con una nuova immagine o icona. Quindi aggiorna le impostazioni di progettazione con alcune modifiche:

Allineamento del testo: centro
Carattere del titolo: Lato
Peso del carattere del titolo: pesante
Imbottitura: 3% sinistra, 3% destra

Duplica il modulo blurb 5 volte in modo da avere un totale di 6 blurb nella colonna della riga.

Quindi aggiorna le impostazioni della riga con il seguente CSS personalizzato nell'elemento principale della colonna.

display: grid;
grid-template-columns: repeat(6, 50%);

Questo darà la tua colonna di blurb in un layout a griglia orizzontale con 6 colonne ciascuna con una larghezza che è il 50% del contenitore (o in questo caso la riga). Ciò significa che due blurb/colonne occuperanno lo spazio all'interno della riga. Gli altri 4 moduli si estenderanno all'esterno della fila sul lato destro. È qui che torna utile la proprietà scroll di overflow. Aggiorna la seguente opzione di overflow:

Overflow orizzontale: scorrimento

Ora puoi regolare la larghezza della riga secondo necessità e le due strisce si allineeranno sempre bene. Ecco il disegno definitivo.

Ho aggiunto un'ombra di riquadro alla riga in modo che tu possa vedere un po' meglio il riquadro del contenuto. Nota come verranno visualizzati inizialmente due blurb finché l'utente non scorre verso destra.

Per maggiori informazioni, consulta il post completo sulla creazione di schede a scorrimento orizzontale.

Pensieri finali

Gli elementi sovrapposti e gli elementi di posizionamento al di fuori del tipico layout della griglia stanno diventando più comuni in questi giorni. Per lo più, questo viene fatto esclusivamente per scopi di progettazione. Capire come utilizzare le opzioni di overflow di Divi ti aiuterà a capire come nascondere o mostrare i contenuti al di fuori di un contenitore per creare questi design unici. Inoltre, comprendere lo scorrimento dell'overflow sarà utile anche per l'aggiunta di contenuti scorrevoli al tuo sito web.

Spero che questo articolo ti abbia aiutato a far luce sulla proprietà overflow e su come puoi usarla per il tuo prossimo progetto Divi.

Non vedo l'ora di sentirti nei commenti.

Saluti!