Documentatie: Banner

Image Banner (Optiune: Image Aware)

Bannerul de tip imagine se va redimensiona conform raportului Lungime X Inaltime natural al imaginii adaugate in campul imagine.  Este recomandata folosirea bannerului de tip imagine atunci cand imaginea de background este mai importanta sau la fel de importanta precum continutul bannerului.

Referinta: Rezolutia Full HD (FHD) 1920x1080 pixeli (px)

Dimensiune maxima imagine: 1920 px

Numar de banere intr-o sectiune:  1 (full) |  2  | 3 | 4  | orice alta versiune este nerecomandata

Dimensiuni recomandate per variatie: 1920 px | 960 px | 640 px | 480 px

Format recomandat: .jpg

 

*Inaltimea imaginii este contextuala si nu are o limitare alta decat ce vreti voi sa aratati.

*Dimensiunile prezentate sunt pentru un banner full intr-un container full si reprezinta maximul dar si valoarea recomandata. Pentru un continut mai ingust se vor redimensiona respectiv fiecarui banner si container. Pentru containere prezente pe site accesati pagina de containere.

Content Banner (Optiune: Content Aware)

Bannerul de tip content este construit pentru a se redimensiona astfel incat continutul sa fie intotdeauna vizibil in mod automat. Este recomandata folosirea bannerului de tip content atunci cand imaginea de background este ambientala si nu reprezinta principalul punct de interes.

Referinta: Rezolutia Full HD (FHD) 1920x1080 pixeli (px)

Dimensiune maxima imagine: 1920 px

Numar de banere intr-o sectiune:  1 (full) |  2  | 3 | 4  | orice alta versiune este nerecomandata

Dimensiuni recomandate per variatie: 1920 px | 960 px | 640 px | 480 px

Format recomandat: .jpg

 

*Inaltimea imaginii este contextuala si nu are o limitare pentru ca ea se va redimensiona in functie de continutul bannerului (text&butoane).

*Dimensiunile prezentate sunt pentru un banner full intr-un container full si reprezinta maximul dar si valoarea recomandata. Pentru un continut mai ingust se vor redimensiona respectiv fiecarui banner si container. Pentru containere prezente pe site accesati pagina de containere.

This is a Content Banner

This banner automatically snaps to the content in "auto" mode and is the recommended way to use it.

The banner comes with fixed height variations (Banner Configuration/Banner Height option): small - 400px, medium - 600px, large - 800px, viewport

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis est ac erat vestibulum, et porta mauris commodo. Curabitur suscipit consequat dui, eget posuere dolor imperdiet sed. Morbi turpis ligula, consectetur et dolor eget, egestas pellentesque nunc. Aenean sodales bibendum lacus. Donec at urna erat. Sed non diam eu enim faucibus vulputate. Etiam tincidunt enim et elit condimentum, a commodo ante posuere.

Duis in posuere nibh, non mollis ipsum. Aenean cursus ultricies sapien a commodo. Phasellus aliquet nulla leo, in fringilla lacus pretium et. Cras posuere commodo consectetur. Ut vehicula elit in dolor gravida, et ullamcorper libero tempor. Morbi ut est id orci vulputate rhoncus quis sit amet neque. Curabitur accumsan sem sit amet pellentesque porta. Aliquam erat volutpat. Aliquam ut gravida felis, sit amet venenatis nisi.

This is a Content Banner

Banner Decor Options

Decor with border only

Mauris orci nisi, lobortis nec nulla et, imperdiet dapibus augue. Nam porta, leo nec porttitor congue, elit mauris faucibus massa, finibus maximus dui lacus et lorem. Etiam vel rutrum nulla. Duis et facilisis lacus, a vestibulum arcu. Nullam dapibus tellus tellus, in cursus felis vehicula sed. 

This is a content banner with large height option selected.

Decor with border only

Decor with dark transparent background

