> ## Documentation Index
> Fetch the complete documentation index at: https://docs.elasticfunnels.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Pages Overview

> Create, edit, test, and publish pages in ElasticFunnels

Pages are the building blocks of your funnels. They are where visitors land, read your offer, buy, opt in, or move to the next step.

## What Are Pages?

Pages are individual web pages that make up your funnels. Each page can be:

* **Landing pages** - Entry points for your marketing campaigns
* **Sales pages** - Product presentations and offers
* **Thank you pages** - Post-purchase or post-signup confirmations
* **Order history pages** - Customer account pages showing past purchases
* **Upsell pages** - Additional offers after initial purchase

## Core Concepts

### Page Types

From **Create Page**, choose the starting point that fits the job:

1. **AI Page Builder** - Describe what you need; the app generates a draft you refine in the builder (beta).
2. **AI Page Cloner** - Import a public URL into an editable page when your plan includes it.
3. **Arbitrage Page Builder** - Guided flow tuned for arbitrage-style landers.
4. **Drag and Drop Builder** - Page details, then the visual canvas.
5. **Choose Template** - Pick from the template library, then finish the prompts.
6. **Checkout Page** - Shown only when payments are set up; checkout-oriented templates (Stripe, NMI, PayPal, Klarna, and similar).
7. **Code Editor** - Page details, then HTML, CSS, and JavaScript.

For the full Create Page walkthrough, see [Create Landing Page](/pages/create-landing-page).

### Page Variants

Create multiple versions of the same page for split testing and optimization. Each variant can have different content, layouts, or functionality while sharing the same URL structure.

### Dynamic Content

Pages support dynamic content that changes based on:

* Visitor status (whitelisted vs non-whitelisted)
* Device type (mobile, tablet, desktop)
* Query parameters
* Customer data
* Purchase history

## Getting Started

### Create Your First Page

1. Open **Pages** in the sidebar.
2. Click **Create Page**. Choose AI, a template, drag-and-drop, code, or checkout when your brand supports it.
3. Pick the card that matches how you want to work.
4. Complete **page details**, template questions, or the AI flow the app shows for that path.
5. Build in the builder or editor, preview, then publish or leave the page on draft.

<CardGroup cols={2}>
  <Card title="Create Landing Page" icon="file-plus" href="/pages/create-landing-page">
    Choose AI, templates, drag-and-drop, code, or checkout when your brand supports it
  </Card>

  <Card title="Page Variants" icon="layers" href="/pages/page-variants">
    Create and manage multiple versions of your pages for split testing
  </Card>

  <Card title="Page Revisions" icon="clock-rotate-left" href="/pages/page-revisions">
    Understand how revisions protect your work and restore previous versions
  </Card>
</CardGroup>

## Page Features

### Containers

Containers are specialized page elements that add dynamic behavior:

* **CTA Container** - Reveals content when triggered (e.g., after VSL)
* **Hide on CTA Container** - Hides content when CTA is triggered
* **Merchant Container** - Shows merchant-specific content
* **Split Test Container** - A/B test different content variations
* **Lazy Load Container** - Defers loading until visitor scrolls
* **Whitelisted/Non-Whitelisted Containers** - Show different content based on visitor status

<Card title="Containers" icon="box" href="/pages/containers">
  Use containers for dynamic content display
</Card>

### Interactions

Add interactive behaviors to any page element:

* **Click handlers** - Execute JavaScript, show modals, track events
* **Hover effects** - Tooltips, previews, animations
* **Form interactions** - Validation, success/error handling
* **Animations** - Slide, fade, scale, rotate effects
* **Device-specific behavior** - Different interactions for mobile/desktop

<Card title="Interactions Panel" icon="cursor-click" href="/pages/interactions-panel">
  Add interactive behaviors to your page elements with clicks, hovers, and custom JavaScript
</Card>

### Content Visibility Control

Control which visitors can see specific content:

* **Whitelisted visitors** - See full content (VSL, sales pages)
* **Non-whitelisted visitors** - See standard content (TSL, basic info)
* **Query parameter whitelisting** - Whitelist via URL parameters
* **Domain-level whitelisting** - Auto-whitelist all visitors to a domain
* **Hide content from competition** - Protect sensitive information from competitors

<Card title="Content Visibility Control" icon="eye" href="/pages/visitor-based-content">
  Control which visitors can see specific content based on whitelisting status
</Card>

### Order Tags

Display customer order history and purchase details:

* **Order information** - Date, order number, addresses
* **Product listings** - All products in each order
* **Bonus products** - Included bonus items with download links
* **Customer personalization** - Show customer name and order history

<Card title="Order Tag" icon="shopping-cart" href="/pages/order-tag">
  Display customer order history and details using the order tag system
</Card>

### Product & Collection Tags

Display dynamic product listings and collection content:

* **Product Item Tag** - Filter and display products by type, classification, or codes
* **Collection Item Tag** - Display entries from reusable collections (testimonials, FAQs, etc.)

