Pages > Create
Manually Edit Pages
Learn how to manually update pages by editing sections, HTML, and components directly in SuperFunnel.
Overview
When you need finer control over a page than the SuperAgent provides, or want to save credits, you can edit sections and components directly. Manual edits are a good choice when:
- You want to make a small tweak — like swapping out an image or adjusting a headline.
- You have HTML from a previous page or from another tool (such as Claude or another AI service).
- You are comfortable working directly in the code editor or making CSS adjustments.
When to edit manually
Use manual changes for small, targeted edits. For larger structural changes the SuperAgent will be faster.
What this guide covers
- Understanding page structure
- Opening the page HTML
- Opening and editing components
- Using the Element Toolbar
Understand Page Structure
Pages are made up of sections. Each section contains underlying elements and components — such as text, images, forms, and quizzes. When making a manual change, start by identifying which section contains what you want to edit, and then drill down to the specific element.
Open the page
Open the page you want to edit.
Open the section breakdown
Click the Sections icon in the top-left of the editor toolbar to open the section breakdown and see all sections on the page.
Identify the section
Identify which section contains the content you want to change.
Open the HTML View
To make precise code-level changes, open the HTML editor for a section.
Open the code editor
Hover over the section you want to edit and click the pencil (edit) icon that appears in the top-right corner of the section.
Choose Content or Style
The code editor will open with the Content tab, showing the section's HTML, CSS, and JS. Switch to the Style tab for a visual list of CSS options if you prefer not to write code.
Save your changes
If you are editing Code, click Save. All other changes are automatically saved to staging.
Edit a Component Directly
For quick edits to text, images, or other elements, you can click directly on them in the preview without opening the code editor.
Edit text inline
Doubleclick on any hardcoded text in a section to edit it inline. Change the content or adjust its formatting directly.
Font style options appear in the Element Toolbar at the top when you click on text. See The Element Toolbar below for what each option does.
Edit other elements
Click on other elements (images, buttons, forms) to open their individual editing options.
Save and publish
Changes are automatically saved to your staging version. Remember to Publish.
Not behaving as expected?
If a component doesn't respond the way you'd expect, reach out to support@superfunnel.ai and we'll check the HTML.
This typically comes down to nested elements, like <span><span></span></span>. We can fix it from within the editor and improve the underlying HTML layout in the process.
The Element Toolbar
Clicking a text element, image, or other component opens the Element Toolbar right below it, split into two groups.
Text formatting (text elements only): font size, bold, italic, underline, strikethrough, alignment, text color, and a link option. Click the font size control to open more options: font family (your workspace's Default and Secondary fonts, from Brand Styles), font size, line height, and capitalization (Default, Upper, Lower, Capital).
Display and spacing (any element): from left to right,
- Visibility (eye icon) — hide the element on the page without deleting it.
- Corner radius
- Spacing — padding and margin.
- Opacity
- × — close the toolbar.
Corner radius and spacing each have a small square icon next to them for more modular options, so you can set a different radius per corner, or a different padding and margin per side, instead of one value applied to all four at once.
The Element Toolbar is designed to match the controls in most standard text editors. Hover any icon for a tooltip.
Hiding and Unhiding Elements
Click the eye icon in the Element Toolbar to hide the selected element on all screens.
- A snackbar at the top confirms Element hidden, with a How to restore it link.
- Once you click outside the element you were editing, it disappears from the editor view, just as it will for visitors.
To show it again:
Select the section
Click the section containing the hidden element. It gets a blue, dashed border.
Open the hierarchy
Click the label in the top-left corner of the selected section to see the element hierarchy. Hidden elements show a crossed-out eye icon next to their name.
Select and unhide it
Click the hidden element in that list. It reappears in the editor at reduced opacity, with its Element Toolbar open again. Click the eye icon to unhide it.
Sections can't be restored this way yet
This recovery trick works for elements and components inside a section, but not for a hidden section itself. Use Undo if you hide a whole section, or be careful not to hide one in the first place.
Hidden elements can still be reached by bots
Hiding a form or button with the visibility icon only hides it visually. It can still be found and submitted by bots crawling your page's HTML. Add reCAPTCHA to prevent bot clicks or delete unused elements.
Summary
Manual editing gives you direct control over any section or element on your page without using the SuperAgent. Once your edits are in place, read Page Views to understand how to preview your page across different environments and what to check before publishing. Read Tokens to personalize your page or quiz copy with dynamic content, or Reusable Sections to learn how to reuse sections across multiple pages.