Editing Landing Pages

Fly Super offers three powerful editing modes to customize your landing pages: Preview Mode for AI iteration, Edit Mode for visual editing, and Design Mode for brand customization. Learn how to use each effectively.

The Three Modes

Quick Overview

Switching Between Modes

Use the mode selector at the top of the editor:

• Preview (eye icon) - AI chat interface
• Edit (pencil icon) - Visual component editor
• Design (palette icon) - Design system editor

Your changes are automatically saved in all modes!

Preview Mode

Purpose: Iterate with AI to quickly improve your page

How It Works

Preview Mode shows your landing page with a chat interface on the side. Describe changes you want, and AI will regenerate or modify sections automatically.

What You Can Do

Add New Sections

Add a testimonials section after the features
Add a video demo section before pricing
Insert a FAQ section at the end

Modify Existing Sections

Make the hero headline more compelling
Change the pricing section to show monthly and annual options
Update the features to focus on time-saving benefits

Change Tone or Style

Make the entire page more casual and friendly
Make the copy more technical for a developer audience
Simplify the language for a general audience

Refine Copy

Make the CTA buttons more action-oriented
Write stronger feature headlines
Add urgency to the pricing section

Swap Components

Change the simple hero to a video hero
Replace the feature list with a feature grid
Switch to a pricing table instead of cards

Tips for Preview Mode

1. Be Specific: "Make it better" → "Make the headline more benefit-focused"
2. One Change at a Time: Easier for AI to execute precisely
3. Reference Section Types: "the hero", "the pricing section", "the second feature block"
4. Iterate: Make a change, review, then request another

Common Preview Mode Requests

Improving Headlines

Make the hero headline more specific about the benefit
Add numbers or stats to the headline for credibility
Make the subheadline clearer about who this is for

Adjusting Features

Add icons to the feature grid
Expand each feature description to 2-3 sentences
Reorder features by importance: speed, accuracy, ease of use

Pricing Changes

Add a "Most Popular" badge to the Pro plan
Include annual pricing with savings percentage
Add a comparison table below the pricing cards

Adding Sections

Add a "How It Works" section with 3 steps
Insert a customer logos section after the hero
Add a final CTA section before the footer

Edit Mode

Purpose: Manually edit individual components with precise control

How It Works

In Edit Mode:

1. Click any component to select it
2. Properties panel appears on the right
3. Edit text, images, buttons, and settings
4. Changes appear in real-time in the preview

Component Selection

Selecting Components

• Click directly on any component in the preview
• Selected component highlights with a blue outline
• Component name appears in properties panel

Navigation

• Use the up/down arrows to move between components
• Click away to deselect
• Use viewport selector (mobile/tablet/desktop) to preview responsive layouts

Editing Text Content

Headlines and Text

• Click the text field in properties panel
• Type new content
• Markdown support: **bold**, *italic*, [link text](url)
• Character count shown for headlines (SEO best practice: 50-60 characters)

Buttons

• Edit button text (e.g., "Get Started", "Learn More")
• Set button URL (relative or absolute)
• Choose target: same window or new tab
• Toggle button style: primary, secondary, outline

Working with Images

Replacing Images

• Click "Choose Image" in properties panel
• Upload from computer (max 5MB)
• Paste image URL
• Select from placeholder library

Image Settings

• Alt text (for accessibility and SEO)
• Position: left, center, right
• Fit: cover, contain, fill
• Border radius: none, small, medium, large, full

Swapping Component Variants

How to Swap

1. Select the component you want to change
2. Find "Component Type" dropdown in properties
3. See all available variants for that category
4. Select a new variant
5. Content transfers where properties match

Example: Swap "Hero Simple" → "Hero Split"

• Headline and subheadline transfer
• Buttons transfer
• New "Image" property appears (add image for split layout)

Reordering Components

Drag and Drop

• Hover over component until drag handle appears
• Click and hold the handle
• Drag component to new position
• Drop to place

Keyboard Shortcuts

• Cmd/Ctrl + ↑ - Move component up
• Cmd/Ctrl + ↓ - Move component down

Duplicating Components

• Select component
• Click "Duplicate" in properties panel
• Identical copy appears below original
• Edit the duplicate independently

Deleting Components

• Select component
• Click "Delete" in properties panel (or press Delete key)
• Confirm deletion
• Tip: Can't undo! Be careful or duplicate first to preserve a copy

Component-Specific Settings

Hero Components

• Background: solid color, gradient, image, video
• Overlay opacity (for video/image backgrounds)
• Content alignment: left, center, right
• Animation: fade in, slide up, none

Feature Components

• Icon style: outline, solid, duotone
• Icon color: accent, primary, custom
• Layout: grid columns (2, 3, 4, 6)
• Card style: elevated, flat, outlined

Pricing Components

• Toggle: monthly/annual/both
• Highlight specific plan (adds badge and style)
• Feature list formatting: checkmarks, bullets, none
• Button variants per plan

FAQ Components

• Default state: first open, all closed, all open
• Expand mode: single (accordion) or multiple
• Icon position: left or right
• Divider lines: show or hide

Advanced: Custom Properties

Some components have advanced properties:

Animations

• Entrance animation: fade, slide, scale, none
• Animation delay: 0ms to 1000ms
• Animation duration: fast, normal, slow

Spacing

• Padding: none, small, medium, large, custom
• Margin: none, small, medium, large, custom
• Gap (for grid layouts): tight, normal, loose

Visibility

• Show on: mobile, tablet, desktop, all
• Hide on: mobile, tablet, desktop, none

