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:
2. ) To get to the Campaign Editor, click on the Campaign Variant you wish to edit:
You will arrive in the Campaign Editor. You will see the pages of your Campaign at the top:
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:
This button is used to redirect the customers to the Thank you page in case they fill out the form:
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.
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:
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:
If you click on the Code icon, you will see the Code editor:
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:
Elements and Layout
The Campaign design is based on Elements. You can find all the available Elements on the left under Add Element:
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:
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:
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:
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:
When you add a new Element to your Campaign, you will see it's available options on the left:
If you hover your mouse over the Element, you will see that you have a couple of options:
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:
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:
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:
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:
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:
What is hover?
It is a setting in the Campaign Editor for some Elements, for example, the Button Element:
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:
As you can see in this example, the background of the Frame is set to red and white:
You can also change the background of the Block:
Currently, the background of the Block is transparent, so we can see the white-red background of the Frame:
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:
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:
Our design has one Block Element with two Columns, and our left Column has an image for background:
In addition to this, you can also change the background of the individual Elements:
Basically, these settings work like layers, which is reflected in the Layout as well:
How can I use my own Fonts?
It is very simple: just click on any element with text and the text editor will appear:
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:
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:
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:
If I change the margin option, you can see that it changes the margins outside of the Element:
In addition to margin and padding, the Spacer Element can also help you in spacing:
How can I move all elements in the same block?
Go to Layout, and choose the Block you want to move:
Go to Advanced to add margin and/or padding to the whole Block, moving all the Elements on that Block at the same time:
If you need any further help or have any questions, do not hesitate to contact us at firstname.lastname@example.org and we would be happy to assist you :)