Once you\u2019ve signed up for a Bluehost website hosting plan \u2014 specifically, WordPress hosting \u2014 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.<\/p>\n\n\n\n
With Bluehost Website Builder\u2019s premade sections, you can quickly customize attractive webpages and add all the important information to your WordPress site.<\/p>\n\n\n\n
But what happens when you want to add content that\u2019s not available in one of the Bluehost Website Builder sections? Or when you want to create a more custom layout?<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Here\u2019s what you\u2019ll find in this Bluehost Website Builder tutorial and step-by-step guide:<\/p>\n\n\n\n
Quickstart Bluehost Website Builder Tutorial: Using Mixed Mode and How To Build a Website on Bluehost<\/a><\/strong><\/p>\n\n\n\n Defining Bluehost Website Builder Mixed Mode<\/a><\/p>\n\n\n\n How To Build a Website on Bluehost Website Builder and How Mixed Mode Works<\/a><\/p>\n\n\n\n Final Thoughts: How To Build a Website on Bluehost Video \u2014 Using Mixed Mode<\/a><\/p>\n\n\n\n Mixed Mode<\/a> is a Bluehost Website Builder feature that you can access from within your Bluehost account.<\/p>\n\n\n\n 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<\/a>\u2019s editing capabilities within the builder itself.<\/p>\n\n\n\n Thanks to Mixed Mode, you can go beyond what\u2019s 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.<\/em><\/p><\/blockquote><\/figure>\n\n\n\n Plus, you\u2019re not limited to content that\u2019s only available within the premade sections. You can use Mixed Mode to add all kinds of different content types to your website.<\/p>\n\n\n\n Let\u2019s discuss further as we dive into our Bluehost Website Builder tutorial.<\/p>\n\n\n\n As part of our Bluehost Website Builder tutorial, we\u2019d be remiss if we didn\u2019t 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.<\/p>\n\n\n\n These blocks include:<\/p>\n\n\n\n In addition to blocks, you can add content from WordPress plugins such as:<\/p>\n\n\n\n You can also add a search engine optimization (SEO) plugin like Yoast<\/a>, Google Analytics<\/a>, social media plugins, and any add-ons that come with content blocks.<\/p>\n\n\n\n You can also add content from third-party integrations such as email accounts platforms to start building subscribers, CRM platforms<\/a>, and any other app that doesn\u2019t have a native plugin for WordPress but uses a code-based integration.<\/p>\n\n\n\n With these plugin options, you can create a website<\/a> with the exact functionality and features business owners need.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n This includes elements such as:<\/p>\n\n\n\n So, when you\u2019re 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.<\/p>\n\n\n\n You can also take advantage of the Layouts<\/strong> option, which lets you choose different variations of the sections.<\/p>\n\n\n\n Additionally, the Bluehost Website Builder works well with other WordPress dashboard elements through the Mixed Mode feature.<\/p>\n\n\n\n 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 \u2014 something that\u2019s not possible to do with the premade sections alone.<\/p>\n\n\n\n Mixed Mode can also help you showcase your products on your homepage or insert a contact form from a WordPress plugin.<\/p>\n\n\n\n When you\u2019re using Mixed Mode from within your hosting account, Bluehost overlays Gutenberg<\/a> on top of the Builder to give you even more flexibility in your design.<\/p>\n\n\n\n There are two ways to take advantage<\/a> of Mixed Mode:<\/p>\n\n\n\n If you\u2019re starting with Gutenberg, open the page you want to edit. You\u2019ll see all the sections that were added with the Bluehost Website Builder, but keep in mind that you won\u2019t be able to edit them with Gutenberg.<\/p>\n\n\n\n Below those sections, you can click the +<\/strong> icon and add all the blocks that you want and are available within the Gutenberg editor. You can also click the +<\/strong> sign in between sections to add Gutenberg blocks between Bluehost Website Builder sections.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n You can also use all the styling options that are normally available within Gutenberg. For example, if you add a button block, you\u2019ll be able to set the style, font size, color, and other features.<\/p>\n\n\n\n In the above example image, we\u2019ve added a heading, an image, and three text columns, along with two buttons and a WhatsApp button.<\/p>\n\n\n\n Once you\u2019ve added all the blocks and arranged them the way you want with Gutenberg, save your changes. Then, click Edit With Bluehost Website Builder<\/strong>.<\/p>\n\n\n\n The blocks you\u2019ve added with Gutenberg will be marked as WP Elements<\/strong> 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.<\/p>\n\n\n\n As shown in the screenshot above, the Bluehost Website Builder empowers you to access the options<\/a> and style settings for Gutenberg blocks. You can change the color of the text and buttons, adjust image crops, and modify other elements.<\/p>\n\n\n\n You can also continue customizing your website with the Bluehost Website Builder. Once you\u2019re done, click Publish <\/strong>to make your changes live on your website. <\/p>\n\n\n\n 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<\/strong> button in between two sections or by using the Sections<\/strong> menu in the sidebar on the left. Then, select WP Elements<\/strong>.<\/p>\n\n\n\n You\u2019ll then be able to add Gutenberg blocks, content from WordPress plugins<\/a>, 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.<\/p>\n\n\n\n Now that you\u2019ve seen how Mixed Mode works, you might be wondering how to build a website on Bluehost by customizing the visual styles and settings.<\/p>\n\n\n\n Not only can you access all the theme styles using the Appearance<\/strong> tab, but you can also access Gutenberg\u2019s style settings when working on elements added with Gutenberg for even more styling options.<\/p>\n\n\n\n In other words, you can style your website to match your brand perfectly and make it stand out from others in your industry.<\/p>\n\n\n\n Each section use theme settings that can be managed through the Appearance<\/strong> 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.<\/p>\n\n\n\n This change will also apply to the WordPress<\/a> elements section, ensuring your website always appears balanced and has the same look and feel throughout.<\/p>\n\n\n\n Bluehost Website Builder lets you easily build a great-looking website with its premade sections.<\/p>\n\n\n\n But, if you have a more complex website, you might need to incorporate other content into your webpages that isn\u2019t available through the premade sections. Or, you might want to create a custom layout that isn\u2019t available in the Layouts feature.<\/p>\n\n\n\n That\u2019s 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n With Bluehost Website Builder<\/a> Mixed Mode<\/a>, 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<\/a> today<\/a> and build the website of your dreams.<\/p>\n","protected":false},"excerpt":{"rendered":" Do you want to create a website but aren\u2019t a web developer and have no time to learn coding from scratch? Here’s the good news: You don\u2019t 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 […]<\/p>\n","protected":false},"author":50,"featured_media":100227,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_title":"How To Build a Website on Bluehost Video: Using Mixed Mode","_yoast_wpseo_metadesc":"Today, we\u2019re going to show you how to build a website on Bluehost using mixed mode with a full Bluehost website builder tutorial to help you get started.","inline_featured_image":false,"footnotes":""},"categories":[3727],"tags":[3428,3444,3447],"ppma_author":[588],"class_list":["post-100226","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-updates","tag-branding","tag-how-to-guides","tag-navigation"],"acf":[],"yoast_head":"\nDefining Bluehost Website Builder Mixed Mode<\/h2>\n\n\n\n
Types of Content You Can Add With Bluehost Website Builder Mixed Mode<\/h3>\n\n\n\n
How To Build a Website on Bluehost Website Builder and How Mixed Mode Works<\/h2>\n\n\n\n
![\"Bluehost](\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2021\/09\/Bluehost-Website-Builder-tutorial-Adding-Gutenberg-blocks.jpg\")
<\/figure>\n\n\n\n![\"Bluehost](\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2021\/09\/Bluehost-Website-Builder-tutorial-Accessing-Gutenberg-blocks.jpg\")
<\/figure>\n\n\n\n![\"Bluehost](\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2021\/09\/Bluehost-Website-Builder-tutorial-Accessing-the-style-settings-for-Gutenberg-blocks.jpg\")
<\/figure>\n\n\n\nCustomizing Visual Styles While Working in Mixed Mode<\/h3>\n\n\n\n
![\"Bluehost](\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2021\/09\/Bluehost-Website-Builder-tutorial-Options-accessible-in-the-Appearance-tab-within-Mixed-Mode.jpg\")
<\/figure>\n\n\n\nFinal Thoughts: How To Build a Website on Bluehost Video \u2014 Using Mixed Mode<\/h2>\n\n\n\n