Guide › 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) 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.

 

 

Ehy, ciao!

 

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

 

Impostazioni > Modifica head
<style>
  .hs-fullwidth {
    width: 100vw;
    left: calc(-50vw + 50%);
    position: relative;
    padding: 10px;
  }
</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. Se conosci il css, puoi anche impostare un’immagine o un gradiente di sfondo. 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>.

 



Hai trovato l'articolo utile?        No