1. bluehost knowledge base

Builder - Design Guide

Bluehost Builder comes with several tools to help you design your website. This article describes how to add elements, explain briefly what each does, and provide links to more detailed articles for some of the complex elements.

Designing your Site

To begin, you will need to access the Bluehost Builder Editor
  1. To access design elements, you will need to add a section. Navigate to the page or post you wish to add a section to.
  2. Click the + (Add Section) icon anywhere on your page, then choose which type of element you would like to add:
    • Address - This element allows you to show your address on a map. When you add the 'Address' element, you will be able to choose a template, and update your address if needed. To update your address, click the ⚙ 'gear' icon.
    • Apps - Use this element to connect your Google Calendar, SoundCloud, Mixer, Twitch, or Twitch Clips. Enter the username or URL (whichever is requested) for your profile to link your account.
    • Blog - Add the blog element to manage your website's blog. You can create, edit, publish, or delete blog posts, set cover photos, and add categories or SEO settings.
    • Business Hours - This element will allow you to choose a template to display your business hours, address, and/or phone number. 
    • Call to Action - This element allows you to create exactly that - a call to action! Create a call out with a button that links to another page, an email address, a phone number, or a file.
    • Contact Form - Use this element to add a contact form. Click the ⚙ 'gear' icon to edit form fields, the email address submissions will be sent to, and the confirmation message users will see when submissions are successfully submitted. 
    • Countdown - Use the countdown element to count down to important events, like product launches. 
    • Cover Image - This element allows you to add a cover photo. Choose a template, then use the Settings tab to control what shows up on your photo and the Background tab to choose the image.
    • Embed URL - Use this element to add an iframe. Use the Settings tab to customize the layout and set a URL and the Background tab to set a background for your iframed content. 
    • Event - This element can be used to create a calendar on your page. Hover over the calendar item, and use the icons that appear to resize images, change the images, add links, or alt text. Click the Add item button to add another event to your calendar.
    • FAQ - Add this element to display frequently asked questions to your web page. 
    • Facebook - Use the Facebook element to choose a template to display your Facebook page. Click the ⚙ 'gear' icon to pull up the Social accounts window, and enter your Facebook page URL.
    • Gallery - This element will allow you to add a photo gallery to your page. Choose a template to determine how your photos will be arranged.
    • Map - The Maps element will allow you to showcase a location using a map. Click the Manage markers button to set the address. 
    • Media/Text - Use the Media/Text element to add text or images. Choose a template to determine how your content will be laid out. 
    • Menu - This element will allow you to create a menu of products or services, like food or spa treatments. 
    • PayPal - This element will allow you to list products linked to your PayPal account. Click the Add item button to add products. Use the Settings tab to customize the layout and the Background tab to set a background for your products. 
    • Pricelist - Use this element to display an overview of pricing plans. Click the Add item button to add new plans.
    • Products - This element will allow you to show off products for your store. Use the Settings tab to customize the layout and the Background tab to set a background for your products. Click the Add item button to add new products.
    • Progress - Use this element to show your business's progress towards goals. Choose a template, then click the ⚙ 'gear' icon to set the progress percentage.
    • Promotion - This element allows you to promote a discount or special your business is having.
    • Social - To add social buttons, use the Social element. Choose a template, then enter the URL or username for any social accounts you would like to display buttons for. 
    • Statistics - This element can be used to show statistics about your business, such as how many stars, partnerships, or clients you have. Click the Add item button to add new statistics.
    • Store - This element can be used to add a store to your page. Please see Bluehost Builder - How to Add an eCommerce Store.
    • Subscribe - If you want to add a subscription, use this element to create a form to allow visitors of your site to add their email address to your mailing list. 
    • Team - This element will allow you to showcase your team members. Click the Add item button to add extra team members.
    • Testimonials - Use this element to show off testimonials from customers that love what you do! Click the Add item button to add testimonials. 
    • Text - Use the Text element to add text. Choose a template to determine how your content will be laid out. 
    • Timeline - The Timeline element will allow you to show visitors a timeline of important events, like your business's history.
    • USPs - A USP is a 'unique selling proposition'. Choose a template, then set information about your products or services. Click the Add item button to add a new product or service. 
    • Video - Use this element to add a video to your page. Click the ⚙ 'gear' icon to set the URL of the video you want to display. 
  3. Choose a template to display your content. Stock photos and filler text will be used as placeholders to give you an idea of where and how your content will appear.

Additional Resources