Ciao Editor! Questo è un articolo per te con qualche esempio utile

Iniziamo con qualcosa di semplice

Puoi formattare un paragrafo come preferisci utilizzando formati e stili di testo dalla barra degli strumenti di modifica. Qui per esempio stiamo utilizzando uno stile Lead.

Il testo base è il formato Normale, vediamo come funziona con un testo più lungo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales elementum lectus, in condimentum augue tincidunt tempor. Integer dictum ullamcorper purus in vehicula. Nunc ut malesuada urna, nec posuere ex.

Per mettere in evidenza un testo particolare, puoi utilizzare la Citazione (pulsante con le virgolette) e scrivere qualcosa di importante, per esempio: "Benvenuti sul mio nuovo sito!"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales elementum lectus, in condimentum augue tincidunt tempor. Integer dictum ullamcorper purus in vehicula. Nunc ut malesuada urna, nec posuere ex.

Come utilizzare più immagini

Per inserire più immagini insieme, puoi utilizzare i paragrafi:

• Immagini multiple
  Le immagini sono affiancate e si ridispongono in griglia a seconda degli schermi
• Slideshow di immagini
  Un'immagine per volta, a scorrimento

Quando il contenuto è molto lungo

In alcuni casi può essere utile visualizzare solo un'anteprima del contenuto, da approfondire con un click. Per farlo, puoi utilizzare i paragrafi che vedi riportati più in basso:

• Testo espandibile
• Contenuti richiamati
  (in questo caso vengono richiamati in uno slider contenuti precedentemente creati sul sito)

Link e bottoni

Quando inserisci un link, questo può essere un link semplice all'interno del testo ma cliccando su Stili puoi formattarlo in diversi modi per dargli maggiore rilevanza o suggerire un'azione:

Arrow link

Arrow link primary

Download link

Download link primary

Quando necessario, i link possono diventare anche dei veri e propri bottoni.
Ecco qualche esempio:

Button primary  Button primary outline

Button secondary  Button secondary outline
 

I bottoni possono anche essere larghi quanto il container utilizzando lo stile Btn Wide oltre ad uno degli stili standard.

Button Wide
 

Come creare anchor link

All'interno di qualsiasi testo puoi inserire un link che fa scorrere la pagina e porta a un punto preciso. Per farlo, occorre impostare il link in questo modo:

• come URL, utilizzare # seguito dall'ID di un elemento presente all'interno della pagina

Scroll to paragraph 30

Per esempio questo bottone è collegato al paragrafo con ID p-30, quindi nel campo URL abbiamo inserito #p-30.

Naturalmente non è necessario creare un bottone ma puoi aggiungerlo a qualsiasi link, anche un link semplice.

Come aggiungere un ancora nel testo

Utilizzando l'icona della bandierina si possono creare ancora personalizzate all'interno del testo che si possono utilizzare come destinazione all'interno dei link.

In questo caso abbiamo aggiunto un ancora help-scroll-to al titolo della sezione superiore e possiamo quindi creare un link con URL #help-scroll-to. Lo facciamo usando, per esempio, un bottone:

Link all'ancora

Roba da smanettoni (cit.)

Chiudiamo in bellezza con qualche chicca sfiziosa per veri PRO 🤓

Come creare link con tracking Analytics

Se sul sito sono abilitati il codice di monitoraggio Google Analytics e il modulo Website Tags Utility è attivo, è possibile tracciare i click ad alcuni link importanti.
Per farlo basta aggiungere la classe a-tracked nel campo Classi css del link: in questo modo quando l'utente clicca sul link, viene inviato un evento ad Analytics.

Inoltre è possibile dare un nome ("Etichetta" su Analytics) a questo evento inserendo una stringa nel campo Relation (Rel), per esempio "Book now" come fatto per il bottone qui sotto. Questa stringa comparirà nei rapporti Analytics e sarà utile per identificare l'evento.

Book now

Questo sistema di tracciamento funziona per qualsiasi tipo di link, interno o esterno al sito.

N.B. Tutti i link elencati di seguito hanno già il track automatico e non necessitano quindi di questo procedimento (non è necessario aggiungere la classe a-tracked):

• link a un numero di telefono, tel:
• link ad un indirizzo e-mail, mailto:
• link a WhatsApp

Per vedere un esempio, puoi guardare i contatti inseriti nel footer ;)