<CardGroup cols={2}>
  <Card title="Product Item Tag" icon="package" href="/pages/product-item-tag">
    Display dynamic product listings filtered by type, classification, or codes
  </Card>

  <Card title="Collection Item Tag" icon="database" href="/pages/collection-item-tag">
    Display dynamic content from collections using templates
  </Card>
</CardGroup>

### Page Variables & Placeholders

Use dynamic variables to personalize your pages:

* **Date variables** - Current date, day, month, year, hour
* **Customer variables** - Name, email, address, order history
* **Query parameters** - Access URL parameters for tracking and personalization

<Card title="Page Variables" icon="code" href="/pages/page-variables">
  Use dynamic variables and placeholders to personalize your pages
</Card>

## Page Management

### Organizing Pages

* **Domain assignment** - Assign pages to specific domains
* **Page status** - Draft, published, or archived
* **[Revision history](/pages/page-revisions)** - Track changes and revert if needed
* **Page templates** - Save and reuse page designs

### Performance Optimization

* **Lazy loading** - Defer loading of below-fold content
* **Image optimization** - Compress and optimize images
* **Mobile optimization** - Ensure pages work on all devices
* **Loading speed** - Monitor and improve page load times

## Advanced Features

### Dynamic Content

Pages can display content that changes based on:

* Customer purchase history
* Query parameters
* Visitor whitelisting status
* Device type
* Time of day
* Geographic location

### Integration with Funnels

Pages connect inside funnels:

* **Funnel nodes** - Connect pages in your funnel flow
* **Split testing** - Test different page variants
* **Page events** - Trigger actions based on page interactions
* **Analytics** - Track page performance and conversions

## Best Practices

### Design Principles

1. **Clear call-to-action** - Make it obvious what visitors should do
2. **Mobile-first** - Design for mobile, enhance for desktop
3. **Fast loading** - Optimize images and minimize resources
4. **Trust signals** - Include testimonials, guarantees, security badges
5. **Focused messaging** - One clear goal per page

### Content Strategy

1. **Compelling headlines** - Grab attention immediately
2. **Benefit-focused copy** - Focus on what visitors gain
3. **Social proof** - Testimonials, reviews, case studies
4. **Visual hierarchy** - Guide the eye to important elements
5. **Progressive disclosure** - Reveal information gradually

### Technical Considerations

1. **Test thoroughly** - Preview on multiple devices and browsers
2. **Monitor performance** - Track loading speed and user engagement
3. **Update regularly** - Keep content fresh and relevant
4. **Backup before changes** - Save versions before major updates
5. **Document your setup** - Note any special configurations

## Common Use Cases

### Landing Pages

Create high-converting landing pages for your marketing campaigns:

* Lead capture forms
* Product presentations
* Event registrations
* Newsletter signups

### Sales Pages

Build persuasive sales pages that convert:

* Video sales letters (VSL)
* Long-form sales copy
* Product demonstrations
* Pricing tables

### Thank You Pages

Design post-action confirmation pages:

* Order confirmations
* Download pages
* Upsell offers
* Social sharing prompts

### Account Pages

Create customer-facing account pages:

* Order history
* Account settings
* Download libraries
* Support information

## Troubleshooting

### Common Issues

* **Pages not loading** - Check domain settings and page status
* **Content not displaying** - Verify container settings and conditions
* **Interactions not working** - Check browser console for errors
* **Mobile issues** - Test responsive design and device-specific settings

### Getting Help

If you encounter issues:

1. **Check documentation** - Review relevant guides
2. **Preview mode** - Test changes before publishing
3. **Browser console** - Look for JavaScript errors
4. **Contact support** - Reach out for assistance

## Related Documentation

* [Funnels](/funnels/create-funnel) - Connect pages into complete funnels
* [Page Events](/funnels/page-events) - Add dynamic behavior to pages
* [Split Testing](/funnels/split-testing) - Test different page versions
* [Products](/products/buy-links) - Add purchase links to pages
* [Forms](/forms/lead-capture) - Create lead capture forms
* [Analytics](/analytics/conversions) - Track page performance

## Quick Links

<CardGroup cols={2}>
  <Card title="Create Landing Page" href="/pages/create-landing-page" />

  <Card title="Page Variants" href="/pages/page-variants" />

  <Card title="Page Revisions" href="/pages/page-revisions" />

  <Card title="Containers" href="/pages/containers" />

  <Card title="Interactions Panel" href="/pages/interactions-panel" />

  <Card title="Content Visibility Control" href="/pages/visitor-based-content" />

  <Card title="Order Tag" href="/pages/order-tag" />

  <Card title="Product Item Tag" href="/pages/product-item-tag" />

  <Card title="Collection Item Tag" href="/pages/collection-item-tag" />

  <Card title="Page Variables" href="/pages/page-variables" />
</CardGroup>