- Lorem ipsum dolor sit amet
- consectetur adipiscing elit.
- Sed ligula purus,
- efficitur vel sollicitudin quis, tempor in elit.
Tip dokumenta: Banner
Polja koja se mogu koristiti: Title, Content, Backgorund image, Poster image, Link name 1 i url, App Store url, Google play 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.
Sve fotografije provući kroz program za optimizaciju – preporuka https://compressjpeg.com/
Rezolucija | Background (w x h) | Poster (w x h) predlog dimenzija vizuala - visine |
---|---|---|
1920 | 2880 x 1226 | 2536 x 655 |
1366 | 2049 x 873 | 1690 x 437 |
1024 | 1024 x 480 | Nasleđuje 1366 |
768 | 768 x 420 | Nasleđuje 1366 |
320 | 640 x 360 | 480 x 270 |
Postoji više prikaza ovog banera i to:
- Standardni banner sa background slikom
- Kada je dugme u donjem, gornjem i centru bannera
- Kada je uneta poster slika
- Kada je ceo banner klikabilan i nema tekst
Ovi prikazi se regulišu klasama koje se unose na nivou dokumenta ili headbox-a.
SAFE ZONE
Klase za izmenu sadržaja
web-text-color - beli tekst
without-title – klasa se unosi kako bi se uklonio naslov sa dokumenta (jer je jedino on obavezan)
- Kada se unese klasa without-title a ne unesu se content i dugme, na rezoluciji 320 se ukloni beli padding namenjen naslovu i prikaže se samo background slika.
css-js-banner-clickable - klasa se unosi na nivou dokumenta. 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 dokumenta. Banner postaje klikabilan celom površinom ali se ostali elementi i dalje prikazuju.
p-banner-270 - visina banera je 270px. Ukoliko slika ima veću visinu od 270px biće odsečena da odgovara datoj visini.
Klasa without-text nije aktivna iako je uneta kada je ovakav banner u pitanju.
Klase koje se koriste za izmene buttona
Link 1 (Primary)
button-position-top - pozicionira dugme na vrh banera, na mobilnom je u ovom slučaju dugme preko bkg slike.
button-position-bottom - pozicionira dugme na dno banera preko bkg slike- na mobilnom u ovom slučaju dugme ostaje posle title i description-a kao i do sada,
button-position-mobile-middle - klasa pozicionira dugme iznad title na mobilnoj rezoluciji, na desktop rezoluciji dugme ostaje ispod description-a.
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
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)