Welcome back!
After choosing a template, you're finally ready to get your hands dirty and design your campaign. In this lesson, I'll walk you through the main functionalities of the OptiMonk Editor, but I also encourage you to explore it on your own because there's so much you can do here!
On the left side, the first option you see is Theme. Our newest templates are all Themes-compatible, which means that if you define your brand settings here once, the next time you create a campaign from this theme, OptiMonk will remember them. Pretty cool, right?
Display is where the most essential appearance settings live. Under position, you can choose where on the page you'd like your popup to appear. For example, you can set whether your sticky bar appears on the top or the bottom of the page, or set your side message to show up on one side if you already have another important element, like a chat widget, on the other. You can also choose the type of transition to use, (like zoom or fade) and modify the color of the website overlay.
Let's move on to the heart & soul of campaigns: Elements. 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. Once you have the element selected, you can see all the options for this element on the right. Here, you can style the element: for example, let's choose a background and hover color and give its corners some radius.
Under "Add elements," you'll find all available elements sorted into groups. You can add input fields to collect phone numbers and first names, create a survey with feedback elements, or add a countdown or discount code element.
You may have noticed that if you have any text on your campaign selected, you have all these options to style the text. Select the font you want to use, font weight, font size, color etc. You can even add your own font family by clicking on the plus icon.
The last option we have left on the nav bar is Dev mode. This is where you can insert custom CSS and JavaScript.
So now that you have all these elements on your campaign, you need a clear overview of the structure to do some further styling. Here's a quick tip: anytime you click on the website overlay, you'll see all the different elements of your campaign listed on the right. If you select any element here, you'll see all its styling options, you can change its background, adjust its size, and corner rounding.
If you're creating a campaign that has multiple pages (like a list-building offer and a thank you page), you can select which page you want to edit here at the bottom of the Editor. The last page you'll see here will always be called "teaser." The teaser is a small version of a popup that can appear before and after your main popup is displayed.
Once we have all pages of our campaign ready, we're ready to review how it looks on different devices. Luckily, all our templates are responsive. And finally, with Live Preview, you can check your brand new popup over your live site.
Make sure to save your design once you're ready!
Congrats on designing your very first campaign. Join me in the next lesson to learn about all your triggering options.
