Come modificare lo stile del template
- Apri l'app Siti web in RevasOS;
- Individua il gruppo di siti a cui vuoi apportare modifiche;
- Clicca sul bottone col nome del template (ad esempio Template default) che si trova a fianco al dominio sulla barra del gruppo di siti;
Ora che sei nella pagina puoi modificare i seguenti elementi:
Logo e favicon
Il logo viene visualizzato in modo evidente sul sito web vero e proprio, mentre la favicon viene utilizzata nella scheda del browser, se supportata. Per la favicon si consiglia di utilizzare file più piccoli (32x32 pixel) per, mentre i loghi possono essere più grandi.
Per aggiungere un logo e una favicon al sito web segui questi step:
- Clicca sul bottone "Carica icona" e selezione il file della favicon;
- Clicca sul bottone "Carica logo" e seleziona il file del logo;
- Clicca Aggiorna anteprima o Salva e procedi per applicare le modifiche.
Colore di accento
Questo colore viene utilizzato in tutti gli elementi d'accento del gruppo di siti web.
Per modificarlo, seleziona dal menu a tendina accanto alla voce Colore di accento il colore predefinito che vuoi usare. Oppure attiva la spunta Usa configurazione personalizzate per usare un valore preciso. In questo caso segui questi step:
- Clicca sul sull'anteprima del colore accanto alla voce Colore di accento;
- Nel color picker che si apre, scegli il colore usando le seguenti modalità a scelta:
- muovendo il curosre sullo spettro di colore;
- cliccando la pipetta per prelevarlo da un elemento sullo schermo;
- inserendo il codice RGB, HEX o HSL.
- Clicca Aggiorna anteprima o Salva e procedi per applicare le modifiche.
Font
Il font viene utilizzato in tutte le pagine del gruppo di siti web e permette di personalizzare il carattere tipografico di ogni sito web
Per modificarlo, seleziona dal menu a tendina accanto alla voce Font il font predefinito che vuoi usare. Oppure attiva la spunta Usa configurazione personalizzate per usare un valore preciso. In questo caso segui questi step:
- Nel primo campo sotto alla label Font inserisci il nome del font;
- Nel secondo campo inserisci il link che porta al pacchetto di font
- Clicca Aggiorna anteprima o Salva e procedi per applicare le modifiche.
Google Fonts
Google Fonts è una libreria gratuita di font per il web. Puoi utilizzarli per migliorare il design del tuo sito, rendendo i tuoi contenuti visivamente più accattivanti.
- Vai al sito ufficiale di Google Fonts:
https://fonts.google.com, - Usa la barra di ricerca in alto a sinistra per cercare il nome del font, ad esempio "Roboto".
- Una volta trovato, clicca sul font per aprirne la pagina.
- Clicca Get font e poi Embed code,
- Per trovare il nome del font, vai nella sezione [Nome del font]: CSS classes e copia il testo dopo la voce
font-family, quindi incollala nel primo campo sotto alla label Font. Ad esempio, per il font Roboto troverai questo codicefont-family: "Roboto", sans-serif;dunque il testo da copiare è"Roboto", sans-serif;, - Per trovar il link, vai nella sezione Embed code in the
<head/>of your html, trova il terzo elemento che comincia con<link/>e copia solo l'elemento tra le virgolette dopo la vocehref. Per esempio, per Roboto il terzo link è<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"/>dunque l'URL da copiare èhttps://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap. - Su Revas, copialo nel secondo campo sotto alla label Font.
- Clicca Aggiorna anteprima o Salva e procedi per applicare le modifiche.
Adobe Fonts
- Vai al sito ufficiale di Adobe Fonts:
https://fonts.adobe.com - Usa la barra di ricerca in alto a destra per cercare il nome del font, ad esempio "Proxima Nova".
- na volta trovato, clicca sul font per aprirne la pagina.
- Clicca sul pulsante Activate Fonts (o "Attiva Font" in italiano) per attivare il font nel tuo account Adobe.
- Vai alla sezione Web Project: dopo aver attivato il font, clicca su Add to Web Project o accedi alla scheda Web Projects dal tuo account Adobe Fonts.
- Per trovare il nome del font, apri il link copiato in un browser. Vedrai un file CSS con regole font-family. Ad esempio, per Proxima Nova troverai una riga simile a questa:
font-family: "proxima-nova", sans-serif;" - Copia il testo dopo la voce
font-family, quindi incollala nel primo campo sotto alla label Font dentro RevasOS. - Per trovar il link, vai nella scheda Web Projects, copia il codice che inizia con
<link/>. Ad esempio:<link rel="stylesheet" href="https://use.typekit.net/abcd123.css"/>dunque l'URL da copiare èhttps://use.typekit.net/abcd123.css.. - Su Revas, copialo nel secondo campo sotto alla label Font.
- Clicca Aggiorna anteprima o Salva e procedi per applicare le modifiche.
::tip Altri font In questa guida trovi gli esempi per Google Fonts e Adobe Typekit ma puoi inserire qualunque tipo di font finchè hai a disposizione un link esterno contenente il CSS del font da collegare su Revas. :::
Aggiungere più di un font
Grazie all'editor del font puoi aggiungere un font usato da tutto il sito, ma puoi anche utilizzare più font e applicarl a diversi elementi del sito. Ad esempio puoi collegare un font solo per i titoli che sia diverso dal font del corpo di testo.
Puoi eseguire questa operazione grazie all'iniezione di codici e stile personalizzato.
Scopri qui come:
Arrotondamento
L'arrotondamento permette di definire quanto sono arrotondati gli angoli di pulsanti e schede in tutto il sito. Valore massimo: 100px. Per modificarlo segui questi step:
- Trova la voce Arrotondamento;
- Muovi lo slider a destra o sinistra per arrivare all'arrotondamento che desideri. Puoi vederne la misura precisa nel riquadro grigio destra.
- Clicca Aggiorna anteprima o Salva e procedi per applicare le modifiche.