Testo

Il testo è uno degli elementi principali nel layout delle pagine web. Non solo il testo racconta la tua storia, ma aiuta anche a creare una gerarchia visiva e di ricerca sui tuoi contenuti. In Sitely, creare testo è semplice e diretto. Devi solo aggiungere un riquadro di testo alla tua pagina e iniziare a digitare come faresti in una comune applicazione di elaborazione testi. Puoi aggiungere qualsiasi stile al tuo testo, tutto dal pannello di stile di Sitely. Quando aggiungi per la prima volta un riquadro di testo, vedrai un riquadro predefinito sulla pagina che appare così:

Il riquadro stesso è posizionato alla dimensione ottimale per il contenuto testuale su una pagina. Su una griglia di pagina a 12 colonne, il riquadro di testo predefinito occuperà 6 colonne. Sebbene tu possa regolare la larghezza e l'altezza del riquadro di testo a qualsiasi dimensione desideri, il testo del corpo o dei paragrafi è meglio presentato in estensioni di 6-8 colonne per facilitarne la lettura.

Quando il riquadro di testo viene inizialmente posizionato nell'area di lavoro, contiene testo simulato, ottimo mentre stai progettando il layout della tua pagina. Per sostituire il testo, ti basta cliccare all'interno del riquadro e iniziare a digitare. Il testo simulato scomparirà e sarà sostituito dal tuo contenuto. Se non hai il tuo contenuto testuale pronto, puoi scegliere di riempire il riquadro di testo con del testo segnaposto effettivo a cui puoi cambiare lo stile in modo da rappresentare meglio come vuoi che il tuo testo appaia sulla pagina. Puoi farlo selezionando il riquadro e cliccando sul pulsante ‘Inserisci Lorem Ipsum…’ nel pannello di stile.

Nella pubblicazione e nel design grafico, il Lorem ipsum è un testo segnaposto comunemente usato per dimostrare la forma visiva di un documento o di un carattere senza fare affidamento su contenuti significativi. Tutti i contenuti testuali, quando vengono aggiunti per la prima volta a una pagina in Sitely, avranno di default lo stile ‘Corpo’. Questo è lo stile di testo più comune utilizzato nelle pagine web, quindi ha senso usarlo come predefinito. Sitely viene fornito con vari stili predefiniti che puoi visualizzare nella sezione stili del pannello di stile. Gli stili di testo sono in realtà una forma di strumento di ‘produttività’ che aiuta a mantenere la coerenza ed è una caratteristica comune della maggior parte delle applicazioni di editing di testo. Sitely ha adottato questo metodo familiare impostare lo stile del testo, così puoi concentrarti sulla disposizione dei tuoi contenuti in modo visivo, piuttosto che dover fare affidamento sul codice CSS per creare l'aspetto desiderato del tuo testo. Infatti, gli stili sono così importanti che vale la pena dedicare un po' di tempo ad esplorarli in maggiore dettaglio.

L'importanza degli stili

Gli stili sono un po' come note post-it invisibili che possono essere lette solo dai browser web. Quando un browser vede una di queste note, sa che il testo deve essere visualizzato in un certo carattere, a una certa dimensione e in un colore specifico. Le note contengono anche altre informazioni, come l'allineamento del testo, l'altezza della linea, gli attributi di spaziatura e, altrettanto importante, come i motori di ricerca dovrebbero trattare quel contenuto testuale. Questa è una quantità piuttosto elevata di informazioni da applicare a molti diversi riquadri di testo in un sito web. Pertanto, utilizzare gli ‘stili’ è un modo davvero efficiente per fornire questi dettagli in modo coerente su tutte le tue pagine web. Inoltre, se decidi di cambiare qualche aspetto di uno stile particolare - magari il suo colore o carattere, puoi semplicemente cambiare lo stile e questo verrà applicato su tutto il tuo sito web ovunque sia stato utilizzato quello stile.

Cambiare uno stile

Apportare modifiche a uno stile non potrebbe essere più semplice. Basta selezionare un frammento di testo con il tuo stile esistente, cambiare il formato di quel testo nel pannello di stile e poi aggiornare lo stile stesso. Ad esempio, per cambiare lo stile del tuo testo del corpo, seleziona un riquadro di testo imopstato come Corpo e apporta le tue modifiche nell'area di lavoro. Applica un carattere diverso, cambia la dimensione del testo, il colore o qualsiasi altro attributo. Quando apporti queste modifiche, vedrai apparire un asterisco accanto al nome dello stile nel pannello di stile.

Questo è il modo di Sitely per farti sapere che hai apportato delle modifiche allo stile e ti offre l'opzione di aggiornare il tuo stile cliccando sul pulsante ‘Applica modifiche’, o di annullare le modifiche e tornare allo stile originale cliccando sul pulsante ‘Ripristina stile’. Applicare le modifiche cambierà istantaneamente tutti gli elementi di testo del corpo nelle tue pagine per riflettere le modifiche al tuo nuovo stile. Se ignori questa opzione, le tue modifiche si applicheranno SOLO al testo su cui stavi lavorando - tutto il resto nel tuo sito rimarrà invariato.

