Knowledge Base
Categories: Builder Legacy
Builder brands: Design with Elements
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 website builder. You can also watch a video walkthrough of this article below.
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 menu from the top of the left-hand menu when you first land in your website editor.
- The Elements menu will open from here, and you can add photos, maps, videos, shapes, buttons, contact forms, and so much more.
- You can browse through the Elements in several ways:
- Search for what you need at the top right search bar.
- Click on the item you’re looking for in the left to jump to that item on the right menu.
- Scroll through the items in the right menu to see more options in each element.
- When you have selected the type of element to add, you may see more Element options beneath it.
- 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.
- The Elements menu will open from here, and you can add photos, maps, videos, shapes, buttons, contact forms, and so much more.
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, depending on what element you are editing.
Pro tip: Over time, you'll find 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.
Available elements
Here is a breakdown of each element, with an example of how you could use it on your website:
| Element name | What is it? | Why use it? |
|---|---|---|
| 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. | You may have seen a "shop" button when visiting an e-commerce website or clicked on a button to download a document or video. Use buttons when you want people to click things. |
| Contact | These elements can vary from an email address or mailing address to a phone number, street address combination. You can also choose only to 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 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. See also: How to use containers |
| 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* | Here, you can add any number of external elements and applications. Embed videos, add calendars, or music players that appear on your page. | You can run a simple code, add metadata, and widgets to your site. *We are unable to provide support for third-party applications. See Also: Add HTML code to website |
| Images | Here, you can add and manage a single image, add an icon, or create an image gallery. | Post photos or slideshows of yourself, your products, or maybe an image of your storefront or event. Highlight text with icons. See Also: Adding and editing images |
| 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.) | Whenever your business tweets, you can enjoy those messages being visible on your website, too, automatically. See Also: Add social buttons/link social accounts |
| Maps | A physical Google Map integration on the page. | Help your customers find your business. See Also: How to add A map |
| Music | SoundCloud music streaming integration. | Make a playlist for your site visitors to enjoy. |
| PayPal | PayPal integration for users with an e-commerce 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 a 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. | 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 | All things Social Media | Add buttons and feeds to your Instagram or Facebook here. See Also: Add social buttons/link social accounts |
| Store | For users with the e-commerce package upgrade, this element provides a window to your online store where you can sell products from your pages. | To make money online or post products on a page with an article about similar content that might drive traffic to your online store. See Also: How to add an e-commerce store |
| Text | Simple text boxes and paragraph boxes. | Post a blurb, short bio, quote, and heading properties, anything you like with the text element. See Also: Adding and editing text |
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.
Did you find this article helpful?