Modificare il testo
Webround include un editor WYSIWYG (What You See Is What You Get) per scrivere contenuto testuale. In questo video imparerai come aggiungere componenti di testo in Webround e come utilizzare gli stili preimpostati per modificare proprietà come la font size, font family o colore del testo.
Impererai anche ad importare i tuoi font preferiti da Google Font.
Trascrizione
Aggiungere componenti di testo
Per aggiungere un componente di testo alla nostra sezione, andiamo nella barra superiore sinistra del nostro canvas. Trascinando e rilasciando, posizioniamo il testo nel sito web. Possiamo facilmente copiare e incollare contenuto nei componenti di testo Webround, ma attenzione: lo stile non sarà preservato, poiché Webround applica automaticamente lo stile di testo predefinito. Webround riutilizza gli stessi stili di testo nel sito web.
Definire gli stili di testo
Per applicare una determinata dimensione del carattere al testo selezionato, è necessario definire uno stile di testo composto da font, dimensione del carattere per ogni dispositivo, colore e tag di testo HTML. Ciò accelera il processo di applicazione degli stili alle sezioni di testo. Per definire gli stili di testo, dobbiamo fare clic destro su un componente di testo e accedere al menu degli stili di testo. Per prima cosa, eliminiamo gli stili esistenti. Attenzione: eliminare uno stile altererà tutti i componenti di testo che attualmente utilizzano quello stile.
Creare gli stili di testo
Creiamo una chiara distinzione tra gli stili creando un titolo, un paragrafo e un piccolo paragrafo. Per semplicità, imposteremo lo stile del paragrafo come lo stile di testo predefinito. Ciò significa che non appena inizieremo a scrivere testo o incollarlo da fuori, il testo caricherà automaticamente lo stile del paragrafo. Poiché la nostra replica utilizza il font Geist mono, dobbiamo importarlo.
Applicare gli stili di testo
Webround supporta nativamente tutti i Google fonts semplicemente digitando il nome dei font nell'input e facendo clic sull'icona più del menu di testo. Se hai caricato correttamente il font, vedrai che il selettore dei font lo stilerà in modo appropriato. Questo è un piccolo paragrafo, quindi è meglio mantenere la dimensione del carattere piccola. Utilizziamo 12 pixel per desktop e 10 pixel per tablet e dispositivi mobili.
Aggiungere blocchi di testo aggiuntivi
Il testo piccolo nel template utilizza un colore marrone medio. Applicheremo un colore predefinito a questo stile, in modo che quando lo applicheremo a componenti di testo, cambierà automaticamente il colore. Ora che siamo pronti, selezioniamo il testo interessato per applicare lo stile e utilizziamo l'ingresso degli stili predefiniti nel toolbar di testo. Il testo è stato correttamente applicato.
Copiare e incollare componenti di testo
Per aggiungere un altro blocco di testo, possiamo facilmente copiare e incollare il componente di testo. Per farlo, premi Ctrl + Shift + C sulla tastiera per salvare il componente nella clipboard. Premi Ctrl + Shift + V per incollare lo stesso componente. Webround incolla il componente nella posizione originale del canvas che stai utilizzando, quindi copiare e incollare sovrascriverà il componente nella stessa posizione del canvas.
Modificare gli stili di testo esistenti
Muoviamo il componente sotto. Stenderemo il contenitore e lo renderemo più grande in modo da poterlo adattare correttamente al contesto del titolo, che ha una dimensione del carattere molto grande. Come previsto, Webround ha applicato lo stile di testo predefinito, il paragrafo. Dobbiamo modificare lo stile di testo esistente "Titolo I".
Utilizzare Google Fonts
Utilizzando un font Google, Instruments Serif può essere facilmente aggiunto dentro il draft Webround digitando il suo nome nel menu degli stili di testo. Impostiamo una dimensione del carattere molto grande su ogni dispositivo e impostiamo anche un tag H1 per garantire l'ordinamento corretto dei tag Titolo nella pagina HTML.
Cambiare colore del testo
Applichiamo lo stile "Titolo 1" come al solito. Il nostro template utilizza un accento blu sul testo. Per cambiare specificamente il colore del testo per quella parola, possiamo utilizzare l'opzione di colore del testo nella toolbar che ci consente di scegliere un colore dal picker dei colori. Dopo aver selezionato il colore e copiato il colore nella clipboard, posso applicarlo nel testo dal picker dei colori.
Regolare lo spazio tra le righe
Lo salveremo anche per futuri utilizzi. Come possiamo vedere, la distanza predefinita tra le linee di testo è un po' più grande di quella utilizzata nel template. Dobbiamo applicarne una più piccola. Utilizzeremo 1,15. Poiché l'altezza del testo è stata ridotta, possiamo anche adattare il contenitore del testo per avere un'altezza adeguata.