Customization

Convertful provides you with an easy-to-use widget builder that allows you to customize layout, shapes, colors, content, positioning - anything you need to fit the widget to your site design. To access builder open your widget's Design tab.

Appearance #

General Approach #

General appearance customization for every element of your widget is that simple: just click the element you want to edit and edit its settings in the side menu. To access general widget settings (size, animation, background, etc.) point your mouse at the preview's background, until you see the 'Widget' pointer, and click it.

All adjustments you make are instantly displayed in the preview window. 

Desktop and Mobile Preview #

All widgets got both desktop and mobile version previews, which you can switch by pressing the relevant controls: 

Many elements got mobile-specific controls. Pick mobile preview and then click the element to see those and adjust things like text and buttons size, animation, positioning for mobile version separately from the desktop. 

Layout and Columns #

Each widget consists of elements placed in rows and columns. You can adjust the structure, number, positioning, sizes of rows and columns in thewidget's Columns tab:

Drag and drop to move, swap, and resize, or click the relevant icon to add/remove/duplicate or edit settings.

Widget Elements #

Adding and Editing #

To add elements to your widget just open the Elements tab and drag and drop the element to the needed place on a widget's preview:

To edit the element just click it and adjust settings in the sidebar. 

Unique Elements #

There are elements that you can use multiple times (such as text, buttons, images, videos) and unique elements, that could be used only once per widget (form fields, social sign-up, follow buttons, etc.). When you add a unique element to your widget - it disappears from the list of the Elements tab.

Form Fields #

Default and Custom Input Fields  #

These are basic fields (name, email, company, phone, etc.) which you can pick from the dropdown list.

Mandatory Fields #

When editing field's settings, you can set it as mandatory for submitting the form by activating the Required field switch. Note that the email field is always mandatory by default.

Dropdown Fields and Radio Buttons #

These are multi-choice fields allowing to pick one of the pre-defined options. Such options got labels (names of the options) and values (data that will be added when subscriber pick the option):

Agreement Fields #

This fields allows you to collect the consent with certain terms and conditions of your offer, providing its text or link to it in the text canvas.

Images #

You can use images as a general background for your widget, background for rows and columns, and as an element inside columns: 

Just add the image element or click existing element to add the background image in its settings. Note, that your file folder got built-in functionality for editing (crop, resize, rotate) images as well: 

Widget Steps #

With Convertful builder you can also create multi-step widgets adding 'Callout' and 'Thank You' screens to your offer: 

Each screen (Callout, Thank You) got its own structure and elements, which you can customize the same way you did with the main widget (Offer). Hitting the 'Yes' or 'Submit' button opens the next widget screen by default. You can also set up your buttons to display next widget screen via the relevant action: 

Callout (Yes/No Forms) #

Callout screen allows you to get a preliminary consent of the visitor with the offered value, by replacing form fields and submit button with 'Yes' and 'No' buttons. This feature helps to concentrate visitor's attention on the offer itself instead of the actions needed to get the offered value. 

Thank You #

This option allows you to show your gratitude to the visitor for subscribing. Also, you can use it to provide offered value, which should be available after subscription, such as coupon codes, links to related articles or webinars, etc.

Using Own HTML #

You can use custom HTML elements inside your widget by adding the HTML Code element and pasting the code in the canvas:

Also, you can use HTML code element to add 3-rd party contact forms to your widget.

Using Own CSS #

Convertful widget builder allows you to customize almost everything using its built-in settings and doesn't require any CSS or coding skills to apply the styling. However, if you are familiar with CSS syntax and feel more comfortable applying styles via code rather than settings, our builder provides tools for that as well.

Most of the elements got the Extra Class Name string, allowing you to create a unique class for this element. 

Then, you'll be able to refer to this class in custom CSS to apply custom styling: 

Example CSS code: 

#conv7461 .mytext {color: yellow!important;}

To work properly, CSS selector and code should be correct and meet certain requirements: 

Widget ID Selector #

The example code above starts with: 

#conv7461

which means styling should be applied only for this widget, with ID 7461. Without it, if you're using multiple widgets on the same page, CSS of one could affect others. The ID of your widget you can find in the URL when editing: 

Using '!important' Rule #

If you're using the CSS to apply styling, which could be applied with the builder functionality, such as text color from the example above, you need to add an '!important' rule to apply CSS styling: 

.mytext {color: yellow!important;}