design kit - socialshaker.comdesign kit. tips. campaign background visual the background visual can...
TRANSCRIPT
![Page 1: DESIGN KIT - socialshaker.comDESIGN KIT. TIPS. CAMPAIGN BACKGROUND VISUAL The background visual can be set in the “Configuration” tab in HD with dimensions 1920 x 1080px for the](https://reader035.vdocuments.us/reader035/viewer/2022070100/600b9cfbea452062960fd250/html5/thumbnails/1.jpg)
DESIGN KIT
![Page 2: DESIGN KIT - socialshaker.comDESIGN KIT. TIPS. CAMPAIGN BACKGROUND VISUAL The background visual can be set in the “Configuration” tab in HD with dimensions 1920 x 1080px for the](https://reader035.vdocuments.us/reader035/viewer/2022070100/600b9cfbea452062960fd250/html5/thumbnails/2.jpg)
TIPS
![Page 3: DESIGN KIT - socialshaker.comDESIGN KIT. TIPS. CAMPAIGN BACKGROUND VISUAL The background visual can be set in the “Configuration” tab in HD with dimensions 1920 x 1080px for the](https://reader035.vdocuments.us/reader035/viewer/2022070100/600b9cfbea452062960fd250/html5/thumbnails/3.jpg)
CAMPAIGN BACKGROUND VISUAL
The background visual can be set in the “Configuration” tab in HD with dimensions
1920 x 1080px for the best rendering.
1920
1080
![Page 4: DESIGN KIT - socialshaker.comDESIGN KIT. TIPS. CAMPAIGN BACKGROUND VISUAL The background visual can be set in the “Configuration” tab in HD with dimensions 1920 x 1080px for the](https://reader035.vdocuments.us/reader035/viewer/2022070100/600b9cfbea452062960fd250/html5/thumbnails/4.jpg)
IMMERSIVE BLUR EFFECTTo improve contrast and the visibility of your campaign, you can blur your background right
from the beginning.
Especially on a microsite, the immersive aspect of your visual identity can be a real asset in
full-screen.
For optimal rendering, you can integrate a visual in transparent PNG format (below the
tennis player, net and logo) on the platform. These visuals are superimposed on the
background.
![Page 5: DESIGN KIT - socialshaker.comDESIGN KIT. TIPS. CAMPAIGN BACKGROUND VISUAL The background visual can be set in the “Configuration” tab in HD with dimensions 1920 x 1080px for the](https://reader035.vdocuments.us/reader035/viewer/2022070100/600b9cfbea452062960fd250/html5/thumbnails/5.jpg)
IMMERSIVE EFFECTS WITH BACKGROUND COLORS
Applying a slightly transparent background color with the color picker preserves an immersive aspect without
using the blur effect. The background color softens and harmonizes with the colors of the background visual
for better visibility.
![Page 6: DESIGN KIT - socialshaker.comDESIGN KIT. TIPS. CAMPAIGN BACKGROUND VISUAL The background visual can be set in the “Configuration” tab in HD with dimensions 1920 x 1080px for the](https://reader035.vdocuments.us/reader035/viewer/2022070100/600b9cfbea452062960fd250/html5/thumbnails/6.jpg)
RESPONSIVE
ACCESSIBLE ON MOBILE AND TABLETS
Different mobile devices have different screen resolutions. We guarantee the same high quality rendering on all
mobile devices. All our mechanisms maintain virtually the same resolution settings as on desktop.
![Page 7: DESIGN KIT - socialshaker.comDESIGN KIT. TIPS. CAMPAIGN BACKGROUND VISUAL The background visual can be set in the “Configuration” tab in HD with dimensions 1920 x 1080px for the](https://reader035.vdocuments.us/reader035/viewer/2022070100/600b9cfbea452062960fd250/html5/thumbnails/7.jpg)
INTERFACE
![Page 8: DESIGN KIT - socialshaker.comDESIGN KIT. TIPS. CAMPAIGN BACKGROUND VISUAL The background visual can be set in the “Configuration” tab in HD with dimensions 1920 x 1080px for the](https://reader035.vdocuments.us/reader035/viewer/2022070100/600b9cfbea452062960fd250/html5/thumbnails/8.jpg)
“CONFIGURATION” TAB
You can easily delete the background image by clicking the “X” icon.
REMOVING THE BACKGROUND IMAGE
1
2
3
Use this feature if you do not have a background visual or if you want to integrate the dominant
color of your graphic charter.
BACKGROUND COLOR
Upload the background visual at the dimensions, 1920x1080px, with this button.
UPLOADING
12
3
![Page 9: DESIGN KIT - socialshaker.comDESIGN KIT. TIPS. CAMPAIGN BACKGROUND VISUAL The background visual can be set in the “Configuration” tab in HD with dimensions 1920 x 1080px for the](https://reader035.vdocuments.us/reader035/viewer/2022070100/600b9cfbea452062960fd250/html5/thumbnails/9.jpg)
“WELCOME” TAB
Upload the visual background of your page at the dimensions, 810x700px, with this button. Visuals
in transparent PNG format are highly recommended for the best resolution.
UPLOADING
1
2
You can set the color of the page’s background (810x700px). You can even modify the
transparency with the same color-picker.
BACKGROUND PAGE COLOR
1
2
![Page 10: DESIGN KIT - socialshaker.comDESIGN KIT. TIPS. CAMPAIGN BACKGROUND VISUAL The background visual can be set in the “Configuration” tab in HD with dimensions 1920 x 1080px for the](https://reader035.vdocuments.us/reader035/viewer/2022070100/600b9cfbea452062960fd250/html5/thumbnails/10.jpg)
OVERALL VIEW
SUPERIMPOSING VISUAL ELEMENTS
Here you can see the final superimposed image after uploading 2 distinct visuals (the campaign’s background
visual and the page background visual).
![Page 11: DESIGN KIT - socialshaker.comDESIGN KIT. TIPS. CAMPAIGN BACKGROUND VISUAL The background visual can be set in the “Configuration” tab in HD with dimensions 1920 x 1080px for the](https://reader035.vdocuments.us/reader035/viewer/2022070100/600b9cfbea452062960fd250/html5/thumbnails/11.jpg)
RESOLUTIONS
![Page 12: DESIGN KIT - socialshaker.comDESIGN KIT. TIPS. CAMPAIGN BACKGROUND VISUAL The background visual can be set in the “Configuration” tab in HD with dimensions 1920 x 1080px for the](https://reader035.vdocuments.us/reader035/viewer/2022070100/600b9cfbea452062960fd250/html5/thumbnails/12.jpg)
Here you can see the final superimposed image after uploading 2
distinct visuals (the campaign’s background visual and the page
background visual).
MINIMUM IFRAME SIZE
Here you can see the final superimposed image after uploading 2
distinct visuals (the campaign’s background visual and the page
background visual).
MEDIUM-SIZE MOBILE
Here you can see the final
superimposed image after
uploading 2 distinct visuals (the
campaign’s background visual
and the page background
visual).
227x700px810x700px320x700px
810px320px 227px
FACEBOOK AND MICROSITE TAB SIZE
![Page 13: DESIGN KIT - socialshaker.comDESIGN KIT. TIPS. CAMPAIGN BACKGROUND VISUAL The background visual can be set in the “Configuration” tab in HD with dimensions 1920 x 1080px for the](https://reader035.vdocuments.us/reader035/viewer/2022070100/600b9cfbea452062960fd250/html5/thumbnails/13.jpg)
FACEBOOK AND MICROSITE TAB SIZE
Note that the display of the campaign's background, as well as the page's background, is redistributed according to each device and centered.
All graphic elements with important information must be centered so that they are visible on small screens.
MINIMUM IFRAME SIZEMEDIUM-SIZE MOBILE
227x700px810x700px320x700px
810px320px 227px
![Page 14: DESIGN KIT - socialshaker.comDESIGN KIT. TIPS. CAMPAIGN BACKGROUND VISUAL The background visual can be set in the “Configuration” tab in HD with dimensions 1920 x 1080px for the](https://reader035.vdocuments.us/reader035/viewer/2022070100/600b9cfbea452062960fd250/html5/thumbnails/14.jpg)
En téléchargeant 2 visuels distincts (visuel d’arrière-plan de
campagne et visuel d’arrière-plan de page), voici le rendu final de
la superposition.
810px
810px
1920px
700px 1080px
Facebook tab
Microsite background