Zero Block: come creare un blocco personalizzato

Per aggiungere uno Zero Block alla pagina, fai clic su Zero in fondo alla pagina. Puoi anche trovarlo nella parte inferiore della libreria a blocchi, proprio sotto la categoria "Altro".

Un Zero Block mantiene tutte le normali funzionalità di blocco: può essere copiato, rimosso, eliminato e nascosto. Ha delle impostazioni, ma invece di un pulsante "Contenuto", ha un pulsante "Editor a blocchi". Fare clic su di esso se si desidera modificare il blocco e si aprirà l'Editor blocchi.

Un blocco zero ha due aree di lavoro, o contenitori: il contenitore griglia e il contenitore finestra, che indicano i limiti di una schermata del browser.

Il contenitore Griglia supporta la stessa griglia di Tilda: 12 colonne (1200 px). Se si allineano gli oggetti alla griglia e si individuano gli elementi all'interno del contenitore della griglia, questi rimarranno sempre entro i limiti di 12 colonne, indipendentemente dalle dimensioni dello schermo.

Fai clic sul pulsante più nell'angolo in alto a sinistra dell'Editor blocchi per aggiungere un elemento alla pagina. Puoi aggiungere un testo, un'immagine, una forma, un pulsante, un video, una descrizione comando, un codice HTML, un modulo o una galleria.

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

È possibile ridimensionare un elemento immagine senza modificarne le proporzioni.

L'altezza degli elementi di testo cambia automaticamente a seconda del volume del testo.

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

Quando vengono selezionati diversi elementi, possono essere allineati orizzontalmente o verticalmente tra loro o al contenitore.

La modifica di elementi di blocco utilizzando una tastiera velocizza notevolmente il processo di lavoro, motivo per cui si consiglia di utilizzare i tasti di scelta rapida.

È inoltre possibile accedere all'elenco delle scorciatoie da tastiera dal menu di scelta rapida nell'Editor blocchi.

Puoi accedere alle impostazioni complete di qualsiasi elemento facendo clic su Impostazioni nell'angolo in basso a destra dello schermo.

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

Usa la fila di pulsanti superiore per allineare rapidamente un elemento verticalmente o orizzontalmente al contenitore.

Puoi vedere le coordinate dell'elemento qui sotto. Possono essere dati in pixel o in percentuale. Di seguito stiamo esaminando questa funzione in dettaglio.

L'origine è indicata con una croce blu.

Puoi anche visualizzare i parametri dell'elemento: larghezza e altezza, misurati in pixel.

Quando carichi un'immagine, prende le dimensioni del frame in cui è caricata. Fare clic su Dimensioni originali nel pannello Impostazioni dell'elemento per ripristinare le dimensioni originali dell'immagine.

Se vuoi ritagliare l'immagine a forma di cerchio, imposta il raggio di arrotondamento.

Per creare un cerchio uniforme, l'immagine originale dovrebbe essere di forma quadrata e il raggio di arrotondamento dovrebbe essere uguale a metà del lato. Ad esempio, se la dimensione dell'immagine è 100×100 px, imposta un raggio uguale a 50.

Puoi aggiungere un'ombra all'immagine. Per fare ciò, seleziona il colore dell'ombra, l'opacità, l'offset x e y, il grado di sfocatura e diffusione nel pannello Impostazioni dell'elemento.

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

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

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

Rettangolo: cambia le lunghezze dei lati trascinando i punti di controllo.

Oppure specificare i valori nelle impostazioni dell'elemento.

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

Linea. Impostare l'altezza del rettangolo su 1-5 px nelle impostazioni dell'elemento; Quindi, farai una linea.

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

Puoi modificare le dimensioni, il colore e il raggio di arrotondamento del pulsante. Puoi anche aggiungere un'ombra e un bordo.

Puoi impostare la didascalia e il collegamento del pulsante nel pannello Impostazioni dell'elemento. Lì puoi anche impostarne le dimensioni, il tipo, l'opacità e il colore del carattere.

Puoi impostare il comportamento del pulsante. Ad esempio, il colore di sfondo, il colore del testo e il colore del bordo cambieranno quando si passa sopra il pulsante.

Tooltip è un elemento di blocco interattivo che visualizza un suggerimento di testo e/o un'immagine quando ci si passa sopra con il puntatore.

Puoi regolare il colore, l'ombra, le dimensioni del tooltip, impostare l'icona visualizzata all'interno del cerchio, caricare l'immagine che verrà visualizzata quando passi il puntatore su di essa e creare un'animazione.

Assicurati 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 sia tagliato ai bordi del blocco.

È possibile aggiungere un modulo orizzontale o verticale a un blocco zero. Avrai accesso a tutte le impostazioni di base del modulo, come l'aggiunta di campi di input, la connessione dei 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, vai al pannello Impostazioni dell'elemento e fai clic su Campi di input. Qui puoi personalizzare i campi di input come in un normale blocco di moduli.

Per connettere i servizi di acquisizione dati al modulo, vai al pannello Impostazioni dell'elemento e fai clic su Servizi. Lì puoi connettere i servizi di acquisizione dati al modulo.

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

Questo è sufficiente affinché il tuo progetto venga visualizzato correttamente su tutti i dispositivi.

Dopo aver personalizzato un blocco zero sulla tavola da disegno principale, cambia i tipi di schermo e apporta le modifiche necessarie, ad esempio la larghezza della colonna di testo, la dimensione dell'immagine, la dimensione del carattere, l'altezza della tavola da disegno o il layout dell'elemento.

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

Nell'esempio seguente, l'elemento di testo ha tutte le sue impostazioni in grigio. Significa che sono gli stessi per il tipo di schermo corrente e per quello precedente.

Se cambiamo la dimensione del carattere e le coordinate dell'elemento per un dato tipo di schermo, i valori non saranno più colorati in grigio. Significa che le nuove impostazioni sono uniche per questo tipo di schermo.

Se fai clic su uno spazio vuoto, vedrai le Impostazioni della tavola da disegno.

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

Puoi personalizzare il colore di sfondo dell'intero blocco nelle Impostazioni della tavola da disegno.

Puoi caricare un'immagine di sfondo per l'intero blocco nelle Impostazioni della tavola da disegno.

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

Per far apparire un blocco facendo clic su un pulsante o collegamento, aggiungi il blocco modificatore T1093 dalla categoria "Altro".

Nella scheda Contenuto del blocco, specifica l'ID del blocco Zero di cui hai bisogno (o sceglilo manualmente facendo clic sul link "Scegli Zero Block"). Per impostazione predefinita, il collegamento al pop-up è il collegamento #zeropopup, puoi cambiarlo per qualsiasi nome che desideri, ma dovresti mantenere il cancelletto all'inizio. Quindi il blocco funzionerà come un normale pop-up e sarà nascosto nella pagina.

Per saperne di più su come funzionano i blocchi pop-up, leggi 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à dell'animazione,
il tuo Z-index e altri parametri.