This article covers how to design an on-site campaign with the text, images, and divider elements. These elements can be used in conjunction with any other elements in the Visual Template Editor.
Access the Bluecore Site™ Visual Template Editor by following the below steps.
1. Navigate to the flag icon on the left-hand navigation.
2. Go to Site.
3. Then Campaigns.
4. Click Create New Campaign.
5. Go to the Message tab.
6. Click Create from Existing or Create in VTE.
7. Add a layer to begin using the below elements.
TEXT
Add any applicable text in the left-hand panel of the canvas.
Content
Text Editor: Standard text editing options (font library, font styles, color, hyperlinks, customer attributes, etc.).
Accessibility Label: A concise but useful description for shoppers with visual impairments or who otherwise use assistive technology.
Design
Custom CSS Class Name: Add a class name here to automatically add to the CSS layer. CSS is a common reference for the styling associated with HTML.
Font size, line height, and letter spacing
Text Transform: None, capitalize, upper case, lower case
Padding: Left, right, top, and bottom padding (pixels)
Container Background Color: Change the background color of the text box.
Position
You can drag and drop the element on the canvas on the right-hand side with your mouse, or apply any of the below position options for exact placement.
Left and Top Position: Enter a percentage of left and top alignment.
Layer Alignment: Select auto, left, center, or right alignment on the layer.
Stick to side: Offset the element to a specific side (pixels). This is especially useful to make the popup responsive and allow the elements stay within the boundaries if the screen is resized.
Animation
Animation Effect: Catch the users attention by selecting an animation for the text. Enter a start delay and a speed for the animation.
IMAGE
Design
Custom CSS Class Name: Add a class name here to automatically add to the CSS layer.
Accessibility Label: A concise but useful description for shoppers with visual impairments or who otherwise use assistive technology..
Image Source/Image Library: Enter a direct image source or select an image from the image library in your Bluecore account.
Link to: Enter a link if you'd like to redirect users after the image has been clicked on.
Alt text: Enter text to display if the image doesn't load properly.
Height/Width: Enter a fixed size or fit to container for the image. This can also be controlled by entering a number of pixels.
Background Image Size: Fill, contain, cover, scale down, or none.
Padding: Left, right, top, and bottom padding (pixels).
Container Background Color: Change the background color of the image box.
Position and Animation
The position and animation settings available for the coupons follow the same options available in explained above in the text section.
DIVIDER
Design
Custom CSS Class Name: Add a class name here to automatically add to the CSS layer.
Style: Select either solid, dashed, or dotted.
Color: Enter a color for the divider.
Dimensions: Enter a height/width for the divider in pixels.
Padding: Left, right, top, and bottom padding (pixels). Padding can be used here to create an empty space between two layers with a thin divider.
Container Background Color: Change the background color of the divider.
Position and Animation
The animation settings available for the divider follow the same options available in explained above in the text section.
Layer Options
After an element has been added to a layer, layers can be duplicated using the layer options at the top right-hand side of the screen. Duplicate the layers themselves, or duplicate the layers to any additional screens of the popup.
Now that you've configured text, images, or dividers to your campaign, add coupons, buttons, or email capture.