Come creare il proprio design con il nostro editor di web design Zero Block

Controllo di ogni elemento. È possibile controllare ogni elemento del blocco, come testo, immagine, pulsante o sfondo. Decidete la loro posizione, le dimensioni e la risoluzione dello schermo su cui appariranno.

Livelli. È uno strumento comodo per creare profondità con tecniche di sovrapposizione e opacità. Ogni elemento del sito web può essere posizionato rispetto alla griglia o ai bordi dello schermo.

Tipografia complessa. I designer hanno piena libertà nel creare soluzioni tipografiche uniche.

Trasparenza. Impostare un livello di trasparenza su qualsiasi elemento e gli effetti d'ombra sotto di essi, regolare l'adattabilità. Modificare ogni parametro, come la composizione, l'insieme degli elementi visibili, in base alla risoluzione dello schermo.

Pannelli. Aggiungete pannelli colorati, schede di contenuto o caricate immagini all'interno di forme geometriche.

Video. Aggiungete video di YouTube o Vimeo al vostro sito web. In Zero Block è possibile regolare le loro dimensioni e la loro posizione nella pagina.

Aggiunta di HTML. Aggiungete qualsiasi elemento a Zero Block inserendo il codice HTML (utilizzate il vostro codice o i widget IFrame che consentono di inserire contenuti di fornitori terzi). Regolate il posizionamento di questi elementi su ogni schermata.

Tooltip. Utilizzate questo strumento interattivo per aggiungere brevi messaggi a comparsa. È possibile modificare le impostazioni come il colore, l'ombra, la dimensione, caricare un'icona all'interno di un cerchio o un'immagine sopra il testo.

Modulo di feedback. Aggiungete campi di input, integrazioni per l'acquisizione di dati, impostate lo stile del modulo e animatelo.

Animare gli elementi della pagina web. Aggiungete animazioni quando gli elementi web appaiono su una pagina: opacità, ridimensionamento, quando gli elementi vengono visualizzati dal basso, dall'alto, da sinistra o da destra.

Animazione passo dopo passo. Rendete la vostra pagina più dinamica e coinvolgente. Animate al clic, allo scorrimento, al passaggio del mouse e quando l'elemento appare sullo schermo.

Scorrimento parallasse. Utilizzate lo scorrimento in parallasse o create l'effetto parallasse dal movimento del mouse.

Elementi fissi durante lo scorrimento. Specificare la distanza per la quale l'elemento deve rimanere fisso e la sua posizione.

Se disegnate i layout in un editor grafico prima di utilizzarli, utilizzate Zero Block per trasferirli sul vostro sito web così come sono. Per questo, Zero Block offre una griglia a 12 colonne e specifiche personalizzabili per ogni elemento, come coordinate, dimensioni, posizionamento rispetto alla griglia o allo schermo, parametri di opacità e ombra. Utilizzate questi strumenti per ricreare il vostro layout in Zero Block.

L'interfaccia di Zero Block è simile a quella di un editor grafico. È sufficiente aggiungere gli elementi necessari e assegnare loro le coordinate appropriate. È facile da fare in Zero Block, soprattutto se lo si è già fatto in precedenza. Utilizzate Zero Block per trasferire rapidamente la vostra idea da un editor grafico al vostro sito web senza dover scrivere alcun codice.

Se state creando una pagina web o una landing page e non riuscite a trovare il blocco giusto nella libreria Tilda, utilizzate Zero Block. Ecco alcuni esempi concreti.

I siti web realizzati su Tilda sono spesso creati con blocchi, in modo che i visitatori scorrano le sezioni. Si tratta di una tendenza all'unificazione del web design, in cui il contenuto viene prima del design.

Se volete cambiare il modo in cui i visitatori leggono le informazioni sul vostro sito web, Zero Block è un ottimo strumento per farlo.

Il blocco zero funziona benissimo per raccogliere elementi con bordi irregolari in un'unica composizione, rendendo tutte le distanze visivamente uguali.

