In this article:
- Campaign Editor
- Campaign Pages
- Desktop and mobile view
- Navigation menus
- Adding and editing an Element
- Saving your changes
- Frequently asked questions regarding the Campaign Editor:
- How can I add a new page to a Campaign?
- Can I duplicate pages?
- What is hover?
- I would like to set a picture as a background. What is the optimal picture size?
- I have changed the background picture or background color, but nothing changed. Why?
- How can I use my own Fonts?
- What is the difference between margin and padding?
- How can I move all elements in the same block?
- How can I add a new page to a Campaign?
This article will introduce you to the OptiMonk Campaign Editor and its awesome features.
1.) Once you are logged in to your OptiMonk account 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 refreshed Campaign Editor. You will see the pages and their live previews of your Campaign at the bottom, the Campaign and the Variant name on the top, and the Workspace for editing and previewing in between:
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 "+ Add new page" button 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 right. This is true for the Campaign Editor in general: you will see the available settings on the right. The settings are usually categorized into multiple groups. In the case of the Teaser page, you will see a General, Style and an Advanced tab.
- General: You can usually find Element-specific settings here
- Style: You can find display, font, background and shadow settings under Style
- Advanced: You can find the spacing settings (margin, padding) here, and you can also toggle to hide the element on desktop or mobile view
Desktop and mobile view
On the top, you can switch between the desktop and mobile preview of the Campaign:
If you see a monitor (Desktop) or a phone (Mobile) icon next to a setting, it means you can set different values for that setting for Desktop and Mobile views:
The icon itself is a button that allows you to change the values for the specific view:
On the left side of the Editor, you will see four menu options: Display, Elements, Layers and Dev mode:
You will be able to change the Theme color, the Position of the popup, the Transition animation and edit the Website overlay under Display:
Under Postion, you have the option to decide
- where on the page your popup should appear,
- what (if any) animations you would like to use and
- at what distance relative to the browser window your popup should be displayed.
Distance from the edge can be adjusted to mobile and desktop views separately. If you set a certain distance from the edge to the main page of the popup, it will be applied to all other pages except for the teaser by default. You can change that manually if you wish to. Distance from the edge can be applied to the teaser separately.
⚠️ Please note that Distance from the edge may not work for special teasers such as round or triangular ones.
You can close the left side panel by clicking on the "arrow" icon. It closes automatically on smaller displays, under 1400px width or equivalent:
The Campaign design is based on Elements. You can find all the available Elements organized into different categories on the left under Elements:
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 Layers:
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 Layers 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 Layers, the Element will be highlighted on the Campaign Design:
If you click on the Dev mode icon, you will see the Code editor appear on the bottom part of the page:
- Page load
- Popup shown
- Popup fill
- Popup reject
You can save your code by clicking on the Save button, and you can close the Code window with the "X" icon next to it:
Adding and editing an Element
You can add Elements to your Campaigns by going to the Elements menu and dragging the Element to the Campaign:
Dropzones appear where you can place the Element within the Popup Editor workspace:
When you add a new Element to your Campaign, you will see it's available options on the right:
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 can click to edit the Element or drag to move it. The duplicate icon won't appear when an element can be added only once to a page.
When you click on an Element, you will see available options next to the Element, and you can also see options on the right:
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 right, usually with multiple pages:
As you can see, the Button Element has 3 pages or tabs for settings: General, Style, and Advanced.
Saving your changes
Once you are happy with the design of your Campaign, you can save your work by clicking on Save in the top right corner, and you can exit the Editor by clicking Save & Exit:
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 "+ Add new page" button at the bottom of the Campaign Editor:
Can I duplicate pages?
Yes, simply move your mouse over one of the pages, and you will see a small button with 3 dots in the top left corner. Click on the button to 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 changed. 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 an element that is covered by another. OptiMonk popups use a "grid system" to keep popups pretty and organized, this means the "Main page" can have a block or several blocks, and blocks usually contain columns. These are called structural elements and all of them can have background colors or images, and have the same padding, margin, border, corner radius settings. If you don't see the results you wanted, open the Layers app to navigate between the elements. 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 light blue, the Frame still has a white-red background, and the part that the Block Element covers will be light blue:
It is possible to cover the whole popup design with one Block Element, in this case, the Block color will completely overlap the Frame color.
Based on your design, a Block Element might have one or multiple Columns:
You can also change the background of the Columns individually:
In addition to this, you can also change the background of the individual Elements:
Basically, these settings work like layers:
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:
For more information, please check our article about fonts: How can I upload and use custom fonts in the Editor?
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 yellow background. If I change the padding of the Element, you can see that the padding will change the space 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 Layers, 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 :)