Every beehiiv account receives a unique subdomain that acts as your Home Page. With our paid plans, you gain the flexibility to personalize your beehiiv Home Page.

In order to customize your Home Page, you’ll first need to publish an initial post to the web to populate your Home Page. From then on, your Home Page serves as the online showcase for your beehiiv newsletters. After you have published your first post to the web, you can customize the look and feel of your Home Page as outlined below.

Watch and learn: How to use the Website Builder in beehiiv

Check out this helpful video that explains how to navigate inside the Website Builder, then read on for more details on how to customize your beehiiv Home Page.

he beehiiv platform has evolved since the filming of this video, so parts of the user interface featured in the video will be slightly different than what you see in your account. In particular, around the 15 second mark when accessing the Website Builder from your Dashboard, you would need to click on Design > Website Builder as outlined in the steps below.

How to customize your Home Page

From the left panel Dashboard, click on Design > Website Builder.

The Website Builder will open on the Home Page and on the Styles tab.

By clicking on the down arrow next to Home Page, you can also access controls for the Signup, Upgrade, and Custom Pages, just make sure you are on the Home Page for the following instructions. (We have separate articles for each, as linked above.)

On the left next to the Styles tab, you’ll find the Layout and Settings tabs. The Styles tab houses global controls that everyone has access to, whereas the Layout tab has controls that are only available on paid plans. The Settings tab also has global controls, but they are not regulated to website pages, so they aren’t covered in this article.

We’ll go over the controls found under the Styles tab for the Home Page below, simply click on each option to reveal its content.

Styles tab options

After clicking on Logo & Identity you’ll be able to add your publication logo, which is the logo that shows as your favicon and in your navbar and footer. If you have already added your logo to your publication settings, then you’ll see it there and will not need to add it again.
The Global Colors for your Home Page are organized into 3 sections, Core, Functional, and Content.
- Core: These are your primary and secondary colors for your Home Page that consist of Primary Color, Primary Font Color, Secondary Color, and Secondary Font Color.
- Functional: These are your background, border, and link colors that consist of Background Color, Border Color, and Link Color.
- Content: These are header and subheader colors that consist of Overline Text Color, Heading Color, Body Color, and Underline Text Color.
  
  Pro Tip: To revert your colors or fonts back to the Global Settings found in the Styles tab, click on the arrows next to the settings to reset them.
The Typography section is where you can adjust the settings for Global Headings, Global Body, and Global Button.
- Global Headings: This is the font for your headings, meant to provide clear hierarchy and consistent styling for titles and sections.
- Global Body: This is the font for all body content (paragraphs and smaller text) and should have a clean and readable look.
- Global Button: This is the font used for your buttons and secondary actions such as submitting a form.
Pro Tip: Additional font choices can be made within the Layout tab (available on paid plans).
You can also control the radius (aka border) and shadows of the features on your web pages. Click the down arrow to reveal the size options for each.

In the Global Navigation, you can adjust the settings for your Top Navbar, Primary Button, and Secondary Button.

Top Navigation Bar

In the Top Navigation Bar, you can customize your Navbar style by changing the Template or adjusting the Background or Text Colors.

There are 6 template options to choose from, they all feature the same elements that are placed in different areas on the Navbar. The chart below reflects where the logo, menu items, and login are placed on the page for each of the template styles.

Template	Features
1	Logo is on the left Menu items are on the left Login is on the right
2	Logo is on the left Menu items are centered Login is on the right
3	Logo is on the left Menu items are on the right Login is on the right
4	Logo is centered Menu items are on the left Login is on the right
5	Logo is on the left and on the top line Menu items are centered and on the line below Login is on the right and on the top line
6	Logo is centered and on the top line Menu items are centered and on the line below Login is on the left and on the top line

Primary Button: This is the color for the primary button used in the navbar and you can adjust the Background, Text, and Border Colors.

Secondary Button: This is the color for the secondary button used in the navbar and you can adjust the Background, Text, and Border Colors.

The Subscribe Widget controls are broken into 3 sections for General, Button, and Placeholder.

General
You can choose between 3 Templates for the Subscribe Widget. Set the Font Family, Body Color, Border Enabled, and Border Color. Enable the Email Icon and choose to Hide Subscribe Form when a user is logged in.

Template 1 features padding around the Subscribe button within the email form.

Template 2 features no padding between the Subscribe button and the email form.

Template 3 features padding between the Subscribe button and the email form.

To change the roundness of your Subscribe container and button navigate to Styles tab > Radius & Shadows and adjust your Border Radius.
Button
You can adjust the button Text, as well as set the Font Family, Background Color, and Text Color.
Placeholder
You can also adjust what the placeholder Text will say.

Use the Layout tab to customize your Hero Section Subscribe Widget so it will have a different look than your footer and navigation widgets (available on paid plans).
The Post Styles are for the web pages that your posts will be presented on when a user clicks to see your newsletter online. You can adjust the controls for the Post Page, Home Page, Header Style, and Post Cards.

Post Page: Here you can set the background and text color for your website post pages.

Home Page Header Style: You can customize the style displayed on the Home Page of your site.

Post Cards: You can customize the design of the cards users see to click into the posts, you can adjust the Card, Content Tags, Insights, Premium Badge, Title, Subtitle, and Author(s).
In the Global Footer, you can adjust the colors for the Bottom Footer Bar and External Links. You can also click to access the controls for your Social Icons, ToS, and Privacy, which are found in the Settings tab of the Website Builder.

Be sure to publish any style changes or updates

After you have finished updating the look of your Home Page using the Styles tab, always be sure to save your changes by clicking on the Publish Styles button, found in the far right corner of the Website Builder while on the Styles tab. You will not see any new changes made to your live Home Page until you publish them.

Publish Home Page.02.png

Layout tab options (only available on paid plans)

For users on our paid plans, you can access the Layout tab in the Website Builder which grants you controls for your Global Navigation Layout, Hero Section, Posts Section, Side Widget Section, and Archive Section. Click on the headers for each section below to reveal its content.

Changes made (and saved) to the Home Page using the Layout tab will only impact the Home Page and will override the global settings found in the Styles tab.

Be sure to publish any layout changes or updates

After you have finished updating the look of your Home Page using the Styles tab, always be sure to save your changes by clicking on the Publish Home Page button, found in the far right corner of the Website Builder while on the Layout tab. You will not see any new changes made to your live Home Page until you publish them.

Publish Home Page.01.png

How do I change how my content breaks look?

Related Articles