Editor Advanced Content - HTML
The HTML Section in the PowerPop Editor is part of the Advanced Options that gives users greater control over their popup design. When you click “Show Advanced Options,” an HTML editor window appears, allowing you to directly modify the underlying code of a selected element.
This feature is especially useful for users who want to go beyond the visual editor and add custom styling, formatting, or functionality to their popups.
In this HTML editor, you can write or edit the code of your chosen element—such as text, buttons, images, or input fields. It provides the flexibility to:
- Adjust the structure and layout of elements.
- Add custom CSS classes or inline styles for more precise design control.
Insert attributes or small scripts for advanced customization.
After making changes, click “Save” to apply them and return to the main editor view.
Below is a clear documentation-style explanation for the Editor HTML Section, including the context of the screenshot you provided:
The Edit HTML feature also allows you to customize your pop-up beyond the drag-and-drop editor by directly modifying the underlying HTML and CSS code.
Accessing the Edit HTML Panel
To access this section:
- Open your campaign in the Editor.
- Click Show Advanced Options (located at the top of the editor).
- A new tab labeled Edit HTML + will appear.
- Click Edit HTML + to open the code editor.
What You Will See
When the Edit HTML panel opens, you’ll see two editable areas:
| Section | Description |
|---|---|
| HTML Panel | Displays the code structure of the selected pop-up step, including rows, columns, images, buttons, and content blocks. You can modify element placement, add custom attributes, or insert additional HTML elements. |
| CSS Panel | Allows you to adjust or add custom styles that apply to the selected pop-up step. You can modify formatting, spacing, animations, colors, fonts, and responsive styling for different devices. |
The image above shows an example of the Edit HTML interface:
Top Panel (HTML):
Displays the content structure of the pop-up.
For example, it includes:
- A main container (
#powerpop-content) - A row and cell structure
An image wrapper
Bottom Panel (CSS):
Shows the styling rules applied to the pop-up.
In the screenshot, you can see custom CSS such as:
- Background color
- Flex layout settings
- Width & height customization
- A main container (
At the bottom of the editor, you will find two actions:
- Apply Changes – Saves and applies the modifications to your pop-up.
- Cancel – Discards the edits and closes the panel.
When to Use Edit HTML
Use this section when you need to:
- Implement custom designs that are not available through standard editor tools
- Add custom styling or animations
- Insert HTML attributes or embed custom code
- Apply precise layout changes for advanced customization
The HTML Section empowers advanced users to fully personalize their popups by directly editing the code. While the drag-and-drop tools are perfect for quick and simple designs, the HTML editor ensures you have complete creative freedom to refine every detail and achieve a more professional, custom look.
Next, learn how to manage other advanced editor options like animation controls, tracking, and dynamic campaign behaviors: Editor Settings – Advanced