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

# The LanderLab Editor: Overview

> Understand the LanderLab visual editor: elements, styling, theme settings, popups, layers, and version history, and how to build pages faster with global styles.

Both landing pages and quiz funnels open in the same visual editor. You click an element, the right panel shows its settings, and nothing requires code. Everything below applies to both page types.

## How the editor is organized

Three panels do most of the work. The **left panel** holds elements you can drag onto the canvas and the [layers view](/features/editor/layers) for navigating complex pages. The **canvas** in the middle is the page itself, edited directly. The **right panel** shows settings for whatever you have selected.

The one habit that pays off immediately: set your [theme colors](/features/editor/theme/colors) and [fonts](/features/editor/theme/fonts) before styling anything individually. Every element inherits from the theme, so a rebrand later takes seconds instead of an afternoon of clicking through elements one by one.

## Structure elements

These hold everything else and decide how the page responds on mobile.

* [Sections](/features/editor/elements/section) are the horizontal bands your page is built from
* [Columns](/features/editor/elements/columns) split a section into side-by-side content that stacks on mobile
* [Boxes](/features/editor/elements/box) group elements together so they move, space, and style as a unit

## Content elements

<Columns cols={2}>
  <Column>
    <Card title="Text and media" icon="align-left" href="/features/editor/elements/headings-text">
      [Headings and text](/features/editor/elements/headings-text), [images](/features/editor/elements/image), [video](/features/editor/elements/video), and [lists](/features/editor/elements/list).
    </Card>
  </Column>

  <Column>
    <Card title="Conversion elements" icon="bolt" href="/features/editor/elements/newsletter">
      [Newsletter forms](/features/editor/elements/newsletter), [countdown timers](/features/editor/elements/countdown), [sticky bars](/features/editor/elements/sticky-bar), and [accordions](/features/editor/elements/accordion).
    </Card>
  </Column>
</Columns>

When you need something the built-in elements do not cover, the [custom code element](/features/editor/elements/custom-code) accepts HTML, CSS, and JavaScript inline on the page.

## Styling

Every selected element exposes the same styling categories in the right panel: [typography](/features/editor/styles/typography), [background](/features/editor/styles/background), [spacing](/features/editor/styles/spacing), [dimensions](/features/editor/styles/dimensions), [borders and corner radius](/features/editor/styles/border-radius), [box shadow](/features/editor/styles/box-shadow), [layout](/features/editor/styles/layout), [animation](/features/editor/styles/animation), and [transform](/features/editor/styles/transform).

Two are worth singling out. [Visibility](/features/editor/styles/visibility) controls whether an element appears on desktop, tablet, or mobile, which is how you handle layouts that cannot simply stack. [Advanced settings](/features/editor/styles/advanced) exposes positioning, z-index, and custom CSS for anything the panels do not cover.

<Tip>
  Always check the mobile view before publishing. Most paid traffic is mobile, and spacing that looks balanced on desktop is usually too tight on a phone.
</Tip>

## Popups

Popups are built in the same editor as the rest of the page, with their own triggers and behavior.

<Card title="Create a popup" icon="window-restore" horizontal href="/features/editor/popup/create">
  Start from a template or build from scratch, then [set triggers, backdrop, and close behavior](/features/editor/popup/editing-popups). For button-driven or scripted control, use the [popup API](/features/editor/popup/api).
</Card>

## Working faster

These are the features people discover late and wish they had found on day one.

* [Version history](/features/editor/version-history) lets you view earlier versions of a page and restore one in a single click. Use it before any risky edit.
* [Live mode](/features/editor/toolbar/live-mode) previews JavaScript-powered behavior like popups and mouse effects without publishing.
* [Reusable components](/features/editor/how-to-save-and-reuse-components) save a section you can drop into other pages as a starting point.
* [Replace text](/features/editor/quick-actions/replace-text) and [replace links](/features/editor/quick-actions/replace-links) update every occurrence on a page at once, instead of editing twenty elements by hand.
* [Compress images](/features/editor/quick-actions/compress-images) reduces file size across the page, which directly affects load time and conversion rate on mobile traffic.
* [Pass through URL parameters](/features/editor/quick-actions/pass-through-url-parameters) carries tracking parameters across every link on the page so attribution survives the click out.

<Note>
  A component is copied when you insert it and then lives independently. If you need every page to stay in sync, use a [global block](/features/global-blocks/get-started) instead.
</Note>

## Where to go next

<Columns cols={2}>
  <Column>
    <Card title="Publish your page" icon="upload" href="/features/landing-pages/operations/publish" />
  </Column>

  <Column>
    <Card title="Global blocks" icon="layer-group" href="/features/global-blocks/get-started" />
  </Column>
</Columns>