Builder - Design with Elements
This article applies to the Bluehost Builder (our express website editor not connected to WordPress). For information about using the Bluehost Website Builder (for WordPress), please see Bluehost Website Builder (for WordPress) - How to Add and Delete Pages.
If you are not sure which version you are currently using, please see Bluehost Website Builder (for WordPress) vs. Bluehost Builder for more information.
The Elements in your website editor are the "bread and butter" of your design tool. Primarily, the core amount of your time will be spent finding, changing, adding, and replacing different elements to make up the general look of your website. In this article, we will cover the basics of Designing with Elements as well as What Elements are available in your Bluehost builder.
Designing with Elements
With your website builder’s Elements, you can add different aspects of your website to make each page contain the features you need.
- You can access the Elements from the right-hand menu when you first land in your website editor.
- From here, the Elements menu by default is already open, and all the elements that have been added in a certain section of your page can be toggled on or off.
- If you want other elements that are not yet in the template, click the Sections button at the leftmost corner of your screen.
- The element categories will be displayed like a list, showing several submenus such as Address, Apps, Business hours, and so much more, including basic functions like adding texts, images, maps, videos, etc.
- You can browse through the Elements several ways:
- Search for what you need at the top-left search bar.
- Click on the item category you’re looking for on the left to jump to that item on the right menu.
- Scroll through the items in the section list to see more available elements and options in each.
- Search for what you need at the top-left search bar.
- When you have selected the type of element to add, you may see more Element options to their right.
- Click or drag and drop the desired Element option to where you want it on your page.
- Then, click the Element to set it on the page. Once you set an element, its toolbar will appear either above or below.
- Each Element has some additional settings that you can access from the element toolbar.
- Other configurations are available by clicking the More and the Advanced options, which will vary depending on what Element you are editing.
Pro Tip: Over time, you'll find that there are plenty of settings available to choose from. As you will see, the more you use the builder, the better you get at figuring out what you can and cannot do. We will elaborate on the settings of each element in different articles, but for now, be sure to test different settings to see what they do.
Here is a breakdown of each element, with an example of how you could use it on your website:
|Element Name||Description||When to use|
|Buttons||Button elements give visitors clickable content. This simple element is customizable in appearance and usually takes your audience elsewhere on your site, like to a store or an external link. Most of the templated buttons can be found under the Call to action section.||You may have seen a "shop" button when visiting an eCommerce website or clicked on a button to download a document or video. Use buttons when you want people to click things.|
|Apps||This allows you to integrate common applications into your website, such as Audioboom, Google Calendar, SoundCloud, Twitch, Ko-fi, Spreaker, etc.||You may feature your business app partner for more interaction and medium of contact with your customers.|
|Contact Form||These elements can vary from an email address or mailing address to a phone number, street address combination. You can also choose to only include social media, contact forms, or all of the above!||These elements specifically provide the audience with ways to reach you or your business. These elements give people a dedicated way to contact you.|
|Containers||This element is essentially a ‘section within a section.’ A container is a colored shape used to add elements together and contain the contents while also separating them from the rest of the page.||Containers can be used to separate columns of text, graphics, etc. When editing a container, you're able to make changes to the elements within the container without rewriting the entire web page.|
|Files||A separate way to add downloadable content or forms for your audience to download.||Have an ebook or a brochure? Having your readers fill out a form before downloading your giveaway will help you manage consumer data. Ask anything from name and email to how they heard about your website.|
|HTML/Page Embed*||You can add any number of external elements and applications to appear on your page. You may try templates for these under Embed URL and Videos||You can also run a simple custom code, add metadata, and widgets to your site.|
*We are unable to provide support for third-party applications.
|Images||You can add and manage a single image, add an icon, or create a Gallery, Cover Image, or even a photo Carousel.||Post photos or slideshows of yourself, your products, or maybe an image of your storefront or event. Highlight text with icons.|
|Live Feeds||Link your business page’s social media feeds and have them updated live on your site. (This feature is not intended for personal account use.) You can also make use of the Countdown feature under sections.||Whenever your business tweets, you can enjoy those messages being visible on your website, too, automatically. Also, the countdown feature automatically integrates a timer on your page, which can be useful when you are to release or introduce new products/events to your customers.|
|Map||A physical Google Map integration on the page. Templates for this can also be found under Map and Address section.||Help your customers to easily find your business.|
|Paypal||PayPal integration for users with an eCommerce plan.||Allow for flexible and trusted options for shoppers.|
|Shapes||Simple designs to aid in the design and overall aesthetic of your pages. Similar to icons, but can be used as such or as background or in the background as an additional element.||Get creative with your templates by adding polka dots, stripes, and more. The possibilities are endless!|
|Site Navigation||Standard buttons or links to help with navigation of the site, between and around pages. Templates for this can be seen under the section category - Menu.||Your site visitors might leave if they get confused about where to go or even feel like they have reached the end of your content. Keep them engaged by paving their path forward.|
|Social Media||All things Social Media - templates for this can also be found under Facebook under the sections category list.||Add buttons and feeds to your Instagram or Facebook here.|
|Store||For users with the eCommerce package upgrade, this element provides a window to your online store where you can sell products from your pages. Useful templates for this can be found in sections like Business hours, Event, Pricelist, Products, Promotion, Reviews, Testimonials, and USPs.||To make money online or post products on a page with an article about similar content that might drive traffic to your online store.|
|Text||Like simple text boxes and paragraph boxes, this includes your Site title, Blog title, Description, etc. For templated text formatting, you may try section categories like FAQ, Media/list, Media/text, Progress, Social, Statistics, Subscribe, Timeline, and Team.||Post a blurb, short bio, quote, heading properties, blog, information about your business, or anything you like with the text element. Sections' template mentioned on the left may be useful if you would like to add some graphical attributes.|
If you need further assistance, feel free to contact us via Chat or Phone:
- Chat Support - While on our website, you should see a CHAT bubble in the bottom right-hand corner of the page. Click anywhere on the bubble to begin a chat session.
- Phone Support -
- US: 888-401-4678
- International: +1 801-765-9400
You may also refer to our Knowledge Base articles to help answer common questions and guide you through various setup, configuration, and troubleshooting steps.