Una guida per comprendere e utilizzare la posizione fissa in Divi

La proprietà posizione fissa è un tipo di posizione cruciale per imparare a usarla correttamente. Gli elementi fissi sono importanti per migliorare l'esperienza utente sul tuo sito web. Le intestazioni fisse rimangono visibili durante lo scorrimento di una pagina Web, facilitando la navigazione degli utenti nel sito. Le barre laterali fisse mantengono importanti CTA e Email Optin visibili, aumentando le conversioni. E lo stesso vale per le barre di notifica fisse, i popup e molti altri. Una volta compreso come funziona la posizione fissa e come utilizzarla correttamente in Divi, avremo un potente strumento di progettazione per portare i nostri siti Divi al livello successivo.

In questo post tratteremo:

• Una panoramica dei quattro tipi di posizionamento di Divi
• Come la posizione fissa "posiziona" un elemento in Divi
• Utilizzo delle opzioni di posizione fissa in Divi
• Suggerimenti da tenere a mente quando si utilizza la posizione fissa
• 6 modi utili per utilizzare la posizione fissa in Divi

Controlla!

Panoramica dei quattro tipi di posizionamento di Divi

La posizione fissa è uno dei quattro tipi di posizione disponibili nelle Opzioni di posizione di Divi. Ecco una rapida panoramica di ciascuno di seguito.

Statico (predefinito)

Gli elementi statici tecnicamente non sono "posizionati" poiché rimangono con il normale flusso o ordine degli elementi sulla pagina e non rispondono alle proprietà superiore, destra, inferiore e sinistra come altri elementi posizionati (motivo per cui no gli offset sono disponibili in Divi per gli elementi nella posizione statica/predefinita). In Divi, quando scegliamo la posizione predefinita per un modulo, scegliamo la posizione statica. Vale anche la pena ricordare che alcuni elementi in Divi (come righe e sezioni) avranno una posizione relativa per impostazione predefinita (non la posizione statica).

Parente

Gli elementi posizionati in modo relativo sono un po' come gli elementi statici in quanto seguono il normale flusso della pagina. La differenza principale è che gli elementi posizionati relativamente possono essere posizionati utilizzando le proprietà superiore, inferiore, sinistra e destra. Inoltre, a differenza degli elementi statici, possono essere posizionati anche utilizzando la proprietà Z Index.

Per ulteriori informazioni, consulta la nostra guida per comprendere e utilizzare la posizione relativa in Divi.

Assoluto

Un elemento posizionato in modo assoluto esce dal normale flusso del documento e quindi non viene creato spazio effettivo sulla pagina per l'elemento. Possiamo pensarlo come un elemento che fluttua sopra gli altri elementi della pagina che occupano spazio effettivo. Verrà posizionato rispetto al contenitore padre posizionato più vicino.

Per ulteriori informazioni, consulta la nostra guida per comprendere e utilizzare la posizione assoluta in Divi.

Fisso

Come la posizione assoluta, gli elementi con la posizione fissa usciranno dal normale flusso della pagina e non avranno spazio effettivo creato all'interno della pagina. La differenza chiave tra assoluto e fisso è che la posizione fissa è relativa alla finestra del browser o al viewport. In altre parole, indipendentemente da dove si trovi l'elemento all'interno del normale flusso della pagina, una volta assegnata una posizione fissa, la sua posizione sarà ora direttamente correlata alla finestra del browser. Possiamo usare le proprietà top, bottom, left e right per posizionare l'elemento all'interno della finestra. Poiché gli elementi fissi spesso si librano dietro o davanti ad altri elementi della pagina, Z Index aiuterà a ordinare gli elementi fissi sopra gli altri.

NOTA: esiste un altro tipo di posizionamento nei CSS chiamato sticky. Un elemento posizionato permanentemente si comporta come un elemento posizionato relativamente finché non si scorre al suo contenitore (ad un certo punto determinato dal valore superiore). Quindi l'elemento diventa fisso (o bloccato) finché l'utente non scorre fino alla fine del contenitore. Tuttavia, la posizione appiccicosa può essere un po' imprevedibile poiché altri fattori possono inibire la funzionalità. Il posizionamento appiccicoso sarà integrato in Divi nel prossimo futuro.

Come la posizione fissa "posiziona" un elemento in Divi

