The Ultimate Guide to Beaver Builder Modules

The Ultimate Guide to Beaver Builder Modules

Our Beaver Builder plugin comes with a huge selection of modules to help you build and design your clients’ websites. While navigating all of the options can seem challenging, it doesn’t have to be. By keeping this comprehensive guide handy, you can unlock Beaver Builder’s full potential.

In this article, we’ll introduce you to our module system. Then we’ll go through each available module by category, explaining its purpose and suggesting some clever uses. Let’s dive right in!

We just launched 6 FREE Beaver Builder courses. Learn how to easily build WordPress websites with step-by-step video tutorials. Get started today.

An Introduction to Beaver Builder Modules

Beaver Builder is our powerful tool that helps you build beautiful pages on your clients’ WordPress sites. It does this by using content-based building blocks called modules. Each module is designed for a specific purpose, making it simple to tailor a page to your exact needs.

However, these modules are far from rigid. You can stick with their intended purposes, find new ways to leverage them, or even create a custom module so you can fully customize your experience with Beaver Builder.

You may not need every module for each page you build. Nevertheless, being aware of your options can be helpful because you’ll be able to include a wider variety of features if needed.

Familiarizing yourself with your options can improve your personal portfolio. You might find that having more tools at your disposal expands your potential client list.

The Ultimate Guide to Beaver Builder Modules

To help you navigate and understand your options more easily while using Beaver Builder, we’ve put together a comprehensive module list. All premium versions of Beaver Builder come with this set of modules. In the following sections, we’ll explore each module and explain helpful ways to use them.

Basic Modules

Let’s start with the basics.

Audio

The Beaver Builder audio module.

The Audio module adds a player for audio files to pages. This can include single clips or full playlists. Additionally, you can source these files from either your Media Library or an external source, which can be helpful if you’re trying to save space.

You also have full control over playback. You can choose from options such as autoplay, looping, or video information display:

The audio module, showing a playlist.

If you have a client who hosts a podcast, you’re probably already familiar with this feature, but remember that it works with more than standard music clips. You can also use it for other audio mediums, such as radio clips or even recordings of happy customers to personalize reviews.

Button

The Beaver Builder button module.

The Button module lets you create clickable elements and modify each button’s design to reflect its purpose. Display features include color gradients, changeable text, and multiple font options.

Buttons make it easy for visitors to interact with your content. With the right design, a button can be a flexible yet powerful tool. It can catch a user’s attention and provide them with an actionable suggestion:

An example of a Beaver Builder button.

The Button module has unlimited potential. You can try using it to send readers to another part of the website, or use it to highlight a partnered site or high-value link.

Heading

The Beaver Builder heading module.

Headings are the unsung heroes of the internet. They organize content, communicate purpose, and provide readers with guidance. Therefore, the Heading module is one of the most useful modules to take advantage of.

This module makes the heading independent of the text, making it easier to move around than the native WordPress block. As such, it works particularly well with Beaver Themer, because you can create a field connection to display the correct heading in whatever location it occurs.

An example of a heading.

You can try using this module to focus visitors’ attention on an important paragraph. Alternatively, you could also use its flexible formatting to place headings on the side of the content. This opens up new possibilities, such as highlighting relevant quotes with creative design.

HTML

The Beaver Builder HTML module.

Beaver Builder makes page creation simple. Nevertheless, you may still want to add your own code from time to time. The HTML module can render all of this directly.

If you’re not a fan of WordPress markup tags, this module can be a game-changer. You can use it to add custom markup code with ease. The HTML module also works well to render shortcodes.

Icon

The Beaver Builder icon module.

Icons are a subtle but important feature. These small pictures can catch a user’s eye, and the option to add text can make them more informative.

The Icon module helps you add these graphics one at a time. You can choose from a wide selection of standard icons, add your own custom sets, and fully customize the colors and placement.

You can also use icons to quickly communicate a link’s purpose. For example, the image below uses a turkey leg to signal a clear topic:

A sample Icon module, with text.

This module comes with a Screen reader text option. This setting acts like alt text so it improves accessibility. Consider using an icon anywhere you think a visitor needs a little bit of direction.

Photo

The Beaver Builder photo module.

