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 button

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
Adding a link:
Text element link

Canvas

Canvas element button

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 button

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 element settings

Image element

Divider

Divider element button

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 element styles tab

Content

Content element button

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

Content element settings

Video

Video element button

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 button

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

Share element settings

Form

Form element button

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

Form element settings

HTML

HTML element button

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.

HTML element settings

HTML editor

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:

Remove element icon

Updated on October 22, 2018

Was this article helpful?

Related Articles