Uno sguardo alle opzioni di stile

Ora che hai acquisito una migliore comprensione degli ‘Stili’, possiamo passare a vedere tutti i vari attributi che possono essere applicati ai contenuti testuali. Molti di essi ti saranno già familiari se hai mai utilizzato un'applicazione di elaborazione testi, ma ecco un rapido ripasso. La prima sezione nel pannello di stile è la sezione Carattere.

Qui puoi selezionare un carattere dall'elenco a discesa dei caratteri disponibili sul tuo sistema. Puoi anche scegliere tra un elenco di attributi del carattere, come normale, leggero o grassetto. L'elenco degli attributi disponibili varierà a seconda del carattere scelto. Alcuni degli attributi più comuni sono mostrati anche come icone, come Grassetto, Corsivo e Sottolineato. Alcune di queste opzioni potrebbero essere disabilitate se il carattere scelto non supporta alcuni attributi. Successivamente, puoi selezionare una dimensione per il tuo testo e introdurre un po' di tracking. Questo è lo spazio tra le lettere individuali. Alcuni caratteri hanno un tracking molto stretto, rendendo a volte difficile la lettura, particolarmente a dimensioni più piccole. L'opzione di tracking ti consente di aggiungere ulteriore spazio tra le lettere.

Potresti anche aver notato l'icona dell'ingranaggio accanto alle icone degli attributi. Qui puoi impostare alcune opzioni avanzate come la capitalizzazione, il pedice e l'apice, il colore di sfondo del testo o aggiungere un effetto ombra al tuo testo. Infine, hai un selettore di colore dove puoi selezionare un colore per il tuo testo. Cliccando sul selettore di colore si aprirà il pannello di colori di Sitely, così puoi selezionare un colore dalla palette del tuo sito web.

Successivamente c'è la sezione Paragrafo.

Qui puoi scegliere gli attributi che vengono applicati a interi paragrafi. Le prime opzioni sono l'allineamento del testo. Questi ti consentono di allineare il testo a sinistra, al centro, a destra o giustificato. L'icona delle doppie frecce viene utilizzata principalmente quando si inserisce testo in lingue che si leggono da destra a sinistra invece che da sinistra a destra. Può anche essere utilizzata come un semplice interruttore per passare da testo allineato a sinistra a testo allineato a destra.

L'opzione successiva è l'altezza della linea. Questa determina lo spazio tra le righe di testo. Nel design web, è meglio impostarla tra 1,2 e 1,4. Tuttavia, la spaziatura finale dipenderà dal carattere e dalla dimensione del testo che stai creando. È spesso meglio impostare l'altezza della linea visivamente, in modo che sia facile da leggere.

L'opzione ‘prima riga’ ti consente di impostare un rientro per la prima riga di ogni paragrafo. Sebbene questa sia una caratteristica comune nella pubblicazione di libri per aiutare a separare i paragrafi di testo, può anche essere utilizzata, meno comunemente, nelle pagine web. Questo può essere particolarmente utile se stai impostando una grande quantità di testo dove una ulteriore segregazione dei paragrafi potrebbe essere importante. Le opzioni ‘spazio prima’ e ‘spazio dopo’ servono a impostare la spaziatura tra le righe prima e dopo un paragrafo. Questo è il modo più comune di separare i paragrafi nelle pagine web ma, alla fine, è tutta una questione di scelta personale.

L'ultima opzione è il tag HTML. Questo è una sorta di identificatore che i motori di ricerca utilizzano per determinare l'importanza del contenuto testuale sulla tua pagina. Sebbene questo spesso sia legato alla gerarchia visiva creata da titoli, sottotitoli e testo del corpo, non deve necessariamente essere così. Nel mondo dei siti web, puoi designare il testo come testo di intestazione (indicato da H1 a H6), oppure può essere indicato dalla lettera ‘p’, che significa testo del paragrafo. In termini generali, H1 è l'elemento più importante sulla pagina in termini di stabilire di cosa tratta la pagina nei motori di ricerca. Ogni livello di intestazione successivo (H2 - H6) è meno importante. Il testo del paragrafo è il contenuto principale della pagina per quanto riguarda i motori di ricerca. Questo è il testo che più probabilmente verrà indicizzato per stabilire la rilevanza della tua pagina web rispetto alle query di ricerca. Come regola generale, dovresti avere solo un tag H1 su una pagina, mentre puoi avere quanti più tag degli altri desideri.

Proseguendo dalle impostazioni di paragrafo più generali, abbiamo alcune opzioni aggiuntive sotto forma di caselle di controllo. Queste vengono utilizzate per applicare formattazioni speciali ai paragrafi.

