Editor 2022

In this article:

This article will introduce you to the New OptiMonk Campaign Editor and its awesome features. First, how can you get to the Campaign Editor?

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 new 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:

mceclip1.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: 

mceclip3.png

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

mceclip4.png

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. 

 

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:

mceclip5.png

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:

mceclip6.png

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: 

mceclip7.png The icon itself is a button that allows you to change the values for the specific view:

mceclip8.png

 

Navigation menus

On the left side of the Editor, you will see four menu options: Display, Elements, Layers and Dev mode:

mceclip9.png

 

Display

You will be able to change the Theme color, the Position of the popup, the Transition animation and edit the Website overlay under Display:

mceclip10.png

You can close the left side panel by clicking on the "arrow" icon. It closes automatically on smaller displays, under 1400px width or equivalent:

mceclip11.png

 

Elements

The Campaign design is based on Elements. You can find all the available Elements organized into different categories on the left under Elements:

mceclip12.png

 

Layers

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:

mceclip13.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 Layers as well:

mceclip16.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 Layers, the Element will be highlighted on the Campaign Design:

mceclip17.png

 

Dev mode

If you click on the Dev mode icon, you will see the Code editor appear on the bottom part of the page:

mceclip18.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:

mceclip27.png

JavaScript events:

  • 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:

mceclip19.png

 

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:

mceclip1.png

Dropzones appear where you can place the Element within the Popup Editor workspace:

mceclip2.png

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

mceclip0.png

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

mceclip1.png

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:

mceclip2.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 right, usually with multiple pages:

mceclip3.png

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:

mceclip4.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 "+ Add new page" button at the bottom of the Campaign Editor:

mceclip5.png

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:

mceclip6.png

What is hover?

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

mceclip7.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 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:

mceclip9.png

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

mceclip11.png

You can also change the background of the Block:

mceclip12.png

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

mceclip14.png

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:

mceclip15.png

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:

mceclip16.png

You can also change the background of the Columns individually:

mceclip17.png

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

mceclip18.png

Basically, these settings work like layers:

mceclip19.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:

mceclip20.png

Click on the "+" plus sign next to the Font setting, and you will be able to upload your own Font:

mceclip21.png

Under Custom fonts, you will see the option to Upload new:

mceclip22.png

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:

mceclip23.png

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:

mceclip24.png

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

mceclip25.png

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

mceclip26.png

 

How can I move all elements in the same block?

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

mceclip27.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:

mceclip28.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