How to customize your beehiiv Home Page

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. 

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.

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. 

Logo & Identity
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.






Global Colors
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.
Typography
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).
Radius & Shadows
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. 

Global Navigation

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.



Subscribe Widget
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.  

Pro Tip: 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.  


Pro Tip: 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).
Post Styles

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).





Global Footer
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. 

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. 

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. 

Global Navigation Layout

In the Global Navigation Layout section, you can:
• Choose your Navigation Menu Options by toggling the option on to show a login button on desktop in the navbar.
• Review or add to your Navigation Menu Groups.
  • To add a new menu item, click on Add Menu Item, then give it a title and click on the Create button.
  • To create a new group, click on Add Categories Group, then give it a title, set its URL slug, and click on Create Page.
    Note: In order to see the Categories menu, you’ll need to have created at least one content tag and linked it to a post. 
• Review or add to your Standalone or Draft Pages
  • For new custom pages or to add a page to your navbar, click on Add Page and then select if it will be an Internal Page or an External Link. 
  • Refer to this article for more details on adding custom pages.
    
    
Hero Section
In the Hero Section, you can adjust the Page Theme and Signup Widget. 



Pro Tip: Whenever you see a Styles button, click it to reveal additional options for that setting.
Page Theme
You can choose from 3 themes for your page content.
Note: The Theme controls the placement for your latest or featured posts, the Signup Widget, and other posts. Whereas, the Navbar settings for your logo, menu items, and login are found in the Styles tab > Global Navigation > Top Navigation Bar > Template.
Headliner 

Headliner theme features: 
• Latest or featured posts are on the left side.
• Signup Widget is on the bottom left below the featured post.
• Other posts are shown in listview on the right side with titles, preview text, and publish date, no images.
 
News


News theme features: 
• Featured posts are shown in the center.
• Signup Widget is at the bottom center.
• Other posts are shown on both the left side with images, and the right side without images, with titles, preview text, and publish date.
 
Default 

Default theme features: 
• Latest or featured posts are shown below the headline section in card view
• Publication title and Signup Widget are in the top center
• Other posts are shown below the featured and latest posts
• With the Default theme, you’ll also be able to upload a Background image, set the Background Color and adjust its Gloss Capacity. 
• Add a Content Container and set its Background Color and Border Color. 
• Toggle on or off your Logo (in the Hero section), if enabled you can also set its Size and Shadow. 
• Add a Headline and Body Copy.
  • Click on the Styles button to reveal settings for the Color, Font Family, and Font Size.
• Toggle on or off the Author Widget, if enabled you can also set the Text Color and give it a Label.  
  • Pro Tip: Toggle the Author Widget off to remove ‘Written by’ from your Home Page.
• Toggle on or off the Social Widget, if enabled you can also give it a Label and set the Label Color, Icons Background Color, and Icons 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.
Posts Section

In the Posts Section, you can adjust the Featured Posts, Latest Pages, Categories Posts, and Post Card Styles. 





You can drag and drop your Featured Posts into the order you would like them displayed in. Click to toggle on/off the Latest Posts section. Override the Post Cards on your Home Page by clicking the Styles button and customizing your fonts of colors.





Side Widget Section
In the Side Widget Section, you can add new widgets and adjust the order of your widgets by dragging and dropping them into place. 

Tech Note: The Side Widget selections will appear below the Latest Post section on your Home Page when toggled on.
Archive Section
In the Archive Section, you can decide if you want to show an archive header and if so, you can adjust the Header Text, Font Size, Archive Section Pattern, More Posts Type, Header Text Color, Button Background Color, Button Text Color, Button Active Background Color, and Button Active Text Color. 

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.