Beehiiv: Inserting layout sections and widgets

Beehiiv Try it →Watch full video →

beehiiv·Jan 2025

Demo summary

Demonstrates how to insert sections, containers, and widgets (like pricing cards or sign-up forms) into a page layout.

Step-by-step

Click on Insert to reveal the component options
Select a Layout component like a Section to create the general structure
Add a Container inside the Section to manage spacing and alignment
Drag and drop Widgets, such as buttons or sign-up forms, into a Section or Container
Select Text components based on the desired hierarchy from Heading 1 to Heading 6
Use the Text component for standard paragraph content

Options

Toggle off placeholder data in widgets to display your own data
Use pricing cards to display paid subscription tiers
Use the recommendation widget to show web boost and free recommendations

Watch out for

Widgets containing data will show placeholder information unless toggled off

Tips

Group all components for a specific area, like a hero or FAQ, under one Section
Use Containers inside Sections to keep details visually consistent and organized
Use Heading 1 for the largest text and Heading 6 for the smallest

All demos from “How to use the beehiiv Website Builder (Beta)”

0:080:56Onboarding and initial website setup in beehiivShows the initial setup process including template selection, color theme configuration, and font pairing for a new beehiiv website.Beehiiv· Build a lead-capture landing page
1:041:15Managing default pages and SEO settingsDemonstrates how to navigate default pages like the homepage and archive, replace placeholder data, and access SEO settings for individual pages.Beehiiv· Build a lead-capture landing page
2:190:39Using the Layers tab to rearrange componentsShows how to use the layers panel to drag and drop components to change their visual order on a page.Beehiiv· Build a lead-capture landing page
2:581:05Designing models and global elementsWalks through the models tab for designing pop-ups (like sign-up forms) and editing global elements like headers and footers.Beehiiv· Add an opt-in popup
4:031:58Inserting layout sections and widgetsCurrentDemonstrates how to insert sections, containers, and widgets (like pricing cards or sign-up forms) into a page layout.Beehiiv· Build a lead-capture landing page
6:011:16Creating reusable component templatesShows how to save a customized component or an entire section as a reusable template for future use in the website builder.Beehiiv· Use / customize email templates
7:260:26Saving and publishing the websiteDemonstrates the difference between saving a draft and publishing changes to the live website.Beehiiv· Build a lead-capture landing page
Watch “How to use the beehiiv Website Builder (Beta)” →

Build a lead-capture landing page

0:340:56Accessing the beehiiv Website Builder and Font ThemesShows how to navigate from the beehiiv dashboard to the website builder and select a global font theme for the site.Super Serious Guides
1:380:57Adding and Editing Website ElementsDemonstrates using the 'insert element' button to add blocks like text, images, and buttons to the canvas and editing their content.Super Serious Guides
2:350:23Customizing Site Design and LayoutWalks through the design panel to adjust colors, spacing, and layouts for a professional look.Super Serious Guides
2:580:54Managing and Creating New PagesShows how to use the pages menu to organize site structure and add new custom pages like 'About' or 'Welcome' pages.Super Serious Guides
10:192:51Create a landing page with Beehiiv Page BuilderShows how to use the basic website builder to customize colors, fonts, images, and social links for a hosted newsletter landing page.Allan Borch - Dotcom Dollar
10:460:28Customizing the newsletter websiteA brief look at the drag-and-drop website builder in beehiiv, showing how to adjust layouts, colors, and hero posts.Spencer Scott Pugh
0:080:56Onboarding and initial website setup in beehiivShows the initial setup process including template selection, color theme configuration, and font pairing for a new beehiiv website.beehiiv
1:041:15Managing default pages and SEO settingsDemonstrates how to navigate default pages like the homepage and archive, replace placeholder data, and access SEO settings for individual pages.beehiiv
2:190:39Using the Layers tab to rearrange componentsShows how to use the layers panel to drag and drop components to change their visual order on a page.beehiiv
4:031:58Inserting layout sections and widgetsCurrentDemonstrates how to insert sections, containers, and widgets (like pricing cards or sign-up forms) into a page layout.beehiiv
7:260:26Saving and publishing the websiteDemonstrates the difference between saving a draft and publishing changes to the live website.beehiiv
4:263:52Building landing pages and lead magnets in beehiivGreg demonstrates the beehiiv website builder, showing how to create high-converting landing pages and lead magnet traps to drive newsletter signups.Greg Isenberg