Tip dokumenta: Banner
Polja koja se popunjavaju: Title, Description, SubDescription, Content, Backgound image, Poster image, Mobile image, Link name 1 i url, Link name 2 i url, App Store url, Google play url, CSS class, Mob HEX value, Web HEX value

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)	Poster (w x h)
1920	2880 x 1220	1440 x 1220
1366	1920 x 813	1440 x 1220
1024	1024 x 480	Nasleđuje 1366
768	768 x 510	576 x 765
320	640 x 360	/

Prikaz banera kada je po dizajnu uži

U ovom slučaju visina banera se redukuje unosom klasena dokument u polje CSS Class shrink-banner.

Rezolucija	Background (w x h)	Poster (w x h)
1920	2880 x 843	1440 x 843
1366	1920 x 562	1440 x 843
1024	1024 x 360	Nasleđuje 1366
768	768 x 390	/
320	640 x 360	/

Postoji više prikaza ovog banera i to:

- Kada je poster slika levo
- Kada je poster slika desno
- Kada se ne unosi poster slika već samo background
- Kada je ceo banner klikabila i nema tekst
- Kada banner umesto bkg ima unetu HEX vrednost za boju pozadine

Ovi prikazi se regulišu klasama koje se unose na nivou dokumenta.

• Kada je poster slika levo, osnovne klase koje se unose na dokument su:
  CSS class: media-object-middle-align media-object-left-corner image-max-height css-js-text-align-right-fix
• Kada je poster fotografija desno, osnovne klase koje se unose na dokument su:
  CSS class: media-object-middle-align media-object-right-corner image-max-height css-js-text-align-left-fix
  
  media-object-middle-align -  obavezna klasa na ovom tipu banera i ona sklanja donji padding
  media-object-left-corner – pozicioniranje poster slike levo
  media-object-right-corner – pozicioniranje poster slike desno
  image-max-height – poster zauzima maksimalnu visinu banera
  css-js-text-align-right-fix – poravnavanje teksta desno i radi samo u ovoj kombinaciji klasa za ovu specifičnu situaciju.
  css-js-text-align-left-fix – poravnavanje teksta levo i radi samo u ovoj kombinaciji klasa za ovu specifičnu situaciju.
  
  
• Kada baner ima samo background fotografiju
  CSS class: media-object-middle-align
  
  
• Kada se pravi uži banner
  CSS class: media-object-middle-align shrink-banner
  
  
• Kada je banner ceo klikabilan
  CSS class: media-object-middle-align
  ClassSuffix: css-js-banner-clickable
  
  

SAFE ZONE

Klase za prilagođavanje prikaza celog banera

web-text-color – za bela slova
mob-white-text – bela slova na mobilnom prikazu
reverse-text – promena pozicije slike na desnu stranu. Izvorni prikaz je da je slika levo.
shrink-banner – smanjivanje visine banera
large-title - kada se ubaci veći Title tekst, sadržaj iz polja Content se ne čita
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.
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.

Mobilni prikaz

Za contentAside na mobile view postoji mogućnost da se postavi vizual.

Rezolucija	Mobile image (w x h)
Mobile image	375x520

Slika se unosi u polje Mobile image. Mobile image ima prioritet, pa tako ako se unese i vizual na Background 320 on se neće prikazati.

mob-white-text - beli tekst (doc)
align-bottom - pomeranje sadržaja na donju ivicu (doc)

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
mobile-primary-white-btn - belo dugme na mobile (headbox)
mobile-primary-border-red-btn – crveni border na mobile (headbox)
mobile-primary-border-white-btn – belo dugme na mobile (headbox)

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
web-secondary-simple-link - bez outline-a
secondary-link-without-paddiing-red - samo crveni tekst za link
secondary-link-without-paddiing-white - samo beli tekst za link
full-secondary-filled-red-btn - crveno dugme

Unos heksadecimalne vrednosti

Kako bi ova funkcionalnost bila podržana na tip dokumenta su dodata dva nova polja
Mob HEX value – hex na mobilnom prikazu (pr. ff88ff uz klasu za bela slova na mob mob-white-text)
Web HEX value – hex na web prikazu (pr. ff88ff)