If you’ve been using WordPress for a while, photos likely aren’t new to you. The Photo module works similarly to the native function: it enables you to add single photos from your Media Library or custom URLs:

Uploading a photo from Media Library via Beaver Builder photo module.

However, our module has a few advantages. For one, there’s a setting to display the image in a lightbox when clicked, which can be useful if you’re displaying high-quality photos.

This module also offers unique cropping options. You can display photos in shapes such as landscape, panorama, portrait, square and circle. If you use them strategically, you can establish a distinctive style for each site you build.

Sidebar

The Beaver Builder sidebar module.

Navigation is essential to any site. You can use the  Sidebar module to make browsing your content easier for your visitors. This module lets you insert any of your WordPress sidebars into your layout:

The sidebar of the Beaver Builder website.

This module pulls WordPress widget information, so it has the potential to save you a lot of time. For example, you might consider creating a few sidebar templates. Then you can add, drag, and drop them as needed.

The sidebar module can also make transitioning from another page builder easier. If it uses widgets, you can simply add this module and move on.

Text Editor

The Beaver Builder text editor module.

As you probably know, WordPress has its own text editor. Nevertheless, our Text Editor module has added a few improvements. You can use this upgraded version of the Classic Editor to create dynamic text areas.

For example, you have wider access to typography settings, such as font family, spacing, line height, and so on. This makes establishing a unique site style a breeze. Advanced features such as animations can also make your text pop.

Designing a page that fits a specific brand can be hard. However, subtle traits can be powerful. Therefore, using the Text Editor module can enable you to easily embrace a client’s particular style.

Video

The Beaver Builder video module.

Using several types of media can add variety to a page. As such, you might want to consider the Video module. This module lets you insert a video from either your Media Library or a third-party platform.

In the example below, we inserted a video straight from YouTube:

An example of the Video module, displaying an introduction to the Beaver Builder.

This lets us save storage space while reaping the benefits of an informative clip. By the same token, this module can seamlessly introduce your client’s YouTube page to visitors.

Additionally, the Video module can boost your page rankings. Search engines make use of rendered HTML when analyzing sites. By opting for the Enable structured data function, you can manually optimize these values.

Media Modules

The following modules all focus on helping you communicate in dynamic ways. Consider using one of these modules the next time you need a more lively page.

Content Slider

The Beaver Builder content slider module.

Sliders offer a simple way to display a variety of media. You can use our Content Slider module to do just that. This module lets you create rows with slider backgrounds and leverage features such as text and image overlays:

A slider displaying a photo of New York

This module can serve multiple purposes. In the above example, it’s being used to communicate a company’s different locations. However, you could also use it for advertising services for clients with media-heavy focuses.

Furthermore, the Content Slider module can help humanize a page. You might consider using it to showcase team members, which can make visitors feel connected to the company.

Gallery

The Beaver Builder gallery module.

While the Content Slider showcases one media item at a time, the Gallery module can display many media items at the same time. This module can put together collages with ease:

An example of a Beaver Builder gallery.

However, this module goes beyond appearance. You can also set up how individual items are displayed when the user clicks a gallery image: a lightbox with navigation or the photo’s source page.

These options make the Gallery module versatile. You could use it to display product photos or promote related websites. Mastery of this module can be especially important if you work with image-heavy organizations, such as photography websites.

Icon Group

The Beaver Builder icon group module.As you might expect, the Icon Group module works the same as the Icon module. You still have control over size, placement, and color.  However, this option enables you to insert multiple icons at once:

Three icons grouped together: a teacup, an apple, and a martini glass.

You can use it to provide more in-depth indicators. The above image, for instance, could signify a restaurant that serves coffee, food, and alcohol. By contrast, a single icon may not be able to communicate that focus.

Alternatively, the Icon Group module can provide more formatting options. For example, you can use it to space multiple images uniformly and achieve a streamlined, professional look.

Another possible use could be for transactions. Many merchants accept multiple payment options, so you could insert this module to display them.

Map

The Beaver Builder map module.

Navigation isn’t only important for website usability. Physical locations may also be in your client’s portfolio. The Map module can help provide visitors with accurate guidance.

