Get Help Your Way

OR

Updated: Jul 16, 2025

Customizing your site in the Website Builder

The new Website Builder offers enhanced features, modern templates, greater design flexibility, and an intuitive drag-and-drop interface, making it easier than ever to build a beautiful, high-performing website directly within beehiiv.

While the Website Builder (Legacy) remains available for accounts created before July 15, 2025, the new Website Builder provides a more streamlined, powerful way to customize your site.

This article walks through what to do after onboarding, including swapping placeholder content, using prebuilt sections and blocks, working with dynamic pages, and customizing your navbar and footer. Simply click each tab below to access the content.

    Swapping placeholder data for your own content

    How to replace placeholder content

    Placeholder content helps you visualize how your site will look before your actual content is added. 

    1. Toggle placeholder content on or off.
      At the top of the editor, you'll see the option to display example Placeholder data on your canvas.

    • Turn this toggle on to view example content in each block.
    • Turn it off to see white placeholder boxes where your real posts will appear.
    • Click Sync posts to begin replacing placeholders with your actual content.

    1. Choose the posts to display.
      In the popup, use the dropdown menus and toggles to configure what content shows in the block:
    • Post type: Select from Free Selection, Latest, Recommended Posts, or Archive.
    • Post count: Choose how many posts to display.
    • Start from post: Indicate which post to start from (e.g., 1st, 2nd).
    • Filter by category: Show only posts tagged with a specific content tag.




    After you’ve selected the specific posts you want to display, click Save to apply your changes.


    Where to find and replace placeholder content

    Access is slightly different depending on the page:

    • Home Page: Click Sync Post on each post block to add your own content.
    • Upgrade Page: Click Sync Pricing on the pricing block to select your desired subscription tiers.
    • Archive Page: Click the chain icon in the top-right corner of each post block to select content.
    • Recommendations Page: Click the chain icon in the top-right corner to select which publications to recommend and which Boosts to show.
    • Authors Page: Click the chain icon or use the Data tab in the attributes panel on the right to add your author info.
    • Tags Page: Click the chain icon or the Data tab in the attributes panel to update placeholder tags with your publication’s tags
    Tech Note: Any page that includes a post block may require swapping in your content manually.

    Troubleshooting replacing placeholder data

    Some content may not appear when replacing placeholder data. If your content isn’t appearing, here are a few common reasons:

    • Posts: Only posts that are published to the web can be used. Drafts, hidden posts, or email-only posts won’t appear.
    • Authors: Only team members (not guest authors) can appear as authors. They must also be assigned to at least one post that is published to the web.
    • Tags: Tags must be applied to at least one published web post before they become available as filters. This is done from within the Post Builder.
    Customizing or building pages from scratch

    Insert options for sections, blocks, and more

    In the top navbar, you’ll find the + Insert element option where you can access our prebuilt Sections and Blocks, as well as additional options for Layout, Widgets, and Text.



    Using prebuilt sections to customize your pages

    Tech Note: Users on any plan can create unlimited custom pages in the new Website Builder, but the number of custom pages you can publish is specific to your plan.
    • Launch plan and free trials: Upgrade to publish custom pages. 
    • Scale plan: Can publish up to 15 pages.
    • Max plan: Can publish up to 50 pages.

    The Sections option provides prebuilt templates for quickly designing a page. You can choose from a variety of options, including Heroes, Testimonials, Social Proof, Posts, Pricing, Recommendations, CTAs, FAQs, and Team sections.

    1. Click + Insert element in the top navbar. Under Templates, click Sections to begin adding prebuilt sections to your page.



    2. The Sections template library will appear, showing a list of available section templates on the left. Click on a section category (e.g., Heroes, Testimonials) and browse the template formats.

    3. Click on the template(s) you want to add, a border and a checkmark in the top-right corner will indicate your selection.
    • You can select multiple templates at once.
    • To deselect a template, click it again.

    1. Once you've chosen your template(s), click the Add section button in the bottom-right corner of the modal. If you wish to exit the modal without adding a section, click on the Cancel button.

      The selected sections will be added to your page, ready for further customization as needed.

    2. To save or reuse a custom section or block, click directly on the section to reveal the menu bar above it. Then, select Save as Template. Your saved templates will be available under the Mine tab when adding new sections or blocks.


    Using prebuilt blocks to customize your pages

    The Blocks option allows you to add individual elements to your page, giving you the flexibility to design and customize your content. Choose from a variety of blocks including Signup, Posts, Buttons, Pricing, Authors, Socials, Tags, Testimonials, Dividers, and Recommendations.

    1. Click on Insert element in the top navbar. Under Templates, select Blocks to begin adding individual blocks to your page.



    2. The Blocks template library modal will appear, displaying a list of available block templates on the left. Click on a block category (e.g., Subscribe form, Posts, Button) and browse through the available template formats.

    3. Click on the block(s) you want to add, a border and a checkmark in the top-right corner will indicate your selection.
    • You can select multiple blocks and styles at once.
    • To deselect a style, click it again.



    1. Once you've made your selections, click the Add Block button in the bottom-right corner of the modal.

      The selected blocks will be added to your page, ready for further customization to fit your content needs.

    2. To save or reuse a custom section or block, click directly on the section to reveal the menu bar above it. Then, select Save as Template. Your saved templates will be available under the Mine tab when adding new sections or blocks.


    Layout Options

    Below the section and block options, you'll find 4 layout blocks to structure your page:

    • Section
    • Container
    • Columns
    • Divider

    When building a page from scratch, start by adding a Section, as most pages consist of multiple sections. Within a section, you can add a Container or Columns to refine the layout, then use Dividers as needed to separate different sections. You also have the option to drag-and-drop elements directly onto the page as you see fit.  

    After placing an element on the canvas, the left navigation panel will automatically switch to the Layers tab for the element, while the right attributes panel will display its customization options.

    Conversion Options

    Once you’ve set up a section, container, or column, you can add conversion options to drive users to subscribe or upgrade.

    Available conversion options include:

    • Subscribe form: A static subscribe form that appears directly on the page.
    • Email capture popup: A popup that appears on the page as users scroll down, asking them to subscribe.
    • Content gate popup: A popup that blocks content on the page and asks users to subscribe. You can choose to show this to non-subscribers, free subscribers, or paid subscribers who aren’t on a specific paid tier.
    • Inline content gate: A content gate that can be placed at specific points on the page and blocks all content below it. You can choose to show this to non-subscribers, free subscribers, or paid subscribers who aren’t on a specific paid tier.

    Synced Options

    Once you’ve set up a section, container, or column, you can add various options that are automatically synced to data within your publication.

    Available synced options include:

    • Post
    • Authors
    • Tags
    • Socials
    • Recommendations
    • Testimonials
    • Pricing Cards

    Widget Options

    Once you've set up a section, container, or column, you can start adding widgets to customize your page. Widgets let you add key elements like images, buttons, or icons. Simply drag and drop widgets from the left panel onto your canvas.

    Available widgets include:

    • Image
    • Button
    • Icon
    • Accordion
    • HTML



    After placing an element on the canvas, the left navigation panel will automatically switch to the Layers tab for the element, while the right attributes panel will display its customization options.


    Text Options

    Below the widgets on the Insert tab, you'll find text elements used for adding headings, paragraphs, and links to your page.

    There are 7 text styles to choose from:

    • Text (paragraph)
    • Headings (H1, H2, H3, H4, H5, H6)

    To add text, simply drag and drop a text element from the left panel onto your canvas, placing it inside a section. Once added, the left navigation panel will automatically switch to the Layers tab for that element, while the right attributes panel will display customization options.

    Fine tuning pages for posts, authors, tags, and surveys

    Using dynamic pages 

    Dynamic pages have the ability to pull in data from the user’s publication. Dynamic pages are not meant to be designed using static blocks as they need their own corresponding block. In order to make styling changes to the corresponding blocks, you can edit the blocks via the attributes panel on the right.

    Pro Tip: In the attributes panel on the right, toggle on Advanced mode to unlock additional customization options for shadows, borders, transitions, and more.

    The current dynamic pages are the:

    Surveys Page: Displays a selected survey from your publication using a Survey block.



    **Tech Note: The Surveys page will display placeholder content while you're working in the Website Builder. Your actual survey will appear on the live, published version of your site.

    Author Page: Uses an Author block to load the selected author’s profile and a Post block set to ‘Author Page’ to display all posts written by that author.


    Authors Page: Displays a list of selected authors from your publication using an Authors block.

    Tech Note: Authors will only show up here to be selected if they are part of your team, and if they have been added to at least one post that has been published to the web.



    Tag Page: Uses a Tag block to display the tag a user clicked on from the Tags page and a Post block to load all posts associated with that tag.
    Tech Note: Content tags are managed in the Posts area. A post will only show up on a Tag page if it has been published and that specific tag has been added to it.

    Tags Page: Displays selected tags from your publication using a Tag block.
    Tech Note: Content tags are managed via the Posts area. Tags will only show up to be selected here if a tag has been added to at least one published post.

    Navbar and footer adjustments

    Customizing your navbar and footer

    The navbar and footer are key elements of your site’s design, and you can easily control their visibility and customization.

    How to show or hide the navbar and footer

    To show or hide the navbar of footer on a page:

    1. From the Layers tab, click the 3 dots icon next to Navbar or Footer.

    2. Select Enable for this page to show it or Disable for this page to hide it.



      The ability to hide these elements is especially useful on pages where you want to encourage user actions like Subscribe, Upgrade, Surveys, Login, Reset Password, and Update Password.

    Customizing the navbar

    There are 3 ways to customize your navbar:

    • Double-click directly on the navbar in the canvas.
    • Open the Layers panel on the left, click the 3 dots menu next to Navbar, then select Edit global navbar. This will bring up the controls in the attributes panel on the right.
    • Click on the navbar in the canvas, and then select Edit Navbar in the attributes panel on the right.

    The navbar is built using rows and columns. Each row contains 3 columns (left, middle, right), helping you align elements precisely across your layout.



    For most sites, we recommend placing:

    • Logo and Search on the left column.
    • Text logo in the center column.
    • Profile, Log In, and Subscribe buttons on the right column.
    Reminder:

    To maintain your layout, be sure to place each element in its intended column.

    To add a new element to the navbar, hover over an existing element and click the plus (+) icon that appears.


    Accepted navbar blocks

    When editing the navbar, you can add or modify elements using the Type dropdown in the attributes panel on the right.

    You can add the following blocks to the navbar of your site:

    • Link: A text link that directs users to another page.
    • Button: A clickable button for actions like Subscribe or Learn More.
    • Dropdown: A menu that expands to show multiple links or categories.
    • Search: A search bar for finding posts across your site.
    • Logo: An image that represents your publication and links to your Home page.
    • User Button: A profile image and dropdown for user actions like Log Out or Manage subscription.

    Editing the navbar

    The navbar editor is separated into two areas:

    • Positioning: Adjust the position of elements in the navbar directly on the canvas.
    • Attributes: Use the right-hand attributes panel to edit text and images, adjust links and actions, style the block, and configure mobile visibility.

    Customizing the footer

    Typically footers are composed of a logo, social links, signup form, and links to other pages of the website.

    To edit the footer, you can:

    • Double-click the footer directly on the canvas.
    • Open the Layers tab on the left, click the 3 dots menu next to Footer, and select Edit global footer.
    • Click on the footer in the canvas and select Edit Footer from the attributes panel on the right.

    Similar to the navbar editor, you can edit the footer layout and content directly on the canvas, while styling and functionality adjustments are made in the attributes panel.

    Tech Note: All footers include links to a Privacy Policy and Terms of Use. These cannot be removed or edited unless beehiiv branding has been disabled in your publication settings (available on Max and Enterprise plans).
    Ways to revert to saved versions

    Version history options

    Your website is saved automatically as you make changes in the builder. To view or restore a previous version, click the beehiiv icon in the top-left corner, then select Version History from the dropdown menu.

    To view an older version, simply click on it in the dropdown list of saved versions. If you would like to restore it, select Revert to version at the bottom of the modal. This will restore the page to the saved version.



    You can also revert a page by going to Pages, clicking the 3 dots menu next to the page name, and selecting Version History.



    From here, you can click on the latest versions to find the one you’d like to revert to. Click Load More to see additional versions. Select the version you’d like to restore and then click on the Revert to version button.


    Tech Note: After restoring a previous version, you’ll need to republish your site for the changes to go live.

    You can also manually save your work at any time by clicking Ctrl + S or ⌘ + S (depending on whether you are using a PC or Mac) in the upper right corner of the builder.

    Publishing options

    How to publish your site

    Before publishing, be sure to:

    • Switch between Desktop and Mobile views using the toggle above the canvas to ensure your site looks great on all devices.
    • Enable the pages you want to be live in the Pages tab. If a page is not enabled, trying to view it on your live site will result in a 404 error.

    To publish your website:
    1. When you're ready to make your website live, click Publish in the top navbar to access the publishing options.



    2. Select the parts of your site you want to publish:
    • This page only: Publishes only the page currently open on the canvas.
    • All pages: Publishes every page in your site.

    • Select Pages: Opens a dropdown list to choose specific pages. A number will appear next to the label to show how many pages you’ve selected. Click the arrow to return to the main menu once you're done.

      Tech Note: If you don’t select specific pages or check All Pages, only the current page open in the builder will be published.
    1. Click Preview Draft Site to review your changes.

    2. When everything looks good, click Publish to Live Site.

    3. Visit your site URL to confirm that your updates are live.
    Connecting your signup flow

    Adding a signup flow to your subscribe forms

    Signup flows allow you to guide new subscribers through a custom series of steps after they enter their email. You can assign different flows to any subscribe forms, buttons, or modals on your beehiiv site.

    How to create a signup flow

    1. In the Website Builder, click the Settings icon in the top navbar, then select the Signup Flows tab.



    2. Click Add signup flow to create a new flow.



    3. In the modal that appears, enter a Name for your flow.



    4. From the Steps dropdown menu, select from any internal pages already published on your website.



    5. Once added, use the 6 dots icon next to each URL to drag and drop your steps in any order you wish.



    6. To add an external URL, type the full address (including https://) into the text field. Once added, external links will be marked with a blue External label.



      Tech Note: External URLs can only be used as the final step in a signup flow.
    7. By default, external URLs will open in a new tab. To keep users in the same tab, toggle on Open external link in the same tab.



    8. If this is your only signup flow, it will be automatically set as your default.

      The default signup flow will be applied to all signup forms on your website. When you have multiple signup flows, you can toggle the Set as default toggle on or off to set your preferred flow as the default.



    9. Click on Create to save your signup flow.



    10. After saving, you’ll return to the main Signup Flows page. Your new flow will be listed along with the number of steps. Click the 3 dots menu to Edit or Delete the flow at any time.


    How to assign a signup flow to a subscribe form

    Each subscribe form on your website must have a signup flow assigned to guide subscribers through the correct steps. Your default signup flow will automatically apply to all subscribe forms unless you manually assign different signup flows to your various subscribe forms.

    1. In the Website Builder, click on any subscribe form that you have added to your website.



    2. On the left, you’ll see that you’re editing the Subscribe Form container. In the attributes panel on the right, find the Signup Flow field.



    3. Click the dropdown to select an existing signup flow, or click Create a signup flow to build a new one.



    4. After assigning your desired flow, be sure to publish your page to make the changes live.

Related Articles

Want More Features?

Upgrade your plan to access more beehiiv tools and supercharge your growth

the one place to build
the one place to build
the one place to build
the one place to build
the one place to build
the one place to build
the one place to build
the one place to build
the one place to build
the one place to build
the one place to build
the one place to build