Tip dokumenta: Banner
Polja koja se popunjavaju: Title, Description, SubDescription, Background image, Poster image, Link name 1 i url, App Store url, Google play url, CSS class, App Store url, Google play url, Huawei Gallery url.
Unos vizuala
Fotografije se unose se po rezolucijama i dimenzije su sledeće:
Obavezan unos je za 1920, 1366 i 320. Ukoliko nisu unete 1024 i 768 one će naslediti 1366.
Tamo gde slike nisu unete, prema responsive nema potrebe da se unose. To znači da se Background ili Poster photo sa 1366 lepo skaliraju na 1024.
Za mobile 320 rezoluciju nije potrebno unositi poster sliku, već napraviti jednu bkg sliku koja je spojena, kako bi što manje opterećivala mobile responsive svojom težinom.
Sve fotografije provući kroz program za optimizaciju – preporuka https://compressjpeg.com/
| Rezolucija | Background (w x h) |
|---|
| 1920 | 2880 x 1220 |
| 1366 | 1920 x 813 |
| 1024 | 1024 x 480 |
| 768 | 1024 x 480 |
| 320 | 640 x 360 |
| Rezolucija | Background shrink (w x h) |
|---|
| 1920 | 2880 x 843 |
| 1366 | 1920 x 562 |
| 1024 | 1024 x 360 |
| 768 | 1024 x 390 |
| 320 | 640 x 360 |
| Rezolucija | Background 50% (w x h) |
|---|
| 1920 | 2880 x 270 |
| 1366 | 1920 x 270 |
| 1024 | 1024 x 270 |
| 768 | 768 x 270 |
| 320 | 640 x 360 |
Postoji više prikaza ovog banera i to:
- Kada je visina slidera standardna
- Kada se visina bannera uža (shrink)
- Kada se visina bannera 50% (270)
- Svi banneri mogu biti klikabilni celom povšinom
- Banneri mogu biti klikabilni celom površinom pojedinačno
SAFE ZONE
Klase za prilagođavanje prikaza celog banera
media-object-middle-align - obavezna klasa na ovom tipu banera koja sklanja donji padding. Unosi se uvek pri kreiranju banera.
web-text-color – za bela slova
mob-white-text – bela slova na mobilnom prikazu
reverse-text – promena pozicije teksta na desnu stranu. Izvorni prikaz je da je tekst levo.
shrink-banner – smanjivanje visine banera na 50%.
css-js-banner-clickable – klasa se unosi na nivou headbox-a. Banner ceo postaje klikabilan celom površinom (u tom slučaju se ne prikazuju cta dugme, tekst i naslov i baner reaguje na hover). Na mobilnom prikazu se ne vidi beli prostor, već se baneri prikazuju celom svojom površinom.
js-banner-clickable – klasa se unosi na nivou headbox-a ili dokumenta. Banner postaje klikabilan celom površinom ali se ostali elementi i dalje prikazuju
p-banner-270 - visina banera je 270px, odnosno za 50% manja od standardne visine. Ukoliko slika ima veću visinu od 270px biće odsečena da odgovara datoj visini.
Klase koje se koriste za izmene buttona
Link 1 (Primary)
web-primary-white-btn - belo dugme na webu
web-primary-border-white-btn - beli outline na webu
web-primary-border-red-btn - crveni outline na webu
primary-link-without-paddiing-red - samo crveni tekst za link
primary-link-without-paddiing-white - samo beli tekst za link
full-primary-border-white-btn - beli outline na linku/dugmetu za responsive na 320
Link 2 (Secondary)
web-secondary-white-btn - belo dugme na webu
web-secondary-border-white-btn - beli outline na webu
web-secondary-border-red-btn - crveni outline na webu
full-secondary-filled-red-btn - crveno dugme
