Zero Block: Come creare un blocco personalizzato

Per aggiungere un Zero Block alla pagina, fare clic su Zero in fondo alla pagina. Si trova anche in fondo alla Libreria dei blocchi, proprio sotto la categoria "Altro".

Il sito Zero Block mantiene tutte le caratteristiche dei normali blocchi: può essere copiato, rimosso, cancellato e nascosto. Ha le impostazioni, ma invece di un pulsante "Contenuto", ha un pulsante "Editor blocchi". Se si desidera modificare il blocco, fare clic su di esso e si aprirà l'Editor blocchi.

Zero Block ha due spazi di lavoro, o contenitori: il Grid Container e il Window Container, che indicano i confini dello schermo del browser.

Il Grid Container supporta la stessa griglia di Tilda- 12colonne (1200 px). Se si allineano gli oggetti alla griglia e si posizionano gli elementi all'interno del Grid Container, questi rimarranno sempre all'interno dei confini di 12 colonne, indipendentemente dalle dimensioni dello schermo.

Fare clic sul pulsante più nell'angolo superiore sinistro dell'Editor blocchi per aggiungere un elemento alla pagina. È possibile aggiungere un testo, un'immagine, una forma, un pulsante, un video, un suggerimento, un HTML, un modulo, una galleria o un vettore.

Zero Block supporta tutte le manipolazioni di base del mouse: gli elementi possono essere spostati, ridimensionati, copiati (tenendo premuto il tasto Alt) e possono essere selezionati più elementi.

È possibile ridimensionare un elemento immagine senza modificarne le proporzioni.

L'altezza degli elementi di testo cambia automaticamente in base al volume del testo.

Le dimensioni dei pulsanti e delle forme possono essere modificate in tutte le direzioni.

Quando si selezionano più elementi, questi possono essere allineati orizzontalmente o verticalmente tra loro o al contenitore.

La modifica degli elementi di blocco tramite tastiera accelera notevolmente il processo di lavoro, per cui si consiglia di utilizzare i tasti di scelta rapida.

È possibile accedere all'elenco delle scorciatoie da tastiera anche dal menu contestuale dell'Editor blocchi.

È possibile accedere alle impostazioni complete di qualsiasi elemento facendo clic su Impostazioni nell'angolo inferiore destro dello schermo.

Per impostazione predefinita, il pannello Impostazioni è nascosto per mantenere l'area di lavoro libera.

Utilizzare la riga di pulsanti superiore per allineare rapidamente un elemento in verticale o in orizzontale al contenitore.

Le coordinate dell'elemento sono visualizzate in basso. Possono essere indicate in pixel o in percentuale. Di seguito esaminiamo questa funzione in dettaglio.

L'origine è indicata con una croce blu.

È possibile visualizzare anche i parametri dell'elemento: larghezza e altezza, misurate in pixel.

Quando si carica un'immagine, questa assume le dimensioni della cornice in cui viene caricata. Fare clic su Dimensioni originali nel pannello Impostazioni dell'elemento per ripristinare le dimensioni originali dell'immagine.

Se si desidera ritagliare l'immagine a forma di cerchio, impostare il raggio di arrotondamento.

Per ottenere un cerchio uniforme, l'immagine originale deve essere di forma quadrata e il raggio di arrotondamento deve essere pari alla metà del lato. Ad esempio, se le dimensioni dell'immagine sono 100×100 px, impostare un raggio di arrotondamento pari a 50.

È possibile aggiungere un'ombra all'immagine. A tale scopo, selezionare il colore dell'ombra, l'opacità, l'offset x e y, il grado di sfocatura e di diffusione nel pannello Impostazioni dell'elemento.

Ogni immagine può avere un testo alternativo (tag alt). I motori di ricerca interpretano il testo alternativo come parole chiave e lo utilizzano per indicizzare la pagina, quindi assicuratevi che il testo alternativo sia pertinente al contenuto del vostro sito web in generale e rifletta il contenuto dell'immagine.

