Webyx for Gutenberg guida V1.0.1

Webyx for Gutenberg
Webyx for Gutenberg

Introduzione

Benvenuto in Webyx for Gutenberg, un progetto firmato Webineer: siamo felici e onorati della tua presenza!

Questa idea è nata con lo scopo di creare favolosi siti web scorrevoli a schermo intero in WordPress con l'approccio modulare dell'editor di Gutenberg.

Volevamo semplificare e velocizzare il processo di creazione, consentendo personalizzazioni al volo e rendendolo il più possibile facile da usare.

Stiamo già ideando e sviluppando nuove caratteristiche e possibilità che ci permetteranno di ampliare e migliorare il progetto sempre di più, e di poter dare agli utenti uno strumento sempre più facile e potente.

Lasciati stupire dalla tua immaginazione!

Il team Webineer

Cosa puoi fare

Webyx for Gutenberg è un plugin per WordPress che ti permette di creare fantastici siti web scorrevoli a tutto schermo in maniera rapida e semplice.

La versione Free ti permetterà di creare completamente il tuo sito web e aggiungere effetti per personalizzarlo a seconda delle tue esigenze senza scrivere una riga di codice.

La versione Premium migliora ulteriormente la potenza di Webyx for Gutenberg fornendo agli utenti più esigenti ulteriori strumenti per aiutarli a migliorare il proprio lavoro e a realizzare le proprie idee.

La versione Premium è in fase di test e sarà presto disponibile. Se sei interessato contattaci usando il form su questa pagina.

Caratteristiche della versione Free:

Caratteristiche della versione Premium:

Altre caratteristiche:

  • Menù responsive integrato
  • Responsive
  • Supporto tattile
  • Codice pulito e minimizzato

Installazione

Installare Webyx for Gutenberg è semplicissimo:

1. Installa usando l'installatore integrato di WordPress, oppure Estrai il file zip e metti i contenuti nella directory wp-content/plugins/ della tua installazione di WordPress.

2. Attiva il plugin mediante il menù Plugins in WordPress.

Da questo momento sarai in grado di accedere e utilizzare Webyx for Gutenberg!

Talvolta con l'aggiornamento di Gutenberg, di WordPress o di plugin di terze parti, il blocco Webyx for Gutenberg potrebbe generare questo errore: "Webyx for Gutenberg block contains unexpected or invalid content".
Se vedi questo errore al posto del blocco Webyx for Gutenberg, usa il pulsante "attempt block recovery".
Non usare l'opzione "Convert to classic block".
Potremmo introdurre modifiche importanti che risolvono bug o semplicemente aggiungere nuove funzionalità che potrebbero portare a un tentativo di ripristino del blocco. Controlla il corretto funzionamento delle tue pagine dopo ogni aggiornamento.

Disinstallazione

Per disinstallare Webyx for Gutenberg è sufficiente:

1. Disattivare il plugin mediante il menù Plugins in WordPress.

2. Scegliere l'azione Delete plugin sempre nello stesso menù.

Guida rapida per l'utente

Impara come usare Webyx for Gutenberg per progettare il tuo sito web WordPress e creare le pagine velocemente.

Come aggiungere il blocco in Gutenberg

Per aggiungere Webyx for Gutenberg all'editor di Gutenberg, segui questi passi:

1. Crea una nuova pagina o andare alla pagina nella quale vorresti aggiungere il blocco.

2. Trova il blocco Webyx for Gutenberg nei blocchi Gutenberg e aggiungilo alla pagina. webyx for Gutenberg add block

IMPORTANTE: puoi aggiungere un solo blocco Webyx for Gutenberg. Non dovresti aggiungere altri blocchi alla pagina allo stesso livello del blocco Webyx for Gutenberg.

3. All'interno del livello radice del blocco Webyx for Gutenberg devi solamente aggiungere blocchi di tipo Sezione che conterranno esclusivamente blocchi di tipo Slide.

