homestead_faq's profileBrand User

677 Messages

 • 

44.6K Points

Tuesday, April 9th, 2019 10:33 PM

WebsiteBuilder: Elements

WebsiteBuilder: Elements

Every website is comprised of different elements. Every image, video, contact form, map, button, and paragraph of text is an element that was added.

In Website Builder, you will find the elements that are available if you click Elements on the left. You can find the element you are looking for easily by using the categories on the left or the search bar on the top right. Then, click on the specific element you would like to use. Once you've added the element, click on it to see the options you have to customize it.




There are 15 categories.

Button:

The different buttons are all just different styles of the same element. You can link the button or you can add an element behavior. The Simple Button, Gradient Button, Round Button, and Text Button are just different designs (background, border,  radius) and the Round Button and Icon & Text Button just have an icon in addition to the normal button features.



Contact:

You can add a contact form, where you can allow page visitors to send you information. You can also add a subscribe element called "Join My Mailing List" This will allow you to collect email addresses of people who would like to receive a newsletter, blog, or other emails from you. This list can be exported to a program like Constant Contact, which helps simplify your email marketing.



Containers:

There are two types of containers, but they both function the same. They allow you to group multiple elements together. You can then move them around your site together. It also keeps elements together in the mobile site.
Box is just one container.
Tabs allow you to add multiple slides of container. This allows you to have a gallery of elements (images, buttons, text, etc.) that you can have page visitors scroll through or set transitions for.


Files:

There are two types of files you can add:
Flash is an older file format used for multimedia and graphics. Use this with discretion, because many browsers no longer have Flash enabled automatically, so page viewers might not be able to see this content.
Document is for file formats like PDF, TXT, and DOC. This will display as a button page viewers can click to download the document.




HTML/Page Embed:

HTML Embed allows you to add elements from other sources. For example, if you need a more advanced form than what is available in Website Builder, you would get the HTML code from a form generator and paste it in the Embed HTML element. This will display the content, as long as the code is written properly.
Page Embed allows you to show a webpage within your site. This will only work for smaller sites (You can't embed Google into your site)

*We cannot troubleshoot code that doesn't work.*



Images:

You can add a single image or an image gallery. You can upload images from your computer, pull the image from a link, or use our stock images. Just add the Image element and choose the source.
You can also add an Icon, from our list of icons. There is a search bar for the icon list to make it easier to find what you want.


Live Feeds:

You can show your Facebook Timeline or Twitter Feed on your website. This is just one of many ways to integrate social media with your website.
You just need to add the element and paste the URL for the social media page you want to connect. It will show the most recent posts/tweets for that account.



Maps:

You can show your location using Google Maps. You just need to choose this element and add your address as a marker.


Music:

You can add audio to your site by uploading it to Soundcloud. You can then add a Sound Cloud Player element and paste the URL of the uploaded audio.
*Note: the audio needs to be public for it to display on your website

PayPal:

If you only have a few items to sell, or want to add a Donate button, you can use the Paypal elements. You have the option of Buy Now, Add to Cart, and Check Out buttons, as well as Donate. You will be able to associate a price, product name, shipping and tax. You connect it to your PayPal account so the funds can be deposited.

For sites that want an e-commerce feature to sell multiple items, I recommend adding a store.


Shapes:

You can use these shapes for design on your site. You can change the size and color of the shapes to fit your needs.



Site Navigation:

There are many navigation options in Website Builder:
Navigation Menu- this allows the visitor to navigate between the pages on your site
Button Menu- Same menu, different design
Sections Menu- For particularly long pages, it might be useful to add a menu to allow people to navigate through the different sections on one page.
Scroll Top Button- This will bring the visitor to the top of the page without having to scroll
Scroll Bottom Button- This will bring the visitor to the bottom of the page without having to scroll



Social:

There are numerous options to connect your social media to your website:

Social Links Icons- You can connect it to your social media page and page visitors will be redirected to that page when they click on an icon.
Social Sharing Icons- Page visitors can click these icons to share your website on their Facebook, Twitter, or Linkedin.
Facebook Like Button- This will allow page visitors to like your website on Facebook
Facebook Share Button- This will allow page visitors to share your website only to Facebook
Facebook Comments- This is a way to allow people to leave comments on your site. You will not be able to edit these comments and the page visitor will need to be logged into Facebook.
Facebook Page Plugin- This will show a small version of your Facebook Business page. Page visitors who click this element will be redirected to your Facebook page.
**There are 3 elements for Google Plus. This platform has been discontinued April 2, 2019, so I did not include them**
Linkedin Share Button- This will allow page visitors to share your website on their Linkedin
Twitter Follow Button- This can be connected to your Twitter page so people can follow you.
Twitter Tweet Button- This will allow page visitors to share your website on Twitter


Text:

Here, you can add Heading 1, Heading 2, Heading 3, and Paragraph text boxes. The Heading text boxes are for a Title and sub titles. You only want to have one H1 text box on each page. Paragraph is for your main content.


Videos:

You can add a video or video gallery to your site by uploading your video to Youtube or Vimeo and pasting the URL of the video to the video element.
*Note: the video needs to be public for it to display on your website




You can also watch our Youtube Video Tutorial on this topic!

 

5 Messages

 • 

222 Points

6 years ago

This is a really helpful article and provides great information about all of the elements. 

17 Messages

 • 

496 Points

5 years ago

Not very helpful when asking about how to set up the paypal button. Simply adding the email isn't working. Doesn't let me set the price.
Brand User

11.1K Messages

 • 

145.6K Points

First, this is just an overview of all elements available in WebsiteBuilder, so it doesn't give specific instructions about any one element type. F
What error/issue are you having when you try to set the price?

11 Messages

 • 

170 Points

4 years ago

Is there a way to tab or scroll through all the elements on a page to find one that is hidden behind another element? There is an icon button and a menu button somewhere in the header that I can't see or find. They both show up in the mobile view unless I purposely hide them. I don't need them in the header and would like to delete them, but can't figure out where they are. I have moved all the other elements around and changed background colors in hopes of revealing them, but no luck.

Brand User

11.1K Messages

 • 

145.6K Points

Hello, 

There is not a way to scroll through elements on a page in that way. Sometimes, I've seen elements hiding off the edge of the visible part of the page. You can use the zoom settings on your browser to zoom out and show more of the page. You can see if the elements are hidden there.

11 Messages

 • 

170 Points

Thanks! I found two of the three culprits by zooming out as far as possible, but one is still hidden somewhere in the header. Another questions: Is there a way to quickly find out if an element is attached to a box without moving the element?