La tua Web Agency a Milano | Web Design | Web Marketing | Seo

Pubblicità e Banner, come fare uno sfondo cliccabile

Pubblicità e Banner, come fare uno sfondo cliccabile

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) Ecco il codice:


#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;
}
Step 3: Inserite il div nel template

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. Graziano

Consulente web marketing e web Designer, si occupa di creazione siti e portali dinamici con Joomla e Wordpress, Restyling e revamp siti esistenti, campagne pubblicitarie online, Social media marketing, strategie di posizionamento sui motori di ricerca, analisi e consulenza, Ecommerce, cataloghi online autogestibili, soluzioni per il turismo, grafica, corsi e lezioni su Joomla, Wordpress, Seo e Html. Segui Graziano De Maio su Google+

5 Commenti

  1. Dario 3 anni fa

    Ciao Graziano

    avrei bisogno di una mano in quanto lo sfondo cliccabile nel momento che lo porto in secondo piano (z-index: -1) rispetto al div del sito, non diventa più cliccabile, mentre se lo lascio cosi (z-index: 1) come riporti tu nel css funziona ma si sovrappone al sito ovviamente.

    Questo è il mio sito dove sto cercando di inserire lo sfondo cliccabile: http://www.otowell.it

    Grazie per il supporto

  2. Fabio 4 anni fa

    Ciao Graziano non riesco a inserire un banner con sfondo cliccabile , mi puoi aiutare perfavore e molto importante , grazie e buona giornata

  3. Matteo 4 anni fa

    ciao,

    non sono molto pratico, di solito quando devo mettere mani al codice apro l’editor e piazzo le cose un pò qua e un pò la nella maggior parte dei casi riesco….per inserire il codice dello sfondo cliccabile, non so proprio da dove iniziare, non ho capito quasi niente.

    io apro l’editor e il div dove lo metto nell’header?

    quell’altra roba invece dove la piazzo
    alla fine di style.css?

    mi potresti aiutare?
    grazie. Matteo

    • Autore
      Graziano 4 anni fa

      Se sei poco pratico di CSS è un problema spegarti anche perchè bisogna vedere il contesto.

  4. giuseppe miele 5 anni fa

    Ciao
    Non riesco a capire il secondo pezzo che file del template?

Lascia una risposta

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*