You can insert this module and center the map on any marker you choose. Options such as the size and title are also adjustable:

A map on a business contact page.

Perhaps the most obvious use of this module is to direct visitors to a brick-and-mortar store. However, it can also serve other purposes, such as orienting readers on a travel site.

Slideshow

The Beaver Builder slideshow module.The Slideshow module can display several photos sequentially in a single space. It gives you control over dynamic features such as the type of transition and playback:

The Golden Gate Bridge on a Slideshow module.

One way to use the Slideshow module is as a simple walkthrough. You could upload each step as a slide. After that, you could turn off autoplay. This can give visitors a straightforward yet interactive way to learn something new at their own pace.

Testimonials

The Beaver Builder testimonials module.

The Testimonials module also uses a sliding feature. However, it serves a distinct purpose: advertising the words of happy customers. You can choose the quotes and positioning, and even add an image to drive the point home:

An example of testimonials on a demo site.

You also have control over how playback works. Manual control gives customers time to read each review so it could be a better choice for lengthier testimonials. On the other hand, automatic playback could work better for displaying a lot of positive feedback.

Actions

Sometimes, you may want to encourage users to take a specific action. Look no further than these modules to get the job done.

Call to Action

The Beaver Builder call to action module.Calls to Action (CTAs) encourage visitors to engage with a brand. This could include buying a product or simply reaching out. You can use the Call to Action module to make any of these encouragements clear.

The module enables you to insert a heading to grab users’ attention. Then you can add a text portion to provide a little more information. Finally, you can create a button to attract clicks. All of these aspects can be styled as you like.

Since CTAs try to generate interaction, you can use this module to generate a dedicated space to make the call to action, so it’s more prominent than just a hyperlinked piece of text. You can also use a call to action to enhance landing pages.

Callout

The Beaver Builder callout module.

 

CTAs tend to be brief because they often focus on a single task. If you need a more detailed space, you can use the Callout module instead:

An example use of the Callout module on a website services page.

A major difference with the Callout module, compared to the Call to Action module, is that you can add a photo. For example, if you’d like to highlight an employee profile or a service the company offers, this module may be a better fit. You can still adjust the text styling as necessary, too.

The Callout module is an excellent way to feature a product of the week. The layout can make the chosen item simple yet prominent. You might also use it to digitize any physical advertising, which could make your client’s marketing more cohesive.

Contact Form

The Beaver Builder contact form module.

Most of your clients want you to be easy to reach. If it’s effortless to get in touch, customers on the fence may be swayed. The Contact Form module is an effective way to provide an accessible line of communication.

You have many choices regarding fields: name, subject, message, phone number, and email can sit alongside the message itself:

A sample contact form asking for names, emails, and messages.

A standard form can help encourage inquiries. Alternatively, a more intricate one could cut down on junk submissions. If your client struggles with a lot of bot submissions, you can add a reCaptcha link to discourage spam.

Login Form

Site membership might be a priority for some clients. It can enable visitors to save favorite products or store payment information. If you want to make logging in to part of your site easy, consider using the Login Form module:

A sample of the Login module.

This module is straightforward. Visitors enter their usernames and passwords and choose if they want to remember that information. You can also link to a password reset page.

The Login Module is generally useful for any site that stores user information. However, it could be especially beneficial to membership sites. It’s a good idea to add this module to pages that are user-restricted as an easy way to gain access.

Menu

The Beaver Builder menu module.

A site’s menu can be essential to proper navigation. Our Menu module gives you the ability to place any WordPress menu in the content area of the page, style the menu text and background, and choose how it will be responsive on smaller devices.

Once you have a menu set up, you’re free to place it wherever you need within the content area. For example, perhaps you want it near the bottom of the page so visitors can easily continue exploring after reading a page. Alternatively, placing it near the top could inform users of a site’s content immediately.

Like all modules, you can save a Menu module and reuse it in another layout or use a saved module as a shortcode. You might also consider specific uses for this module, such as a menu dedicated to a client’s social media accounts.

Search

A search bar with the text "What are you looking for?" placed above it.

The Search module provides your visitors with a quick way to search your site from within the content area on a page. It’s similar to a standard search bar but you have more layout options. For example, you can save space by only displaying a button that expands to a full search bar when clicked. 