Qualsiasi immagine può essere trasformata in un link, in modo che quando l'utente fa clic su di essa venga portato a un'altra pagina. Accedere al pannello Impostazioni dell'elemento e specificare il collegamento e se deve essere aperto nella stessa finestra o in una nuova.

Quando si aggiunge una forma, sulla pagina appare un quadrato, che può essere trasformato in un rettangolo, un cerchio o una linea.

Rettangolo: modificare la lunghezza dei lati trascinando i punti di controllo.

Oppure specificare i valori nelle impostazioni dell'elemento.

Cerchio. Per creare un cerchio, impostare un raggio di arrotondamento pari alla metà della lunghezza del lato del quadrato.

Linea. Impostate l'altezza del rettangolo a 1-5 px nelle impostazioni dell'elemento; in questo modo creerete una linea.

Alle forme possono essere assegnati un'ombra, un bordo e un collegamento.

È possibile modificare le dimensioni, il colore e il raggio di arrotondamento del pulsante. È inoltre possibile aggiungere un'ombra e un bordo.

È possibile impostare la didascalia e il collegamento del pulsante nel pannello Impostazioni dell'elemento. Qui si possono anche impostare le dimensioni, il tipo, l'opacità e il colore del carattere.

È possibile impostare il comportamento del pulsante. Ad esempio, il colore di sfondo, il colore del testo e il colore del bordo cambiano quando si passa sopra il pulsante.

Il tooltip è un elemento di blocco interattivo che visualizza un suggerimento di testo e/o un'immagine quando si passa il puntatore su di esso.

È possibile regolare il colore, l'ombra e le dimensioni del tooltip, impostare l'icona visualizzata all'interno del cerchio, caricare l'immagine che apparirà quando si passa il puntatore su di esso e creare un'animazione.

Assicurarsi di controllare la posizione del tooltip su tutte le risoluzioni dello schermo dopo aver disposto gli elementi nel blocco, in modo che il tooltip non venga tagliato ai bordi del blocco.

È possibile aggiungere un modulo orizzontale o verticale a un sito Zero Block. Si avrà accesso a tutte le impostazioni di base del modulo, come l'aggiunta di campi di input, la connessione di servizi di acquisizione dati, l'impostazione di messaggi di successo e di errore, la modifica del design e la creazione di un'animazione.

Per modificare i campi di input, accedere al pannello Impostazioni dell'elemento e fare clic su Campi di input. Qui è possibile personalizzare i campi di input come in un normale blocco di moduli.

Per collegare i servizi di acquisizione dati al modulo, accedere al pannello Impostazioni dell'elemento e fare clic su Servizi. È possibile collegare i servizi di acquisizione dati al modulo.

In Zero Block, è possibile aggiungere una galleria di immagini. È possibile modificare la larghezza e l'altezza della galleria come per l'elemento Shape.

Controlliamo le impostazioni della galleria:

Stretch: Ha due parametri: Cover e Contain.

Per Cover, le immagini riempiranno completamente l'area della galleria, quindi potrebbero essere ritagliate se il loro formato è diverso da quello della galleria.

Per Contain, le immagini della galleria saranno nel loro formato originale, quindi non saranno ritagliate su gallerie di qualsiasi formato.

Position. Definisce la posizione dell'immagine rispetto all'area della galleria. Ad esempio, se si seleziona il parametro Sinistra in alto, l'immagine sarà posizionata rispetto all'angolo superiore sinistro della galleria.

Loop. Questa impostazione consente di riprodurre in loop le diapositive (immagini) della galleria. Ha due parametri: Loop e None.

Per Loop, le diapositive della galleria vengono fatte scorrere all'infinito, cioè la prima diapositiva appare dopo l'ultima.

Per l'opzione None, non c'è loop e la galleria si ferma all'ultima diapositiva.

Slide Speed definisce il tipo di animazione per il cambio delle diapositive. Ha tre parametri: Nessuna, Lenta e Veloce.

Per l'opzione Nessuna, non viene utilizzata alcuna animazione quando si cambia diapositiva.

Per l'opzione Lenta, le diapositive vengono cambiate lentamente.

