Banner a larghezza piena

Se occorre attirare l’attenzione del visitatore su un messaggio, una sezione o in generale su una CTA (“Call To Action”), sfruttare uno stacco di colore può essere un’idea vincente. In Jimdo Dophin questa funzione è già presente come contenuto, mentre in Creator manca, nonostante le molte richieste fatte. Tuttavia, se hai un sito a schermo pieno (senza cioè una barra laterale, come invece ha ad esempio alessandrobuffelli.it) puoi ricorrere a questo codice completamente personalizzabile. Tieni presente che i contenuti vanno aggiunti in html: se non conosci questo linguaggio di programmazione, chiedi aiuto per non incorrere in danni.

Il risultato è quello che puoi vedere in questa grafica.

Ecco invece, qui di seguito, il codice da usare. Ricordati che funziona solo coi layout “full-width”, cioè quelli senza colonna laterale (“sidebar”).

Impostazioni > Modifica head

<style>/* <
  ![CDATA[ */
    .hs-fullwidth {
      margin: -5px -500%;
      padding: 1.5em 500%;
      position: relative;
    }
  /*]]
>*/</style>

Widget/HTML

<div class="hs-fullwidth" style="background: #COLORE">
  CONTENUTO
</div>

Inserisci il valore hex➚ del colore che vuoi usare come sfondo dove indicato da #COLORE. Al posto di CONTENUTO inserisci invece i tag html di ciò che vuoi far apparire, ad esempio:

<h1>TITOLO 1</h1>
<h2>TITOLO 2</h2>
<h3>TITOLO 3</h3>
<p>TESTO</p>
<a href="http://link">LINK TESTUALE</a>
<a href="http://link" class="j-calltoaction-link j-calltoaction-link-style-1">PULSANTE 1</a>
<a href="http://link" class="j-calltoaction-link j-calltoaction-link-style-2">PULSANTE 2</a>
<a href="http://link" class="j-calltoaction-link j-calltoaction-link-style-3">PULSANTE 3</a>

Se diviene necessario cambiare il colore dei testi o dei link inseriti, puoi aggiungere style="color: #COLORE" al tuo codice, prima della chiusura del tag. Ad esempio, se vuoi generare un titolo bianco, scrivi: <h1 style="color: #fff">TITOLO 1 BIANCO</h1>.

Per generare il banner presentato come esempio nell’immagine sopra il codice è:

Widget/HTML

<div class="hs-fullwidth" style="background: #18A4E0">
  <h1 style="color: #fff">Banner di esempio</h1>
  <p style="color: #fff">Introibo ad altare Dei. Ad Deum qui laetificat iuventutem meam.</p>
  <a href="(LINK)" class="j-calltoaction-link j-calltoaction-link-style-2">LINK DI ESEMPIO<a>
</div>

Hai trovato l'articolo utile? Sì No