Editor

Are you finally ready to get your hands dirty and design your campaign? 💪 Then you are in the right place! Explore our drag & drop Editor because there’s so much you can do here! 😍

In this article, you’ll learn about:

1. How to get to the Editor
2. An overview of the Editor
3. How to set up the Mobile view of your campaign?
4. Navigation bar (Display, Add elements, Code)
5. How to add an Element to your campaign?
6. How to move, delete, duplicate or copy the style of an Element from your campaign?
7. How to save your changes?
8. FAQs regarding the Editor

• • How can I add a new page to a Campaign?
  • Can I duplicate pages?
  • What is hover?
  • I would like to crop the background image of my popup. How can I do that?
  • I have changed the background picture/background color, but nothing changed. Why?
  • How can I use my own Fonts?
  • What is the difference between margin and padding?

Follow along a walkthrough if you just need a quick overview of our Editor:

1. How to get to the Editor?

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.

3) The Campaign Editor appears on the next page.

 

2. An overview of the Editor

When you arrive at the Campaign Editor, you will see:

• the Navigation menu on the left,
• the Settings Panel on the right: If you click on any element of your campaign, you will see the available settings of that element on the right. These settings are categorized into multiple groups, like General, Style, and Advanced,
• the Workspace for editing in the middle,
• the Desktop view, the Mobile view, and the Preview on the top,
• and the Pages of your campaign at the bottom.

3. How to set up the Mobile view of your campaign?

1) On the top, you can switch between the desktop and mobile view of the Campaign:

2) If you see a Desktop icon or a Mobile icon next to a setting, it means you can set different values of that setting for Desktop and Mobile views:

3) To switch between the views, simply click on the icon and choose the view of which settings you would like to modify.

4. Navigation bar (Display, Add elements, Code)

On the left side of the Editor, you will see the following 3 menu options:

1) Display is where the most essential appearance settings live. You will be able to change the main Theme color, the Position of the popup, the Transition animation (like zoom or fade), and modify the color of the Website overlay under Display.

2) Elements are the basic building blocks of popups. You will find all the available Elements organized into different categories on the left under the “Add elements” menu. The OptiMonk Editor is a drag & drop editor, meaning that you can simply drag new elements into your campaign and drop them exactly where you want them to be placed.

3) The last option we have left on the nav bar is the Code section. This is where you can insert custom CSS and JavaScript codes. If you click on the Code icon, you will see the Code editor appear on the bottom part of the page:

Using this section will require coding knowledge. You can set the following events for your JavaScript code:

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:

 

5. How to add an Element to your campaign?

1) Click on the Add elements menu on the left and drag the Element into the workspace.

2) If you drag the Element into the workspace, drop-zones will automatically appear showing where you can place the Element within the Campaign.

3) Simply drop the Element where you would like to place it.

6. How to move, delete, duplicate or copy the style of an Element from your campaign?

1) Hover your mouse over the Element.

2) You will see that you have a couple of options here:

• To move the Element to a new place, drag and drop it.
• Click on the delete icon, if you would like to delete your Element.
• Click on the duplicate icon, if you would like to duplicate your Element.
• Click on the painter to copy styling of an element. Simply click on a similar element (button ➡️ button) to apply the style.
  
  

7. How to save 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:

8. FAQs regarding the 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 click on the 3 dots in the top right corner of the page you would like to duplicate. Once you click on the button, you will see the options to Duplicate, Delete or Rename the page:

What is hover?

This is a design setting in the Campaign Editor for certain elements, such as the Button element. When you decide to add a hover color to your button what happens is that when you hover your mouse over the button, it **should change color, indicating it can be clicked.

I would like to crop the background images of my popup. How can I do that?

Background image cropping allows you to edit background images of popups intuitively in Editor. In OptiMonk, the size of your popup is determined by its contents a.k.a. it grows tall or shrinks based on the size of the content included. This is why background image cropping makes it very easy to adjust the size of your popup. To crop the image to the right size please follow the steps mentioned in this guide.

I have changed the background picture/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, padding, margin, border, and corner radius settings.

If you don't see the results you wanted, click anywhere on the overplay section. Once you click on the overlay, the Elements will appear on the right-hand side and you will be able to navigate between the elements and change the background color of any element:

How can I use my own Fonts?

You can simply upload and use custom fonts in the Editor. 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 of your Campaign, however:

• The margin controls how much space is outside the border of the element you are editing.
• The padding controls how much space is inside the border and the content of the element you are editing.

Let’s see an example. In the picture below, the padding and the margin are set up to 0:

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:

✉️ If you need any further help or have any questions, please let us know at support@optimonk.com, and we would be happy to assist you :)