šŸ  Custom Home Pages

Introducing themes, layouts, and widgets for your website

Custom Home Pages

Your website is a representation of your brand and content, so why wouldnā€™t you make it great?

Today weā€™re adding the home page to our Advanced Web Builder so you can emulate the worldā€™s top content websites all without ever writing a single line of code.

Iā€™m going to show you step-by-step how we built the new home page for our Product Announcements newsletter (the one youā€™re reading right now).

Themes

Lacking inspiration or creativity?

Introducing themesā€”a dozen carefully curated color combinations to jumpstart your websiteā€™s design.

Iā€™m going to quickly shuffle through a few to see if any are a good fitā€¦

Sunset theme

Looks sweet, but I donā€™t think itā€™s the oneā€¦

Ocean theme

Getting closerā€¦

Dark theme

Nice! Going to start with this for nowā€¦

Hero Section

The hero section is the top section of your website, otherwise known as the ā€œabove the fold.ā€ You can now choose one of three available options to diversify the layout of the hero:

  • Default

  • News

  • Headliner

Headliner Layout

News Layout

I think both the Headliner and News layouts look nice, but the Default layout gives you a few additional options like adding a background image.

Default Layout with background image

You can add a gloss effect to the image, add a container, and edit the colors and styles of each. Letā€™s give it a spinā€¦

Adding a gloss effect and container

Finally you can edit the size, shadows, and colors of the logo, header, subheading, form, button, and more. You can also change the text of each to be whatever you want.

The Advanced Web Builder is only available to users on our Scale and Enterprise plans. To learn more about our most powerful plans and/or upgrade, visit here.

Featured Posts

Starting today, you can now select up to 6 featured posts. These are pinned above the fold so your readers can easily find your top content.

Directly within the Design Lab you can search and select published posts, and drag-and-drop them to edit the ordering.

Featured Posts

You can also toggle on Latest Posts and select Categories to be featured towards the top of your home pageā€”giving you more control and flexibility than ever before.

Widgets

Add and customize widgets to be pinned along the side of your website for easy access.

Custom widgets

  • Social ā€” quick links to all of your publicationā€™s social channels

  • Newsletters ā€” for those with multiple newsletters, you can cross promote the others to readers

  • Authors ā€” showcase the authors behind the newsletter, linking to the all new author pages

  • Recommendations ā€” display the newsletters you are actively recommending using our Recommendation feature 

  • Categories ā€” showcase the content categories you want, linking out to their very own category pages

  • Signup ā€” a subscribe form to convert web visitors to subscribers

The Advanced Web Builder is only available to users on our Scale and Enterprise plans. To learn more about our most powerful plans and/or upgrade, visit here.

Cards

Each post sits in its own ā€œcardā€ which can be styled and customized however youā€™d like.

Fonts, colors, sizes, borders, hover effects, and moreā€”you have total creative control.

Custom post cards

For the Product Announcements home page I decided to change the font family, border radius, hover effects, and border color.

Zero code written and 15 minutes later, you can view the final product here.

Advanced Web Builder

By the wayā€”the home page is only the most recent addition to the Advanced Web Builder. You can also build beautiful landing pages and upgrade pages directly in the Design Lab, all with no code.

Here are a few of my favorite landing pages built on beehiiv šŸ‘‡ļø 

The Advanced Web Builder is only available to users on our Scale and Enterprise plans. To learn more about our most powerful plans and/or upgrade, visit here.

Reply

or to participate.