Aggiungere e spostare sezioni e trascinare le misure

Modulo 3: Testi, foto e sezioni · Tempo di lettura: 10 minuti

Obiettivo della lezione: Dopo questa lezione Lei saprà costruire una pagina a partire dalle sezioni: aggiungere una sezione dal selettore o dalla chat, spostarla, copiarla ed eliminarla, trascinare spazi e misure e scegliere per ogni sezione colonne, angoli, sfondo e visibilità su mobile.

Concetti chiave: sezione, Elementi, Aggiungi elemento, forma, Sezione qui sotto, tre design, Crea con l'IA, Modifica sezione, Spaziatura, Spazio tra gli elementi, Colonne, Angoli, Nascondi su mobile, maniglia, HTML personalizzato

Una pagina è una pila di sezioni

Ogni pagina del Suo sito è composta da sezioni: fasce orizzontali disposte una sotto l'altra. In cima di solito c'è un Hero (la grande apertura con titolo, testo e pulsante), sotto per esempio delle Schede con i Suoi servizi, le Recensioni, gli Orari di apertura e in fondo Contatti. Il costruttore offre 35 tipi di sezione, ognuno in una o più forme: lo stesso contenuto, impaginato in modo diverso.

Chi ragiona così costruisce una pagina migliore. Metta in cima le informazioni più importanti, un argomento per sezione, e concluda con ciò che il visitatore deve fare (telefonare, scrivere un'e-mail, richiedere un preventivo). Per Schildersbedrijf Example la homepage è così: Hero con "Richieda un preventivo", Schede con tre servizi, Foto e testo sul metodo di lavoro, Recensioni, Domande e Contatti.

Aggiungere una sezione: tre strade

1. Scegliere da sé nel selettore (gratis)

Apra il pannello Elementi nella barra laterale, oppure clicchi nell'anteprima su Sezione qui sotto: questo pulsante si trova nella barra degli strumenti di una sezione selezionata e sulla linea con il + che compare quando passa con il mouse tra due sezioni. Sotto l'anteprima c'è anche Aggiungi elemento.

Il selettore mostra i tipi in gruppi: Più usate, Apertura e titolo, Testo e storia, Servizi e prodotti, Prezzi e offerte, Fiducia e team, Foto e video, Informazioni pratiche, Contatto e invito all'azione e Personalizzato e widget. C'è una casella di ricerca ("Cerca, per esempio recensioni, prezzi o team"). Ogni tipo viene mostrato come anteprima nella Sua immagine coordinata. Clicchi su un tipo per vederne le forme e ne scelga una con Aggiungi. Se non è arrivato al selettore da una sezione precisa, il costruttore chiede "Dove deve andare ...?": clicchi su una linea verde nella pagina, oppure scelga In cima o In fondo. Può anche trascinare un elemento direttamente dal pannello alla pagina.

Questo non costa nulla. La nuova sezione arriva con dei testi di esempio che poi modifica Lei stesso (lezione 3.2) o fa compilare all'IA (lezione 3.1). Importante: finché sul Suo sito c'è ancora un testo di esempio di questo tipo, il costruttore non pubblica il sito. In quel caso compare "Sul suo sito c'è ancora del testo di esempio. Lo compili prima o rimuova la sezione."

2. Chiedere in chat: tre design

Se scrive in chat "Vorrei una sezione con il nostro metodo di lavoro in quattro passaggi", l'IA Le mostra prima tre design adatti presi dalla libreria delle sezioni, nella Sua immagine coordinata. Lei sceglie con Questo design, oppure clicca su Lascia scegliere all'IA. Poi l'IA riempie la sezione di contenuti, come proposta. Poiché si aggiunge una sezione, costa 2 elaborazioni.

Se dice che qualcosa va inserito in una sezione esistente ("metti gli orari di apertura nel blocco dei contatti"), oppure nomina un servizio come Spotify o Calendly con un link, il costruttore salta i tre design: in quel caso è chiaro che cosa vuole.

3. Far creare un elemento su misura

Non trova ciò che cerca? In cima al selettore c'è Crei la sua sezione con l'IA. Descriva che cosa devono poter fare i visitatori, per esempio un calcolatore di prezzi o un breve quiz, e clicchi su Crea con l'IA. Costa 2 elaborazioni, perché si aggiunge un nuovo elemento.

Spostare, copiare ed eliminare

Passi con il mouse su una sezione. Compare una barra degli strumenti con Modifica con l'IA, Sposta su, Sposta giù, Duplica, Sezione qui sotto ed Elimina, e una maniglia per trascinare la sezione ("Trascini questa sezione in un altro punto"). Con Elimina il costruttore chiede prima "Sicuro?". Anche i singoli elementi all'interno di una fila, come una scheda o una recensione, si possono trascinare, duplicare ed eliminare.

Tutti questi pulsanti sono gratuiti. Ogni azione crea una nuova versione ("Sezione spostata (versione ...)"), quindi una sezione eliminata per errore si recupera da Versioni (lezione 3.5). Eliminare con una richiesta in chat invece costa un'elaborazione: usi quindi il pulsante.

Trascinare le misure

Passi con il mouse nell'anteprima su una sezione, una foto o un testo e compariranno delle maniglie. Trascinare è gratuito e non usa l'IA:

• Bordo inferiore di una sezione: più o meno spazio sopra e sotto la sezione.
• Hero: renderlo più alto o più basso.
• Foto: più larga o più stretta, più alta o più bassa (la forma), angoli più arrotondati o più dritti, e il punto focale (lezione 3.3).
• Blocco di testo: più largo o più stretto (bordo destro).
• Titolo: più grande o più piccolo, e lo spazio sotto.
• Fila di schede o colonne: la larghezza dell'intera fila.

Faccia doppio clic su una maniglia e torna la misura predefinita; per l'hero il costruttore sceglie di nuovo da sé l'altezza.

Perché trascinare è meglio che chiedere "ingrandiscilo": vede subito che cosa succede, non costa nulla e l'IA non modifica i testi strada facendo.

Modifica sezione: le impostazioni di una singola sezione

Clicchi su una sezione e scelga Modifica sezione. Si apre una finestra con:

Sotto trova gli stessi pulsanti della barra degli strumenti (Sposta su, Sposta giù, Duplica, Sezione qui sotto, Elimina) e, sotto "Oppure chieda qualcos'altro all'IA:", una casella di testo per una richiesta all'IA che riguarda solo questa sezione.

Qualche consiglio. Alterni gli sfondi (fondo chiaro, nessuno, tinta), così i visitatori vedono dove finisce un argomento. In una fila di schede usi al massimo tre o quattro colonne; su un telefono finiscono comunque una sotto l'altra. Usi con parsimonia Nascondi su mobile: non nasconda mai i Suoi dati di contatto o qualcosa di cui un visitatore da mobile ha bisogno. Se vuole controllare come appare, scelga Mobile nella barra superiore.

HTML personalizzato

Nel gruppo Personalizzato e widget c'è anche HTML personalizzato: una sezione in cui incolla Lei stesso del codice HTML e, se vuole, del CSS. Dopo averla inserita, la modifica con Modifica HTML sulla sezione. Colori e caratteri seguono la Sua immagine coordinata tramite variabili come var(--acc), var(--tekst) e var(--kop-font). Il CSS vale solo per questa sezione.

I limiti sono voluti: script, iframe e moduli qui non funzionano. Per un lettore multimediale, un'agenda, una mappa o un modulo di un altro servizio usi il Widget (lezione 4.3). L'HTML personalizzato è per chi conosce l'HTML; per tutti gli altri le sezioni normali e l'IA sono la strada più rapida.

Errori da evitare

• Lasciare il testo di esempio in una sezione presa dal selettore: in quel caso non può pubblicare il sito.
• Troppe sezioni. Una pagina lunga con dieci sezioni non viene letta. Elimini ciò che non aggiunge nulla. Una pagina può avere al massimo 40 sezioni, ma non ne avrà mai bisogno di così tante.
• Regolare gli spazi tramite la chat. Costa elaborazioni ed è meno preciso del trascinamento.
• Guardare solo sul computer. Colonne, spazi e sezioni nascoste si comportano diversamente su un telefono.
• Eliminare tramite la chat quando il pulsante Elimina è gratuito.

Nel costruttore: come si fa

1. Clicchi nell'anteprima su Sezione qui sotto, oppure apra Elementi.
2. Scelga un gruppo, un tipo e una forma, e clicchi su Aggiungi.
3. Sostituisca i testi di esempio da sé o con l'IA.
4. Sposti con Sposta su, Sposta giù o la maniglia; duplichi o elimini dalla barra degli strumenti.
5. Trascini il bordo inferiore per lo spazio; faccia doppio clic per tornare al valore predefinito.
6. Apra Modifica sezione per sfondo, colonne, angoli, altezza dell'hero e Nascondi su mobile.
7. Controlli su Mobile.

Riepilogo

• Una pagina è una pila di sezioni; 35 tipi, ognuno in una o più forme.
• Aggiungere dal selettore è gratuito e inserisce testi di esempio da sostituire prima di pubblicare; dalla chat riceve tre design e costa 2 elaborazioni.
• Spostare, duplicare, eliminare e trascinare le misure è gratuito; un doppio clic su una maniglia ripristina il valore predefinito.
• Modifica sezione regola sfondo, spaziatura, spazio tra gli elementi, colonne, angoli, altezza dell'hero e Nascondi su mobile.
• L'HTML personalizzato è possibile, ma senza script, iframe e moduli; per quelli c'è il widget.

Quiz

Esercizio

Esercizio D3.4: Una sezione in più, una in meno. Migliori la struttura della Sua homepage con i pulsanti e le maniglie, senza richieste inutili all'IA.

Lista di controllo:

• [ ] annotate le sezioni della Sua homepage dall'alto verso il basso;
• [ ] aggiunta una sezione dal selettore e sostituito tutto il testo di esempio;
• [ ] eliminata o accorpata con Elimina una sezione che non aggiungeva nulla;
• [ ] spostata una sezione con Sposta su, Sposta giù o la maniglia;
• [ ] trascinato lo spazio di almeno una sezione e ripristinato una volta con un doppio clic;
• [ ] modificati lo sfondo o le colonne in Modifica sezione;
• [ ] controllata la pagina su Mobile.

Domande:

1. Com'era l'ordine delle Sue sezioni prima e dopo, e perché ha scelto questo ordine?
2. Quale sezione ha eliminato, e perché ora un visitatore non ne sente la mancanza?
3. Quante elaborazioni Le è costato questo esercizio, e quale passaggio avrebbe invece costato elaborazioni tramite la chat?

Dopo "fatto" vedrà una risposta di esempio: da Hero, Numeri, Schede, Recensioni, Contatti a Hero, Schede, Foto e testo (metodo di lavoro), Recensioni, Domande, Contatti, così i servizi si trovano subito sotto l'apertura; la sezione Numeri è stata eliminata perché i numeri erano inventati; l'esercizio è costato 0 elaborazioni, mentre eliminare o aggiungere una nuova sezione tramite la chat ne sarebbe costate 1 o 2.

Per approfondire

• Corso gratuito Farsi trovare online 3.2: Le intestazioni e la struttura di una pagina
• Corso gratuito Farsi trovare online 4.2: Prima il mobile e il viewport
• Sitebuilder e AI Builder: quale scegliere e come aprirlo?