Come menzionato nella panoramica, il tipo di posizione fissa è simile alla posizione assoluta perché l'elemento esce dal normale flusso del documento (l'HTML nella pagina). L'interruzione del flusso del documento significa che l'elemento non lascerà lo spazio effettivo in cui si trovava originariamente nella pagina. Ecco un'illustrazione di un modulo con una posizione relativa che viene modificata in una posizione fissa. Nota come l'area originariamente creata/occupata all'interno della colonna è ora sparita e il modulo è ora fissato in alto a sinistra della finestra del browser.

La grande differenza tra fisso e assoluto è che, a differenza della posizione assoluta che è relativa al suo contenitore padre, la posizione fissa è relativa alla finestra del browser o al viewport. Questo è il motivo per cui gli elementi fissi dicono in vista quando l'utente scorre verso il basso una pagina e gli elementi posizionati in assoluto potrebbero no.

Ecco un'illustrazione di come funzionano le tre posizioni (relativa, assoluta e fissa) durante lo scorrimento della pagina. Notare che il modulo fisso rimane in posizione (posizionato rispetto al browser) mentre l'utente scorre.

Utilizzo delle opzioni di posizione fissa in Divi

In Divi, puoi assegnare a qualsiasi elemento una posizione fissa selezionando l'opzione posizione fissa nel gruppo di opzioni Posizione nella scheda Avanzate. Troverai anche le opzioni di posizione fissa aggiuntive (posizione, offset, indice z) una volta selezionata la posizione relativa.

Regolazione della posizione di base della posizione fissa

Una volta selezionata la posizione fissa, è possibile scegliere una posizione di base utilizzando l'interfaccia visiva della posizione. A seconda della posizione di base selezionata, saranno disponibili nuovi controlli per l'Offset X e Y.

Utilizzo degli offset con la posizione fissa

I controlli Spostamento verticale e orizzontale consentono di regolare ulteriormente la posizione di base dell'elemento fisso lungo il suo asse di posizione.

I valori Offset Origin e Offset lavoreranno insieme per posizionare il nostro elemento ovunque desideriamo all'interno della finestra del browser. In questo esempio, abbiamo un modulo che ha una posizione fissa, un'origine offset in alto a sinistra, un offset verticale di 50px e un offset orizzontale di 50px. Nota come i valori di offset allontaneranno l'elemento dall'origine di offset orizzontalmente e/o verticalmente (lontano dall'angolo in alto a sinistra del browser).

Quando si utilizzano valori di offset orizzontale e verticale in Divi (come le proprietà top, bottom, left e right in CSS) per un elemento fisso, è importante ricordare che tali valori posizioneranno l'elemento rispetto alla finestra del browser. La proprietà Z Index è utile anche con un elemento fisso. Poiché la maggior parte delle volte vuoi che quegli elementi fissi rimangano davanti agli altri elementi della pagina, dovrai assegnargli un valore di indice Z alto (come 9999).

Usa le ancore trascinabili per riposizionare gli elementi fissi sulla pagina

Quando cambi la posizione di un elemento in Fisso, quando passi con il mouse sopra l'elemento apparirà un'ancora trascinabile. Ciò consente di trascinare l'elemento per modificarne la posizione. Quando si riposiziona l'elemento, il relativo offset X e Y viene regolato all'interno delle impostazioni del modulo.

Alcuni suggerimenti per l'utilizzo del posizionamento fisso

Regola elementi fissi per dispositivi mobili

Non dimenticare che puoi impostare diverse posizioni e offset su diversi display del dispositivo per progetti reattivi. Ad esempio, potresti volere un'intestazione fissa sul desktop, ma non sui dispositivi mobili. E le barre laterali fisse hanno senso per il desktop, ma non sono realmente possibili sul display di un telefono cellulare. Per effettuare il passaggio, puoi regolare l'opzione di posizione in Divi su Relativo su tablet e telefono. Questo lo riporterà alla sua posizione originale all'interno del flusso del documento.

Crea spazio per elementi fissi

Poiché la posizione fissa posiziona gli elementi al di fuori del flusso del documento, si trovano sopra il contenuto della pagina. Quindi, se non vuoi che l'elemento fisso nasconda il contenuto, dovrai creare spazio per l'elemento fisso. Questo può essere fatto in diversi modi, ma di solito si ottiene aggiungendo padding o margine al layout della pagina.

Un buon esempio è una barra laterale fissa. Se desideri aggiungere una barra laterale fissa al modello di pagina in Divi, devi prima assicurarti che la larghezza dell'area del contenuto principale sia ridotta per creare lo spazio necessario per la barra laterale fissa. Quindi, se stai usando una sezione per creare la barra laterale, potresti dare alla sezione una posizione fissa, un'altezza del 100% e una larghezza di 300 px.

Quindi dovresti dare all'altra sezione che contiene il modulo del contenuto del post (l'area del contenuto principale della pagina) un margine sinistro di 300 px per adattarsi alla larghezza della barra laterale sul lato sinistro della pagina.

