How to use the Website Builder in beehiiv (Tutorial)

Summary

This tutorial video guides viewers on customizing their Beehive website using the website builder. It covers accessing the builder, customizing homepage, sign-up, and upgrade pages, as well as setting global styles for a consistent brand identity. The video also explains how to use the layout tab for detailed component customization and the settings tab for configuring website options. Viewers can preview and publish their changes, ensuring a responsive design for both desktop and mobile.

Takeaways

• 📝 Log into your Beehive account to access the website builder.
• 🔧 Customize your homepage, sign up page, and upgrade page using the website builder.
• 🎨 Adjust meta details of the current page by clicking the settings icon.
• 🖌️ The Styles tab allows setting default values and styles reflected across the website, including logo, fonts, colors, and component border radius.
• 🌐 Customize global components like footer, navigation bar, and subscribe widget in the Styles tab.
• 💡 Use the 'example site' toggle for inspiration on designing your website.
• 🔄 The Layout tab lets you expand on default options and customize specific components and sections of your website.
• 📊 Customize navigation bar pages, hero section, post section, side widget section, and archive section in the Layout tab.
• 🛠️ Override default colors and font families set in the Styles tab within the Layout tab.
• ♻️ Reset color changes easily using the reset icon next to the Color Picker.
• ⚙️ The Settings tab centralizes website configuration, including security settings, tracking pixels, and feature enablement.
• 📱 View your website design on both desktop and mobile devices using the phone and desktop icons.
• 🔍 Preview your website outside of the web builder before publishing.
• 🚀 Publish changes by clicking 'publish' in the top right corner and view the live site.

Q & A

What is the main purpose of the Beehive website builder?

The Beehive website builder allows users to customize practically every aspect of their Beehive website, including the homepage, sign-up page, and upgrade page.

How can I access the website builder in Beehive?

To access the website builder, log into your Beehive account, and you will find it visible on the left-hand side of your screen.

What are the three main sections of the website builder in Beehive?

The three main sections are Styles, Layout, and Settings, each serving a different aspect of website customization.

What customization options are available in the Styles tab?

In the Styles tab, you can set default values and styles that will be reflected across your website, such as logo, fonts, colors, and border radius of components.

How can I customize global components like the footer and navigation bar?

You can customize global components by clicking into the different options in the Styles tab, where you can select default colors, font families, and more.

What is the purpose of the Layout tab in the website builder?

The Layout tab allows you to customize how each specific component and section appears on your website, such as the navigation bar, hero section, post section, and archive section.

Can I override default colors and font families set in the Styles tab?

Yes, you can override any default colors and font families in the Layout tab, providing more detailed customization for specific components and sections.

What can I configure in the Settings tab of the website builder?

In the Settings tab, you can configure website settings such as security settings, tracking pixels, and enable or disable specific features.

How can I preview my website on different devices?

While designing your website, you can click on the phone and desktop icons to see what your website will look like on both desktop and mobile devices.

How do I publish the changes I made to my website?

Once you are ready to publish the changes, hit the publish button in the top right corner, and then click on your logo next to the address bar to see the published site.

Where can I find more in-depth tutorials on specific use cases for the Beehive website builder?

For more in-depth tutorials on specific use cases, you can check out the playlist on the Beehive YouTube channel.