The OptiMonk Campaign Editor

In this article, I want to introduce you to the OptiMonk Campaign Editor and its awesome features. First, how can you get to the Campaign Editor?

1. ) Log in to your OptiMonk account at https://app.optimonk.com/login/en, then click on Campaigns on the left, and select the Campaign you wish to edit:

mceclip0.png

2. ) To get to the Campaign Editor, click on the Campaign Variant you wish to edit:

mceclip1.png

 

Campaign Pages

You will arrive in the Campaign Editor. You will see the pages of your Campaign at the top:

mceclip0.png

These pages have different designs. For example, most of our Templates have three pages: the Main page, the Thank you page, and a Teaser page, but you can add as many pages as you want to your Campaigns. You can use the Feedback Element, the Survey Element, and the Button Element to guide your visitors between these pages. For example, this Campaign template has a Button Element on the Main page: 

mceclip1.png

This button is used to redirect the customers to the Thank you page in case they fill out the form:

mceclip2.png

You can switch between the pages by clicking on their name, and you can add a new page by clicking on the "plus" icon on the right. 

 

Teaser page

The Teaser page is a special page of your Campaign: it is a minimized version of your popup that is positioned to one of the corners of your visitor’s screen when they are browsing your site. This helps you to maximize your conversion rate by highlighting your offer before/after it would actually appear so visitors have more time to digest the value they can get from you:

mceclip3.png

You can see the available settings for the Teaser on the left. This is true for the Campaign Editor in general: you will see the available settings on the left. The settings are usually categorized into multiple groups. In the case of the Teaser page, you will see a General and a Style tab.

 

Desktop view, mobile view, and adding custom code

On the right, you can switch between the desktop and mobile view of the Campaign, and you also have an option to implement code into your Campaign:

mceclip4.png

If you click on the Code icon, you will see the Code editor:

mceclip5.png

As you can see, you can use CSS or JavaScript code in your Campaigns. This is very useful if you want to extend the capabilities of your Campaign, but it requires coding knowledge.

You can set the following events for your JavaScript code:

mceclip8.png

You can save your code by clicking on the Save button at the bottom, and you can close the Code window with the X icon on the right:

mceclip6.png

 

Elements and Layout

The Campaign design is based on Elements. You can find all the available Elements on the left under Add Element:

mceclip7.png

As you can see, there are a lot of different Elements you can use. We also have a lot of ready to use Campaign Templates available. These templates already have a couple of Elements. You can check the used elements under Layout:

mceclip8.png

This is basically an overview of the design of the selected Campaign Page.

It is important to note that you need to place the Elements on a Block. Basically,  Block elements are the building foundations of your popups. This is represented in the Layout as well:

mceclip9.png

Each block element represents a row divided into columns. You are able to customize the ratio of columns within the editor to your needs so virtually any design you can imagine is achievable. 

If you move your mouse over an Element under Layout, the Element will be highlighted on the Campaign Design:

mceclip10.png

 

Adding a new Element, and editing an Element

You can add Elements to your Campaigns by going to the Add Element tab and dragging the Element to the Campaign:

mceclip11.png

When you add a new Element to your Campaign, you will see it's available options on the left:

mceclip12.png

If you hover your mouse over the Element, you will see that you have a couple of options:

mceclip13.png

You will see a duplicate and a delete icon, and you will see that you cal click to edit the Element, or drag to move it.

When you click on an Element, you will see available options right next to the Element, and you can also see options on the left:

mceclip14.png

If you click on a text-based Element, you will see the different text-editing options next to the Element, like font type, font color, font size, weight, line-height. Additional options are available on the left, usually with multiple pages:

mceclip15.png

As you can see, the Button Element has 3 pages or tabs for settings: General, Style, and Advanced. 

 

Once you are happy with the design of your Campaign, you can save your work by clicking on Next then Save in the top right corner:

mceclip16.png


Frequently asked questions regarding the Campaign Editor:

How can I add a new page to a Campaign?

You can add a new page by clicking on the "plus" sign in the top right corner of the Campaign Editor:

mceclip17.png

Can I duplicate pages?

Yes, simply move your mouse over one of the pages, and you will see the options to Duplicate, Delete or Rename the page:

mceclip18.png

What is hover?

It is a setting in the Campaign Editor for some Elements, for example, the Button Element: 

mceclip19.png

When you decide to add a hover color to your button what happens is that the color of the button will change to the hover color when your visitors move their mouse on the button.

I would like to set a picture as a background. What is the optimal picture size?

The optimal size is 980x650 pixels. However, the size of the picture can also differ as after choosing the picture, you will be able to crop it.

I have changed the background picture or background color, but nothing changes. Why?

The reason for this is that you can change the background of many Elements. If you do not see the results you wanted, you probably changed the background for the wrong Element. For example, you can change the background for the Frame:

mceclip20.png

As you can see in this example, the background of the Frame is set to red and white:

mceclip21.png

You can also change the background of the Block:

mceclip22.png

Currently, the background of the Block is transparent, so we can see the white-red background of the Frame:

mceclip23.png

If I change the background color of the Block Element to blue, the Frame still has a white-red background, but the Block color completely covers it:

mceclip24.png

As you can see, the above settings only affected the right side of the Campaign design. This is because you can also change the background for the Columns of the Block individually:

mceclip25.png

Our design has one Block Element with two Columns, and our left Column has an image for background:

mceclip26.png

In addition to this, you can also change the background of the individual Elements:

mceclip27.png

Basically, these settings work like layers, which is reflected in the Layout as well:

mceclip28.png

How can I use my own Fonts?

It is very simple: just click on any element with text and the text editor will appear:

mceclip29.png

Click on the "+" plus sign next to the Font setting, and you will be able to upload your own Font, under Custom fonts, you will see the option to Upload new:

mceclip30.png

What is the difference between margin and padding?

Both options help you move the Elements on your Campaign, but they do so in a different way. This is the default margin and padding settings for the selected Element:

mceclip31.png

Please note that the Text Element in this example has a green background. If I change the padding of the Element, you can see that the margins will change inside the element:

mceclip32.png

If I change the margin option, you can see that it changes the margins outside of the Element:

mceclip33.png

In addition to margin and padding, the Spacer Element can also help you in spacing:

mceclip34.png

How can I move all elements in the same block?

Go to Layout, and choose the Block you want to move:

mceclip35.png

Go to Advanced to add margin and/or padding to the whole Block, moving all the Elements on that Block at the same time:

mceclip36.png

If you need any further help or have any questions, do not hesitate to contact us at support@optimonk.com and we would be happy to assist you :) 

Have more questions? Submit a request

Comments