Pubblicità e Banner, come fare uno sfondo cliccabile
- Webmarketing
- 17 agosto 2012
Indice dei contenuti
Da un pò di tempo vanno di moda i background cliccabili, si chiamano takeover background, non sono dei semplici banner come quelli delle campagne adwords e normalmente vengono usati per campagne pubblicitarie dove lo sponsor è molto importante per il progetto del portale. Creare gli sfondi cliccabili può non essere facile per via del fatto che si rende necessario andare a mettere le mani in template di portali e CMS spesso di grosse dimensioni con DIV annidati e complessi. Di base il lavoro da fare è in 3 step vediamo:
Step 1: Crea l’imagine di background
[creare banner e pubblicità] Create un immagine tenendo conto che essa andrà a finire sotto il sito e quindi i contenuti centrali del portale copriranno l’immagine e la parte visibile e cliccabile sarà quella laterale o sopra l’header. Se il vostro sito ha una larghezza di 980px fate un immagine di almeno 1200 di larghezza e fate in modo che sui bordi il colore sfumi su una tinta unita in modo che andrete ad amalgamarlo con il colore dello sfondo del sito.
Step 2: Il CSS
Avremo una classe (#skin) e una classe (#background) vedi codice a fondo pagina
Attenzione! E’ importante che non facciate casino con i valori z-index, dovete fare in modo che lo z-index dell’immagine sia inferiore degli altri div. Se avete dei dubbi contattatemi per creare uno sfondo pubblicitario cliccabile.
Codice CSS
#skin {
position: absolute;
width: 100%;
height: 800px;
margin-left: auto;
margin-right: auto;
top: 0px;
left: 0px;
z-index: 1;
}
#background
{
background: url(background_takeover.png) no-repeat 50% 0;
background-color: #ffffff;
height: 800px;
position: absolute;
width: 100%;
top:220px;
z-index: 1;
}
