Takeover background: gli sfondi cliccabili

Il Takeover Background è comunemente conosciuto nel modo dell’Advertising come sfondo cliccabile.

Un formato molto conosciuto nel mondo dell’Advertising è di sicuro il Takeover Background ovvero sfondo pubblicitario cliccabile. Questo formato è balzato agli occhi di utenti di mezzo mondo perchè è sempre più frequente su portali autorevoli, con un immagine che rappresenta il marchio che viene promosso.

Sfondo cliccabile

Non a caso mettiamo come immagine di questo articolo, Repubblica che promuove Molinari in Takeover Background. Si tratta di una soluzione off-page che non si maschera con i contenuti del sito e che offre allo stesso tempo grande visibilità al marchio  promosso. Per questi semplici motivi è facile trovare Takeover Background con remunerazione in CPM (Costo per Mille Impressioni).

Come creare un Takeover Background?

Creare sfondi cliccabili promozionali per il proprio sito web non è complicato bisogna avere solo un pò di dimestichezza con i CSS.

Passo 1 Creare l’immagine di sfondo.

Può sembrare una banalità ma non lo è perchè la parte centrale dell’immagine è il sito web o blog che ospiterà il Tackeover Background quindi è consigliabile, nel caso in cui abbiamo 980 pixel di sito web, creare un’immagine di 1200 pixel (occupando la parte centrale di 980px e lavorando sul lato destro e sinistro)

Passo 2 CSS

Le classi da mettere nell’header del sito web (prima della chiusura del tag “head”)

codice css

Alcuni accorgimenti da tenere in considerazione per il  CSS: inserire in maniera corretta il percorso relativo all’immagine, 100 pixel di margin top ovvero staccare l’header del sito web dalla barra di navigazione del browser di 100 pixel – in questo modo faremo corrispondere 100 pixel alla testata dello sfondo.

Dopo aver operato sullo stile del “body” passiamo a “skinlink“, la classe che gestisce il link. Assumerà un posizionamento assoluto rispetto al corpo della pagina e verrà utilizzato come elemento block in seguito definendo i quattro punti di ancoraggio (top, bottom, left, right) a zero, il layer invisibile e andrà a ricoprire l’intero schermo.

Lo span nello “skinlink” viene settato come invisibile solo perchè alcuni browser non accettano link vuoti.

Ultima parte CONTAINER abbiamo assegnato un posizionamento relativo ed un valore di z-index superiore a quello dello sfondo (così facendo il sito si sovrappone al layer cliccabile evitando che i click generati nell’area dei contenuti comportino l’apertura del sito sponsor).

L’istruzione z-index, indica che questa immagine dovrà stare dietro a tutto il resto del sito. La z-index, infatti, serve a gestire l’ordinamento lungo l’asse della profondità… ad esempio come i livelli di Photoshop.

Passo 3 il Link
Questo è il codice da inserire nella pagina subito dopo l’apertura del tag “body”

link tackeover background

Al posto di affiliarsi.com dovrai inserire il link verso il sito dello sponsor.

Quando la remunerazione è CPC (Costo per click) e non CPM abbiamo visto siti grossi applicare una pratica non corretta: utilizzare lo sfondo bianco con link verso Casinò, Forex o altri settori redditizi.

Applicare pratiche scorrette, cercando di ingannare l’utente non sappiamo quali risultati utili possa portare all’Advertiser, in quanto l’utente si troverà una finestra o tab indesiderata davanti ai suoi occhi, che inevitabilmente chiuderà ma l’Advertiser pagherà!

Se questa tecnica promozionale sarà utilizzata in una maniera corretta porterà buoni risultati all’Advertiser, al gestore del sito e al visitatore, che se riterrà la pubblicità di suo interesse, cliccherà in piana libertà e compierà di sicuro un’azione!

>> Continua a seguirci su AffiliatePRO

Inserisci un commento

Il tuo indirizzo email non sarà pubblicato. Required fields are marked *

*