IMPORTANTE: ricordati di dare titoli diversi alle Sezioni e alle Slide all'interno delle stesse Sezioni per consentire il corretto funzionamento delle Palline di Navigazione.

4. Crea la tua impaginazione all'interno di ciascuna Slide.

5. Abilita Template Webyx o Template Personalizzato.

Abilita template Webyx

Per abilitare il template Webyx, segui questi passi:

1. Clicca sull'etichetta Page nella parte destra dell'editor di Gutenberg.

2. In Page Attributes trova il Template di selezione e scegli webyx. webyx for Gutenberg template

3. In Appearance > Menus crea il tuo nuovo menù e abilitalo in Menu Settings > Display location: Webyx Menu.

IMPORTANTE: il template Webyx for Gutenberg fornisce un menù responsive personalizzato (Webyx Menu) che può essere creato tramite la gestione interna dei WordPress Menus.

Abilita template Personalizzato

Per abilitare un template Personalizzato, segui questi passi:

1. In Template Design abilita l'opzione Custom Template e inserisci il percorso del template di pagina che vuoi usare.

2. Ricorda che dovresti conoscere e utilizzare del codice (PHP, CSS, JS) per adattare un template personalizzato. E' buona pratica creare un tema figlio dove possibilmente aggiungere questi cambiamenti. webyx for Gutenberg template

Utilità della barra di navigazione del blocco Webyx for Gutenberg

Puoi cambiare le dimensioni del blocco Webyx for Gutenberg nell'editor tramite opzioni preimpostate nella sua barra di navigazione. Il blocco di default ha una max-width di 610px.

  • Espandi: più largo del default (max-width 1240px).
  • Contrai: larghezza del blocco di default (max-width 610px).

webyx for Gutenberg alignment

Sezioni

Le Sezioni sono contenitori che possono avere solamente Slide.

Azioni generali sulle Sezioni

  • Add Section: cliccare sul bottone Add Section all'interno del blocco Webyx for Gutenberg block.webyx for Gutenberg add section
  • Remove Section: cliccare sui pallini del menù More Options nella barra di navigazione superiore e cliccare Remove Block.
  • Add Slide: cliccare sul bottone Add Slide all'interno del blocco Sezione.webyx for Gutenberg add slide

Opzioni delle Sezioni

  • Title: inserire qui un titolo per la Sezione corrente.
    IMPORTANTE: dovresti dare titoli diversi a ogni Sezione altrimenti alcune caratteristiche potrebbero presentare problemi (per esempio: menu, bullets, ecc.).
  • Continuous horizontal: abilita il passaggio diretto orizzontale dalla prima all'ultima Slide della stessa Sezione e viceversa.

webyx for Gutenberg section attribute

Slide

Le Slide sono elementi interni alle Sezioni che possono avere qualsiasi tipo di contenuto.

Azioni generali sulle Slide

  • Add Slide: cliccare sul pulsante Add Slide all'interno del blocco della Sezione.
  • Remove Slide: cliccare sui puntini del menù More Options nella barra di navigazione in cima e cliccare Remove Block.
  • Add Slide content: cliccare all'interno del blocco della Slide e aggiungere blocchi di Gutenberg al suo interno. Puoi aggiungere qualsiasi cosa qui dentro.

Utilità della barra di navigazione delle Slide

