Elements

In the Customize section of your Woobox campaign, you can add images, videos, HTML, and so much more. In this article, we’ll go over each element you can add and what they can be used for.

To see the menu of available elements, click Elements in the left navigation of the campaign’s Customize section.

Text

Text element from menu

After adding a text element, you can click right into the element to type or edit text. When the element is selected, you will see a toolbar at the top of the screen where you can adjust fonts, font-sizes, alignment, and line spacing. You can even add a link by highlighting any text in the element and then clicking the “chain” icon in the toolbar and adding the destination URL. All elements have the “BGROUND” tab, so you can add patterns, backdrops, or images as a background or make the element transparent.

Text element toolbar
Text element link


Adding a link:

Canvas

Canvas element from menu

The canvas element is a vector-art editor right in the builder of your campaign! With this element, you can design beautiful creative for your promotion just by clicking and dragging. Add a background, then add images, logos, icons, text, etc. You can use the built-in online photo library or upload your own images. Choose from a huge bank of shapes, icons, and font styles. Adjust the size of the element by dragging the bar at the bottom. The only limit to the canvas element is your imagination.

Canvas element

Image

Image element from menu

The image element allows you to upload your own custom images or creative. Once you’ve added an image element, you can also add a URL to make the entire image a clickable link!

Image as a link
Image element

Divider

Divider element from menu

The divider element does exactly what it sounds like – it adds a space or buffer between elements, or you can use one at the top or bottom of your campaign to make the other elements align better with a background. The divider can be adjusted by clicking and dragging the blue handle at the bottom of the element, or by adjusting the “Element Spacing” slider in the Styles tab.

Divider element
Divider - styles tab

Content

Content element

The content element allows you to add a small image along with text. The image can be aligned left or right by choosing from the dropdown under the Styles tab.

Content element in builder
Settings - content element

Don’t forget to visit the Styles tab to choose the layout of your Content Element:

Content element - styles

Video

Video element

Choose the video element to add video to any page of your campaign. Add your YouTube, Vimeo, Facebook, Instagram, or .mp4 URL for your video to the Settings tab and the video will appear in the element. You can even choose for the video to auto-play when the page loads.

Video element settings
Video element

Share

Share element

Your campaign has a share element on the post-entry page by default, but you can add as many as you’d like. The share element can display the campaign URL for copying, an email send, as well as social media share buttons for Facebook, FB Messenger, Twitter, Pinterest, and Google +. You can customize the Twitter share message and enable the Facebook share auto popup on page load in the Settings tab.

Share element
Settings - share element

Form

Form element

If you are creating a Quiz or Poll campaign, they will start out by default as “formless-submit” meaning, there is no form to fill out and the user’s choices are entered once the user has clicked to select them. In this case, you will also find the option to add a Form element to collect data. Just like in other app types, click the element, then the Settings tab to add or edit fields.

Form element
Settings - form element

HTML

HTML element

Update 10/2018: CSS and HTML are now available on the Advanced and Power plans. If you are on the Basic or Standard plans, you will need to upgrade to use custom CSS or HTML.

This element adds an HTML block to the page so you can use your online hosted images and code to your heart’s delight! After adding the element, click the Code tab, then “Edit HTML”. The editor should highlight errors or places where tags may not be closed. When you’re done adding code, be sure to click “Close editor” and then “Save changes” in the upper right corner of the dashboard.

Code - Edit HTML
Edit HTML area

All elements

All elements will have a Backgrounds (BGROUND) tab where you can add background patterns or images, and a Styles tab where you can adjust the element’s spacing (or adjust the global font and display settings). To edit an existing element, just click on the element itself within the Customize section to select it.

To delete an element from the page, just select the element, then click the “trash can” icon in the upper left corner of the screen:

Delete element
Updated on January 28, 2019

Was this article helpful?

Related Articles