Get to know the Popup Editor

Pagecloud gives you the flexibility to design a custom, responsive popup or banner without code. You can create popups that seamlessly integrate into your website and match the look and feel of your brand.

The popup editor is similar to the Pagecloud website editor.  All your design and layout features are available in the editor. 

Responsive Canvas

Your canvas is your editing space. The popup and banner canvas is a responsive experience, meaning your design will automatically reflow to fit the size of your canvas. 

If you resize your browser window, your popup and banner will resize itself. This means you do not need to re-design your popup or banner for mobile or tablet devices.

Your popup will look great on all screen sizes! 

Mobile Compatibility

Our templates are all optimized for mobile compatibility. Popups with 2 columns will stack in mobile for a vertical orientation. 

Top toolbar

At the top of your Popup editor you have some useful navigation and editing tools. 

Dashboard:  The dashboard button in the top left corner will bring you back to your dashboard. 

Show: You can toggle on hidden objects, links, animations, etc. to show where they are on the page. 

Undo/redo: Undo or redo your editing actions when you make a mistake

Save: Save your work and click the dropdown to view a preview

Left toolbar

Your left toolbar is where you can view your settings and add all your content. The left toolbar includes:

Project: Set your project-wide colours to use across multiple popups or banners, or a website in the same project. 

Popup: Set your page language, and navigate to Setup and Publish in your dashboard

Sections: Manage your Popup Sections including adding new Sections, rearranging, hiding, and deleting. 

Library: View your saved styles from Design Sidekick Chrome Extension.

Adding content

From your left toolbar you can upload and add content to your popup or banner. 

Shapes: Edit and manipulate different shapes to customize your design

Images: Upload images for your popup. Once uploaded you can drag and drop images onto your popup, or use your Edit Menu to use your images as a background. You can also search for stock images using Shutterstock (paid) or Unsplash (free).

Text: Add various text formats to your page including H1, paragraphs, and bulleted lists. Drag and drop the textbox onto your popup or banner and edit using your Edit Menu.

Videos: Drag and drop preloaded videos onto your Popup. 

Buttons: Choose from generic buttons and social icons. Drag and drop the button onto your popup and style using your Edit Menu.

Forms: Choose from several form templates including newsletter, launch, feedback, and event. Drag and drop the form onto your popup and use your Edit Menu to style.

Icons: Choose icons from our icon library. Drag and drop your icon onto your popup or banner and use your Edit Menu to style.

Components: Components are pre-built objects with more functionality. For example, you can drag and drop an FAQ component onto your page that can be toggled open and closed. 

Edit Menu

The Edit Menu is the floating rectangle on your canvas. You can move your Edit Menu anywhere on your canvas. Your Edit Menu is your hub for styling, positioning, and creating layouts for your popup or banner. 

Selecting objects 

When you click an object on your popup or banner, your Edit Menu displays what you have selected. For example, if you click a textbox, your Edit Menu will say Text at the top, confirming you are currently editing your text. 

Layers

Your Edit Menu also displays which layer of your popup you are currently editing. This includes the Popup as a whole, the Section, the Column, or the object inside the Column. 

You have different editing functions in each layer.

Edit Menu tabs

Style: Style your selection. This includes adding shadow, colour, rounded corners, etc. depending on what you have selected.

Layout: The layout tab allows you to configure where and how you want position your popup or banner on your page. You can also adjust your content alignment, add columns, and add padding depending on what you have selected. 

Size and position: In this tab you can group content, adjust alignment, size content, and more, depending on what you have selected.