1. bluehost knowledge base

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.

  1. You can access the Elements from the right-hand menu when you first land in your website editor. 
  2. 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.
    builder-default-elements
  3. If you want other elements that are not yet in the template, click the Sections button at the leftmost corner of your screen.
    builder-sections
  4. 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.
    builder-sections-categories
  5. You can browse through the Elements several ways:
    1. Search for what you need at the top-left search bar.
      builder-browse-option1
    2. Click on the item category you’re looking for on the left to jump to that item on the right menu. 
      builder-browse-option2
    3. Scroll through the items in the section list to see more available elements and options in each.
      builder-browse-option3
  6. When you have selected the type of element to add, you may see more Element options to its right.
    builder-elements-choices
  7. Click or drag and drop the desired Element option to where you want it on your page.
    builder-sample-element
  8. Then, click the Element to set it on the page. Once you set an element, its toolbar will appear either above or below.
    builder-element-edit
  9. Each Element has some additional settings that you can access from the element toolbar.
  10. 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 is 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.

The Elements

Here is a breakdown of each element, with an example of how you could use it on your website:
 

Element NameDescriptionWhen to use
ButtonsButton 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.
AppsThis 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 FormThese 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.
ContainersThis 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.
FilesA 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 VideosYou can also run a simple custom code, add metadata, and widgets to your site.
*We are unable to provide support for third-party applications.
ImagesYou 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 FeedsLink 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.
MapA 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.
PaypalPayPal integration for users with an eCommerce plan.Allow for flexible and trusted options for shoppers.
ShapesSimple 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 NavigationStandard 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 MediaAll 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.
StoreFor 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.
TextLike 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.