Nell'esempio sottostante, è stato applicato l'affetto Knockout. L'effetto knockout è essenzialmente un'opzione che consente a un colore di sfondo di fondersi con un colore di testo in primo piano per creare diversi effetti. Questa opzione è in realtà destinata a coloro che provengono da un background grafico e comprendono meglio i ‘modi di fusione’. Per la maggior parte degli utenti, sarebbe altrettanto semplice posizionare il testo sopra un riquadro colorato e impostare lo stile di ogni elemento singolarmente.

Citazione

Questa opzione rientra un paragrafo sia a sinistra che a destra. Puoi impostare il rientro/margine con le opzioni che appaiono quando la casella di controllo delle citazioni è selezionata.

Elenco

Questa opzione crea un elenco puntato.
Puoi selezionare lo stile del punto, così come regolare la gerarchia.
L'opzione di rientro imposta la quantità di rientro dal bordo del riquadro di testo al punto.

Effetto

Questa opzione crea effetti speciali sul testo selezionato, come il riempimento con un'immagine, un gradiente o un motivo. Ecco un esempio dell'opzione Ritaglia al testo in cui il testo è stato riempito con un'immagine.

TESTO ESEMPIO

Scorrevole

Questa opzione trasforma il tuo riquadro di testo in un riquadro scorrevole in modo che possa contenere più testo di quanto può essere visualizzato sulla pagina. Quando visualizzato in un browser, gli utenti saranno in grado di scorrere su o giù per rivelare il testo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt lorem enim, eget fringilla turpis congue vitae. Phasellus aliquam nisi ut lorem vestibulum eleifend. Nulla ut arcu non nisi congue venenatis vitae ut ante. Nam iaculis sem nec ultrices dapibus. Phasellus eu ultrices turpis. Vivamus non mollis lacus, non ullamcorper nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sit amet scelerisque ipsum. Morbi nulla dolor, adipiscing non convallis rhoncus, ornare sed risus.
Sed adipiscing eget nibh at convallis. Curabitur eu gravida mauris, sit amet dictum metus. Sed a elementum arcu. Proin consectetur eros vitae odio sagittis, vitae dignissim justo sollicitudin. Phasellus non varius lacus, aliquet feugiat mauris. Phasellus fringilla commodo sem vel pellentesque. Ut porttitor tincidunt risus a pharetra. Cras nec vestibulum massa. Mauris sagittis leo a libero convallis accumsan. Aenean ut mollis ipsum. Donec aliquam egestas convallis. Fusce dapibus, neque sed mattis consectetur, erat nibh vulputate sapien, ac accumsan arcu sem quis nibh. Etiam et mi sed mauris commodo tristique. Proin mollis elementum purus, a porta quam vehicula et.

Le ultime opzioni sono Inserisci ‘Campo Intelligente…’ e ‘Inserisci Icona…’. L'opzione campo intelligente ti permette di aggiungere un campo che calcola da una formula o visualizza informazioni generate all'interno del sito web. Le molte opzioni sono mostrate qui sotto, ma abbiamo un'intera sezione nella nostra documentazione che spiega queste opzioni in maggiore dettaglio.

Ecco alcuni esempi

Consiglio utile: Se desideri creare icone tipo pulsante, aggiungi semplicemente un pulsante alla tua area di lavoro. Impostare lo stile e dimensionarlo come desideri. Poi seleziona l'etichetta del pulsante e utilizza l'opzione Inserisci Icona per aggiungere un'icona al pulsante. Puoi ridimensionare l'icona regolando la dimensione del carattere del pulsante nel pannello delle impostazioni. Questo è un esempio di un pulsante creato in questo modo, insieme alle impostazioni per il pulsante.

L'opzione ‘Inserisci Icona…’ ti consente di inserire un'icona nel tuo testo. Cliccando su questa opzione verrà visualizzato un pannello popup dove puoi selezionare le icone da includere. Una volta posizionate nel tuo riquadro di testo, puoi utilizzare altre opzioni di stile per dare loro colore e ingrandirle. Questo è l'aspetto del pannello - basta cliccare su un'icona per aggiungerla al tuo riquadro di testo.

Suggerimenti per le migliori pratiche

Quando inizi un nuovo progetto di sito web, è meglio impostare i tuoi stili di testo fin dall'inizio. Questo può farti risparmiare molto tempo mentre inizi a lavorare sul tuo progetto. Dovresti anche impostare una palette di colori personalizzata per i tuoi progetti. Nota che cambiare gli stili di testo o i colori predefiniti non modifica alcuno stile o colore predefinito di Sitely - qualsiasi modifica tu faccia sarà applicata solo al documento su cui stai lavorando. Qualsiasi nuovo progetto che inizi avrà tutti i predefiniti di Sitely.

Scarica il modello di stile Sitely

Gestione delle pagine

Mappe