Webyx

Descrizione

Questa idea è nata allo scopo di creare fantastici siti web a schermo intero a tutta pagina scorrevoli 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 consente di creare fantastici siti web a schermo intero a tutta pagina scorrevoli in modo rapido e semplice.

Questa versione ti consente di creare completamente il tuo sito web a schermo intero a pagina intera e aggiungere effetti per personalizzarlo in base alle tue esigenze senza scrivere una riga di codice.

Se sei interessato mettiti in contatto con noi utilizzando il modulo sul sito web Webyx.

🚀 TRY WEBYX FOR ELEMENTOR

Siete anche utenti e appassionati di Elementor?
Abbiamo la versione di Webyx costruita esplicitamente per Elementor.
Scarica e prova la versione Webyx for Elementor Free del nostro plugin dedicato!

CARATTERISTICHE DELLA VERSIONE FREE

• Sezioni
• Slide
• Contenuto scorrevole
• Orizzontale continuo
• Posizione del contenuto delle Slide
• Stile pannello
• Progettazione template
• Curve e velocità delle animazioni
• Frecce di navigazione
• Palline di navigazione
• Navigazione tramite rotella del mouse
• Navigazione tramite tastiera
• Pulsante schermo intero
• Nascondi barra di scorrimento
• Schermata di caricamento
• Impostazioni mobile
• CSS personalizzato
• Menù responsive integrato
• Responsive
• Supporto tattile
• Codice pulito e minimizzato
• Compatibile con tutti i browser moderni
• No jQuery
• Facile da usare con centinaia di opzioni configurabili
• …e molto altro

CARATTERISTICHE DELLA SOLA VERSIONE PRO

• Progettazione vista
• Header personalizzabile con menù
• Verticale continuo
• Scorrimento orizzontale
• Stile card
• Effetto di parallasse
• Tipi di animazioni indipendenti sugli assi X e Y
• Animazioni di dissolvenza e istantanee
• Sito web a scorrimento normale
• Riempimento automatico dell’altezza della slide
• Movimento verticale bloccabile
• Scorrimento orizzontale bloccabile
• Soglia movimento mobile
• Primi piani intercambiabili per ogni sfondo di slide
• Sfondi diversi per ogni tipologia di dispositivo
• Audio di sottofondo
• Video di sfondo
• Hook degli eventi
• Slide visibili o nascoste al volo
• Gestione automatica degli aggiornamenti
• Rollback a versioni precedenti
• …e molto altro

GUIDA RAPIDA PER L’UTENTE

Per una documentazione più completa visita il nostro sito web all’indirizzo Webyx.

Impostazioni del plugin Webyx for Gutenberg

Per personalizzare le impostazioni generali del plugin è sufficiente andare su Impostazioni > Impostazioni plugin Webyx.

• Nascondi la barra in alto di WP admin: nascondi la barra in alto di WP admin nell’anteprima delle pagine Webyx.
• Abilita menu Webyx: abilita la “posizione di visualizzazione” del menu Webyx in Aspetto/Menu/Struttura del menu/Impostazioni del menu.

Come aggiungere un blocco in Gutenberg

1. Crea una nuova pagina o vai alla pagina nella quale vorresti aggiungere il blocco.
2. Abilita il template Webyx di pagina o il template personalizzato di pagina.
3. Trova il blocco Webyx for Gutenberg sui blocchi di Gutenberg e aggiungilo alla pagina.
   IMPORTANTE: puoi aggiungere un solo blocco Webyx for Gutenberg come l’unico elemento radice della pagina.
   Non dovresti aggiungere nessun altro blocco alla pagina allo stesso livello del blocco Webyx for Gutenberg.
4. All’interno del livello radice del blocco Webyx for Gutenberg devi aggiungere solo blocchi sezione che conterranno esclusivamente blocchi slide.
   IMPORTANTE: ricordati di dare titoli diversi alle sezioni e alle slide all’interno della stessa sezione per consentire un corretto funzionamento delle palline di navigazione.
5. Crea il tuo layout all’interno di ogni singola slide.

