Skip to main content

Using the Landing Page Editor in CamBuildr

This guide explains the core functions of the editor, the structure of the page, and the available block types.

Alexander Lagger avatar
Written by Alexander Lagger
Updated this week

The CamBuildr Landing Page Editor allows you to build campaign-ready landing pages using a drag-and-drop interface based on the BeeFree framework. It supports responsive design, modular block layout, full custom HTML/CSS, and rich interactive components – giving you full flexibility to build signup forms, supporter hubs, donation pages, or action sites.

Overview

The editor consists of three main sections:

  1. Canvas (center): A live preview area where you construct your page by dragging and positioning content blocks.

  2. Sidebar (right): Contains all available Content blocks, Rows, and Settings. If you select a block in the Canvas, its settings appear here.

  3. Toolbar (top): Gives you access to saving, structure preview, device previews (desktop/mobile), and other actions.

Block Types in the Sidebar

The sidebar is structured into three tabs: Content, Rows, and Settings.

The Content tab offers both static layout elements and interactive campaign features. All blocks can be dragged into rows and freely combined.

Static Content Blocks

  • TITLE: Inserts a heading or title. Alignment, font, size, and color can be customized.

  • PARAGRAPH: A standard text block, ideal for body copy, explanations, or narratives.

  • LIST: Adds bulleted or numbered lists. Bullet styles and spacing are fully customizable.

  • IMAGE: Upload or link to images (e.g. logos, infographics, photos). Adjust padding, size, and alignment.

  • BUTTON: Creates a call-to-action (CTA). You can customize label text, colors, padding, borders, and more. Buttons can link to external pages, internal anchor links, or open prefilled emails (mailto links).

  • DIVIDER: Inserts a visual line to break up content sections. Line style, color, and spacing are configurable.

  • SPACER: Adds vertical space between elements. The height is fully adjustable.

  • HTML: For advanced users. Allows insertion of raw HTML/CSS/JS for complete customization.

  • VIDEO: Embeds a video preview that links to YouTube, Vimeo, or similar platforms. A clickable thumbnail is automatically generated.

  • ICONS: Adds one or multiple icons from a preset library. Common use cases include contact links or visual emphasis.

  • TEXT: Similar to PARAGRAPH, but optimized for pasting formatted text (e.g. with bold, lists, and links preserved).

Interactive Content Blocks (colored icons)

The following blocks are interactive and dynamic. They enable user input, engagement, and data capture:

  • EVENTS: Teases events from the Events App

  • PUBLIC SUPPORTERS: Show a dynamic feed of public supporter names or avatars from the Public Supporters App and allows user to send in their own statement.

  • USER POSTS: Show a dynamic feed of public supporter names or avatars from the User Posts App and allows user to send in their own content.

  • UGC VOTING: Allow the audience to vote on content or submissions form the User Posts App.

  • DONATIONS: Embed a donation widget connected to your payment provider

  • PROGRESS BAR: Display real-time progress (Signups, Donations or amout of people in a Group).

  • COUNTDOWN: Add a countdown timer to drive urgency (e.g. until election day).

  • SURVEY: Create and embed diverse survey flows.

  • FORM: Add custom form fields to capture names, emails, other inputs or even uploaded data. Form responses are stored in your database.

For detailed guidance on configuring each interactive block, refer to the individual help articles on the Blocks and Apps.

Mobile & Desktop Preview

  • Toggle between mobile and desktop view using the device icons in the upper left of the Canvas.

  • If a “mobile” label appears on an element, it means you are editing the mobile version only — changes here won’t affect the desktop version.

  • You can also hide blocks on mobile or desktop entirely. Hidden elements appear blurred in the Canvas.

  • To preview the email as it will appear to recipients (with hidden elements removed), click the eye icon in the top left corner.

Structure View

  • Click Show structure in the toolbar to highlight the layout of rows and columns, making it easier to manage padding, alignment, and hierarchy.

Save and Version Control

  • Always click SAVE in the top right corner to store your changes.

  • If you leave without saving, your changes are stored locally. Upon reopening, you’ll be prompted to continue with the local draft or the last saved server version.

  • If multiple team members edit a page at the same time, the last saved version will overwrite previous ones.

Best Practices

  • Use rows to organize your layout into logical sections.

  • Test mobile and desktop previews separately.

  • Minimize the use of large images to optimize load speed.

  • Always test interactive elements (forms, donations, share buttons) before publishing.

  • If embedding custom scripts or external services, test on staging links before going live.

Did this answer your question?