Iniziamo con qualcosa di semplice
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.
Questo tipo di paragrafo può essere utilizzato per mettere in evidenza un contenuto e scrivere qualcosa al suo interno.
Questo è un paragrafo Immagine e testo, dove di default, negli schermi desktop, l'immagine si posiziona a sinistra e il testo a destra.
Negli schermi piccoli e su smartphone, l'immagine è sopra e il testo si posiziona sotto.
Questo è sempre un paragrafo Immagine e testo ma abbiamo selezionato l'opzione per cui l'immagine, negli schermi desktop, si posiziona a destra del testo.
Negli schermi piccoli e su smartphone, l'immagine rimane sopra e il testo si posiziona sotto.
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
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
- Box pop-up
- Contenuti in evidenza
(in questo caso vengono richiamati in uno slider contenuti precedentemente creati sul 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. Etiam libero tortor, dignissim sit amet fringilla eu, convallis iaculis velit. Ut consectetur tincidunt iaculis.
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. Etiam libero tortor, dignissim sit amet fringilla eu, convallis iaculis velit. Ut consectetur tincidunt iaculis.
Box pop-up
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt tempus sapien id fermentum. Mauris sed enim aliquet, luctus orci non, imperdiet dui. In mollis, quam sed iaculis tincidunt, massa eros elementum purus, sit amet malesuada mi lorem quis purus. Aenean tellus nibh, vestibulum ac ex semper, eleifend aliquam augue. Quisque feugiat posuere sem, at varius massa interdum et. Pellentesque ac arcu augue. Pellentesque tristique dapibus laoreet. Duis sagittis, turpis id ultrices rhoncus, nisi dolor fermentum justo, at hendrerit tortor nisi a enim. Aliquam non lacus mi. Integer feugiat id lacus non facilisis.
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:
Quando necessario, i link possono diventare anche dei veri e propri bottoni.
Ecco qualche esempio:
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
- in Avanzate, aggiungere la classe scroll-to
Per esempio questo bottone è collegato al paragrafo con ID p-27, quindi nel campo URL abbiamo inserito #p-27.
Naturalmente per lo scroll-to non è necessario creare un bottone ma puoi aggiungerlo a qualsiasi link, anche un link semplice.
Gli ID si possono aggiungere a qualunque titolo: in questo modo se imposti un link scroll-to, questo porterà all'ID del titolo a cui lo hai attribuito.
Per aggiungere un ID a un titolo, clicca su Sorgente e inseriscilo in questo modo:
<h2 id="sezione">Sezione</h2>
In questo caso abbiamo aggiunto un ID "sezione" a un titolo h2 e possiamo quindi creare un link con classe scroll-to e URL #sezione.
Lo facciamo usando, per esempio, un bottone:
Se nella pagina è presente un form di contatto, puoi creare un link scroll-to che porta al form: per farlo basta inserire nel campo URL l'id del form.
Es. #webform-submission-contact-node-9-add-form
Nel caso di questo bottone abbiamo utilizzato l'id del form di contatto a fondo pagina: #bottom-webform
Vuoi migliorare le tue fotografie per i social network?
Questo è un esempio di Email Opt-in - ma se inserisci la tua email ottieni un estratto della nostra guida per realizzatore fotografie professionali :)
Roba da smanettoni (cit.)
Chiudiamo in bellezza con qualche chicca sfiziosa per veri PRO 🤓
Se sul sito sono abilitati il codice di monitoraggio Google Analytics e il modulo Website Tags Utility, è 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 con classe .scroll-to
- link a WhatsApp
Per vedere un esempio, puoi guardare i contatti inseriti nel footer ;)
