Scrivere sulla pagina e aggiungere blocchi

Scrivere direttamente

Fai clic in un testo e digita: tutto qui. Quando selezioni un passaggio, compare una piccola barra per metterlo in grassetto, in corsivo, barrarlo, aggiungere un link, e un pulsante ✨ per ritoccarlo con l’IA. Nel pannello di destra, la scheda Blocco propone anche i titoli, gli elenchi, la citazione e l’allineamento.

In questa barra, l’elenco Stile del testo trasforma il paragrafo in cui si trova il cursore: Testo, Titolo da 1 a 4, Occhiello (una breve riga sopra un titolo) o Sommario (un paragrafo introduttivo, più grande). Ogni scelta è mostrata così come apparirà.

La scelta del link propone una pagina, una sezione, un indirizzo e-mail o un altro sito, e anche un articolo del blog, un prodotto o una collezione del negozio (schede Articolo, Prodotto e Collezione). Il link segue l’articolo in ogni lingua del sito e viene rimosso in modo pulito se l’articolo non è più pubblicato.

Nella scheda Esterno è accettato un indirizzo del tuo sito che inizia con «/» (per esempio /boutique/ma-collection/): viene messo nella lingua giusta alla pubblicazione.

Mettere in risalto le parole di un titolo

In un titolo grande (Titolo 1, Titolo 2 o il titolo di un blocco Hero), seleziona una o due parole e clicca su Corsivo: assumono l’accento dello stile del tuo sito. A seconda dello stile, è un altro colore, un font d’accento, a volte una sfumatura, e le parole non sono sempre inclinate.

È il modo giusto per colorare una parola: l’accento segue lo stile se lo cambi, si adatta da solo alla modalità chiara e a quella scura, e resta leggibile. Un colore scelto a mano non farebbe nulla di tutto questo.

Aggiungere un blocco con il tasto «/»

1. Posiziona il cursore su una riga vuota.
2. Digita /: si apre il menu dei comandi, ordinato per categorie (Sezione, Testo, Media, Contenuto, Azione).
3. Digita qualche lettera per filtrare («gal» per Galleria), poi conferma.

Puoi anche fare clic su Inserisci un oggetto… nella scheda Blocco del pannello di destra.

I blocchi principali

• Testo e impaginazione: titoli, elenchi, citazione, Riquadro, Colonne (da 2 a 4 zone affiancate), Separatore, Spaziatore, Tabella, Indice.
• Media: Immagine, Galleria, Media (video, audio o contenuti YouTube, Vimeo, SoundCloud, Spotify…), Prima / dopo, Incorpora (una webcam, un calendario, un widget di recensioni… tramite il suo indirizzo o il suo codice HTML).
• Presentare la tua attività: Hero (banner con titolo e pulsanti), Funzionalità, Griglia di schede, Team, Testimonianze, Cifre chiave, Cronologia, Scheda tecnica, Racconto a scorrimento, Striscia scorrevole, Nuvola di loghi.
• Prezzi: Piani tariffari (schede delle formule, con all’occorrenza un Prezzo barrato e una Nota sotto il prezzo) e Listino prezzi (un elenco di prestazioni e prezzi per categoria, come il menu di un ristorante).
• Interagire: Pulsante CTA, Modulo, FAQ, Mappa, Social network, Newsletter, Prenotazione, Commenti / Recensioni.
• Mettere in evidenza: Prodotti del negozio e Articoli del blog.

Il blocco Immagine propone cinque dimensioni: XS (al massimo 150 px, per un logo o un badge), S, M, L e 100%.

Gli articoli del blog e della documentazione offrono gli stessi blocchi delle pagine, con gli stessi gesti. Il blocco Commenti / Recensioni, invece, è proposto solo negli articoli del blog.

I link dell’Hero e del Team

In un blocco Hero, fai clic sul blocco: il pannello a destra imposta il testo e la destinazione di ogni pulsante, con il solito selettore di link (una pagina, una sezione, un indirizzo e-mail, un altro sito…).

In un blocco Team, ogni membro ha il campo Pagina del membro: la foto e il nome portano allora alla sua pagina, a una sezione o a un altro sito.

L’impostazione Dimensione foto del blocco Team va da S a XL. Un membro senza foto è rappresentato dalle sue iniziali, che seguono il suo nome. Scegli Nessuna per un comitato o un elenco di contatti presentati solo con nome e ruolo, senza foto né iniziali.

Il blocco Mappa

Il blocco Mappa colloca una mappa all’indirizzo che scegli. Il suo Fornitore è OpenStreetMap o Google Maps. Con Google Maps, Tipo di mappa sceglie tra Mappa e Satellite (la vista aerea, con i nomi delle vie): sono le due viste che Google offre senza chiave.

La griglia di schede

Clicca su un blocco Griglia di schede: il pannello di destra elenca le sue schede. Apri una scheda per modificarne titolo, testo, meta, prezzo e testo del pulsante; così anche una scheda aggiunta può avere un pulsante. Il campo Link della scheda sceglie dove porta. Puoi anche cliccare sul testo di una scheda, direttamente nella pagina.

