Avada Builder Element Examples

>>, WordPress>>Avada Builder Element Examples

Avada Builder Element Examples

Below are examples of all of the Builder Elements provided by the Avada theme.  Most of them are very customizable, the colour, size, shape, etc. can easily be modified in the settings under the pencil icon.  Avada builder element examples are also provided here.  You’ll have to scroll down to find the element of interest and click where it says: “CLICK HERE TO SEE THE SHORTCODE IN ACTION!”

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.

Your Content Goes Here.
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

3. Button

Add a button that links to any page when clicked.  There are many customization options.

Button Text
Button Text

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

Subheading Text
Heading Text
0
0
0
0
Days
0
0
Hrs
0
0
Min
0
0
Sec

8. Counter Box

0
Users
0$
Profit
0
Cups of Coffee

9. Counter Circle

Your Text
Your Text

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 Here

Your Text - Back Heading

More of Your Content Goes Here

12. 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.

Loading...

14. Google Map

15. Image Carousel

16. Image Frame

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.

Click to Open Modal

20. Person

This builder element creates a box containing an image, text and social media icons can be added

Tim G
Tim GOwner: Web Design Guelph
Jack of all trades
Mr. Darcy
Mr. DarcyChief Stick Chaser
Adventurer

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

$1555monthly
[pricing_row]Feature 1[/fusion_pricing_row][pricing_footer]Signup[/fusion_pricing_footer]

Standard

$1555monthly
[pricing_row]Feature 1[/fusion_pricing_row][pricing_footer]Signup[/fusion_pricing_footer]

Standard

$1555monthly
[pricing_row]Feature 1[/fusion_pricing_row][pricing_footer]Signup[/fusion_pricing_footer]

23. Progress Bar

Progress on Item 1 86%
Progress on Item 2 76%
Progress on Item 2 95%

24. Recent Posts: 

Note: the following Builder Elements have overlapping functions:

#2: Blog
#21: Post Slider
#24: Recent Posts
#25 Recent Works

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.

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.

  • sunset
  • sunrise
  • frog stretching

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

Tab Content Goes here, you use the default WordPress editor to add content, so you can add text and pictures to a tab.  See Tab 3 for an example of a picture.
You content goes here
You can add a picture to the tab like this:

Tab content goes here, add whatever text or images you want.
Text goes here.  Write as much text as you want:

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

Here’s the text for vertical tab 3

35. Tagline Box

Tagline Title goes here

Insert the Tagline Description text here
Note that you can have a modal window open on click, with the Tagline Box builder element. See my example of a modal window (section #19). Tagline boxes are often used when selling something. The button might say something like “buy now”. Of course you don’t have to reserve Tagline boxes for selling something, you can use them for whatever you want. Note: if you click the button, it’ll take you to my homepage. I’m not sure how to make a button open a modal window yet.
button text

36. Testimonial

Testimonial content: Web Design Guelph is the greatest!
Insert the name of the person, Name of Company
Testimonial content: more rave reviews here
Person #2, Company name, if applicable

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.

Write whatever you want here for toggle 1 content.  You can set a toggle to start open or closed by default
Content for Toggle Item #2 goes here.
Add as many toggles as you want, this is number 3.

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:

  1. Create an empty container
  2. Drag the widget builder element into the container
  3. Click the pencil icon to access the widget builder element settings
  4. 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.
  5. 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

46. YouTube

Please see section #41 on Vimeo above.

By |2017-01-24T04:14:22+00:00July 25th, 2016|web design, WordPress|4 Comments

About the Author:

4 Comments

  1. Anonymous April 2, 2018 at 10:06 pm - Reply

    Wow!

    Great post! Thank you.

  2. This Web page April 19, 2019 at 1:15 am - Reply

    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 .

  3. you could try here May 2, 2019 at 4:08 pm - Reply

    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!

  4. Anonymous June 18, 2019 at 8:58 am - Reply

    Thank You !!! For your time and explain so easy . . . You are The Best !!

Leave A Comment