Skip to main content

Designing Your App: The Complete Page Builder Guide

Designing Your App: The Complete Page Builder Guide Why: Create a unique and engaging experience for your subscribers by designing custom pages tha...

Written by Ken Truesdale

Platform 2 Guide — This article applies to the new platform. Looking for classic platform docs? Browse the Platform 1 collection.

Why: Create a unique and engaging experience for your subscribers by designing custom pages that showcase your content beautifully. The Page Builder allows you to mix and match blocks, ensuring your app reflects your brand and meets your members' needs.

Navigate: App Station > Pages & Menu

Quick Start

  1. Navigate to App Station > Pages & Menu.

  2. Click Create New Page.

  3. Choose a Blank Page or App Template.

  4. Add blocks using the Add Block button.

  5. Configure each block's settings and save your changes.


Understanding Pages and Blocks

How Pages Work

Pages are the foundation of your app's content. Each page can be customized with various blocks that display different types of content. The Page Builder allows you to create unique layouts by combining these blocks in any order you prefer.

  1. Create a Page: Start by creating a new page in the App Station.

  2. Add Blocks: Use the block selection drawer to add different types of blocks to your page.

  3. Configure Blocks: Each block can be configured to display specific content, such as recipes, meal plans, or marketing materials.

The Role of Blocks

Blocks are reusable components that can be added to your pages. They come in various types, each serving a specific purpose. Here are some common block types:

  • Content Grid Block: Displays a grid or list of content items, such as recipes or meal plans.

  • Marketing Blocks: Used for creating landing pages, including hero sections, pricing tables, and testimonials.

  • Media Blocks: Showcases images and videos, enhancing the visual appeal of your content.

Templates and Their Importance

Templates control how content is displayed in different contexts. There are two main types of templates:

  1. Card Templates: Define the appearance of content cards in grids or lists.

  2. Detail Page Templates: Control how individual content items are displayed, such as recipes or meal plans.

Types of Blocks Available

Content Grid Block

The Content Grid Block is a versatile component that can display various content types, including recipes, meal plans, and resources. It supports:

  • Layout Modes: Choose between grid or list layouts.

  • Search and Filtering: Enable search functionality and advanced filters for users to find content easily.

  • Card Templates: Customize the appearance of content cards.

Marketing Blocks

Marketing blocks are designed to help you create high-converting landing pages. Some examples include:

  • Hero Block: A full-width section that grabs attention with a headline and call-to-action.

  • Pricing Block: Displays subscription offers and pricing options.

  • Testimonials Block: Showcases customer reviews and feedback.

Media Blocks

Media blocks allow you to display images and videos in an engaging way. They support:

  • Single Media Display: Show one image or video.

  • Swiper Carousel: Display multiple media items in a carousel format.

  • Lightbox Viewing: Allow users to click and view images in a larger format.

How Content Grid Blocks Pull in and Display Content

Content Grid Blocks are powerful tools for displaying content dynamically. They can pull in data from various sources and display it based on your configuration. Here’s how they work:

  1. Data Fetching: Content Grid Blocks fetch data from your content library based on the specified content type (e.g., recipes, meal plans).

  2. Configuration Options: You can configure how many items to display, the layout style, and whether to enable search functionality.

  3. Dynamic Display: The block will automatically update to show the latest content based on your settings.

Card Templates and Their Role

Card Templates control how content cards look in grids and lists. Each card can display various metadata, such as titles, images, and ratings. Here’s what you need to know:

  • Customization: You can configure card templates to show or hide specific elements, such as images or ratings.

  • Responsive Design: Card templates are designed to be responsive, ensuring they look great on all devices.

  • Integration with Content: Card templates pull in data from your content library, displaying it in a visually appealing format.

Detail Page Templates and Their Functionality

Detail Page Templates define how individual content items are displayed. They can include various blocks, such as:

  • Recipe Header: Displays the title, image, and metadata of a recipe.

  • Ingredients Block: Shows a list of ingredients with scaling options.

  • Steps Block: Provides step-by-step cooking instructions.

Configuring Detail Page Templates

  1. Select Blocks: Choose which blocks to include in your detail page template.

  2. Customize Settings: Configure each block’s settings to tailor the display to your content type.

  3. Save and Publish: Once configured, save your changes and publish the template for use.

Marketing Blocks for Landing Pages

Marketing blocks are essential for creating effective landing pages. They help you present your content in a way that drives conversions. Here’s how to use them:

  1. Choose the Right Blocks: Select blocks that align with your marketing goals, such as hero sections, testimonials, and pricing tables.

  2. Configure Each Block: Customize the content and appearance of each block to match your branding.

  3. Arrange for Impact: Position blocks strategically on the page to guide visitors toward your call-to-action.

Conclusion

The Page Builder is a powerful tool that allows you to design your app in a way that resonates with your audience. By understanding how pages, blocks, card templates, and detail page templates work together, you can create a unique experience for your subscribers. Start building your pages today and unlock the full potential of your app!

Did this answer your question?