Zero Block funziona bene con i livelli, come la sovrapposizione di immagini, testi sopra un pannello, pulsanti sopra le immagini. È possibile creare effetti aggiuntivi giocando con il loro posizionamento.

Per semplificare le cose quando si tratta di elementi multipli, utilizzare i Livelli. Questo fantastico strumento consente di gestire ogni elemento, modificandone la posizione, nascondendolo o bloccandolo.

Per aprire i livelli, utilizzare le seguenti scorciatoie da tastiera: ⌘+ L o Ctrl + L (per Mac) o Ctrl + L (per Windows).

Zero Block consente agli utenti di creare composizioni complesse a partire da elementi multipli come testi, immagini, linee, pannelli e pulsanti.

Questa landing page per nuovi font creata su Tilda è composta da blocchi che presentano diversi elementi.

L'effetto hover cambia l'aspetto di un elemento quando l'utente vi punta sopra il mouse. Utilizzatelo come elemento di design aggiuntivo o come elemento funzionale di un articolo o di un'infografica.

Perfetto per quando si desidera modificare qualcosa in un blocco normale, ma non è possibile farlo modificando le impostazioni.

Se si è selezionato un blocco Tilda generale e si desidera apportarvi alcune modifiche, è sufficiente utilizzare l'opzione Converti in blocco zero. In questo modo sarà possibile modificarlo come se fosse un blocco zero. Questa opzione è disponibile per la maggior parte dei blocchi Tilda.

Suddividiamo questo processo in fasi. Ad esempio, modifichiamo il blocco delle tariffe posizionando le icone all'esterno dei pannelli informativi.

Esempio di conversione di altri blocchi in blocco zero:

I nostri blocchi standard hanno molte impostazioni. Aggiungete il blocco più appropriato dalla libreria, aprite la scheda delle impostazioni e verificate se potete adattare il modello al vostro obiettivo. È possibile che non vi serva affatto il blocco Zero.

Gli esempi che seguono sono progetti basati sui nostri blocchi standard.

Se in precedenza era necessario convertire un blocco regolare in blocco zero, non è più necessario farlo. Tilda ha ora la possibilità di definire i rientri separatamente per computer e dispositivi mobili.

I blocchi regolari sono disposti su una griglia di 12 colonne. È possibile definire i rientri per ogni intestazione pari a qualsiasi numero di colonne. Se si progetta il blocco in Zero Block senza tenere conto della griglia, non sarà possibile impostare gli stessi rientri per i blocchi regolari (sarà necessario convertirli in Zero Block).

Ad esempio, si alternano blocchi regolari e Zero Block nel design del sito web. Mentre nel blocco Zero si possono posizionare gli elementi dove si vuole, non sarà possibile ripeterli in un blocco regolare. È bene quindi tenere presente che i blocchi regolari possono essere posizionati solo sulla griglia.

Si consiglia di utilizzare una griglia quando si progetta un sito web in Zero Block. Posizionate gli elementi principali rispetto alla griglia: ora il vostro progetto può essere facilmente combinato con tutti gli altri blocchi Tilda.

In Zero Block è possibile aggiungere elementi più complessi di testi, immagini, pannelli e pulsanti.

È possibile aggiungere o modificare video da YouTube e Vimeo. È possibile modificare le dimensioni e le proporzioni del video, nonché la sua opacità, creare ombre e applicare animazioni.

Nelle impostazioni dei video è possibile impostare la riproduzione automatica, attivare e disattivare il looping, impostare l'ora di inizio e di fine di ogni video e caricare la propria copertina.

Aggiungere qualsiasi elemento con l'aiuto dell'HTML. Può trattarsi di un codice proprio o di incorporare l'iFrame di un widget di terze parti. Ad esempio, possono essere elementi interattivi, registrazioni online, lettori musicali, calendari, calcolatori, post sui social media. È possibile regolare la posizione di questi elementi su ogni schermata.