Il link di una scheda si sceglie come gli altri link di TOWeb: una pagina del sito, un articolo, un prodotto, una collezione del negozio, un file o un indirizzo esterno. L’impostazione Allineamento del testo centra il testo delle schede.

Quando ci sono meno schede che colonne, un’indicazione sotto Colonne ti dice quante schede aggiungere per riempire la fila.

Il blocco Piani tariffari

Fai clic su un blocco Piani tariffari: il pannello di destra elenca i suoi piani. L’impostazione Pulsante colloca il pulsante di ogni piano Sotto il prezzo, alla stessa altezza su tutte le schede, perché resti visibile senza scorrere, oppure In fondo alla scheda.

Nelle Funzionalità di un piano, ogni punto può avere un link: fai clic sull’icona Link del punto, poi scegli una pagina del sito, un’ancora o un indirizzo esterno. Con un Testo del link («Guarda la demo», per esempio), appare come piccolo link dopo il testo del punto; senza testo del link, è l’intero punto a diventare il link.

Modificare, spostare, eliminare

Fai clic su un blocco: le sue impostazioni compaiono nella scheda Blocco del pannello di destra. La maniglia a sinistra del blocco si trascina per spostarlo; un clic su di essa apre il menu Sposta su, Sposta giù, Duplica, Elimina.

Anche i titoli e i paragrafi hanno la loro maniglia ⋮⋮, che compare al passaggio del mouse: trascinala per spostare il testo altrove nella pagina, oppure cliccaci sopra per aprire lo stesso menu. Un blocco Colonne ha la sua quando passi sopra il suo testo. Il testo di una colonna, di una tabella o di un riquadro non ne ha: a spostarsi è il blocco che lo contiene.

Per disfare un blocco Colonne, fai clic su di esso, poi su Rimuovi le colonne nelle sue impostazioni: il contenuto delle colonne viene conservato, uno sotto l’altro, a tutta larghezza, e una colonna vuota scompare.

L'indice di una pagina

Il blocco Indice elenca i titoli di una pagina, di un articolo del blog o di un articolo della documentazione, con un link a ciascuno. Digita / e poi «indice» o «sommario», oppure aggiungilo dalla scheda Aggiungi.

Si crea da solo a partire dai titoli che lo seguono: imposta Titoli elencati su H2 e H3 o Solo H2. Si aggiorna a ogni pubblicazione e appare nella lingua di ogni pagina, con gli stessi link in tutte le lingue. Se lasci vuoto il suo Titolo, diventa «Indice», tradotto anch'esso. Sullo smartphone resta chiuso finché non lo tocchi.

Nell'editor, la sua scheda mostra i titoli attuali. Finché nessun titolo lo segue, resta vuoto e non appare sul sito.

Il modulo di contatto

Digita / e scegli Modulo. Fai clic sul blocco: le sue impostazioni compaiono nella scheda Blocco del pannello di destra.

Per dividere il modulo in gruppi («I tuoi dati», «Il tuo progetto»), aggiungi un campo di tipo Titolo: un testo fisso che non chiede nulla al visitatore.

• Campi: aggiungili uno alla volta (testo, e-mail, telefono, area di testo, elenco a discesa, scelta singola, casella di controllo, data, file) e indica se sono obbligatori.
• Link dell'etichetta: su una casella di spunta, l’etichetta porta a un documento, ad esempio le condizioni generali. Si apre in una nuova scheda, senza perdere il modulo in corso.
• Testo del pulsante: ciò che mostra il pulsante di invio.
• Dopo l'invio: Mostra un messaggio (il Messaggio di conferma compare al posto del modulo) o Vai a una pagina: una volta inviato il messaggio, il visitatore arriva sulla pagina scelta, nella sua lingua.
• Oggetto dell'e-mail: proprio di ogni modulo, fa da oggetto dei messaggi ricevuti quando il visitatore non ne ha inserito uno, per ordinarli a colpo d’occhio («Preventivo», «Iscrizione»…).

In un campo Elenco a discesa o Scelta singola, le frecce Sposta l’opzione in su e Sposta l’opzione in giù cambiano l’ordine delle opzioni, con il mouse come con la tastiera.

I messaggi arrivano all’indirizzo di ricezione dei moduli, impostato una sola volta per tutto il sito in Impostazioni › i-Services. Per far scrivere un modulo a un altro indirizzo, compili il suo E-mail del destinatario nelle impostazioni del blocco.

E-mail del destinatario accetta più indirizzi, separati da una virgola: ognuno riceve la propria e-mail.

Sul sito pubblicato, sotto un campo e-mail (modulo di contatto, newsletter, ordine, prenotazione), un errore di battitura nell’indirizzo di un grande servizio di webmail (gmail.vom, hotmial.com…) viene segnalato al visitatore con «Intendevi …?»: un clic lo corregge. L’indirizzo digitato resta sempre accettato così com’è.

