Ako na responzívne bannery + TIP na skvelý WP plugin

Ako na responzívne bannery + TIP na skvelý WP plugin

Umiestnenie bannerov je dôležitá vec a práca s nimi priamo vo WordPresse tiež. Tak tu máme pár vecí, ktoré sa vám určite zídu 🙂

Bannery v sidebary (bočný panel)

Najčastejšie sa stretávame s bannermi umiestnenými v bočnom panely. Tu sa najviac hodia rozmery: 160×600, 300×300, 200×200, 250×250,.. Záleží hlavne od šírky bočného panelu na vašej stránke.

responzivne-bannery

Pokiaľ máte responzívny dizajn stránky, bočný panel sa na malých displejoch spravidla posunie pod obsah stránky. Tým pádom za vás samotný dizajn stránky rieši responzivitu bannerov v bočnom panely a nemusíte robiť nič naviac.

responzivne-bannery2

 

Bannery priamo v článku

Bannery v bočnom panely bojujú s bannerovou slepotou používateľov a preto pre vyšší počet preklikov je lepšie vkladať bannery priamo do obsahu stránky. Na príklade nižšie môžete vidieť banner 728x90px umiestnený do stredu obsahu stránky/článku.  

responzivne-bannery3

  Pri zobrazení na mobile sa banner automaticky zmenší na požadovanú veľkosť. Toto správanie zabezpečuje priamo WordPress téma stránky, ktorá sa stará o responzivitu.  

responzivne-bannery4

  Pokiaľ to vaša stránka nerobí, môžete si pridať vlastný CSS kód (nižšie), napríklad pomocou modulu Simple Custom CSS.
@media screen and (max-width: 730px) {
	img {
		max-width: 100%;
		height: auto;
	}
}
Tento CSS kód zaručí, že všetky obrázky budú mať 100% šírku a nebudú „pretŕčať“ cez stránku na displejoch so šírkou 0 až 730px. Je dobré si toto číslo upraviť podľa toho, ako sa správa vaša stránka na mobiloch a pri akej šírke sa „láme“ dizajn.  

Iný banner na mobile? Áno!

Pokiaľ nechcete aby sa vám pri mobilnom zobrazení zmenšil banner, zobrazte iný! Opäť sa to dá spraviť viacerými spôsobmi. Buď sa pohráte s CSS-kom (ale to odporúčam len pokročilým používateľom) alebo použijete modul, ktorý to vyrieši za vás. Od nášho publishera som dostala pozitívnu referenciu na modul Ad Inserter, ktorý som aj vyskúšala a funguje skvele.   Vytvorila som si dva „bloky“ bannerov, jeden pre desktop a tablet, druhý pre mobil. Do prvého som dala banner 728×90 a do druhého 336x280px. Zaškrtla som si tiež, že chcem shortcode a výsledné dva shortcody som umiestnila do článku/na stránku tam, kde som chcela aby sa zobrazovali bannery. Čo sa následne stalo? Na počítačoch a tabletoch sa zobrazoval banner s veľkosťou 728×90 a na mobiloch sa zobrazoval banner 336x280px.  

Automatické vkladanie bannerov (pre WordPress)

Chcete aby sa bannery automaticky vložili do každého článku napríklad povedzme za 3 odstavec? Musím povedať, že modul Ad Inserter ma prekvapil a zvláda aj takéto úlohy. Nastavte si „Automatic Display“, zaškrtnite že ho chcete na všetkých článkoch (Posts) a zvoľte si, za ktorý odstavec sa má banner vložiť 😉 Tých možností, ktoré modul ponúka je naozaj veľa. Odporúčam vyskúšať.   automaticke-zobrazovanie   PS: Modul zvláda aj rotáciu 🙂
Katka Novotná

Viac ako dva roky som pracovala na pozícií e-commerce marketér a zvyšovala som obraty rôznym eshopom. Niektoré z nich sa vyšplhali až na Shop Roku (ocenenie od Heureka.sk). Mám skúsenosti s PPC Adwords aj Facebook. Analytics mi je veľmi blízky. Pre reklamnú agentúru Wiktor Leo Burnett som pomáhala s UX/UI webových projektov a aplikácií pre veľkých klientov. Vo voľnom čase tvorím webové stránky založené prevažne na WordPresse.

Zarábajúci affiliate web
E-book zadarmo

Zarábajúci affiliate web

Už len jeden krok vás delí od získania e-booku, ktorý vám ukáže cestu k zarábaniu na webe formou affiliate marketingu

Ďalšie články, ktoré by ťa mohli zaujímať

Akých inzerentov u nás nájdete?