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”).
<style>
.hs-fullwidth {
width: 100vw;
left: calc(-50vw + 50%);
position: relative;
padding: 10px;
}
</style>
<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>.