🏠 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…

Looks sweet, but I don’t think it’s the one…

Getting closer…

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

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.

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…

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.

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.

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.

• 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

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.

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 👇️