Proteggere i tuoi moduli dallo spam

In Impostazioni › i-Services, la sezione Protezione antispam protegge i moduli di contatto, i commenti del blog e le recensioni dei prodotti. Scegli il Fornitore CAPTCHA (Cloudflare Turnstile o Google reCAPTCHA), poi incolla la Chiave del sito e la Chiave segreta che questo fornitore ti ha dato.

Alla pubblicazione, TOWeb verifica presso Google o Cloudflare che la chiave segreta sia accettata: una chiave rifiutata lascerebbe passare lo spam senza dire nulla. La schermata Pubblica lo segnala, indicando dove correggere la chiave. Segnala anche una protezione configurata a metà, quando manca la chiave del sito o la chiave segreta. Senza connessione, la pubblicazione parte senza attendere.

Sul sito pubblicato, il server del sito verifica ogni invio. Con reCAPTCHA v3, un invio che Google giudica automatico viene rifiutato; se Google non risponde, l’invio viene accettato, perché nessun messaggio dei tuoi clienti vada perso. Con Turnstile, una convalida ottenuta su un altro sito viene rifiutata.

Su una pagina protetta da password, un modulo non mostra il captcha: solo i visitatori che hanno inserito la password possono inviarlo.

Il sito limita anche gli invii di massa, anche quando un robot invia tutte le sue richieste insieme. L’e-mail di ricevuta inviata al visitatore ricopia il suo messaggio solo se il sito ha una protezione antispam: senza di essa, un robot potrebbe usare il tuo sito per inviare e-mail a terzi.

L’iscrizione alla newsletter

Con il blocco Newsletter, il visitatore che inserisce il suo indirizzo riceve un’e-mail di conferma. Il suo link apre una pagina del tuo sito con il pulsante Conferma la mia iscrizione: solo quel pulsante iscrive l’indirizzo. Un antivirus di posta che apre i link delle e-mail ricevute non può quindi confermare un’iscrizione al posto della persona.

Incorporare un servizio esterno

Una webcam, un calendario online, un widget di recensioni, le previsioni meteo, un modulo di un altro servizio: il blocco Incorpora li colloca in qualsiasi punto delle tue pagine.

1. Su una riga vuota, digita / e poi Incorpora.
2. Nel pannello a destra, scegli cosa incorporare: Un indirizzo (la pagina del servizio, mostrata in un riquadro di cui imposti l’altezza) o Un codice HTML (il codice che il servizio ti fornisce, da copiare e incollare così com’è).
3. Descrivi in poche parole Cosa mostra l’incorporamento: è ciò che leggono gli screen reader.
4. Apri l’Anteprima per vedere il risultato: nell’editor, il blocco appare come una scheda.

In modalità Un codice HTML, il codice si scrive direttamente nel blocco, a colori, e la scheda Anteprima mostra il risultato. Il codice può arrivare a 1 MB, per i servizi che forniscono un codice lungo.

Se il servizio deposita cookie o traccia i tuoi visitatori, scegli la sua categoria in Consenso del visitatore: Misurazione del pubblico o Marketing e social network. Il blocco attende allora che il visitatore accetti questa categoria nel banner dei cookie; fino ad allora, un messaggio ne tiene il posto, con un link per gestire i cookie. Funziona sia con il banner di TOWeb sia con quello di WebLegal.

Il codice può contenere anche PHP, come una pagina .php di TOWeb 14: la pagina che lo contiene viene pubblicata come index.php, allo stesso indirizzo. Prima della pubblicazione, TOWeb verifica la sintassi del codice: un errore interrompe la pubblicazione indicando la pagina e la riga. Il codice viene eseguito sul tuo hosting, sotto la tua responsabilità, e nel test locale; nell'anteprima, un riquadro ne tiene il posto. Non viene pubblicato in una pagina protetta da password. Per verificare che il tuo hosting esegua PHP, usa Pubblica › Verifica il server.

Copiare o duplicare un passaggio

Un titolo, il suo testo e un’immagine si copiano insieme, come in un programma di videoscrittura:

1. Seleziona il passaggio con il mouse, dall’inizio del titolo alla fine dell’ultimo elemento. Puoi anche fare clic all’inizio, poi Maiusc + clic alla fine.
2. Copia: ⌘C (Mac) o Ctrl+C (Windows).
3. Fai clic alla fine della riga dopo la quale mettere la copia, poi premi Invio: si crea una riga vuota.
4. Incolla: ⌘V (Mac) o Ctrl+V (Windows).

Per riprodurre un’intera sezione, con il suo sfondo e tutto il suo contenuto, usa invece Duplica nei suoi comandi: vedi l’articolo Le sezioni.

Mostrare un blocco in base allo schermo

In fondo al pannello di ogni blocco, Mostra su sceglie gli schermi in cui compare: Desktop, Tablet e Mobile. Un blocco disattivato per uno schermo non vi compare sul sito pubblicato, ma resta visibile nell’editor con un’etichetta. L’anteprima per dispositivo mostra il risultato.