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

Mekit
Condividi

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.

Riquadro con titolo

Questo tipo di paragrafo può essere utilizzato per mettere in evidenza un contenuto e scrivere qualcosa al suo interno.

Photo by Colton Sturgeon on Unsplash
Photo by Colton Sturgeon on Unsplash

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.

Photo by Cody Black on Unsplash
Photo by Cody Black on Unsplash

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.

Photo by S Migaj on Unsplash
Questo è un paragrafo "Immagine grande" / Photo by S Migaj on Unsplash
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
  • Box pop-up
  • Contenuti in evidenza
    (in questo caso vengono richiamati in uno slider contenuti precedentemente creati sul sito)
add remove
Testo espandibile 1

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.

add remove
Testo espandibile 2

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.

Photo by FORREST CAVALE on Unsplash
Box pop-up
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt tempus sapien id fermentum...

Box pop-up

Photo by FORREST CAVALE on Unsplash

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: 

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
 

Come creare scroll-to 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
  • in Avanzate, aggiungere la classe scroll-to

 

Scroll to paragraph

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.

Come aggiungere un ID a un titolo

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:

Scroll to title h2

Scroll-to form

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
 

Scroll-to 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 :)

Cliccando sul pulsante INVIA autorizzo al trattamento dei miei dati personali e accetto l'informativa sulla privacy

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, è 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 ;)

Affidati alla nostra esperienza

Richiedi informazioni o un incontro con i nostri esperti utilizzando il form di contatto. Ti risponderemo al più presto!