Connect with us

Beaver Builder Tips

The Ultimate Guide to Beaver Builder Modules

Published

on

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!

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. Additionally, different plans offer different module selections. These units enable you to 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.

Furthermore, 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. In the following sections, we’ll explore each module and explain helpful ways to use them.

Basic Modules

Let’s start with the basics. The following tools come with all versions of Beaver Builder.

Audio

The Beaver Builder audio module.

The Audio module enables you to add 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. However, you can also use it for other audio mediums, such as radio clips, favorite songs, or even recordings of happy customers to personalize reviews.

Button

The Beaver Builder button module.

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

Buttons are pretty popular on the internet. Not only do they enable visitors to interact with your content, but they are endlessly customizable. 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 tools to take advantage of.

This module uses a render tag to create headings, making it easier to move around than the native WordPress block. You can also make the headings completely separate from the following text. As such, it works particularly well with Beaver Themer:

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 tool can be a game-changer. You can use it to add custom markups with ease. Furthermore, the HTML module can make using shortcodes dramatically more efficient.

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 illustrations, 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. Since this acts like alt text, it can increase a page’s accessibility. You might 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, you can add a lightbox link to an image, which can be useful if you’re displaying high-quality photos.

Moreover, this tool offers unique cropping options. You can choose to display photos in shapes such as hexagons. 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 that much 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 tool pulls from your site, 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. You won’t have to redo any work for navigation – 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 easier access to different typography. As such, establishing a client’s style can be 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 tool will enable you to 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 tools 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 tool lets you create rows with unique backgrounds, and leverage features such as overlays and text to enhance the results:

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 individual media, the Gallery module can display many types. This tool can put together collages with ease. As such, it can create the perfect layout for clients:

An example of a Beaver Builder gallery.

However, this module goes beyond appearance. You can also set up user interactions. For example, you might want to create a lightbox or link each photo to its source.

These traits make the Gallery module versatile. You could use it to display product photos or promote other websites your client collaborates with. 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 small images 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. Traits 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 effortlessly display several photos in a single space. It also gives you control over dynamic features such as transitions 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.

Furthermore, you also have control over how playback works. Choosing to make it manual could give customers time to read each review. As such, that option may be better for lengthier testimonials. On the other hand, automatic playback could 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:

A sample Call to Action module.

The tool 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 stylized as you like.

Since CTAs try to generate interaction, you may want to consider using this module to make them prominent. A hyperlinked piece of text might be too subtle. However, a dedicated space could be more effective. You might also want to use them 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 is that the Callout module lets you add photos. Therefore, if you’d like to highlight an employee profile, this tool may be a better fit. You can still adjust the text styling as necessary, too.

This 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 probably want 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. As such, you can make it as straightforward or as complex as necessary:

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 bots, you can also consider adding a reCaptcha button 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 easy, consider using the Login Form module:

A sample of the Login module.

This tool is fairly 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 tools you need to customize several links in the same space.

Once you have a menu set up, you’re free to place it wherever you need. For example, perhaps you put it near the bottom 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.

Furthermore, you can save menus as shortcodes. As such, the Menu module can speed along any future builds. You might also consider more specific uses for this tool, 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 index your site. 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 on.

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

Additionally, 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.

Moreover, this module integrates with an extensive list of over 20 mailing tools. 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. They can also 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 enables you to create a list with discrete, expandable sections. You can tailor it to the smallest detail: 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 has a ton of text. As such, many site owners design their Frequently Asked Questions (FAQs) pages with accordion formatting. However, 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 tool 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, which can be helpful if you’re trying to redirect interested users to WooCommerce product pages (just to give one example).

Tabs

The Beaver Builder tabs module.

The Tabs module offers another way to ease navigation. However, 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. However, you may find it most useful for organizing help documents. This is because it enables users to quickly 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. Fortunately, you can use one of our information modules to accomplish this with ease.

Countdown

The Beaver Builder countdown module.

Events vital to most businesses. 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, the format of the numbers, and how many degrees you’d like to count down to.

This can be helpful for a varied approach. For example, you might only use days and hours at first. As the time draws nearer, you might also include minutes and seconds:

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 customers. As such, they might feel more motivated to make a purchase or simply investigate what your client is offering.

Number Counter

The Beaver Builder number counter module.

Your client might have any number of 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. Furthermore, you can determine the top limit to track a goal’s progress.

The ability to add different colors and texts 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

For most websites, posts make up the bulk of their content. As such, it’s helpful to know all your options for showcasing this work. Here are a few modules that might help.

Posts

The Beaver Builder posts module.

The Posts module enables you to create flexibly-placed, non-animated posts.  The mechanics are simple, but the potential is huge. The tool provides you with a versatile way to filter and display posts:

A blog displaying posts via Beaver Builder posts module.

You can control the formatting, color schemes, and content for each section. Additionally, you can also choose from a wide variety of pagination options. For example, you might opt to include a Load more button to save space.

The possibilities for using the Posts module are nearly limitless. If you wanted to, you could tailor each instance of the module to personalize every individual page. 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. Users will also be able to navigate between pages for a more holistic view of a site’s content.

If you use this formatting, you can display multiple posts in a truncated way. An effective way to use this tool 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.

Alternatively, you could display posts based on a shared category. If your client feels that one category of posts isn’t getting the traffic they would like it to, 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:

An example of the Beaver Builder posts slider module.

The animation can add energy to any page, and autoplay motions can catch readers’ attention quickly. As such, you might want to use this tool to highlight posts that visitors might otherwise overlook. Additionally, it may be useful for advertising new product launches.

However, you could leverage it in a more concentrated way. If you work for a client who has several contributors with their own profile pages, you might add this module to each one. You can calibrate it 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. Fortunately, you can 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.





Source link

Continue Reading
Click to comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.