Per l'opzione Veloce, le diapositive vengono cambiate velocemente.

Autoplay definisce la velocità del cambio automatico delle diapositive in secondi.
Se non si è specificato il valore in secondi, non c'è il cambio automatico delle diapositive.

L'opzione Zoomabile consente di ingrandire le immagini della galleria al clic. Ha due parametri: Zoom al clic e Nessuno.

Per Zoom al clic, le immagini vengono ingrandite al clic.

Per l'opzione Nessuno, le immagini non vengono ingrandite al clic.

La scheda Frecce include le impostazioni che definiscono l'aspetto delle frecce (pulsanti).

La scheda Puntini include le impostazioni che definiscono l'aspetto dei puntini sotto la galleria. I punti visualizzano il numero di diapositive.

Ogni diapositiva (immagine) ha le proprie impostazioni:

Qui è possibile aggiungere una didascalia all'immagine, un tag Alt per la SEO, includere un video di YouTube o Vimeo, nonché un link a cui saltare quando si fa clic su questa diapositiva.

Tilda supporta il responsive design per tutti i tipi di schermo di base:
1200-max (desktop)
980-1200 (tablet orizzontale)
640-980 (tablet verticale)
480-640 (smartphone orizzontale)
320-480 (smartphone verticale)

Questo è sufficiente per visualizzare correttamente il progetto su tutti i dispositivi.

Dopo aver personalizzato un Zero Block artboard principale, cambiare i tipi di schermo e apportare le modifiche necessarie, come la larghezza della colonna di testo, la dimensione dell'immagine, la dimensione del carattere, l'altezza dell'artboard o il layout degli elementi.

Le impostazioni modificate per un determinato tipo di schermo sono evidenziate. Le impostazioni che rispecchiano quelle di un altro tipo di schermo sono in grigio. In questo modo è facile vedere quali impostazioni sono state modificate.

Nell'esempio seguente, l'elemento testo ha tutte le impostazioni in grigio. Ciò significa che per il tipo di schermo corrente sono uguali a quelle del tipo precedente.

Se si modificano le dimensioni dei caratteri e le coordinate degli elementi per un determinato tipo di schermo, i valori non saranno più colorati in grigio. Ciò significa che le nuove impostazioni sono uniche per questo tipo di schermo.

Se si fa clic su uno spazio vuoto, vengono visualizzate le impostazioni della tavola d'artista.

È possibile specificare l'altezza del contenitore della griglia in pixel utilizzando la tastiera. È possibile modificare il valore trascinando il bordo del contenitore. La larghezza del Contenitore griglia è fissa a 1200px.

È possibile personalizzare il colore di sfondo dell'intero blocco nelle Impostazioni Artboard.

È possibile caricare un'immagine di sfondo per l'intero blocco nelle Impostazioni Artboard.

È inoltre possibile personalizzare il rendering dell'immagine di sfondo (Inizio filtro/Fine filtro) e il comportamento del contenuto rispetto all'immagine di sfondo: Se si imposta il valore "Fisso", il contenuto (testo e forme) si sposterà durante lo scorrimento, mentre l'immagine rimarrà al suo posto.

Per visualizzare un blocco facendo clic su un pulsante o su un link, aggiungere il blocco con modificatore T1093 dalla categoria "Altro".

Nella scheda Contenuto del blocco, specificare l'ID di Zero Block desiderato (o sceglierlo manualmente facendo clic sul link "Scegli Zero Block"). Per impostazione predefinita, il link al pop-up è il link #zeropopup; è possibile cambiarlo con un nome a piacere, ma si dovrebbe mantenere il segno di hash all'inizio. Il blocco funzionerà come un normale pop-up e sarà nascosto nella pagina.

Per saperne di più sul funzionamento dei blocchi pop-up, consultare l'articolo "Pop-up".

Nelle impostazioni del blocco T1093, è possibile selezionare i parametri per lo sfondo (colore, opacità), il colore dell'icona di chiusura, la velocità di animazione,
il proprio indice Z e altri parametri.