Puoi scegliere opzioni dalla barra di navigazione in cima alla Slide:

  • Hide background: nasconde lo sfondo della Slide (l'immagine o il colore che hai eventualmente scelto dal gruppo Slide background options) solamente nell'editor.webyx for Gutenberg hide background

Opzioni generali delle Slide

  • Title: inserire qui un titolo per la Slide corrente.
    IMPORTANTE: dovresti dare titoli diversi a ogni Slide (tenere presente che le Slide all'interno della stessa Sezione dovrebbero essere chiamate in maniera diversa, mentre tra Sezioni diverse potrebbero anche avere lo stesso titolo).
  • Slide content position: selezionare la posizione generale del contenuto nella Slide corrente.
  • Scrolling content: il contenuto della Slide eccedente la viewport sarà visualizzato attraverso lo scorrimento.

webyx for Gutenberg slide attribute

Opzioni dello sfondo delle Slide

  • Background colour: scegliere dal contenitore predisposto il colore di sfondo da applicare.
  • Background image: per scegliere l'immagine di sfondo da applicare , cliccare sul bottone Upload Image e selezionare l'immagine dalla libreria multimediale.
  • Background image size: scegliere da un insieme di dimensioni preimpostate.
    • auto: l'immagine di sfondo viene visualizzata nella sua dimensione originale.
    • cover: l'immagine di sfondo viene ridimensionata per ricoprire l'intero contenitore, anche se l'immagine deve essere allungata o tagliata leggermente in uno dei bordi.
    • contain: l'immagine di sfondo viene ridimensionata per essere certi che l'immagine sia interamente visibile.
  • Background image position: scegliere da un insieme di posizioni preimpostate. Il primo valore è la posizione orizzontale e il secondo valore è quella verticale.
    • left top
    • left center
    • left bottom
    • right top
    • right center
    • right bottom
    • center top
    • center center
    • center bottom
  • Background image repeat: scegliere se l'immagine di sfondo dovrebbe o no essere ripetuta.
    • repeat: l'immagine di sfondo è ripetuta sia verticalmente che orizzontalmente e l'ultima immagine verrà tagliata se non si adatterà.
    • no repeat: l'immagine di sfondo non è ripetuta e verrà mostrata solamente una volta.
  • Background image attachment: scegliere se l'immagine scorre con il resto della Slide o è fissa.
    • scroll: l'immagine di sfondo scorrerà con la Slide.
    • fixed: l'immagine di sfondo non scorrerà con la Slide.

webyx for Gutenberg slide background

Slide Design

Questo gruppo di opzioni definisce lo stile strutturale delle Slide.

  • Continuous vertical: abilita il passaggio diretto verticale dalla prima all'ultima Slide e viceversa.
  • Vertical Card style: questa opzione abilita la modalità di animazione in stile Card (scorrimento una sull'altra) durante lo spostamento verticale da una Slide all'altra, altrimenti verrà utilizzato lo stile Panel (scorrimento simultaneo di tutte le Slide).
  • Vertical parallax: abilita l'effetto di parallasse durante il movimento verticale delle Slide, applicabile solamente allo stile Card.
  • Vertical parallax percentage: imposta la percentuale di effetto verticale di parallasse tra Slide in movimento.
  • Horizontal Card style: questa opzione abilita la modalità di animazione in stile Card (scorrimento una sull'altra) durante lo spostamento orizzontale da una Slide all'altra, altrimenti verrà utilizzato lo stile Panel (scorrimento simultaneo di tutte le Slide).
  • Horizontal parallax: abilita l'effetto di parallasse durante il movimento orizzontale delle Slide, applicabile solamente allo stile Card.
  • Horizontal parallax percentage: imposta la percentuale di effetto orizzontale di parallasse tra Slide in movimento.

webyx for Gutenberg slide design

Curve e velocità delle animazioni

In questo gruppo puoi impostare il comportamento del movimento di animazione per le Slide, come:

  • Vertical speed: imposta la velocità di animazione verticale da un insieme di valori preimpostati (gamma da 300 a 1200 millisecondi con un passo di 50).
  • Vertical easing: imposta la curva di animazione verticale da un insieme di tipi di curve preimpostate (31 tipi disponibili).
  • Horizontal speed: imposta la velocità di animazione orizzontale da un insieme di valori preimpostati (gamma da 300 a 1200 millisecondi con un passo di 50).
  • Horizontal easing: imposta la curva di animazione orizzontale da un insieme di tipi di curve preimpostate (31 tipi disponibili).
  • Speed for IE9: imposta la velocità di animazione generale per il browser Internet Explorer 9 da un insieme di valori preimpostati (gamma da 300 a 1200 millisecondi con un passo di 50).
  • Easing for IE9: imposta la curva di animazione generale per il browser Internet Explorer 9 da un insieme di tipi di curve preimpostate (5 tipi disponibili: linear, easeout, arc, quadratic, cubic).

webyx for Gutenberg slide easing

Frecce di navigazione

In questo gruppo puoi personalizzare l'aspetto e il comportamento delle frecce di navigazione.

  • Navigation arrows: abilita frecce di navigazione cliccabili su ogni Slide per potersi muovere da una Slide alla successiva.
  • Fixed arrows: se le frecce di navigazione sono abilitate le rende persistenti, altrimenti le frecce scompariranno e riappariranno solamente al passaggio del mouse sulla loro posizione originale.
  • Arrows size: insieme disponibile di dimensioni delle frecce (small, medium, large).
  • Arrows thickness: insieme disponibile di spessori delle frecce (thin, standard, thick).
  • Arrows curvature: abilita una leggera curvatura all'aspetto delle frecce.
  • Arrows colour: scegliere dal contenitore predisposto il colore da applicare alle frecce.
  • Mouse wheel: abilita la navigazione tra Slide tramite la rotella del mouse.
  • Mouse wheel icon: se la rotella del mouse è abilitata, con questa opzione le frecce di navigazione verticali saranno sostituite da un'icona di rotella del mouse che rimarrà visibile fino al primo movimento tra Slide.
  • Mouse wheel icon colour: scegliere dal contenitore predisposto il colore da applicare all'icona della rotella del mouse.

webyx for Gutenberg navigation arrows

Palline di navigazione

In questo gruppo puoi personalizzare l'aspetto e il comportamento delle palline di navigazione.

  • Vertical bullets: abilita palline di navigazione verticali cliccabili su ogni Slide per potersi muovere dalla Slide corrente a quella bersaglio.
  • Vertical bullets position: se le palline di navigazione verticali sono abilitate permette di scegliere la loro posizione (right, left).
  • Bullets type: insieme di tipi di palline disponibili (7 tipi disponibili: scale, stroke, small stroke, fill-in, fill-up, fall, puff).
  • Bullets colour: scegliere dal contenitore predisposto il colore da applicare alle palline.
  • Vertical bullets tooltips: se le palline di navigazione verticali sono abilitate mostra il nome della corrispondente Slide al passaggio del mouse su ogni pallina verticale.
  • Vertical bullets fixed tooltips: se le palline di navigazione verticali sono abilitate esse diventano persistenti.
  • Bullets tooltips colour: scegliere dal contenitore predisposto il colore da applicare ai testi di suggerimento delle palline.
  • Horizontal bullets: abilita palline di navigazione orizzontali cliccabili su ogni Slide per potersi muovere dalla Slide corrente a quella bersaglio.
  • Horizontal bullets position: se le palline di navigazione orizzontali sono abilitate permette di scegliere la loro posizione (top, bottom).
  • Horizontal solo bullet: se le palline di navigazione orizzontali sono abilitate rende presente una pallina anche nel caso di una singola Slide orizzontale.
  • Horizontal bullets tooltips: se le palline di navigazione orizzontali sono abilitate mostra il nome della corrispondente Slide al passaggio del mouse su ogni pallina orizzontale.
  • Horizontal bullets fixed tooltips: se le palline di navigazione orizzontali sono abilitate esse diventano persistenti.

webyx for Gutenberg navigation bullets

Pulsante schermo intero

In questo gruppo puoi personalizzare l'aspetto e il comportamento del bottone di schermo intero.

  • Full screen button: abilita un bottone per passare alla visualizzazione a schermo intero.
  • Full screen button position: se il bottone di schermo intero permette di scegliere la sua posizione (right, left).
  • Full screen button colour: scegliere dal contenitore predisposto il colore da applicare al bottone di schermo intero.

webyx for Gutenberg fullscreen button

Scorrimento orizzontale

In questo gruppo puoi attivare lo scorrimento orizzontale.

  • Horizontal scrolling: abilita la navigazione sequenziale tra Slide adiacenti tramite la rotella del mouse o il trackpad, con priorità orizzontale e poi verticale.

webyx for Gutenberg horizontal scrolling

Impostazioni mobile

In questo gruppo puoi impostare il comportamento del movimento di animazione per le Slide sui dispositivi mobili, come:

  • Vertical speed: imposta la velocità di animazione verticale da un insieme di valori preimpostati gamma da 300 a 1200 millisecondi con un passo di 50).
  • Vertical easing: imposta la curva di animazione verticale da un insieme di tipi di curve preimpostate (31 tipi disponibili).
  • Horizontal speed: imposta la velocità di animazione orizzontale da un insieme di valori preimpostati gamma da 300 a 1200 millisecondi con un passo di 50).
  • Horizontal easing: imposta la curva di animazione orizzontale da un insieme di tipi di curve preimpostate (31 tipi disponibili).

webyx for Gutenberg mobile device

Caricamento della schermata iniziale

In questo gruppo puoi personalizzare l'aspetto della schermata di caricamento iniziale.

  • Background colour: scegliere dal contenitore predisposto il colore da applicare allo sfondo della schermata di caricamento.
  • Spinner colour: scegliere dal contenitore predisposto il colore da applicare allo spinner di caricamento.

webyx for Gutenberg loading splash screen

CSS personalizzato

In questo gruppo puoi aggiungere il tuo CSS personalizzato.

  • Custom CSS: fa sì che il bottone di Custom CSS apra una finestra dove puoi inserire il tuo codice CSS per la pagina.

webyx for Gutenberg custom css

Domande Frequenti (FAQ)

D.

Posso provare Webyx for Gutenberg?

R.

Certamente! Per provare Webyx for Gutenberg è sufficiente scaricare la versione free dal repository ufficiale di WordPress.

D.

Le Slide possono avere qualsiasi tipo di contenuto?

R.

Sì, le Slide sono elementi contenitori nei quali puoi aggiungere qualsiasi cosa.

D.

Le Sezioni possono avere qualsiasi tipo di contenuto?

R.

No, le Sezioni sono elementi contenitori che possono avere solo Slide. Se vuoi aggiungere qualche contenuto dovresti inserirlo dentro una Slide.

D.

Posso creare un qualsiasi numero di pagine nel mio sito web con il blocco Webyx for Gutenberg?

R.

Sì, puoi creare tante pagine quante ne hai bisogno.

D.

Posso usare più di un blocco Webyx for Gutenberg all'intero della stessa pagina?

R.

No, puoi aggiungere un solo blocco Webyx for Gutenberg che dovrà essere il contenitore per tutti gli altri blocchi (Sezioni -> Slide -> tuo layout).

D.

Ho messo il blocco Webyx for Gutenberg all'interno di una pagina ma non riesco a vederlo correttamente. Cosa dovrei fare?

R.

Controlla di aver selezionato il template webyx negli attributi della pagina nell'etichetta Page. Se stai utilizzando un template di pagina personalizzato (Template Design) controlla di aver inserito il suo nome o percorso correttamente.

D.

Posso usare una pagina creata con il blocco Webyx for Gutenberg all'interno di un tema?

R.

Sì, ma per vedere la testata e il piè pagina correttamente dovrai conoscere CSS e JavaScript per cambiare il comportamento della pagina. (Template Design).

D.

Webyx for Gutenberg è supportato su tutti i browser?

R.

Sì, è supportato su tutti i browser moderni.

D.

Ci sono dei requisiti per installare Webyx for Gutenberg?

R.

Dovresti avere almeno la versione 5.7 di WordPress e Gutenberg dovrebbe essere attivo sul sito web WordPress.

D.

Posso richiedere una nuova caratteristica attualmente non presente in Webyx for Gutenberg?

A.

Per qualsiasi richiesta ti preghiamo di contattarci usando l'apposito form.

Contattaci

Ci piacerebbe avere vostre notizie! Il nostro team è felice di rispondere alle vostre domande.