Il tooltip è un piccolo messaggio interattivo che appare quando il cursore del mouse viene posizionato su un elemento di un sito web. Può essere utile se si sta descrivendo un argomento complesso e si desidera descriverne le parti su una foto. Ad esempio, se si vendono case in un complesso residenziale, è possibile disegnare una mappa e contrassegnare ogni edificio su questa mappa.

Il tooltip ha molte impostazioni utili: si può modificare il colore, l'ombra, la dimensione o scegliere e caricare un'icona che apparirà all'interno di un cerchio o un testo che apparirà al passaggio del mouse.

Dopo aver posizionato gli elementi/tooltip sulla pagina, non dimenticate di controllare la posizione di ogni tooltip su schermi di tutte le risoluzioni, altrimenti il messaggio rischia di essere tagliato dall'alto, dal basso o dai bordi del blocco.

Aggiungete un modulo di feedback orizzontale o verticale a Zero Block e modificate ogni impostazione, ad esempio aggiungendo campi di input o integrazioni per l'acquisizione di dati, messaggi di successo o di errore, stili del modulo o animazioni.

A ogni elemento si possono assegnare le coordinate relative ai quattro lati di uno schermo o di una griglia, modificare l'opacità e l'ombra; si può ruotare l'elemento o assegnargli un collegamento con un clic.

A ogni elemento può essere assegnata una dimensione in pixel o una percentuale della dimensione dello schermo. Ad esempio, se si desidera creare un elemento che occupi metà dello schermo, indipendentemente dalle sue dimensioni. In questo caso, impostare la larghezza e l'altezza in %, non in pixel.

Scoprite molte sorprese inaspettate con Zero Block. Ecco un elenco di effetti che potreste utilizzare sul vostro sito.

Utilizzate un pulsante per gli effetti hover in Zero Block Potete renderlo di qualsiasi dimensione e persino rotondo, regolando le impostazioni. Volete che sia visibile solo quando è in bilico? Rendetelo trasparente. E già che ci siete, scegliete un'opacità del 30% e un colore qualsiasi per il pulsante di passaggio.

Posizionare il pulsante sugli elementi che si desidera siano coperti dall'effetto hover. Può trattarsi di immagini o di testo. Se necessario, trasformare il pulsante in un link.

Per fissare un elemento durante lo scorrimento, modificare le impostazioni dell'immagine in Comportamento - Fisso. Questa funzione è disponibile per le immagini di sfondo all'interno di una forma. Se si applica questa funzione all'immagine all'interno di un pannello, le dimensioni dell'immagine si estenderanno a schermo intero, ma sarà visibile solo all'interno della forma. Se si utilizzano più forme di questo tipo nel blocco, l'immagine al loro interno sarà la continuazione della stessa immagine.

È possibile combinare immagini fisse e immagini statiche per creare effetti aggiuntivi e combinazioni insolite.

Se si desidera che alcuni elementi vengano visualizzati al di fuori del blocco zero e sovrapposti ai blocchi adiacenti, scegliere l'opzione Overflow. Si trova nelle impostazioni del blocco.

I design dei blocchi Zero possono essere adattati ai cinque tipi di schermo più comuni. Il vostro blocco avrà sempre un bell'aspetto su qualsiasi dispositivo.

Ricordatevi di controllare l'aspetto del vostro Zero Block su tutti gli schermi. Basta premere il pulsante che raffigura il dispositivo di cui si ha bisogno in Zero Block.

Ogni elemento su ogni schermo è personalizzabile in Zero Block, quindi se si cambia la composizione o il contenuto su uno degli schermi, un blocco con una risoluzione inferiore potrebbe apparire diverso a causa della differenza nella lunghezza della linea o nella dimensione degli elementi.

Creando un Zero Block da zero, si configura l'adattabilità per ogni dispositivo individualmente. È importante tenerlo presente prima di pubblicare il sito web.