Design options are also numerous. For a dynamic touch, try enabling the Hover background color option. You could also expand the padding of the module to help make it more prominent.

The search results’ appearance is also within your control. You can redirect to a specific search page or showcase the results below in a drop-down menu. A large website might benefit from the former, while a client who prioritizes a streamlined site might favor the latter.

Subscribe Form

The Beaver Builder subscribe form module.Email is a popular marketing channel. From special offers to informative newsletters, many companies choose to put together a mailing list. By adding the Subscribe Form module, you can help that list grow:

A simple subscribe module with a field for the name and email address.

You can keep it simple like in the above example. Alternatively, you can vet submissions a little further. You might add a Terms & Conditions checkbox, or a reCaptcha field to limit spam.

This module integrates with an extensive list of over 20 mailing platforms. Once connected, you can collect and use email addresses through your client’s service of choice.

Layout

A well-designed layout can display a client’s content to its full potential. The following modules can help you create unique designs easily.

Accordion

The Beaver Builder accordion module.

Pages that contain large walls of text can be intimidating and can make users feel like they need to hunt for critical information. Fortunately, you can use the Accordion module to make your pages easier to use:

A sample accordion module with three options.

The Accordion module creates a list with discrete, expandable sections. Item sizes, labels, and content are all up to you. You can even add icons to illustrate each section’s purpose.

Accordion spaces can be valuable anywhere on your site that is text-heavy. Many site owners design their Frequently Asked Questions (FAQs) pages with accordion formatting. You could also use it as a simple way to self-pace a written walkthrough.

Pricing Table

The Beaver Builder pricing table module.

Comparison is important to some shoppers. They like to see features, options, and prices displayed side-by-side. If your client wants to provide this layout, look no further than the Pricing Table module.

This module lets you display pricing in a professional, streamlined manner. You can include a title, item features, and of course prices. You might also choose to adjust the color scheme to indicate different plan tiers:

The Beaver Builder pricing table.

If your client only offers one pricing plan, you can still use this module to ensure that the formatting is appealing. You might also choose to include links, for example, if you’re trying to redirect interested users to WooCommerce product pages.

Tabs

The Beaver Builder tabs module.

The Tabs module offers another way to assist content navigation. Whereas the Accordion module defaults to hiding all the text, the Tab module starts users off on a certain selection. Therefore, it can be ideal if you want to organize information while still making key details prominent.

You can choose from a vertical or horizontal layout, and adjust the border color of the tabs. If you’re trying to make the information pop, you can select a color that stands out against the design of the rest of the page:

An example of the Beaver Builder tabs module on a website.

You could use the Tabs module to store different products or services in a single location. It’s also very useful for organizing help documentation because users can navigate between tabs without leaving their current pages.

Information Modules

Many organizations have facts and figures that they’re proud of. However, finding an effective way to display them can be tricky. In this case, you can use one of our information modules to accomplish this with ease..

Countdown

The Beaver Builder countdown module.

Whether you need to count down to a product launch or a meet-up, you can leverage the Countdown module to build buzz around your clients’ plans.

As you might expect, this element is fully customizable. You can select the timezone and style the layout and numbers.

A sample countdown module displaying 9 days, 17 hours, 12 minutes, and 30 seconds.

Another way to use this module is to count down to the end of a sale. This can create a sense of urgency in your customer to make a purchase or simply investigate what your client is offering.

Number Counter

The Beaver Builder number counter module.

Your client might have metrics they’re proud of, such as their customer satisfaction rate.  If you want to help them advertise their success, try using the Number Counter module:

A green progress bar with "97%" written on top. The heading above reads "Customer Satisfaction Rate".

Setting up a counter is simple. You can decide between a bar, a circle, or just the number itself. You can also make the number display as a percentage or a value and set the top limit to track a goal’s progress.

The ability to add different colors and text means you can use this module in many different ways. For example, you could track the progress of a fundraiser. You might also demonstrate possible savings, the number of customers, or the percentage of a project completed.

Post Modules

If you have a website in which posts make up the bulk of their content, it’s helpful to know all your options for showcasing this work. Here are a few modules that help.

