VAŽNO! U slučaju da strana sadrži tabove, moguće je dodati samo jedan ovakav template na stranu.

Karakteristike ovog bannera su skoro u potpunosti iste kao kod standardnog 4grid bannera.
Razlike su u dodatnim poljima za otvaranje pop up-a i unosu HEX vrednosti.

Tip dokumenta: Banner
Polja koja se popunjavaju: Title, Description, Content, Backgound image, Link name 1, 2 sa pripadajućim url, App Store url,  Google play url, CSS class
Za pop up - Animated image 1, Content 2, Link name 3 i url.
Poster fotografija na 320 se unosi samo kada je potrebno da baner na mobile promeni prikaz.

Unos vizuala

Dimenzije background vizuala po pozicijama

Pozicija 1 (veći baner)

Rezolucija	Background (w x h)
1920	1110 x 960
1366	1110 x 960
1024	440 x 400
768	370 x 390
320	370 x 190

Pozicija 2 (manji baner)

Rezolucija	Background (w x h)
1920	1110 x 426
1366	1110 x 426
1024	440 x 180
768	370 x 190
320	370 x 190

Pozicija vizuala u pop up-u

Animated image mora da se unese ukoliko je potrebno da popup ima fotografiju.
Može se ubaciti fotografija koja je ista kao 1366 ili drugačijeg formata (npr kao za veliki baner levo).
Preporuka je da fotografija bude kvadratna (ne mora) npr 900x900px i ne prelazi 1000px visine/širine., zbog boljeg responsive prikaza.

Postoji više prikaza ovog banera i to*:

- sa 4 bannera
- sa 3 bannera - veliki levo i dva mala desno
- sa 3 bannera - dva mala levo i veliki desno
- sa 2 bannera

*Napomena: 4gridWithModal je Template na nivou Headbox-a i nije moguće u okviru istog Headbox-a kombinovati ga sa običnim 4Grid banerom.

Klase za prilagođavanje prikaza celog banera

4 banera - predstavlja osnovni prikaz i nema potrebe za unosom klasa za definisanje ovog prikaza
Veliki levo i dva mala banera desno - koristi se klasa one-big-two-small-left 
Dva mala banera levo i jedan veliki desno - koristi se klasa one-big-two-small-right
Dva velika banera - koristi se klasa two-big
*Ove klase se unose u polje ClassSuffix na nivou headbox-a

gradient-on - postavlja gradent preko bannera za zatamnjenje (osnovni prikaz je beli text)

Klase za prilagođavanje prikaza celog banera na nivou headbox-a (ClassSufix)

content-align-bottom - ceo sadržaj je pozicioniran u donjem delu banera
content-align-center - ceo sadržaj je pozicioniran u sredini banera
text-center - ceo sadržaj je pozicioniran u gornji deo banera
text-right - sadržaj je pozicioniran desno
*Ukoliko nijedna klasa nije uneta, sadržaj u okviru 4Grid templejta se pozicionira top-left. Sa klasom content-align-bottom, koja je na većini 4Grid bannera, banneri su pozicionirani bottom-left.
white-background - za belu pozadinu na baneru (default-no je siva)
white-color - unosi se kada želimo da naslov u okviru headbox-a bude bele boje

Klase za prilagođavanje prikaza celog banera na nivou pojedinačnog dokumenta (CSS Class)

Sa sledećim klasama postoji mogućnost pozicioniranja sadržaja u okviru svakog dokumenta horizontalno i vertikalno. Može se koristiti jedna ili dve klase, a najbolji efekat se vidi uz korišćenje klase half-width.

content-align-bottom - pozicionira sadržaj dole
content-horizontal-align-center - pozicionira sadržaj horizontalno u sredini
content-align-top - pozicionira sadržaj gore
content-align-left - pozicionira sadržaj levo
content-vertical-align-center - pozicionira sadržaj vertikalno u sredini
content-align-right - pozicionira sadržaj desno

Postoji mogućnost pozicioniranja naslova u svakom dokumentu, koji je default-no pozicioniran left. Ove klase se moraju koristiti samostalno ili uz gore navedene klase i samo pozicioniraju naslov.

text-right - pozicionira tekst desno uz content-align-right
text-center - pozicionira tekst centralno uz content-horizontal-align-center
half-width - smanjenja širine sadržaja (tako da zauzima pola banera) na 50% na svakom dokumentu posebno.
Ukoliko se ova klasa unese zajedno sa text-center CTA bude centriran, a sadržaj bude poravnat levo. Isto i za text-right.

Klase za prilagođavanje veličine teksta

text-size-s - title 24px, tekst 14px

text-size-m - title 32px, text 20px (default-na veličina teksta)

text-size-l - title 36px, text 22px

Ograničen je tekst u paragrafu u malim banner-ima na 2 reda kada postoje dva naslova ili 3 reda kada postoji jedan naslov.
Obratiti pažnju da se količina teksta ograniči i posebno voditi računa kada je 50% sirine, jer sve što pređe ograničenje neće biti prikazano.

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
full-secondary-filled-red-btn - crveno dugme

Prikazi na mobilnoj rezoluciji

Po defalt-u je definisano da za bakcground slike prikaz bude takav da je ispod slike naveden sadržaj u okviru samog banera. Ukoliko je potrebno da se izmeni prikaz u jednu od druge dve opcije. Procedura je sledeća:

1. Prikaz bez pozadinske slike
U ovom sliučaju je potrebno dodati klasu u polje ClassSuffix koja definiše koje od četiri polja će promeniti prikaz u responsive. Klase su sledeće: 
mobile-without-bg-one
mobile-without-bg-two
mobile-without-bg-three
mobile-without-bg-four.

2. Prikaz kada ima pozadinsku sliku
U ovom slučaju se na dokument dodaje
- Poster image na 320 
- polje Use main POSTER photo for all resolutions (Ex: no) ostaviti prazno
- i polje CSS Class dodati klasu za bela slova - mobile-white-text – jer su slova po defaultu na mobile crna
- dodati jednu od navedenih klasa na headbox u PLM-u koja definiše prikaz na 320.