Theme
Last updated
Last updated
The theme is used to customize the central theme of your campaign. When you open the editor, the theme section is automatically opened. You can also open it manually by clicking on the theme icon in the side panel.
Alternatively, you can open the theme section by clicking on the preview in the editor.
There are multiple options in the theme section. They are as follows:
There are 3 options to choose from: default (none), color, and image.
Default: It is used when you don’t want anything in your campaign background. It will make your background plain.
Color: To set color in your background.
You can add a gradient by turning on the toggle button.
You can set the gradient angle by moving the slider left and right.
-PENDING-
It is a section with multiple options. You can set a custom header for all your pages in the campaign.
The Setting feature allows you to customize the visibility and appearance of the header section on your page. This includes options for background, corner radius, border & shadow, and spacing. These customization options help you to create a visually appealing and cohesive design for your page's header.
Visibility: You can turn the visibility of the header section on or off. This allows you to hide or show the header as needed.
Background: Customize the background of the header section. (Detailed information can be found here).
Corner Radius: Adjust the corner radius to make the corners of the header block rounded. This gives a softer look to the header section.
Border & Shadow:
Border:
Types: Choose from four border types:
None (no border)
Dashed
Dotted
Solid
Width: Set the width of the border.
Color: Choose the color of the border.
Shadow:
Color: Set the color of the shadow.
Size: Adjust the size of the shadow.
Distance: Set the distance of the shadow from the header block.
Blur: Adjust the blur level of the shadow.
Spacing:
Margin: Set the outer spacing around the header block.
Padding: Set the inner spacing within the header block.
The logo feature allows you to upload and customize your logo in the header. You can either use an image or text for your logo. This feature provides various customization options to adjust the appearance and placement of your logo to fit your branding needs.
Logo Type:
Image: Upload an image, use a third-party image, or select an image from the gallery.
Text: Set custom text to be used as the logo.
Logo Upload: Upload your logo image by selecting an image file. To learn how to use Gallery, you can refer to this link.
Dimensions:
Width: Adjust the width of the logo using the slider.
Height: Adjust the height of the logo using the slider.
Logo Shape: Choose the shape of your logo:
Rectangular
Circle
Logo Container: Select the container style for your logo:
None (Default)
Filled
Contained
Shape Radius: Adjust the corner radius of the logo using the shape radius slider for rounded corners.
Logo Position: Set the position of the logo within the header:
Left
Center
Right
Logo Text: Enter the text you want to display as your logo.
Text Case: Choose the case for your logo text:
Uppercase
Lowercase
Title Case
Text Size: Adjust the size of the logo text using the text size slider.
Font Weight: Select the weight of the text for the logo:
Light
Regular
Bold
Text Color: Choose the color of the logo text using the color picker.
Alignment: Set the alignment of the text within the header:
Left
Center
Right
Letter Spacing: Adjust the spacing between the letters of the logo text using the letter spacing slider.
This includes margin and padding settings, which allow you to adjust the space outside and inside the logo container, respectively.
This option is used to write a tagline for your business or your campaign.
Text: Enter the text you want to display as your tagline.
Text Case: Choose the case for your logo text:
Uppercase
Lowercase
Title Case
Text Size: Adjust the size of the logo text using the text size slider.
Font Weight: Select the weight of the text for the logo:
Light
Regular
Bold
Text Color: Choose the color of the logo text using the color picker.
Alignment: Set the alignment of the text within the header:
Left
Center
Right
Letter Spacing: Adjust the spacing between the letters of the logo text using the letter spacing slider.
This includes margin and padding settings, which allow you to adjust the space outside and inside the container, respectively.
The Description block allows you to write a short description or set of rules for your campaign. This block is equipped with a text editor that offers various formatting options, enabling you to customize the text to fit the style and requirements of your campaign header.
The text editor in the Description block provides multiple formatting options to enhance the appearance of your text. Here are the available options:
Bold: Make your text bold to emphasize important information.
Italic: Italicize your text for emphasis or stylistic purposes.
Underline: Underline your text to highlight specific words or phrases.
Link: Insert hyperlinks to direct users to other pages or external websites.
Quote: Format your text as a quote to highlight important statements or rules.
Number List: Create an ordered list using numbers.
Bullet List: Create an unordered list using bullets.
Alignment: Adjust the alignment of your text (left, center, right, or justify).
Color: Change the color of your text to match your branding or highlight specific information.
Weight: Adjust the font weight of your text to control its thickness.
This includes margin and padding settings, which allow you to adjust the space outside and inside the container, respectively.
The Footer section provides a customizable area at the bottom of your campaign pages. You can set a custom footer that appears consistently across all pages within your campaign. This section includes several options: Setting, Text, Description, Button, and Terms and Conditions, each with its own set of customization options.
These settings are similar to those in the header section. Refer to the header section - setting for details. Check them out here.
These settings are similar to those in the header section. Refer to the header section - text for details. Check them out here.
These settings are similar to those in the header section. Refer to the header section - description for details. Check them out here.
The Button feature in the Footer section allows you to add a call-to-action button to your campaign pages. This button can redirect users to a specified link when clicked. It offers three simple customization options: Text, Link, and Position.
Text: Write the text that will be displayed on the button.
Link: Provide the URL where users will be redirected when they click the button.
Position: Set the alignment of the button on the page:
Left
Center
Right
It has an override toggle button. Once you turn it on, you can customize the footer button design. It has similar customization options as the button section. Check them out here.
The T & C (Terms & Conditions) feature allows you to define how the terms and conditions associated with your campaign will be presented to users.
Type: Choose between two options: link or modal.
Link: Redirects users to an external page where they can read the complete terms and conditions.
Modal: Displays the terms and conditions directly within the campaign interface.
Text: Provide descriptive, clickable text. Users will interact with this text to access the T&C content.
Text Size: Adjust the font size of the clickable text.
Text Color: Choose a color for the clickable text.
Link (if Type is set to “Link”): Specify the URL of the page containing the full terms and conditions.
Description (if Type is set to “Modal”):
Paste the complete T&C content here.
The modal will display this content when users click on the text.
Alignment: Set alignment of T&C text on the campaign.
Left
Center
Right
Justify
This includes margin and padding settings, which allow you to adjust the space outside and inside the container, respectively.
The button section offers a variety of customization options to enhance the appearance and feel of all buttons within your campaign. These options allow you to tailor the buttons to match your campaign’s design and branding.
This section contains options for how your button will look in the campaign.
Shape: Select the desired shape for your button. There are four types of shapes. Based on the selected shape, different options are shown.
Background color: Choose a solid background color or create a gradient effect.
Corner: Adjust the roundness of the button corners with a slider.
Border:
Types: Choose from four border types:
None (no border)
Dashed
Dotted
Solid
Width: Set the width of the border.
Color: Choose the color of the border.
Shadow:
Color: Set the color of the shadow.
Size: Adjust the size of the shadow.
Distance: Set the distance of the shadow from the header block.
Blur: Adjust the blur level of the shadow.
Text Size: Adjust the size of the text using the text size slider.
Text Style: Select the weight of the text:
Light
Regular
Bold
Text Color: Choose the color of the text using the color picker.
Spacing: This includes margin and padding settings, which allow you to adjust the space outside and inside the logo container, respectively.
This will help you to customize the countdowns for your campaigns. Countdown will show based on your campaign’s configurations. For example, if you have a future published campaign, it will show that your campaign will be live in a countdown timer.
Label Property:
Label Color: Choose the color of the label using the color picker.
Label Size: Adjust the size of the label using the label size slider.
Countdown Property:
Countdown Color: Choose the color of the countdown using the color picker.
Countdown Size: Adjust the size of the countdown using the countdown size slider.
Spacing: This includes margin and padding settings, which allow you to adjust the space outside and inside the logo container, respectively.
The Custom Script feature allows you to enhance your campaign’s functionality and personalization by adding your own JavaScript code. You can insert scripts in two key areas of your campaign:
Header Script:
This script is placed within the <head> section of your campaign’s HTML.
It’s typically used for scripts that need to load before the rest of the page, such as meta tags, CSS stylesheets, or tracking codes.
Body Script:
This script is inserted within the <body> section, usually at the end before the closing </body> tag.
It’s ideal for scripts that require the entire DOM to be loaded, like interactive features or analytics scripts.
The Font feature offers you the ability to set the typography for your campaign, ensuring that the text aligns with your brand’s style and enhances readability. Gamify Route provides a wide array of fonts to choose from, catering to diverse design preferences.
The Powered By block allows you to customize and showcase your branding within the campaign. This feature is available based on your billing plan.
Choose how to align your branding within the campaign layout (e.g., left, center, right).
Text: Enter the wording for your “Powered By” text.
Text size: Adjust the font size of the text.
Text Color: Select a color for the text.
Font Style: Choose a style for the font (light, normal, bold).
Branding Type: Decide between using an image or text for your branding.
For Image:
Image Upload: Upload your brand’s logo or other relevant image.
Width & Height: Set the dimensions for the image to ensure it fits well within the campaign.
Navigation Link: Provide a URL that users will be redirected to when they click on the image.
Image Container: Customize the container that holds your image (e.g., shape, background color).
For Text:
Text: Input the text you want to use for branding.
Navigation Link: Include a URL for redirection upon clicking the text.
Text Size: Determine the size of the branding text.
Text Color: Choose a color for the branding text.
Font Style: Select a style for the branding font.
This includes margin settings, which allow you to adjust the space outside the container.
From here, you can customize the content of all the reward blocks in the campaign. It has 3 sections: label property, value property, and spacing.
You can change the default label or turn off showing below values:
Campaign Name
Reward Name
Status
Date
Reward Image
Label Color: Choose a color for the label text.
Label Size: Determine the size of the label text.
Value Color: Choose a color for the value text.
Value Size: Determine the size of the value text.
Vertical space between labels: Determine how much space you want between two labels and their value.
Margin: Allow you to adjust the space outside the container.
For further assistance, please contact our support team at support@gamifyroute.com.