Usa un indice Z più alto per gli elementi fissi

A meno che all'elemento fisso non sia stato assegnato uno spazio adeguato sulla tua pagina, si sovrapporrà all'altro contenuto della pagina. Nella maggior parte dei casi, vorrai che l'elemento fisso rimanga visibile (in alto) mentre si scontra con altri elementi della pagina durante lo scorrimento. Per fare ciò, puoi aggiungere un indice Z più alto al tuo elemento fisso per assicurarti che rimanga al di sopra di tutti gli altri contenuti nello spazio Z. Se non sai quale valore dare, puoi aggiungere un numero grande come 9999.

6 modi per utilizzare la posizione fissa

#1 Intestazioni fisse

Uno dei migliori utilizzi delle nuove opzioni di posizione fissa è la creazione di intestazioni fisse. Utilizzando Divi Theme Builder, puoi creare un'intestazione completamente personalizzata e correggere l'intera sezione.

Come pubblicare

Ecco un post su come creare un'intestazione fissa in Divi:

• Come creare un'intestazione fissa con le opzioni di posizione di Divi

#2 Barre fisse a piè di pagina

Proprio come le intestazioni fisse, alcuni siti Web beneficiano anche di piè di pagina o barre di piè di pagina fissi. Ciò consente agli utenti di mantenere le informazioni importanti in primo piano in una posizione più sottile. Le barre a piè di pagina fisse sono ottime per i telefoni cellulari perché sono molto vicine a quei pollici che non vedono l'ora di fare clic su un pulsante.

Messaggi di istruzioni

Ecco alcuni post su come costruire una barra del piè di pagina fissa in Divi:

• Come creare una barra del piè di pagina fissa per il tuo tema Divi
• Come creare barre di piè di pagina mobili fisse con Divi
• Come creare una barra dei contatti mobile (fissa) in Divi

#3 Barre laterali fisse/menu verticali

Le barre laterali fisse mantengono elementi come menu, opt-in e-mail e CTA prontamente disponibili per i visitatori mentre navigano nel tuo sito. E se lo desideri, puoi aggiungere lo scorrimento di overflow alla barra laterale fissa per avere una bella barra laterale fissa scorrevole con tonnellate di contenuti.

Messaggi di istruzioni

Ecco un post su come costruire una barra laterale fissa in Divi:

• Come costruire una barra laterale fissa reattiva con collegamenti di ancoraggio a scorrimento uniforme con Divi
• Come creare un menu di navigazione verticale (fisso) per il tuo sito Web Divi

#4 Pulsanti back-to-top fissi

I pulsanti Back-to-Top di solito sono fissati in basso a destra di un sito Web, sempre disponibili per gli utenti su cui fare clic per rimandarli all'inizio della pagina.

Ecco un post su come creare pulsanti back-to-top fissi in Divi:

• Come creare disegni adesivi personalizzati (fissi) Torna all'inizio con Divi

#5 Menu Fissi

La maggior parte dei menu che scorrono in o popup ha una posizione fissa. Questi sono ottimi anche per i dispositivi mobili.

Ecco un post su come creare un menu fisso in Divi:

• Come creare un menu a scorrimento reattivo con Divi's Theme Builder

#6 Finestre di notifica fisse, inviti all'azione, opt-in e-mail, ecc ...

Ecco un post su come costruire una casella di notifica fissa in Divi:

• Come aggiungere un invito all'azione a scorrimento richiudibile a qualsiasi angolo del modello di pagina in Divi

Pensieri finali

Non andrai molto lontano nello sviluppo web prima di incontrare la necessità di utilizzare la posizione fissa. È utilizzato in molti elementi chiave che compongono un sito web. In Divi la posizione fissa è a portata di click, ma è importante capire come funziona per usarla bene. Si spera che questo articolo ti abbia aiutato a capire come utilizzare al meglio la posizione fissa in Divi in ​​modo da poter portare il tuo prossimo progetto a nuovi livelli.

Qual è stata la tua esperienza con il tipo di posizione fissa?

Non vedo l'ora di sentirti nei commenti.

Saluti!