⚠️ IMPORTANTE: a volte con l’aggiornamento di Gutenberg, WordPress o altri plugin di terze parti, il blocco Webyx for Gutenberg potrebbe generare questo errore: “Il blocco Webyx for Gutenberg contiene contenuto imprevisto o non valido”.
Se vedi questo errore invece del blocco Webyx for Gutenberg, usa il pulsante “tenta il ripristino del blocco”.
NON utilizzare l’opzione “Converti in blocco classico”. Potremmo introdurre modifiche importanti che risolvono bug o semplicemente aggiungere nuove funzionalità che potrebbero portare a un tentativo di ripristino del blocco.
Controlla le tue pagine dopo ogni aggiornamento.

Abilita il template Webyx

1. Fare clic sulla scheda pagina nel lato destro dell’editor di Gutenberg.
2. In attributi di pagina trova la selezione del template e scegli webyx.
3. In Aspetto > Menu crea il tuo nuovo menu e abilita in Impostazioni menu > Posizione di visualizzazione: Menu Webyx.

Nota importante: il template Webyx for Gutenberg fornisce un menu (menu Webyx) personalizzato responsive, scorrevole, multi livello, con logo, che può essere creato con la gestione interna dei menu WordPress.

Nota importante: Webyx Menu è compatibile solamente con i temi Twenty standard di WordPress.

Abilita il tuo template personalizzato di pagina

1. In progettazione template abilita l’opzione template personalizzato e metti il percorso del template di pagina che vuoi usare.
2. Ricorda che dovresti conoscere e utilizzare del codice per regolare un modello personalizzato. È buona norma creare un tema figlio dove eventualmente aggiungere queste modifiche.

Utilità della barra di navigazione del blocco Webyx

Puoi modificare la dimensione del blocco Webyx per Gutenberg nell’editor tramite le opzioni preimpostate nella sua barra di navigazione.
La larghezza predefinita del blocco ha una larghezza massima di 610px.

• Espandi: più largo del predefinito (larghezza massima 1240px).
• Contrai: larghezza predefinita del blocco (larghezza massima 610px).

Sezioni

Le sezioni sono contenitori che possono avere solamente slide.

Azioni generali sulle sezioni:

• Aggiungi sezione: fare clic sul pulsante aggiungi sezione all’interno del blocco Webyx for Gutenberg.
• Rimuovi sezione: fare clic sui pallini del menu più opzioni nella barra di navigazione in alto e fare clic su rimuovi blocco.
• Aggiungi slide: fare clic su aggiungi slide all’interno del blocco sezione.

Opzioni della sezione

• Nome: inserire qui un nome per la sezione corrente. IMPORTANTE: dovresti dare nomi diversi a ogni sezione altrimenti alcune caratteristiche potrebbero presentare problemi (per esempio: menu, palline, ecc.).
• Tipo di tag: seleziona il tipo di tag HTML. Questo parametro modifica il tag HTML della sezione nel tag specificato.
• Orizzontale continuo: abilita il passaggio diretto orizzontale dalla prima all’ultima slide della stessa sezione e viceversa.

Utilità della barra di navigazione delle slide

• Nascondi sfondo: nasconde lo sfondo della slide (l’immagine o il colore che hai eventualmente scelto dal gruppo opzioni di sfondo della slide) solamente nell’editor.

Slide

Le slide sono elementi interni alle sezioni che possono avere qualsiasi tipo di contenuto.

Azioni generali sulle slide:

• Aggiungi slide: fare clic su aggiungi slide all’interno del blocco sezione.
• Rimuovi slide: fare clic sui pallini del menu più opzioni nella barra di navigazione in alto e fare clic su rimuovi blocco.
• Aggiungi contenuto della slide: fare clic all’interno del blocco della slide e aggiungere blocchi di Gutenberg al suo interno. Puoi aggiungere qualsiasi cosa qui dentro.

Opzioni generali della slide:

• Nome: inserire qui un nome per la slide corrente. IMPORTANTE: dovresti dare nomi diversi a ogni slide (le slide all’interno della stessa sezione dovrebbero essere chiamate in maniera diversa, mentre tra sezioni diverse potrebbero avere anche lo stesso nome).
• Contenuto della slide: abilitare la gestione del posizionamento del contenuto nella slide corrente.
• Posizione del contenuto della slide: selezionare la posizione generale del contenuto nella slide corrente (sopra, in mezzo, sotto).
• Tipo di tag: seleziona il tipo di tag HTML. Questo parametro modifica il tag HTML della slide nel tag specificato.
• Contenuto scorrevole: il contenuto della slide eccedente la viewport sarà visualizzato attraverso lo scorrimento.
• Wrapper del contenuto: abilita l’elemento wrapper per il contenuto della slide.
• Classe(i) aggiuntiva(e) del wrapper della slide: puoi aggiungere le tue classi CSS. Separa classi multiple tramite spazi.
• Margine del contenuto del wrapper: abilita il margine del wrapper per il contenuto della slide per i dispositivi desktop e mobile, enable wrapper margin for the Slide’s content for desktop and mobile devices, puoi inserire valori per applicare un margine.
  • top
  • right
  • bottom
  • left
• Spaziatura interna del contenuto del wrapper: abilita la spaziatura interna del wrapper per il contenuto della slide per i dispositivi desktop e mobile, puoi inserire valori per applicare una spaziatura interna.
  • top
  • right
  • bottom
  • left

Opzioni di sfondo delle slide

• Sfondo: abilitare la gestione dello sfondo.
• Colore di sfondo: scegliere dal riquadro dei colori il colore di sfondo da applicare.
• Immagine di sfondo: per scegliere l’immagine di sfondo da applicare, fare clic sul pulsante carica immagine e selezionare l’immagine dalla libreria dei media.
• Dimensione dell’immagine di sfondo: 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.
• Posizione dell’immagine di sfondo: scegliere da un insieme di posizioni preimpostate. Il primo valore è la posizione orizzontale e il secondo valore è quella verticale.
  • sinistra sopra
  • sinistra centro
  • sinistra sotto
  • destra sopra
  • destra centro
  • destra sotto
  • centro sopra
  • centro centro
  • centro sotto
• Ripeti immagine di sfondo: 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.
• Immagine di sfondo allegata: 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.

Progettazione template

In questo gruppo puoi impostare la pagina del modello personalizzato, come ad esempio:

• Modello personalizzato: pagina del modello personalizzato abilitata.
• Nome del file di modello: percorso verso il file del modello di pagina personalizzato (esempio: page-custom.php o path-to\page-custom.php).

Curve di animazione di navigazione

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

• Velocità verticale: imposta la velocità di animazione verticale da un insieme di valori preimpostati (gamma da 300 a 1200 millisecondi con un passo di 1).
• Curva di animazione verticale: imposta la curva di animazione verticale da un insieme di tipi di curve preimpostate (31 tipi disponibili).
• Velocità orizzontale: imposta la velocità di animazione orizzontale da un insieme di valori preimpostati (gamma da 300 a 1200 millisecondi con un passo di 1).
• Curva di animazione orizzontale per IE9: imposta la curva di animazione orizzontale da un insieme di tipi di curve preimpostate (31 tipi disponibili).
• Velocità per 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 1).
• Curva di animazione per 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).

Frecce di navigazione

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

• Frecce di navigazione: abilita frecce di navigazione cliccabili su ogni slide per muoversi da una slide alla successiva.
• Frecce fisse: 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.
• Dimensioni delle frecce: insieme disponibile di dimensioni delle frecce (piccole, medie, grandi).
• Spessore delle frecce: insieme disponibile di spessori delle frecce (sottile, standard, spesso).
• Dimensione dell’area delle frecce: insieme disponibile di dimensioni delle aree delle frecce in pixel (piccola (80×50), media (150×70), grande (300×90)).
• Colore delle frecce: scegliere dal riquadro dei colori il colore da applicare alle frecce.
• Colore leggero delle frecce: scegliere dal riquadro dei colori il colore da applicare alle frecce quando il mouse non è sulla loro posizione.
• Curvatura delle frecce: abilita una leggera curvatura all’aspetto delle frecce.
• Area di sfondo delle frecce: abilita un’area di sfondo visibile per ogni freccia.
• Colore dell’area di sfondo delle frecce: scegliere dal riquadro dei colori il colore da applicare a ogni area di sfondo delle frecce.
• Scostamento personalizzato delle frecce: abilita un posizionamento personalizzato per ogni freccia (gamma da 0 a 100 pixel con un passo di 1).

