1. Introduction.
Cool Tabs allows you to generate an interactive content campaign with a customized design adapted to your look & feel.
From the campaign editor, you can configure the appearance of your campaign: titles, landing description, main image, background image, font, and colors.
2. Step by step.
To configure the appearance, go to the 'Design' section of the campaign editor.
2.1. Basic data.
2.1.1. Campaign title.
In this field, you can include the name of your campaign. The name you enter will be displayed publicly on the landing page.
You can also choose to include the title in the description field instead, or prepare a creative as the main image that includes the title.
2.1.2. Campaign description.
In the 'Basic data' tab, you will also find an editor where you can include a text description. Give the user instructions on how to participate or detail the prize to be raffled. It should be clear enough for users to understand how the campaign works.
By default, we will style the texts you include so that they look good. But if you prefer, with our editor you can apply styles to the text (colors, font size, etc.).
In addition to text, you can add images or your own HTML.
2.2. Images and videos.
In the 'Images/videos' tab, you will find options to customize the campaign with images and/or video.
Check our tutorial to learn about the optimal size for your images.
2.2.1. Main image.
This is the image that will be displayed on the landing page and will be visible to all users. The optimal size is 810 px wide with unlimited height. Keep in mind that the taller the image, the more users will have to scroll.
2.2.2. Background image.
The image will be displayed unprocessed, so we recommend a maximum width of 768 px for mobile devices and 1280 px for larger screen sizes.
If your image does not span the full width of the screen, choose 'Full screen' mode in the 'Position' selector.
In general, the image displayed on mobile is the same as the background image.
2.2.3. Campaign video.
You can include a video in this field as a presentation. It can be a URL from YouTube, Vimeo, Flickr, etc.
This material is optional, but if you include a video in your campaign, keep in mind that it will be the first thing shown just above the main creative, unless you modify its placement using your own CSS.
2.3. Styles.
In the 'Styles' tab, you will be able to define the colors of your campaign and choose the font for your texts.
When designing your campaign you can include a color combination, consisting of a primary, secondary, background, and text color.
1. Primary color: this is the main color used in the campaign. It is applied to buttons/answer selectors (when the user hovers over the button, it becomes the text color), titles, and badge background color.
2. Secondary color: this is the background color of the main container on each campaign page.
Semi-transparency: in campaigns with a background image, you can apply semi-transparency to the secondary color. To do so, click on the 'Secondary color' field where you have entered the color code you want. A color picker will appear with two bars to its right. The bar on the right determines the level of transparency you want to apply to the secondary color.
3. Background color: this is the background color of the page. It covers the entire screen, so if you do not include a background image in your campaign, you can add a solid background color. It is also the color applied to the text on buttons and answer selectors (when the participant hovers over the answer options, it changes to the background color).
4. Font color: this is the color of texts that are not titles.
5. Font family: if you need to include a specific font that is not available, write to us at help@cool-tabs.com.
For a good color scheme, we recommend using either a dark primary color with soft secondary and background colors and dark text color, or a soft primary color with dark secondary and background colors and soft text color.
In quiz error messages and post-answer feedback messages, the colors are fixed.
The feedback color can be changed via CSS with the help of the tutorial How to change the colors of the feedback and answer message in a quiz via CSS.
To change error message colors in quizzes, contact us at help@cool-tabs.com, indicating the #/RGB of the desired color.
Below, you can see an example of a campaign with a background image and transparency.
You can also use the AI Style Agent to customize your campaign design. This assistant specializes in visual appearance: colors, fonts, sizes, alignments, borders, and the general style of your campaign's elements. Check the tutorial: AI Style Agent: customize your campaign design with AI.
2.4. Content.
2.4.1. Header for the entry form.
You can enable and customize a header. This will be the image that appears at the top of the form, as a banner, spanning the entire width of the page.
It must be 810 px wide.
2.4.2. Header for the personal data form.
You can include text, images, or video that provides users with information about what they will need to fill in next. This appears below the entry form header image and above the form fields. Regardless of whether you choose to include it or not, the form header image will still appear at the top as a banner.
Below, you can see an example of a registration form page. An image is shown as the header and, below it, a text as the data form header.
2.4.3. Header for the entries list page.
You can add text, images, or HTML to appear at the top of the participants list and individual participant pages.
2.4.4. Show a different creative before the campaign begins.
If you publish the campaign before its start date, the message "There are no active promotions at the moment" will appear by default. This section lets you configure and display a different message to build some anticipation about your campaign.
2.4.5. Show different content after the campaign ends.
Once the campaign ends, if it is still published, a box with the text "There are no active promotions at the moment" is shown by default. By enabling this field, you can replace that box with the image or text of your choice — for example, to announce when the winners will be published or when the next contest will start.
2.4.6. Display a custom creative on the winners page.
If you make the winners list public, you can include a custom creative in that section. The list will be published just below it.
2.4.7. Display a custom header across the entire campaign.
You can add a custom global header that will appear at the top of every screen throughout the campaign. This is useful if you want to keep an important message, specific branding, or a call to action visible during the entire user experience.
This header is independent of the options to include a header on the entry form and the personal data form. You can therefore use this option together with or separately from those, depending on what best suits your design.
It is placed outside the main wrapper, so it remains fixed and is not affected by the internal content of each screen.
Check the tutorial: How to add a custom header to all pages of your campaign.
2.4.8. Display a custom footer across the entire campaign.
You have the option to set up a common footer on all pages. You can include text, images, or HTML.
Below, you can see an example where a logo has been included as the campaign footer.
Check the tutorial: How to add a custom footer to your campaign.
2.5. Advanced.
In addition, campaigns configured with the Diamond plan support further design customization with HTML and CSS.
2.5.1. Use your own complete HTML for the landing page (Diamond plan only).
The main campaign page and the participation form contain several default elements that you can modify or hide.
2.5.2. Use your own complete HTML for the registration page (Diamond plan only).
2.5.3. Use your own complete HTML for the winners page (Diamond plan only).
The contest winners page can also be fully customized with the Diamond plan thanks to our advanced customization.
3. Other specifications.
The custom design options described above are available in campaigns created with the Gold and Diamond plans.
For more advanced customization, check the tutorial How to configure custom CSS for a campaign. There you will find detailed CSS rules to move or hide elements, add new ones, or completely restyle your campaign.
If you have any questions about the design configuration, contact us at help@cool-tabs.com.
4. Related content.
How to get started creating a campaign: basic settings.
How to configure custom CSS for a campaign.
Comments
0 comments
Please sign in to leave a comment.