Come creare un blocco appiccicoso (fisso) in Gutenberg senza codice

Stai cercando modi per creare un blocco adesivo in Gutenberg? 🤔

Sia che tu voglia creare un disclaimer di affiliazione, offrire sconti o attirare l'attenzione dei visitatori su caratteristiche importanti del tuo prodotto, un blocco adesivo può aiutarti a raggiungere questi obiettivi.

I blocchi permanenti, noti anche come blocchi fissi, rimangono visibili sullo schermo anche mentre l'utente scorre la pagina verso il basso, garantendo che il contenuto che desideri evidenziare sia sempre visibile.

👉 Ecco un esempio di ciò di cui stiamo parlando: puoi vedere come le icone social sono "bloccate" nella loro posizione anche mentre l'utente scorre:

L'aggiunta di un blocco adesivo in Gutenberg offre un'esperienza utente fluida e coinvolgente, consentendoti di trasmettere in modo efficace il tuo messaggio e catturare l'interesse del tuo pubblico.

Gutenberg non offre un blocco adesivo pronto all'uso. Tuttavia, esistono strumenti di terze parti che puoi utilizzare per aggiungere blocchi permanenti ai tuoi post e alle tue pagine.

In questo tutorial, ti mostreremo come utilizzare un popolare plugin Gutenberg chiamato Otter Blocks per aggiungere un blocco adesivo al tuo sito Web WordPress.

Immergiamoci dentro. 🤿

Come aggiungere un blocco adesivo nell'editor Gutenberg

Per aggiungere un blocco adesivo nell'editor Gutenberg devi procedere come segue:

• Passaggio 1: installa e attiva il plug-in Otter Blocks
• Passaggio 2: attiva lo strumento Trasforma in permanente per il tuo blocco
• Passaggio 3: modificare la posizione del blocco adesivo
• Passaggio 4: configurare l'offset
• Passaggio 5: attiva il blocco permanente sui dispositivi mobili
• Passaggio facoltativo: provare la modalità float
• Passaggio facoltativo: specificare il comportamento del blocco

Passaggio 1: installa e attiva il plugin Otter Blocks 🔌

Otter Blocks è un plugin per WordPress che estende le funzionalità dell'editor Gutenberg.

Offre una raccolta di elementi costitutivi della pagina, funzionalità dell'editor e modelli per contribuire a migliorare il design e il funzionamento del tuo sito web.

Alcuni dei blocchi più popolari offerti da Otter sono tabelle dei prezzi, testimonianze, icone social, mappe, barre di avanzamento, animazioni, conto alla rovescia e recensioni di prodotti, tra le altre cose. Ecco un elenco completo dei blocchi Otter.

Otter Blocks ha una versione gratuita e una premium (chiamata Otter Pro).

Puoi utilizzare la versione gratuita per creare un blocco adesivo di base in Gutenberg, quindi puoi seguire questo tutorial gratuitamente.

Tuttavia, per eseguire alcuni dei passaggi trattati, come aggiungere distanza tra il blocco e lo schermo, rimuovere il blocco adesivo sul frontend, visualizzare i blocchi adesivi sul cellulare, ecc., è necessaria la versione premium del plugin.

Otter Pro è disponibile per una tariffa annuale di $ 49 per un singolo sito web. Puoi acquistarlo da qui. E se vuoi provare il plugin prima di usarlo, dai un'occhiata a questa demo.

➡️ Per continuare, installa la versione gratuita o premium di Otter. Nel tutorial qui sotto, proveremo a notare quando una determinata funzionalità richiede l'opzione premium.

Passaggio 2: attiva lo strumento Trasforma in adesivo per il tuo blocco 🚧

Apri la pagina o il post in cui desideri aggiungere il blocco adesivo nell'editor Gutenberg.

Seleziona il blocco che vuoi rendere appiccicoso e vai al pannello situato sul lato destro dell'editor.

Nel pannello vai a Blocca e vai all'opzione Strumenti di blocco . Espandi gli Strumenti blocco selezionando il segno più .

Quindi scegli Trasforma in Sticky dal menu a discesa.

Una nuova opzione chiamata Sticky apparirà proprio sotto Block Tools. Espandilo e vai su Sticky To .

In Sticky To, puoi impostare l'elemento a cui vuoi che il blocco si attacchi. Ci sono quattro opzioni:

1. Blocco di primo livello
2. Sezione
3. Blocco genitore
4. Schermo

Per comprendere queste opzioni e quale si adatta al tuo post appiccicoso, apri la panoramica del documento nell'editor Gutenberg e guarda i blocchi che circondano il blocco del tuo post appiccicoso.

Il blocco più in alto è il blocco di livello superiore. Selezionando il blocco di livello superiore , fisserai il tuo blocco adesivo con il blocco più in alto . Nel nostro caso, si tratta del blocco Gruppo nell'immagine seguente.

