Blog Menu

I write and curate content for Bluehost. I hope this blog post is helpful.
Are you looking at creating a blog, website or an online store? Bluehost has something for everyone. Get started today.

Do you want to create a website but aren’t a web developer and have no time to learn coding from scratch?

Here’s the good news:

You don’t have to hire a developer or learn how to code to make a website. There are now website builders that you can use to develop an interactive new website without writing a line of code.

One such website builder is Bluehost Website Builder.

Once you’ve signed up for a Bluehost website hosting plan — specifically, WordPress hosting — and a free domain name with SiteLock Security (SSL) and one-click install WordPress, the builder makes it even easier to create your online presence.

With Bluehost Website Builder’s premade sections, you can quickly customize attractive webpages and add all the important information to your WordPress site.

But what happens when you want to add content that’s not available in one of the Bluehost Website Builder sections? Or when you want to create a more custom layout?

Bluehost Website Builder Mixed Mode is the answer. It can help you build a blog, e-commerce shop, or any other type of WordPress site.

Here’s what you’ll find in this Bluehost Website Builder tutorial and step-by-step guide:

Quickstart Bluehost Website Builder Tutorial: Using Mixed Mode and How To Build a Website on Bluehost

Defining Bluehost Website Builder Mixed Mode

How To Build a Website on Bluehost Website Builder and How Mixed Mode Works

Final Thoughts: How To Build a Website on Bluehost Video — Using Mixed Mode

Defining Bluehost Website Builder Mixed Mode

Mixed Mode is a Bluehost Website Builder feature that you can access from within your Bluehost account.

Mixed Mode lets you add various open-source WordPress website elements to the premade sections, Bluehost templates, and WordPress themes (including free themes and premium themes). It also lets you use all of Gutenberg’s editing capabilities within the builder itself.

Thanks to Mixed Mode, you can go beyond what’s available in the Bluehost Website Builder. You can create custom layouts that empower you to display information in a way that works for you and your own website.

Plus, you’re not limited to content that’s only available within the premade sections. You can use Mixed Mode to add all kinds of different content types to your website.

Let’s discuss further as we dive into our Bluehost Website Builder tutorial.

Types of Content You Can Add With Bluehost Website Builder Mixed Mode

As part of our Bluehost Website Builder tutorial, we’d be remiss if we didn’t discuss how Mixed Mode empowers you to add all the blocks that are usually available within the Gutenberg editor straight from your web host interface.

These blocks include:

  • Text
  • Media
  • Lists
  • Quotes

In addition to blocks, you can add content from WordPress plugins such as:

You can also add a search engine optimization (SEO) plugin like Yoast, Google Analytics, social media plugins, and any add-ons that come with content blocks.

You can also add content from third-party integrations such as email accounts platforms to start building subscribers, CRM platforms, and any other app that doesn’t have a native plugin for WordPress but uses a code-based integration.

With these plugin options, you can create a website with the exact functionality and features business owners need.

How To Build a Website on Bluehost Website Builder and How Mixed Mode Works

As we mentioned before in this Bluehost Website Builder tutorial, the tool has premade sections that empower you to add different information about your business to your webpages.

This includes elements such as:

  • Cover images
  • Galleries
  • Media and text combinations
  • Maps

So, when you’re within your hosting provider or web hosting plan view within the Bluehost dashboard, you can see the builder lets you edit the content within those sections, style it, and enable or disable individual elements in the section.

You can also take advantage of the Layouts option, which lets you choose different variations of the sections.

Additionally, the Bluehost Website Builder works well with other WordPress dashboard elements through the Mixed Mode feature.

Mixed Mode is useful if you want to create a more custom layout, such as a heading and three text columns to your blogging website — something that’s not possible to do with the premade sections alone.

Mixed Mode can also help you showcase your products on your homepage or insert a contact form from a WordPress plugin.

When you’re using Mixed Mode from within your hosting account, Bluehost overlays Gutenberg on top of the Builder to give you even more flexibility in your design.

There are two ways to take advantage of Mixed Mode:

  1. Start by editing the page in the Gutenberg editor and finishing it off in the Bluehost Website Builder.
  2. Click on the + above Sections, click on WP Elements, then drag it in between existing sections on your page.

