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.

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.

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.

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.

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

PS: Modul zvláda aj rotáciu 🙂