Palline di navigazione

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

• Palline verticali: abilita palline di navigazione verticali cliccabili su ogni slide per potersi muovere dalla slide corrente a quella bersaglio.
• Posizione delle palline verticali: se le palline di navigazione verticali sono abilitate permette di scegliere la loro posizione (destra, sinistra).
• Offset delle palline verticali: abilita il posizionamento personalizzato per ogni pallina verticale (gamma da 0 a 100 pixel con un passo di 1).
  • Offset di sinistra della pallina verticale
  • Offset di destra della pallina verticale
• Tooltip delle palline verticali: se le palline di navigazione verticali sono abilitate mostra il nome della corrispondente slide al passaggio del mouse su ogni pallina verticale.
• Suggerimenti fissi delle palline verticali: se le palline di navigazione verticali sono abilitate esse diventano persistenti.
• Palline orizzontali: abilita palline di navigazione orizzontali cliccabili su ogni slide per potersi muovere dalla slide corrente a quella bersaglio.
• Posizione delle palline orizzontali: se le palline di navigazione orizzontali sono abilitate permette di scegliere la loro posizione (in alto, in basso).
• Pallina orizzontale solitaria: se le palline di navigazione orizzontali sono abilitate rende persistente una pallina anche nel caso di una singola slide orizzontale.
• Offset delle palline orizzontali: abilita il posizionamento personalizzato per ogni pallina orizzontale (gamma da 0 a 100 pixel con un passo di 1).
  • Offset in alto della pallina verticale
  • Offset in basso della pallina verticale
• Tooltip delle palline orizzontali: se le palline di navigazione orizzontali sono abilitate mostra il nome della corrispondente slide al passaggio del mouse su ogni pallina orizzontale.
• Suggerimenti fissi delle palline orizzontali: se le palline di navigazione orizzontali sono abilitate esse diventano persistenti.
• Tipi di palline: insieme di tipi di palline disponibili (7 tipi disponibili: scale, stroke, small stroke, fill-in, fill-up, fall, puff).
• Colore delle palline: scegliere dal contenitore predisposto il colore da applicare alle palline.
• Colore leggero delle palline: scegliere dal contenitore predisposto il colore da applicare alle palline quando il mouse non è sulla loro posizione.
• Area di sfondo delle palline: abilita il colore dell’area di sfondo delle palline.
• Colore dell’area di sfondo delle palline: scegliere dal contenitore predisposto il colore da applicare a ogni area di sfondo delle palline.
• Colore dei suggerimenti delle palline: scegliere dal contenitore predisposto il colore da applicare ai testi di suggerimento delle palline.
• Colore leggero dei suggerimenti delle palline: scegliere dal contenitore predisposto il colore da applicare ai testi di suggerimento delle palline quando il mouse non è sulla loro posizione.
• Area di sfondo del tooltip della pallina: abilita l’area di sfondo dei tooltip delle palline.
• Colore dell’area di sfondo del tooltip della pallina: scegliere dal riquadro dei colori il colore da applicare ai testi dei tooltip delle palline quando il mouse non è sulla loro posizione.

Navigazione tramite rotella del mouse

In questo gruppo puoi personalizzare l’aspetto e il comportamento della navigazione con la rotella del mouse.

• Rotella del mouse: abilita la navigazione tra slide tramite la rotella del mouse.
• Icona della rotella del mouse: 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.
• Colore dell’icona della rotella del mouse: scegliere dal riquadro dei colori il colore da applicare all’icona della rotella del mouse.
• Sfondo dell’icona della rotella del mouse: abilita lo sfondo dell’icona della rotella del mouse.
• Colore di sfondo dell’icona della rotella del mouse: scegliere dal riquadro dei colori il colore da applicare all’area di sfondo dell’icona della rotella del mouse.
• Icona della rotella del mouse fissa: se l’icona della rotella del mouse è abilitata la rende persistente.