Posts

The Beaver Builder posts module.

The Posts module creates post archives in a variety of layouts.  The mechanics are simple, but the potential is huge, providing you with a versatile way to filter and display sets of posts:

A blog displaying posts via Beaver Builder posts module.

You can control the formatting, color schemes, and content. You can also choose from a wide variety of pagination options. There’s a Read more button that links to the full post or with a List layout you can opt to display the entire post.

Alternatively, you could opt for a more uniform look across a site to standardize the experience.

Posts Carousel

The Beaver Builder posts carousel module.

This module works similarly to the Posts module in terms of options. However, using the Posts Carousel will enable you to display a single row of posts with an option to animate the layout. Users can navigate quickly among posts for a better overall view of a site’s content.

If you use this module, you can display multiple posts in a truncated way. An effective way to use this module is by placing it at the bottom of articles. You can insert the module to promote related posts that the reader might enjoy:

An example of the posts carousel module.

With all of the Posts modules, you can limit the display of posts to shared categories or tags. If your client feels that one category of posts isn’t getting the traffic they would like, the Posts Carousel module can be a perfect solution. You can place it on the front page to attract more attention.

Posts Slider

The Beaver Builder posts slider module.

Finally, if you’re looking for a more dynamic way to showcase posts, you might want to consider the Posts Slider module. This offers you the same post formatting options of the previous two modules, but also includes a way to animate transitions, with a choice of fade-in or slider:

An example of the Beaver Builder posts slider module.

Like the Posts Carousel module, the animation adds energy to any page, and autoplay motions can catch readers’ attention quickly. A good use of this module is to highlight posts that visitors might otherwise overlook. Additionally, it is useful for advertising new product launches.

If you work for a client who has several regular contributors, you could add this module to each contributor’s profile page, filtering the content so that it only displays posts by that author as a sort of portfolio.

Conclusion

Beaver Builder can help you optimize sites for any client. However, the range of modules available can be a bit intimidating at first. Keep this guide handy to make sure you’re ready to create anything you can imagine.

Which module do you use most often? Let us know in the comments section below!

About Will Morris

Will Morris is a staff writer at WordCandy. When he's not writing about WordPress, he likes to gig his stand-up comedy routine on the local circuit.

6 Comments

  1. JD on June 4, 2021 at 5:17 am

    RE: Audio file playlists module

    Storing audio files in the media library slows down the website. It’s best practice to store audio files externally rather than in the WordPress media library. I don’t see an option to use the playlist using external URLs. Will BB address this in the near future?



  2. JD on June 4, 2021 at 6:01 am

    One more side note “comment” on this article. Thank you! The info is super helpful to share with content providers rather than duplicating efforts of creating documentation for them. However, please, please change the button on this page with text “click here”. That’s one help that hinders good practice.



    • Jennifer Franklin on June 5, 2021 at 8:05 am

      Hi JD, Thank you so much for your feedback. We appreciate it. 🙂



  3. Rebecca Kemp on June 9, 2021 at 5:50 am

    Really good thank you!



    • Jennifer Franklin on June 9, 2021 at 11:15 am

      Hi Rebecca, Thank you for the feedback!



Our Newsletter

Our newsletter is personally written and sent out about once a month. It's not the least bit annoying or spammy.
We promise.

Try Beaver Builder Today

It would be totally gnaw-some if you could share this post with your friends.

Related articles

Websites Built With Beaver Builder

When it comes to designing a website, exploring websites built with Beaver Builder can provide valuable inspiration for your own…

Read More...

Assistant’s New Code App: Easily Manage Code Snippets in WordPress

In the world of WordPress development, having the right tools can make all the difference. That’s why we’re excited to…

Read More...
Beaver Builder North Commerce module

North Commerce Module for Beaver Builder

With all the excitement surrounding Beaver Builder 2.8 and our new Box Module, you might have missed the announcement of…

Read More...

Join the community

We're here for you

There's a thriving community of builders and we'd love for you to join us. Come by and show off a project, network, or ask a question.

Since 2014

Build Your Website in Minutes, Not Months

Join Over 1 Million+ Websites Powered By Beaver Builder.