Mauris orci nisi, lobortis nec nulla et, imperdiet dapibus augue. Nam porta, leo nec porttitor congue, elit mauris faucibus massa, finibus maximus dui lacus et lorem. Etiam vel rutrum nulla. Duis et facilisis lacus, a vestibulum arcu. Nullam dapibus tellus tellus, in cursus felis vehicula sed. 

This is a content banner with medium height option selected.

Decor with dark transparent background

Decor with light transparent background

Mauris orci nisi, lobortis nec nulla et, imperdiet dapibus augue. Nam porta, leo nec porttitor congue, elit mauris faucibus massa, finibus maximus dui lacus et lorem. Etiam vel rutrum nulla. Duis et facilisis lacus, a vestibulum arcu. Nullam dapibus tellus tellus, in cursus felis vehicula sed. 

This is a content banner with small height option selected.

Decor with light transparent background

This is a content banner with viewport height option selected.

Content Position

Content position left at half width

Mauris orci nisi, lobortis nec nulla et, imperdiet dapibus augue. Nam porta, leo nec porttitor congue, elit mauris faucibus massa, finibus maximus dui lacus et lorem. Etiam vel rutrum nulla. Curabitur ligula velit, vestibulum ac suscipit eget, imperdiet id lorem. Suspendisse vel massa vitae dolor varius gravida. Duis et facilisis lacus, a vestibulum arcu. Nullam dapibus tellus tellus, in cursus felis vehicula sed. Fusce ac tempus lectus, et malesuada magna. Pellentesque vitae porta est.

Content position left at half width

Content position right at half width

Mauris orci nisi, lobortis nec nulla et, imperdiet dapibus augue. Nam porta, leo nec porttitor congue, elit mauris faucibus massa, finibus maximus dui lacus et lorem. Etiam vel rutrum nulla. Curabitur ligula velit, vestibulum ac suscipit eget, imperdiet id lorem. Suspendisse vel massa vitae dolor varius gravida. Duis et facilisis lacus, a vestibulum arcu. Nullam dapibus tellus tellus, in cursus felis vehicula sed. Fusce ac tempus lectus, et malesuada magna. Pellentesque vitae porta est.

Content position right at half width

2/3 content with decor border

Mauris orci nisi, lobortis nec nulla et, imperdiet dapibus augue. Nam porta, leo nec porttitor congue, elit mauris faucibus massa, finibus maximus dui lacus et lorem. Etiam vel rutrum nulla. Curabitur ligula velit, vestibulum ac suscipit eget, imperdiet id lorem. Suspendisse vel massa vitae dolor varius gravida. Duis et facilisis lacus, a vestibulum arcu. Nullam dapibus tellus tellus, in cursus felis vehicula sed. Fusce ac tempus lectus, et malesuada magna. Pellentesque vitae porta est.

2/3 content with decor border

1/3 content with custom margins

This banner requires advanced customization and is just a proof of concept for customization.

Mauris orci nisi, lobortis nec nulla et, imperdiet dapibus augue. Nam porta, leo nec porttitor congue, elit mauris faucibus massa, finibus maximus dui lacus et lorem. Etiam vel rutrum nulla. Duis et facilisis lacus, a vestibulum arcu.

1/3 content with custom margins

Non-standard banner options

(These are available options but not generally recommended)

content image

This is a content banner with a inner content image

This is a very customised and uncommon look-n-feel banner which can be used in particular cases.

Mauris orci nisi, lobortis nec nulla et, imperdiet dapibus augue. Nam porta, leo nec porttitor congue, elit mauris faucibus massa, finibus maximus dui lacus et lorem. Etiam vel rutrum nulla. Duis et facilisis lacus, a vestibulum arcu. 

This is a content banner with a inner content image
content image

This is a content banner with a inner content image

This is a very customised and uncommon look-n-feel banner which can be used in particular cases.

Mauris orci nisi, lobortis nec nulla et, imperdiet dapibus augue. Nam porta, leo nec porttitor congue, elit mauris faucibus massa, finibus maximus dui lacus et lorem. Etiam vel rutrum nulla. Duis et facilisis lacus, a vestibulum arcu. 

This is a content banner with a inner content image
Coș de cumpărături