Se si sta progettando l'intero sito in Zero Block, è più comodo dividerlo in blocchi separati. In questo modo è possibile disattivare i blocchi per gli schermi a bassa risoluzione o disattivarli temporaneamente per l'intero sito web.

Se si utilizzano molti dettagli su uno schermo grande, semplificare il design per gli schermi a bassa risoluzione per facilitare la vista.

Ecco un esempio di composizione visiva individuale su ogni schermo:

È possibile animare ogni elemento così come appare in Zero Block. Abbiamo previsto sei tipi di animazioni:

Ogni tipo di animazione ha i suoi parametri. Vediamo il loro significato.

Durata - la durata di un'animazione in secondi. Più alto è il valore, più lenta sarà l'animazione.

Distanza - lo spazio tra la posizione iniziale di un'animazione e la sua posizione finale. Viene specificata solo per le animazioni in cui gli oggetti appaiono dai lati.

Scala - la dimensione di un elemento all'inizio di un'animazione come percentuale della dimensione originale. Questo parametro viene impostato quando si verifica un aumento o una diminuzione della scala. Se il valore è maggiore di 100, l'elemento è più grande fin dall'inizio e scende alla sua dimensione originale; se il valore è minore di 100, l'elemento viene scalato alla sua scala originale.

Ritardo - il ritardo della riproduzione dell'animazione, in secondi. Se il valore è zero, l'animazione inizierà non appena il blocco apparirà sulla pagina.

Quando si dovrebbe usare? Può essere utile se un altro oggetto si sovrappone o si sovrappone a un elemento significativo. Se in una schermata sono presenti diversi oggetti animati, si può assegnare una funzione di ritardo diversa a ciascun elemento. In questo modo è possibile orientare l'occhio dello spettatore, portandolo da un elemento all'altro.

Offset di trigger è la distanza, misurata in pixel dal bordo inferiore dello schermo, alla quale gli elementi appaiono nella pagina. Per impostazione predefinita, l'animazione inizia non appena l'elemento entra nella pagina. Se si desidera ritardare l'animazione finché l'oggetto non è visibile all'osservatore (e non si trova in fondo alla pagina), impostare la distanza dal bordo inferiore a cui l'animazione inizierà. Se l'oggetto si trova inizialmente a una distanza inferiore al valore di questo parametro, non sarà visibile finché l'utente non scorrerà ulteriormente.

Una volta impostati i parametri necessari, è possibile verificare l'animazione senza lasciare l'editor. Attivate l'elemento che avete animato, fate clic su Riproduci elemento per un singolo elemento e su Riproduci tutto se avete animato più elementi e volete vedere come funzionano insieme.

Se si desidera visualizzare elementi interattivi sulla pagina che gli utenti vorranno utilizzare, evidenziare l'elemento che si desidera animare e passare all'animazione passo-passo nelle impostazioni dell'elemento.

Gli elementi appaiono e si spostano quando l'utente scorre la pagina verso l'alto o verso il basso.

Esempi di animazione su rotolo:

Sentitevi liberi di utilizzare questi esempi di animazione nei vostri progetti personali.

Questo tipo di animazione si attiva quando un elemento appare sullo schermo.

Elemento sullo schermo - si attiva quando un elemento attraversa la parte inferiore del browser e appare sulla pagina web.

Blocco sullo schermo - si attiva quando un blocco zero contenente l'elemento attraversa la parte inferiore del browser e appare sulla pagina web.

L'animazione si avvia quando il cursore passa sopra un elemento.

L'animazione si avvia quando l'utente fa clic sull'elemento.

Ogni tipo di animazione ha queste impostazioni aggiuntive:

Avviamento -Un evento che attiva l'animazione. Si può scegliere tra Finestra superiore, Finestra centrale e Finestra inferiore.

Il trigger Finestra in basso è impostato come predefinito; l'animazione inizierà non appena l'immagine attraverserà la parte inferiore del browser.

