AI Landing Page Editor

WordPress-style editing for your generated landing pages. Customize colors, text, images, and more with ease.

Table of Contents

  1. Overview
  2. Editor Features
  3. How to Access the Editor
  4. Changing Colors
  5. Editing Text
  6. Changing Images
  7. Editing Links
  8. Bulk Color Changes
  9. Saving Changes
  10. Preview Mode
  11. Pro Tips

What is the Editor?

The AI Landing Page Editor gives you WordPress-like control over your generated landing pages. After creating a page with AI, you can fine-tune every detail without coding knowledge.

Change Colors

Modify background and text colors for any element

Edit Text

Update headlines, paragraphs, and button text

Swap Images

Replace placeholder images with your own

Edit Links

Change CTA button URLs and navigation links

Why Use the Editor?
  • No HTML/CSS knowledge required
  • Real-time visual changes
  • Bulk color editing for consistency
  • Image upload support
  • Instant preview updates

Editor Features

Available Editing Options:
Feature Description
Background Color Change the background color of any element
Text Color Change the text/foreground color of any element
Text Content Edit any text on the page (headlines, paragraphs, buttons)
Image Source Replace images with new ones from your computer
Links Update href attributes (CTA buttons, navigation links)
Inline Styles Add custom CSS styles directly to elements
How It Works

The editor uses DOM manipulation to find and modify specific elements. Each change is applied in real-time and saved to both the HTML file and the database.

How to Access the Editor

Step-by-Step:
  1. Go to AI Landing Page Generator in your dashboard
  2. Scroll down to "My Landing Pages" table
  3. Find the page you want to edit
  4. Click the "Edit" button
1
Landing Pages Table

All your generated landing pages are listed in the table below the generator. Each row shows:

  • Title - Your product name
  • Created - Date and time
  • URL - Direct link to the page
  • Actions - Open, Edit, Copy URL
Tip

You can also access the editor by clicking "Edit" on any landing page you've previously generated.

Changing Colors

You can change both background colors and text colors for any element on the page.

How to Change Background Color:
  1. Click on any element in the preview
  2. Select "background" as the property
  3. Enter a color value (hex, RGB, or named color)
  4. Click "Update"
How to Change Text Color:
  1. Click on any text element
  2. Select "color" as the property
  3. Enter a color value
  4. Click "Update"
Supported Color Formats:
  • Hex: #FF5733
  • RGB: rgb(255, 87, 51)
  • Named: blue, red, green
  • RGBA: rgba(255, 87, 51, 0.5)
Example:

To change a button background to blue:

  • Property: background
  • Value: #2563eb or blue

To change text to white:

  • Property: color
  • Value: #ffffff or white

Editing Text

Update any text content on your landing page, including headlines, subheadlines, paragraphs, and button labels.

How to Edit Text:
  1. Click on the text element you want to change
  2. Select "text" as the property
  3. Enter the new text in the value field
  4. Click "Update"
Editable Elements:
  • <h1>, <h2>, <h3> - Headlines
  • <p> - Paragraphs
  • <span> - Inline text
  • <button>, <a> - Button/link text
  • <li> - List items
Important

The text value is processed with HTML encoding for security. Basic HTML tags like <br> will be converted to entities.

Changing Images

Replace placeholder or AI-generated images with your own custom images.

How to Upload a New Image:
  1. Click on the image element you want to replace
  2. Select "Upload Image" option
  3. Click "Choose File" to select from your computer
  4. Supported formats: JPG, JPEG, PNG, GIF, WEBP
  5. Click "Upload"
Supported Formats:
Format Extension
JPEG .jpg, .jpeg
PNG .png
GIF .gif
WebP .webp
Image Guidelines
  • Maximum file size: 5MB
  • Recommended aspect ratio: 16:9 for hero images
  • Images are uploaded to your personal folder
  • The editor automatically updates the image source

Bulk Color Changes

Change multiple elements' colors at once for a consistent brand look. This is especially useful for theme updates.

How to Bulk Edit:
  1. Select the first element to change
  2. Apply your color change
  3. Select the next element and apply the same color
  4. Repeat for all elements
Common Bulk Changes:
Use Case Elements to Change
Brand Theme Change Buttons, links, headers background
Dark Mode All backgrounds to dark, text to light
Seasonal Update Accent colors, hero background
Pro Tip - Quick Brand Update

To quickly update your brand colors across the entire page:

  1. Change all button backgrounds to your primary color
  2. Change all button text to white or contrasting color
  3. Update the hero section background
  4. Save and preview

Saving Changes

All changes are saved automatically to both the file system and the database.

Auto-Save:
  • Each change is saved immediately after you click "Update"
  • The HTML file is updated in the /lp/ folder
  • The database record is also updated
Manual Save:
  1. Click the "Save All Changes" button at the top
  2. A confirmation message will appear
  3. Your changes are committed
Backup

When you edit a landing page, the previous version is preserved in the database. You can always restore from backup if needed.

Preview Mode

See your changes in real-time before publishing.

How to Preview:
  1. Make your edits in the editor
  2. Click "Preview" button
  3. A new tab opens with your live page
  4. Review all changes
Preview URL:

Your preview URL follows this format:

yoursite.com/lp/your-page-slug.html
Note

The preview shows the exact same page that will be published. There's no separate "draft" mode.

Pro Tips

Tip 1: Match Your Brand

Update primary and accent colors to match your brand exactly. Use hex codes for precision.

Tip 2: Test CTAs

Try different CTA destinations. Make sure they lead to the correct landing or checkout page.

Tip 3: Use High-Quality Images

Replace AI-generated images with your own product shots for more authentic marketing.

Tip 4: Preview on Mobile

Test your landing page on mobile devices to ensure all edits look good on smaller screens.

Tip 5: A/B Testing

Generate multiple versions with different colors and CTAs, then test which converts better.

Troubleshooting

Common Issues:
"Element not found"

The selector didn't match any element. Try selecting a different element or use broader CSS selectors.

"Changes not saving"

Check file permissions on the /lp/ folder. Make sure the folder is writable.

"Image upload failed"

Ensure the image is under 5MB and in a supported format (JPG, PNG, GIF, WEBP).

"Invalid color value"

Use a valid color format: hex (#FF5733), rgb(), or named color (blue).

"Link not working"

Make sure the URL starts with http:// or https:// for external links.

Need More Help?

If you have questions or need assistance:

  • Check the main AI Landing Page documentation
  • Contact support for technical issues
  • Join our community for tips and best practices