Design Mode

Purpose: Customize the global design system for brand consistency

How It Works

Design Mode applies global styles to your entire landing page:

• Color palette
• Typography (fonts, sizes, weights)
• Spacing and layout
• Custom CSS (advanced)

All changes apply site-wide to create visual consistency!

Color System

Primary Color

• Main brand color
• Used for: primary buttons, links, accents
• Pick from color picker or enter hex code
• Shades generated automatically (light, dark, hover states)

Accent Color

• Secondary brand color
• Used for: secondary buttons, highlights, icons
• Complements primary color

Background Colors

• Page background: default white/light
• Section backgrounds: alternating colors for visual rhythm
• Card backgrounds: component containers

Text Colors

• Heading color: default near-black
• Body text color: slightly lighter for readability
• Muted text color: captions, labels, meta info

Semantic Colors (auto-generated from primary)

• Success: green tones
• Warning: yellow/orange tones
• Error: red tones
• Info: blue tones

Typography

Font Families

Heading Font

• Select from 50+ Google Fonts
• Preview in real-time
• Popular choices: Inter, Poppins, Montserrat, Plus Jakarta Sans

Body Font

• Separate from headings for visual hierarchy
• Usually more readable at smaller sizes
• Popular choices: Inter, Open Sans, Roboto, System UI

Font Settings

• Font weight: light, normal, medium, semibold, bold
• Line height: tight, normal, relaxed, loose
• Letter spacing: tight, normal, wide

Type Scale

Control heading sizes across the page:

• H1: 2.5rem to 6rem (hero headlines)
• H2: 2rem to 4rem (section headers)
• H3: 1.5rem to 2.5rem (sub-sections)
• H4: 1.25rem to 1.875rem (component headings)
• Body: 1rem to 1.125rem (paragraph text)

Responsive Type

• Desktop: larger sizes
• Tablet: medium sizes
• Mobile: smaller sizes (automatically scaled)

Layout and Spacing

Container Width

• Narrow: 640px (reading-focused content)
• Standard: 1024px (balanced layouts)
• Wide: 1280px (expansive designs)
• Full: 100% (edge-to-edge content)

Section Spacing

• Controls padding between sections
• Options: compact, normal, spacious, extra-spacious
• Mobile spacing automatically reduced

Grid Gap

• Space between grid items (features, pricing cards, etc.)
• Options: tight, normal, loose, extra-loose

Border Radius

• Controls roundness of buttons, cards, images
• Options: none, small (4px), medium (8px), large (16px), full (rounded)

Custom CSS

For Advanced Users

Add custom CSS to fine-tune styles beyond the design system:

/* Example: Custom button hover effect */
.button-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Example: Custom headline style */
h1 {
  background: linear-gradient(to right, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Example: Custom spacing for specific section */
#pricing-section {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

CSS Tips

• Changes apply globally unless you target specific IDs
• Use browser inspector to find class names
• Test on mobile after adding custom CSS
• Avoid !important if possible

Design Presets

Coming Soon: One-click design presets for common styles:

• Modern SaaS (vibrant gradients, large type)
• Professional Enterprise (conservative, trustworthy)
• Startup (bold, energetic, playful)
• Minimalist (clean, simple, spacious)
• Dark Mode (dark backgrounds, light text)

Viewport Preview

Responsive Testing

Test your landing page on different device sizes:

Desktop (1280px+)

• Full layout with all features
• Multi-column grids
• Large images and typography

Tablet (768px - 1279px)

• Adjusted grid columns (usually 2)
• Medium-sized typography
• Stacked layouts for some components

Mobile (< 768px)

• Single column layouts
• Smaller typography
• Hamburger menu for navigation
• Touch-friendly buttons

Mobile Best Practices

1. Headlines: Keep under 40 characters on mobile
2. Buttons: Make them large enough to tap (min 44x44px)
3. Images: Ensure they scale down properly
4. Forms: Stack labels above inputs
5. Navigation: Use hamburger menu

Keyboard Shortcuts

Workflow Recommendations

For Quick Changes

Use Preview Mode

• "Make the headline shorter"
• "Add social proof after the hero"
• "Change tone to be more formal"

For Precise Editing

Use Edit Mode

• Updating specific text content
• Replacing images
• Adjusting button links
• Fine-tuning component properties

For Brand Consistency

Use Design Mode

• Setting up initial design system
• Applying brand colors
• Choosing brand fonts
• Creating visual consistency

Recommended Workflow

1. Generate with AI (Preview Mode starts automatically)
2. Major structural changes (Preview Mode - chat with AI)
3. Fine-tune content (Edit Mode - adjust text, images)
4. Apply branding (Design Mode - colors, fonts)
5. Final polish (Edit Mode - final tweaks)
6. Mobile check (All modes - test responsiveness)
7. Publish (when satisfied)

Troubleshooting

"My changes aren't saving"

• Check internet connection
• Changes save automatically every 2 seconds
• Look for "Saved" indicator in top right

"Component looks different than expected"

• Check viewport (might be viewing mobile layout on desktop)
• Design Mode settings may override component styles
• Custom CSS might conflict with component defaults

"Can't select a component"

• Try clicking directly on the component text/image
• Switch viewport sizes and try again
• Exit and re-enter Edit Mode

"Lost my changes"

• All edits are auto-saved
• Check the landing page list - your page should be there
• Refresh the editor to load latest version

What's Next?

• Design Systems - Deep dive into design customization
• Publishing - Make your page live
• Component Library - Explore all components

Quick Reference: When to Use Each Mode