Successivamente, selezionando Sezione si garantirà che il blocco adesivo sia fissato al blocco Sezione, mentre selezionando Blocco genitore il blocco adesivo sarà fissato al blocco proprio sopra il blocco adesivo .

Nel nostro caso, il blocco Parent è il blocco Colonna Sezione. Vedi l'immagine qui sotto.

Infine, selezionando l'opzione Schermo dirai all'editor di ignorare tutti i blocchi e di attaccare semplicemente il post nella parte superiore dello schermo dell'utente .

Per impostazione predefinita, la posizione del blocco adesivo è impostata in alto. Per sapere come modificarne la posizione, procedere al passaggio successivo.

Passaggio 3: modifica la posizione del blocco adesivo 🚩

Per modificare la posizione del blocco adesivo, torna al pannello di destra e cerca Posizione proprio sotto l'opzione Attacca a.

Puoi posizionare il blocco adesivo nella parte superiore o inferiore dello schermo. La posizione inferiore è disponibile solo per gli utenti Otter Pro .

Ecco come appare il blocco su uno dei nostri siti demo:

Passaggio 4: configura l'offset ⚙️

Dopo aver impostato la posizione del blocco adesivo, prova a visualizzarne l'anteprima. Se il blocco appare troppo lontano o vicino allo schermo, utilizza l'opzione Offset per aumentare o diminuire la distanza tra il blocco adesivo e lo schermo.

Passaggio 5: attiva il blocco permanente sul cellulare 📱

Per impostazione predefinita, il blocco adesivo viene visualizzato solo sui desktop. Se desideri abilitarlo sui dispositivi mobili, attiva semplicemente l'opzione Abilita su dispositivi mobili .

A proposito, solo gli utenti Otter Pro possono accedere all'opzione mobile .

Passaggio facoltativo: prova la modalità float 🏄

Il blocco adesivo può essere impostato per fluttuare sullo schermo quando gli utenti scorrono la pagina. È un ottimo modo per attirare l'attenzione dell'utente e indirizzarlo al blocco adesivo.

Solo gli utenti Otter Pro possono utilizzare la modalità mobile e può essere applicata solo al blocco di livello superiore che nel nostro caso è il blocco di gruppo.

Non appena attivi la modalità mobile, ti verrà chiesto di definire la larghezza , il lato e l'offset laterale del blocco.

La larghezza ovviamente si riferisce alla larghezza del blocco e il lato aiuta a definire la posizione del blocco (sinistra o destra) sullo schermo. L'offset si riferisce alla distanza tra il blocco adesivo e il lato scelto .

Ti consigliamo di visualizzare l'anteprima della pagina dopo aver configurato la modalità mobile e apportare le modifiche necessarie.

Passaggio facoltativo: specifica il comportamento del blocco 👨🏽‍💼

Utilizzando il plug-in Otter Block, puoi creare più blocchi adesivi sulla stessa pagina. A volte questi blocchi possono entrare in collisione tra loro. Puoi dettare come un blocco appiccicoso risponderà durante le collisioni utilizzando l'opzione Comportamento .

È possibile impostare il comportamento in modo da comprimere , sfumare o impilare .

Scegliendo Collasso, i blocchi appiccicosi faranno collassare l'uno nell'altro con lo stesso movimento quando entrano in collisione, in questo modo:

E scegliendo la dissolvenza imposterai il blocco in modo che svanisca o scompaia l'uno nell'altro blocco .

Infine, scegliendo Stack si impilerà il blocco sopra gli altri blocchi appiccicosi contro i quali si scontra, come mostrato nella gif qui sotto.

Sia la dissolvenza che lo stack sono disponibili solo per gli utenti Otter Pro .

Questo è tutto. Ora hai aggiunto un blocco adesivo in Gutenberg. 🤩

Crea il tuo primo blocco adesivo in Gutenberg 🧱

Aggiungere un blocco fisso o permanente in Gutenberg è un ottimo modo per attirare l'attenzione dei visitatori sulle parti importanti del tuo sito Web WordPress.

Poiché Gutenberg non offre uno sticky block predefinito, devi utilizzare un plug-in di terze parti per aggiungere questa funzionalità al tuo sito.

Sebbene siano disponibili una manciata di plug-in a blocchi permanenti, Otter Blocks è il plug-in a blocchi più semplice e intuitivo in circolazione.

Ha una versione gratuita e una premium. La versione gratuita può essere utilizzata per creare un blocco adesivo, ma alcune delle impostazioni avanzate, come fissare il blocco nella parte inferiore dello schermo o abilitare il blocco su dispositivo mobile, possono essere ottenute utilizzando la versione premium del plug-in.

👉 Per ottenere un blocco permanente attivo e funzionante sulla tua pagina utilizzando il plugin Otter Blocks, devi seguire i passaggi seguenti:

Se hai domande su come creare un blocco adesivo in Gutenberg, faccelo sapere nella sezione commenti qui sotto .