Avada Builder Elements
1. Alert
Creates a box to which you can add text. There is an X in the top corner that you can click to close the box. Several customization options are available.
Click the X in the corner to make this box disappear
2. Blog
Adds thumbnails of your blog posts, many customization options. Note: the following Builder Elements have overlapping functions:
#2: Blog
#21: Post Slider
#24: Recent Posts
#25 Recent Works
How to Set up Google Analytics Using a Child Theme
Ideally, your theme provides a place to paste the google analytics tracking [...]
The Best Way to Build a Website
The Best Way to Build a Website - WordPress, Shopify and Others [...]
3. Button
Add a button that links to any page when clicked. There are many customization options.
4. Checklist
Add a checklist
- Checklist Item 1
- Checklist Item 2
- Checklist Item 3
- Checklist Item 1
- Checklist Item 2
- Checklist Item 3
5. Code Block
Used for displaying code.
6. Content Boxes
7. Countdown
8. Counter Box
9. Counter Circle
10. Events
Note: In order for the Events builder element to work, you have to create an event in your events plugin in the Dashboard, which I don’t have time to do right now. You may have to install the events plugin. Click here for more information on the Avada Events Plugin, by Modern Tribe.
11. Flip Boxes
Hover over the box to make it flip
Your Text - Front Heading
Your Content Goes HereYour Text - Back Heading
More of Your Content Goes Here12. Font Awesome
This builder element allows you to add “fonts” and add animation and colour to them. There are hundreds of “fonts” to choose from. I’m not sure what the correct name for these “fonts” is, they are kind of like emoticons.
13. Fusion Slider
Avada provides 4 plugins for creating sliders: Fusion slider, Elastic Slider, Layer Slider and Revolution Slider. I have not used the Elastic Slider plugin, so I can’t comment on that option, however, I have used the Revolution Slider and found that it is fairly easy to use and provides a lot of customization options. The Fusion Slider is built and supported by Avada and provides basic functionality. Since I prefer to limit my plugins as much as possible and I aim for stability and to minimize hassles, I prefer to work with the Fusion slider. However, the Revolution Slider is a good option if you need to add more customization to your slider than the Fusion Slider plugin can provide.
14. Google Map
17. Layer Slider
I don’t have layer slider installed, no demo for this one, sorry. It’ll be similar to the Fusion Slider.
18. Menu Anchor
This is a used when creating a custom menu for a one page site. It is not a visual builder element like most of the others, but rather, it is a shortcode that you use when designing a website where all the content will be on a single page. When you make this kind of website, you’ll have to name the various sections (using anchor tags), so you can scroll to them from a menu at the top of the screen.
19. Modal
The modal builder element creates a popup window that shows additional content, such as images, video, or text. It can be triggered by clicking on an image, text, or a button.
To create a modal: First create a button, image or text that you want to trigger the modal to open, when clicked.
20. Person
This builder element creates a box containing an image, text and social media icons can be added
21. Post Slider
Note: the following Builder Elements have overlapping functions:
#2: Blog
#21: Post Slider
#24: Recent Posts
#25 Recent Works
22. Pricing Table
Standard
Standard
Standard
23. Progress Bar
24. Recent Posts:
Note: the following Builder Elements have overlapping functions:
#2: Blog
#21: Post Slider
#24: Recent Posts
#25 Recent Works
How to Set up Google Analytics Using a Child Theme
Ideally, your theme provides a place to paste the google analytics tracking [...]
The Best Way to Build a Website
The Best Way to Build a Website - WordPress, Shopify and Others [...]
Avada Cheat Sheet
AVADA CHEAT SHEET There are many customization settings in Avada and [...]
25. Recent Works:
The recent works builder element is a widget used to display your portfolio posts. If you’re wondering what the difference is between a regular post and a portfolio post, see my blog post: Definitions, Tips and Tricks for Building a WordPress Website. You will see from my discussion, that I don’t recommend creating portfolio posts and therefore you won’t need to use the “recent works” builder element, unless you have some understanding of the situation that I don’t. Basically, it seems that blog posts can do everything that portfolio posts can do, without the limitations of portfolio posts. The only advantage of creating portfolio posts and using the “recent works” builder element is that it offers another visual option for displaying your posts, in addition to the 3 Avada widgets for displaying regular blog posts: Blog, Post Slider and Recent Posts.
- Note 1: To use the Recent Works Builder Element, you will need to create one or more portfolio pages. This is a functionality provided by Avada. Instructions on how to create portfolio pages with the Avada theme can be found here.
- Note 2: the following Builder Elements have overlapping functions:
- #2: Blog
- #21: Post Slider
- #24: Recent Posts
- #25 Recent Works
26. Revolution Slider
The Revolution Slider is a very popular plugin for creating sliders that comes pre-packaged for free with the Avada theme. You will have to pay for the Revolution Slider plugin if you aren’t using the Avada theme. It performs the same functions as the Fusion Slider plugin, however, it allows you to add a lot of custom effects to your slider’s text. For example text can be placed anywhere in the slider window, it can be any font or size and you can add a lot of neat animations, among other things. Since showing a demo of the Revolution Slider builder element would require me installing the plugin and a bit of time to generate the slides, I’m not going to bother doing it, just see my example of a Fusion Slider builder element, in section #13 above.
27. Section Separator
The section separator provides a graphic as seen below, you can chose from a variety of customization options, including the emoticon that you want to appear.
28. Separator
The separator is similar to the section separator and provides a variety of options for creating lines. You can use this element to create blank space, by choosing no line in the options.
29. Sharing Box
30. Slider
A very simple way of adding a slider to show various images. You can also add video to the slides instead of images.
31. Social Links
You can add any of the major social links here, for example: Facebook, Twitter, Instagram, LinkedIn, Tumblr, Reddit, Yahoo, etc. I just added my LinkedIn, because that’s all I have at the moment.
32. SoundCloud
This widget allows you to add audio files that you have uploaded to soundcloud. You can adjust several options, such as: show comments, auto play, color, width and height. I don’t have anything uploaded to soundcloud, so I couldn’t add an example.
33. Table
This builder element adds a basic looking table, that is customizable. NOTE: This table is not responsive by default, it creates the table based on pixels, so it will create a horizontal scroll bar on screens that are not wide enough to accommodate the full width of the table. In many cases tables with more than 2 or 3 columns won’t fit on a mobile screen. In order to rectify this, you will have to set the columns to fill the width of the screen based on percent, not pixels. I haven’t learned how to do this yet. Note that this might shrink your text to a very small size on mobile, which might mean viewers have to zoom in to see the table. One alternative is to use pricing tables, instead of a regular table. If you use this option, it will break up the table into individual columns and stack them on top of each other, when viewed on mobile. If this will work for you, it’s a great option, however, in most cases, columns will need to be viewed side by side, that’s usually the whole purpose of having a table. The graphics for the table builder element are pretty basic. If neither the table builder element, or the pricing table builder element will work for you, you might be able to find a table plugin that does what you need.
Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
---|---|---|---|---|
Item #1 | Description | Discount: | $1.00 | $ 0.10 |
Item #2 | Description | Discount: | $2.00 | $ 0.20 |
Item #3 | Description | Discount: | $3.00 | $ 0.30 |
Item #4 | Description | Discount: | $4.00 | $ 0.40 |
Item #5 | Description | Discount: | $5.00 | $ 0.50 |
All Items | Description | Your Total: | $10.00 | Tax |
34. Tabs
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah BlahBlah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
35. Tagline Box
Tagline Title goes here
36. Testimonial
Testimonial content: Web Design Guelph is the greatest!
Testimonial content: more rave reviews here
37. Text Block
The text block is the simplest builder element and the one you will use most often. It just gives you access to the default WordPress editor, where you can add text and images and perhaps other media. You can format the text any way you wish: add h1 – h6 headers, change text size, text colour, highlight, add links, add anchors, etc. Make sure you use the TinyMCE plugin to increase you functionality within the WordPress editor.
Example
Example
Example
Example
38. Title
This builder element adds a title and horizontal lines, for a little flair.
Your Title Here
39. Toggles
Toggles are similar in some ways to tabs, they just have a different visual appearance. Toggles can be set to start open or closed by default, according to your preferences.
40. User Login
I don’t have a demo for this one, sorry. I’m not sure exactly what this element does, but it seems to be used to allow multiple website administrators to login to the WordPress dashboard. If you are hoping to password protect certain pages, or create members only pages, I don’t think this builder element is for you.
Password Protect Settings:
In order to password protect certain pages, you can use the built in WordPress settings. Just go to: WordPress >> Pages >> All Pages >> Select the page of interest to edit >> Now at the top right of the page, it should have an option to edit the visibility. Click edit and you can select between: public, password protected, or private.
Membership
In order to have certain pages, posts, or files accessible only to members, you’ll have to use a plugin.
41. Vimeo
I don’t have a demo for this one, but you can easily envision what this builder element does; it allows you to embed a Vimeo video into a container, anywhere on your webpage. Note in my background investigation into how to host video, it appears that it is wise for most web designers, especially beginners to use either Vimeo or YouTube to host your videos. You can self-host, but there are a number of drawbacks to this, including bandwidth usage and technical concerns.
42. Widget Area
This builder element allows you to place any widget into any container. If you are using one of the builder element widgets from Avada (like the Google Map element), you won’t need the widget builder element, you can just drag the Google Map element directly into the empty container. However, if you are using 3rd party widget, not supplied by Avada, you’ll have to do the following:
- Create an empty container
- Drag the widget builder element into the container
- Click the pencil icon to access the widget builder element settings
- The first option is a drop down menu called “Widget Area Name”. It will start with “blog side bar” and have a few more options. In order to display the widget you want, you will have to create and configure your own widget area. To do this, go to: Dashboard >> Appearance >> Widgets >> Click the button that says “Add A New Widgets Section”. After you create a new widget section, you can click and drag the widget/s of interest from the list of “Available Widgets”. If the widget you want is not in that section, you can search for a plugin to do what you want. Once you install the necessary plugin, it will appear in the list of available widgets.
- After you have created a new widget section and dragged the widget you want into it, go back to where you were in step 3 above. In the “Widget Area Name” drop down menu, you’ll see the name of the Widget area you just created – select the Widget area you want and click “SAVE”.
43. Woo Carousel
Please see examples of the Woo Carousel here
44. Woo Featured
Please see examples of the Woo Featured Slider here
45. Woo Shortcodes
Please see examples of Woo Shortcodes here
Wow!
Great post! Thank you.
Hello my friend! I want to say that this article is amazing, nice written and include almost all important infos. I would like to look more posts like this .
My brother suggested I might like this website. He was entirely right. This post actually made my day. You can not imagine simply how much time I had spent for this info! Thanks!
Thank You !!! For your time and explain so easy . . . You are The Best !!