If you’re starting with Gutenberg, open the page you want to edit. You’ll see all the sections that were added with the Bluehost Website Builder, but keep in mind that you won’t be able to edit them with Gutenberg.

Below those sections, you can click the + icon and add all the blocks that you want and are available within the Gutenberg editor. You can also click the + sign in between sections to add Gutenberg blocks between Bluehost Website Builder sections.

Bluehost Website Builder tutorial Adding Gutenberg blocks

Since you can use content from WordPress plugins and create columns with Gutenberg easily, you can craft the exact layout you want with all the important content you need for that page.

You can also use all the styling options that are normally available within Gutenberg. For example, if you add a button block, you’ll be able to set the style, font size, color, and other features.

In the above example image, we’ve added a heading, an image, and three text columns, along with two buttons and a WhatsApp button.

Once you’ve added all the blocks and arranged them the way you want with Gutenberg, save your changes. Then, click Edit With Bluehost Website Builder.

Bluehost Website Builder tutorial Accessing Gutenberg blocks

The blocks you’ve added with Gutenberg will be marked as WP Elements when you click on them within the builder. You can then continue editing them as you usually would within Gutenberg itself. You can also move sections up or down to adjust their position on the page.

As shown in the screenshot above, the Bluehost Website Builder empowers you to access the options and style settings for Gutenberg blocks. You can change the color of the text and buttons, adjust image crops, and modify other elements.

Bluehost Website Builder tutorial Accessing the style settings for Gutenberg blocks

You can also continue customizing your website with the Bluehost Website Builder. Once you’re done, click Publish to make your changes live on your website. 

As we mentioned above, you can also access all the perks of the Gutenberg editor directly within the Bluehost Website Builder. Simply click on the Add Section button in between two sections or by using the Sections menu in the sidebar on the left. Then, select WP Elements.

You’ll then be able to add Gutenberg blocks, content from WordPress plugins, and third-party integrations as you normally would with the Gutenberg editor itself. You can also move the section up or down to get your website to look exactly as you want.

Customizing Visual Styles While Working in Mixed Mode

Now that you’ve seen how Mixed Mode works, you might be wondering how to build a website on Bluehost by customizing the visual styles and settings.

Not only can you access all the theme styles using the Appearance tab, but you can also access Gutenberg’s style settings when working on elements added with Gutenberg for even more styling options.

Bluehost Website Builder tutorial Options accessible in the Appearance tab within Mixed Mode

In other words, you can style your website to match your brand perfectly and make it stand out from others in your industry.

Each section use theme settings that can be managed through the Appearance tab. This means that if, for example, you change the background color of a section, all of the sections that use that color will update accordingly.

This change will also apply to the WordPress elements section, ensuring your website always appears balanced and has the same look and feel throughout.

Final Thoughts: How To Build a Website on Bluehost Video — Using Mixed Mode

Bluehost Website Builder lets you easily build a great-looking website with its premade sections.

But, if you have a more complex website, you might need to incorporate other content into your webpages that isn’t available through the premade sections. Or, you might want to create a custom layout that isn’t available in the Layouts feature.

That’s exactly where Mixed Mode comes into play. You can use it to add various blocks available through Gutenberg as well as any content from WordPress plugins and third-party apps.

Mixed Mode empowers you to build a basic website quickly with all the relevant information you need with its default sections. Then, if you need more advanced features, you can take it a step further and use the power of Gutenberg and all of its functionality.

With Bluehost Website Builder Mixed Mode, you can add the exact features and functionality you want without any tech headaches or writing a single line of code. Sign up for Bluehost Website Builder today and build the website of your dreams.

  • Tiffani Anderson

    Tiffani is a Content and SEO Manager for the Bluehost brand. With over 10 years experience across all facets of content and brand marketing, she strives to combine concepts from brand marketing with engaging content through the lens of SEO.

    University of North Texas
    Previous Experience
    Content Marketing, SEO, Social Media
Learn more about Bluehost Editorial Guidelines

Write A Comment