Offset dell'innesco è la distanza in pixel dal trigger selezionato che avvia l'animazione.

Ciclo di animazione è un parametro che controlla la ripetizione dell'animazione in perpetuo.

È possibile testare l'animazione con l'aiuto del pulsante Riproduci elemento / Riproduci tutto. Questa opzione è disponibile per tutti i tipi di animazione, tranne che per l'animazione a scorrimento.

Per comodità, si possono utilizzare due schede del browser: una per la modifica in Zero Block e l'altra per aprire l'anteprima della pagina. In questo modo è possibile controllare il risultato senza lasciare Zero Block. Assicurarsi di salvare tutte le modifiche e di aggiornare la pagina di anteprima prima di testare la pagina web.

Quando si sceglie l'animazione passo-passo, è possibile aggiungere passi e personalizzare le proprietà di ogni passo che attiveranno cambiamenti nei parametri di ogni elemento selezionato sulla pagina web. Create una traiettoria e i movimenti dei vostri elementi sulla pagina in base a una serie di passi.

Per modificare lo stato iniziale di un elemento, ad esempio se si desidera che sia invisibile all'inizio, impostare l'opacità a zero e la durata a 0 secondi o 0 pixel (per l'animazione a scorrimento).

Con l'aiuto delle impostazioni dei passi, è possibile modificare le proprietà dell'elemento che si sta animando.

È possibile impostare la posizione (Sposta), la dimensione (Scala), la trasparenza (Opacità) e l'angolo di rotazione (Scala).

Scorrimento in parallasse. Quando si applica questa animazione a un elemento, la velocità con cui si muove sarà diversa da quella degli altri elementi durante lo scorrimento della pagina. È possibile impostare la velocità del movimento nelle impostazioni della pagina: a una velocità bassa, da 0 a 100, l'elemento si muoverà più lentamente dello scorrimento, a una velocità alta, da 100 a 200, si muoverà molto più velocemente.

Parallasse quando si sposta il puntatore del mouse. Un elemento con questo tipo di animazione si muove in direzione opposta rispetto al movimento del puntatore. L'area del movimento verticale o orizzontale viene impostata nelle impostazioni della pagina.

Questo tipo di animazione consente di fissare gli elementi durante lo scorrimento. Nelle impostazioni, è possibile specificare la distanza entro la quale l'elemento rimarrà fisso in un punto (questo è sempre all'interno del blocco). La distanza è fissata in pixel. Dopo uno scorrimento alla distanza specificata, l'elemento non è più fisso e continuerà a scorrere insieme alla pagina.

È possibile impostare i trigger di scorrimento nelle impostazioni: in alto, in basso o al centro della finestra. L'offset del trigger consente di controllare il margine tra il bordo della finestra e l'elemento. È utile anche quando si desidera fissare più elementi contemporaneamente a una certa distanza l'uno dall'altro.

Se si sta creando un blocco da zero, vale la pena di progettare prima l'intera pagina per vedere come questo blocco si confronta con gli altri. Una volta fatto questo, non dimenticate di configurare le impostazioni di adattabilità. Se state traducendo un testo in Zero Block e lo state semplicemente cambiando, verificate che funzioni in Zero Block anche se nella prima schermata sembra tutto a posto. A causa delle diverse dimensioni dei caratteri e della lunghezza della linea, il testo può apparire diverso su altri schermi.

Se si desidera che due elementi rimangano nella stessa posizione l'uno rispetto all'altro, impostare il posizionamento degli elementi come Contenitore griglia o Contenitore finestra.

Se si posiziona il testo rispetto alla griglia e si vuole che rimanga sempre all'interno dello schermo, bisogna fare attenzione che il suo contenitore non superi l'area della griglia. Creare un layout ordinato è una buona abitudine; in questo modo si eviteranno spiacevoli sorprese al momento della pubblicazione del blocco.