Navigazione tramite tastiera

In questo gruppo puoi attivare la navigazione del sito web tramite la tastiera.

• Navigazione con tastiera: abilita la navigazione tra slide adiacenti tramite le frecce della tastiera.

Pulsante schermo intero

In questo gruppo puoi personalizzare l’aspetto e il comportamento del pulsante schermo intero.

• Pulsante schermo intero: abilita un pulsante per passare alla visualizzazione a schermo intero.
• Posizione del pulsante schermo intero: se il pulsante schermo intero è abilitato ti permette di scegliere la sua posizione (sinistra, destra).
• Spessore del pulsante schermo intero: insieme disponibile di spessori (sottile, standard, spesso).
• Offset personalizzato del pulsante schermo intero: abilita il posizionamento personalizzato per il pulsante (gamma da 0 a 100 pixel con un passo di 1).
  • Offset in alto del pulsante schermo intero
  • Offset sinistro del pulsante di schermo intero
  • Offset destro del pulsante di schermo intero
• Colore del pulsante schermo intero: scegli dal riquadro dei colori il colore da applicare al pulsante schermo intero.
• Sfondo del pulsante schermo intero: abilita lo sfondo del pulsante.
• Colore di sfondo del pulsante schermo intero: scegliere dal riquadro dei colori il colore da applicare all’area di sfondo del pulsante schermo intero.

Dispositivi mobili

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

• Forza modalità desktop: abilita la navigazione delle slide attraverso frecce/palline/menù e NON attraverso swipe/scroll.
• Velocità verticale: imposta la velocità di animazione verticale da un insieme di valori preimpostati (gamma da 300 a 1200 millisecondi con un passo di 1).
• Curva di animazione verticale: imposta la curva di animazione verticale da un insieme di tipi di curve preimpostate (31 tipi disponibili).
• Velocità orizzontale: imposta la velocità di animazione orizzontale da un insieme di valori preimpostati (gamma da 300 a 1200 millisecondi con un passo di 1).
• Curva di animazione orizzontale per IE9: imposta la curva di animazione orizzontale da un insieme di tipi di curve preimpostate (31 tipi disponibili).

Barra di scorrimento

In questo gruppo puoi personalizzare il comportamento della barra di scorrimento predefinita del browser.

• Nascondi barra di scorrimento: nasconde la barra di scorrimento predefinita del browser nelle slide quando dovrebbe essere presente.

Schermata di caricamento

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

• Schermata iniziale di caricamento: abilita la schermata di caricamento iniziale.
• Tipo di schermata iniziale: scegliere il tipo di schermata iniziale:
  • predefinito
  • personalizzato
• Colore di sfondo: scegliere dal riquadro dei colori il colore da applicare allo sfondo della schermata di caricamento.
• Colore dello spinner: scegliere dal contenitore predisposto il colore da applicare allo spinner di caricamento.
• Messaggio di caricamento iniziale: messaggio da visualizzare durante il caricamento del sito web.
• Colore messaggio: scegliere dal riquadro dei colori il colore da applicare al messaggio iniziale.
• Immagine di sfondo: per scegliere l’immagine di sfondo da applicare, fare clic sul pulsante carica immagine e selezionare l’immagine dalla libreria dei media.
• Abilita durata temporale: abilita una durata temporale predefinita per mostrare la pagina di caricamento.
• Sempre visibile: la pagina di caricamento sarà visibile a tempo indefinito.
• Durata temporale: imposta il valore per la durata temporale (intervallo da 1 a 10 secondi con un passo di 0.1).

CSS personalizzato

In questo gruppo puoi aggiungere il tuo CSS personalizzato.

• CSS personalizzato: abilita il pulsante CSS personalizzato per aprire una finestra pop-up dove puoi inserire il tuo codice CSS per la pagina.

Lingue

• Inglese
• Italiano

Documentazione e supporto

• Per la documentazione visita il nostro sito web all’indirizzo Webyx.