Beaver Builder has added an assortment of link tree style landing page templates to our rapidly growing arsenal of free and premium templates available on Assistant.pro!  Happily use them for your link in bio pages on Instagram, Tiktok, and beyond.  They look great out of the box, but can also easily be customized. 

Pictured above, four free templates for Beaver Builder available on Assistant.Pro. Link in Bio: Cyber, Link in Bio: Ode to Gardner, Link in Bio: Latte, and Link in Bio: Floral.

What Does Link in Bio Mean?

The origins of the term link in bio are tied to the fact that Instagram will not allow links within single photo posts.  The widespread practice for promoting products, content and affiliations on Instagram became using a hashtag that links back to the content creators bio page, #linkinbio.

What is a Link Tree?

Although you can link to anything from your Instagram bio page, it became popular to use a single column of vertical buttons, often referred to as a link tree.

Why Link Trees Make Effective Landing Pages

One of the core principles of marketing is using a clear Call to Action (CTA).  Because the Link Tree format is simply a stack of buttons, there’s little question about what you’re asking users to do.  CTA content will vary depending on your niche.

Social Media Influencers: Will typically link to their affiliates.  Amazon affiliate pages or brands that sponsor them.

Bloggers, Content Creators and Affiliate Marketers: Often link to their latest blog posts.

Businesses, Consultants and Service Providers: Link to their own products and service pages on their sites.

The Advantages of Using Beaver Builder for WordPress to Create Your Link In Bio Pages

There are popular platforms designed specifically for creating link tree style link in bio landing pages.  But there are a few good reasons why you’re better off using WordPress with Beaver Builder’s page builder to create your link in bio page.

• This is a cost effective way to create custom pages.  When you pay for a link tree only platform, you won’t have access to the abundance of other tools available in WordPress with Beaver Builder.
• You have complete control over branding.  With a link tree only platform, you will have less control over your branding.  If you are using a free plan, you will most likely see the service provider’s logo on your landing pages.
• If you decide the link tree style landing page isn’t the best solution for your link in bio page you won’t be limited to that style as you would with platforms dedicated to link tree type pages.

How to Build a Link Tree for Your Link In Bio With Beaver Builder’s Free Templates

Prepare Your Tech Stack

1. Open your WordPress site.
2. If you don’t already have an Assistant.pro account, get one.  It’s free!
3. Install the Assistant WordPress plugin on your site. You should also have Beaver Builder’s Page Builder installed on your site.

Add a Link in Bio Template Library to Your Assistant.pro Account

Now that you have your tech stack in place including the Assistant WordPress plugin, you will see a cute little chubby pencil in the upper right corner of your site.  That’s the Assistant Pro icon.  Click it to open the Assistant WordPress Sidebar.  

Navigate to the Library tab. This will prompt you to sign in to your Assistant Pro account.

Navigate to the Community tab.  Type Link in Bio into the search field, and choose a template. Click the “Get Library” button.  That same button will transform to say “View in Libraries”.  Click it again and it will take you to the Assistant Pro Libraries App.

Add the Template to Your WordPress Site

Click on the Beaver Builder Template. Under “Actions” select “Import” to add the Beaver Template which can later be accessed from your site’s Beaver Builder Saved Templates, or, select “Replace Current Page.”

Conclusion

Link Tree style templates are a great way to call social followers to action on Instagram and other social media platforms.  Beaver Builder’s  Link in Bio Templates are free and fabulous.  Enjoy!

Want to learn more about the powers of Assistant, a free plugin and cloud storage platform for WordPress?  Check out our free course and user docs!

Related Questions

What is Assistant Pro?

Assistant Pro is a cloud based storage app designed to meet the needs of WordPress creators.  The basic plan is free!  The Assistant plugin is an always-free plugin for WordPress that connects to the Assistant Pro Cloud, but also allows WordPress users to do an abundance of other cool things like navigate and build their sites with way less clicks.

How do I add links to Instagram?

You can add links to your instagram bio page (Link in Bio) or to Instagram Stories.  Learn More at the Instagram Help Center.

How Can I Add My Instagram Feed to WordPress?

Adding an instagram feed to your site is both a great way to keep fresh content streaming to your site and also drive traffic back to  your social accounts!  Check out our post on how to add an instagram feed to your WordPress site with PowerPack for Beaver Builder. 

The post Social Media Marketing with Beaver Builder’s Link in Bio Templates appeared first on Beaver Builder.

We have some exciting updates to share with you. Let’s dive in.

Get to Know the Beaver Builder Team

Have you ever wondered how Beaver Builder started or who created it?

We interviewed the founders and some team members: (Click links to watch)

• Justin Busa (Co-Founder)
• Billy Young (Co-Founder)
• Robby McCullough (Co-Founder)
• Brent Jett (Lead Designer)
• Anthony Tran (Marketing Director)

Our team consists of many people from all around the world.

We plan to conduct more interviews in the future so you can put a name to a face and get a behind-the-scenes view of the company.

Join Us at WordCampUS

We’re happy to share that we will be attending WordCampUS in a few days!

You can meet up with Justin, Robby, and Brent in person.

Please say hi, and maybe enjoy a beverage together. (Hint they mention their favorite drinks in the video interviews above)

Beaver Builder 2.8 is Coming

We just released the first public build of Beaver Builder 2.8, which includes some MAJOR new features:

• The Box Module
• Global Styles
• Global Colors

If you’d like to help us test the new features, you can find development builds on your My Account page.

Simply look for a button that says “Download and test an upcoming release.”

Or, you can try a hosted demo using this link: Beaver Builder 2.8 Beta

Brent has also put together a video talking about the new box module and what it is capable of. We invite you to have a look at the demo video here.

There are a lot of new layout options that will be possible with Beaver Builder, and don’t forget to share your designs to the community over on Assistant!

Free Wireframe Kit Course 

We are thrilled to introduce a brand-new FREE course that will teach you how to create landing page wireframes using Beaver Kit.

This course is perfect for anyone looking to elevate their web design skills and learn how to make professional wireframes quickly and easily.

If you haven’t done so already be sure to register to access the courses here.

New Free Landing Page Templates

Everybody loves freebies! So we have some more for you.

We just released some new landing page templates that are now available in the Assistant Pro Community.

You’ll find Beaver Builder templates for a Corporate website and a Coffee Shop, and we think you’ll love them!

We will be adding more templates to the community in the coming months.

Wrapping Up

Thank you all for your continued support of Beaver Builder. We hope you enjoyed this update and encourage you to share your thoughts with us.

Happy building, and enjoy the last few days of summer!

The post Team Member Interviews, 2.8 Preview, and Freebies! appeared first on Beaver Builder.

Since 2002, Cami has run a one-person web agency called WebCami where she’s built over 600 websites. Cami knows Beaver Builder like the back of her hand, and she’s been kind enough to share some of her tips and best practices.

Meet Cami MacNamara

We actually had the opportunity to pick Cami’s brain twice recently! Along with this interview, when we were together in Pheonix for a WordCamp, we put together a quick video interview with several Beaver Builder users (including Cami), as well as a few folks from the Beaver Builder team.

What are your go-to plugins for web projects? Obviously Beaver Builder, but do you have a standard plugin “stack” that you use each time?

I have a prototype installation that serves as the foundation for all my new website designs. In terms of plugins, I have a preferred stack that I consistently rely on. Apart from my trusted Beaver Builder family of plugins, one tool I heavily depend on is ManageWP Worker from GoDaddy. This plugin is not only essential for my care plan services but also facilitates seamless cloning from production to client hosting for all my projects. In addition, I utilize other notable plugins such as WP-Rocket, Smush Pro, Pods, and WP101, just to mention a few.

In my experience, the ideal number of plugins for a website varies depending on the specific requirements of each client. I prioritize needs over quantity and typically have an active plugin count ranging from 15 to 20.

Can you tell us about this site and the project? I.e., How long did the build take? Was it a refresh of an existing site or a brand-new build?

The project I shared with you spanned approximately seven months to complete. Most builds take about 90-120 days. This extended timeline was primarily due to the passing of my father during the redesign process. Fortunately, the client involved in this project happens to be a close friend, and she displayed remarkable understanding throughout the entire ordeal. Given that this was a redesign, her existing website remained online throughout the duration of the project. I always strive to collaborate with kind-hearted business owners, and this client certainly fits the bill. 

Therese, the client, had a specific requirement for her assistant to easily manage listing information. To address this, I employed the Pods plugin to create a custom post type dedicated to properties. In addition, I utilized Pods to establish custom fields, allowing her assistant to effortlessly input property data. Leveraging the capabilities of Beaver Themer, I further crafted a visually appealing template for presenting these properties. As a result, Therese’s assistant quickly adapted to the new system.

Did you consider any other platforms? Why did you choose WordPress + Beaver Builder?

Back in 2002, when I first ventured into website design, I relied on manual coding using Notepad, Frontpage and Dreamweaver. I was first introduced to the Blogger CMS (Content Management System). Fast forward to 2007, a client requested that I link their WordPress blog, and I recall feeling concerned that it might be the end of my career. Anyone could build a website! This is similar to the current concerns some have about AI’s potential impact on web design. 

For many years, I utilized Genesis in combination with WordPress. A dear friend who is also a fellow designer recommended I explore Beaver Builder in 2016. Based on her suggestion, I went all in, and I haven’t looked back since. Presently, the only system I utilize outside of WordPress with Beaver Builder is Carrd.co, which I exclusively use for quickly creating landing pages. Having a streamlined approach allows me to focus on delivering efficient and tailored website solutions to my clients. 

What are some unique challenges that come with building real estate websites?

First and foremost, it is crucial for a real estate broker’s website to offer ease of updating for their staff. As a solopreneur, I do not possess the capability to promptly update all their listings in real-time. Additionally, real estate companies often operate during weekends, which is not in line with my work hours. 

Another point worth noting is that I no longer consider an IDX feed as vital for real estate agents to have on their individual websites. Convincing them of this can sometimes prove challenging. Instead, I advocate leveraging their website as a platform to share their own unique stories and foster trust among potential buyers and sellers. Rather than attempting to compete directly with platforms like Redfin solely for listings, it is more effective to utilize the website as a means to establish a genuine connection and build credibility with clients. 

By focusing on personal narratives and cultivating trust, real estate agents can set themselves apart in a more meaningful way.

How did WordPress and Beaver Builder help you solve these challenges?

Beaver Builder addresses two key challenges that greatly benefit my workflow. First of all, it helps me save time. As a one-person agency managing over 200 websites in my care plan and serving numerous clients, efficiency is critical. By leveraging Beaver Builder, I can swiftly create visually stunning websites without the need to outsource any design work. The ability to save and reuse templates enables me to build a personal library of designs, streamlining future projects. This is particularly satisfying as I had long desired the capability to create my own themes, which Beaver Builder now allows me to accomplish.

Secondly, Beaver Builder empowers my clients to perform minor updates to their websites independently. Beaver Builder has a clean and intuitive workspace for my clients, who genuinely appreciate its user-friendliness. To enhance their understanding, I have incorporated the WP101 Plugin for general Beaver Builder training videos, while also creating my own tutorial library using Loom specifically tailored to each client. This approach has yielded remarkable results, as clients tend to grasp the intricacies of Beaver Builder far more readily than they do with WordPress as a whole. Simplifying the process for them not only ensures their satisfaction but also facilitates my management of a larger client base.

Do you have any other Beaver Builder hacks or best practices that you can share?

Maximize efficiency and avoid reinventing the wheel with each new website by utilizing the power of templates. Assistant Pro proves to be an invaluable tool in this regard. When you have meticulously designed a page layout, a row, or a module that works perfectly on one website, the ability to seamlessly copy it to the next build ensures consistent quality and saves time.

Thoroughly check your settings in the responsive editor. Demonstrating your commitment to delivering a dependable user experience on all screens enhances client satisfaction. Paying close attention to details such as column breaks and font sizes guarantees that your clients’ websites will look great across various devices.

Lastly, make the most of the visibility setting to hide elements that you anticipate reusing in the future. For instance, if a client requests the removal of a team member, it is wise to hide the corresponding module rather than deleting it entirely. Chances are high that you will soon need to add a replacement team member, and this approach saves you from recreating the module from scratch.

Thanks for doing this, Cami! How can people find more of your work or hire you for their projects?

You can find me as WebCami on most social media platforms. WebCami.com serves as the main business website. I also maintain a blog where I share valuable tips and insights with fellow freelancers at WebCamiCafe.com. It’s a space dedicated to fostering growth and knowledge within the freelance community and it also has a Facebook group. I’d love to connect with you online!

I’ve recently launched my very own podcast titled, what else, “The WebCami Podcast” — a platform where I read blog posts about WordPress, web design, and running a freelance web design business. You can find it on Spotify and Apple Podcasts.

The post Building a Succesful Realtor Website – An Interview and Site Showcase with WebCami appeared first on Beaver Builder.

This article was revised and republished in August 2023. Are you interested in learning more about using WordPress and Beaver Builder? You should check out our free course library.

If you’re planning to make big changes to your website structure or to move it all together from one host to another, taking the time to redirect your WordPress pages can help you avoid broken links. 

In this article, we’ll dig into what redirects are and why you might need or want to use them. We’ll also discuss three ways of implementing them on your website.

Understanding Redirects in WordPress

When we talk about redirects, we’re referring to the process of mapping one URL to a different one. In other words, when a user types in a URL or clicks on a link to Page A, you can redirect them to Page B instead.

There are five main types of redirects you can use:

• 301. This type of redirect is permanent. and indicates that the original page no longer exists at its original address. This is the best redirect to use for making sure your search rankings stay respectable. 
• 302. This redirect serves as an alternative page when the requested file exists at the specified address, but can’t be found for some reason. This is a temporary redirect that caused problems for some browsers, so most site managers no longer use it. 
• 303. Created as a replacement for the less-than-helpful 302 redirects, this type helps prevent screen refreshing or bookmarking of sensitive data, such as credit card information. 
• 307. This redirect is temporary and nearly identical to a 303 redirect. They differ only in that a 307 utilizes the same technique to send and get information. A 303 uses two different techniques. 
• 308. A cousin to the 303 and 307 redirects, this type of redirect achieves the same functionality. However, it’s permanent rather than temporary. It’s most useful for programmers rather than everyday WordPress users. 

Each type has its own specific purpose and benefits. For this post, we’ll be focusing on 301 redirects, as they’re most often the type you’ll encounter when working with WordPress.

Why You Might Need to Use a Redirect in WordPress

Some redirects can be used to directly benefit your site and business, while others serve as fixes for various technical issues.

Some of the main reasons you might need a redirect on your website include: 

• 404 errors. These occur when a user requests a page that can’t be found. This may happen when you move a page to a new address, or simply because a user has typed in a URL incorrectly. You can also use custom 404 pages to keep lost users engaged and entertained. 
• Permalink changes. Changing your WordPress permalinks to something more readable might benefit your site. If you change your existing links’ default structure, however, you’ll want to set up redirects so your site visitors don’t receive a 404 error. 
• URL optimization. If your site has been established for some time, you might look at some of your old yet still popular pages and posts and decide if it would be better to optimize the URLs for mobile use or readability. During this process, make sure any bookmarked favorites your visitors have redirected to the new URL. This will also keep Google happy.
• Directory changes.  You might need to move a directory of your website, either for general reorganization or even for security reasons. A 301 redirect will help to make sure site visitors still get to the right place. 
• Search Engine Optimization (SEO). Whether you’re rebranding your website or want more control over the URLs your visitors see, experimenting with 301 redirects is one way to boost your SEO. For example, you might want all your site’s pages to display the same URL. Another SEO booster is to redirect all HTTP input to HTTPS.

Regardless of your reasons for redirecting one or more WordPress posts or pages, there are some things to be aware of before you get started. In particular, it’s wise to plan how to structure your redirects and what Google Page Rank might do with them.

For example, it’s important that the page you redirect a broken link to closely matches the topic of the original page. Otherwise, search engines will treat the redirect like a 404 error, which could hurt your SEO instead of helping it.

How to Redirect a WordPress Page (3 Ways)

There are several ways to redirect your WordPress pages. We’ll take a look at two ways that involve editing your .htaccess or functions.php files. Then we’ll walk through setting up a 301 redirect using a WordPress plugin.

1. Create Manual Redirects in WordPress Through Your .htaccess File

If you’re comfortable editing your WordPress files directly, your .htaccess file is probably the quickest way to set up a redirect. This file is where WordPress manages all your site’s permalinks. Editing your .htaccess file is an effective option whether you’re wanting to redirect just one URL or your entire website.  

First, find the URL you want to redirect and decide on the new endpoint URL. Make a note of the mapping for later use.

Second, make sure to back up your WordPress site. If you encounter any issues, you can restore the previous version of your site.

Next, go to your site’s file directory. There are a few ways to access it: through your web host control panel, the native WordPress file editor, or using File Transfer Protocol (FTP) and an FTP client such as FileZilla:

Here you’ll see a list of all your current redirects. Below that list, there are fields where you can enter a current URL and the target URL to create a new redirect. Click the blue Add Redirect button when you’re finished.

Don’t forget to test your redirects to make sure they’re functioning correctly. You can also visit Tools > Redirection and use the tabs at the top of the screen to monitor your redirect log and 404 errors.

Conclusion

Whether you’re planning to move your website, want to change your permalink structure, or are looking to use redirects to fix broken links and improve your SEO, there are several ways to implement them in WordPress. Which is best for you will depend on your situation and skill level.

The three methods you might consider include: 

1. Via your .htaccess file: This is the best option for whole-site redirects.
2. Editing your functions.php file: A better option for more in-depth and specific redirects. 
3. Installing a plugin: Ideal for users who aren’t comfortable editing core files, or who want ongoing redirect and 404 error monitoring. 

Do you have questions about using redirects on your WordPress website? Share them with us in the comments section below!

After you’ve completed the setup wizard, you can create redirects by navigating to Tools > Redirection:

Here you’ll see a list of all your current redirects. Below that list, there are fields where you can enter a current URL and the target URL to create a new redirect. Click the blue Add Redirect button when you’re finished.

Don’t forget to test your redirects to make sure they’re functioning correctly. You can also visit Tools > Redirection and use the tabs at the top of the screen to monitor your redirect log and 404 errors.

Conclusion

Whether you’re planning to move your website, want to change your permalink structure, or are looking to use redirects to fix broken links and improve your SEO, there are several ways to implement them in WordPress. Which is best for you will depend on your situation and skill level.

The three methods you might consider include: 

1. Via your .htaccess file: This is the best option for whole-site redirects.
2. Editing your functions.php file: A better option for more in-depth and specific redirects. 
3. Installing a plugin: Ideal for users who aren’t comfortable editing core files, or who want ongoing redirect and 404 error monitoring. 

Do you have questions about using redirects on your WordPress website? Share them with us in the comments section below!

After you install and activate the plugin, you’ll be greeted with an introductory screen with information and an option to start the setup wizard, which provides some simple options for your redirects. The plugin uses Redirection uses the WordPress REST API to communicate with WordPress, the setup wizard also checks that functionality and reports any problems. Here’s a screenshot of the information screen:

After you’ve completed the setup wizard, you can create redirects by navigating to Tools > Redirection:

Here you’ll see a list of all your current redirects. Below that list, there are fields where you can enter a current URL and the target URL to create a new redirect. Click the blue Add Redirect button when you’re finished.

Don’t forget to test your redirects to make sure they’re functioning correctly. You can also visit Tools > Redirection and use the tabs at the top of the screen to monitor your redirect log and 404 errors.

Conclusion

Whether you’re planning to move your website, want to change your permalink structure, or are looking to use redirects to fix broken links and improve your SEO, there are several ways to implement them in WordPress. Which is best for you will depend on your situation and skill level.

The three methods you might consider include: 

1. Via your .htaccess file: This is the best option for whole-site redirects.
2. Editing your functions.php file: A better option for more in-depth and specific redirects. 
3. Installing a plugin: Ideal for users who aren’t comfortable editing core files, or who want ongoing redirect and 404 error monitoring. 

Do you have questions about using redirects on your WordPress website? Share them with us in the comments section below!

Sometimes you may have to reveal hidden files in order to view and edit your .htaccess file. 

Open the .htaccess file in a text editor and enter the appropriate 301 redirect code. To complete a single URL redirect, add the following lines: 

Redirect 301 /old-page.html http://www.mydomain.com/new-page.html

In the first line, modify old-page.html to match the old URL, and in the new URL modify the URL to match the target URL,

If your site has an SSL certificate, it’s good practice to redirect users who have “HTTP” in the URL to a more secure “HTTPS” URL. For this, add the following lines to your .htaccess file without modification:

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Finally, you can redirect your entire website to a different URL by adding the following lines to your .htaccess file and changing the URL in the third line to match your target location:

#Options +FollowSymLinks
RewriteEngine on
RewriteRule ^(>*)$ http://www.mynewdomain.com/$1 [R=301,L]

Save the changes to your .htacess file. If you edited the file on your local system, don’t forget to upload it to your site’s server. To test your redirect, type in the URL for your old page to see if you land at the new address.

2. Edit Your WordPress functions.php File to Create a Redirect

Another way to create a 301 redirect for your WordPress website is by editing the functions.php file in a child theme. Any WordPress theme folder has a functions.php file, which contains important code for your site. The child theme has its own functions.php file, which is the place to put customizations. It’s important to edit the functions.php file only in a child theme because that file in the parent theme can get overwritten any time there’s an update. Luckily it’s easy to create a child theme if you don’t have one yet, either with a plugin or manually.

Locate the functions.php file in your child theme via one of the same methods we described for accessing .htaccess. Here’s a screenshot of a typical WordPress installation with a child theme:

To redirect your entire site to a single new location, open functions.php in a text editor and add the native WordPress wp_redirect function by appending the following lines to the end of the file: 

wp_redirect( "http://www.my-blog.com/a-new-destination", 301 );
exit;

Change the URL to the redirect target. 

Embedded in additional PHP code, the wp_redirect function can be used to redirect a single URL. If you use a strategic slug structure on your website, you can also use wp_redirect to redirect certain slugs to a new URL. This can be handy if you want to redirect all your posts after changing your default permalink structure, for example.

3. Redirect Your WordPress Pages With a Plugin

If you’re not keen on slicing and dicing your website files and adding new code strings, don’t fret. There are other ways to employ redirects on your website. In fact, there are many WordPress redirect plugins available that might pose less of a risk to your site. 

A great plugin option is 301 Redirects – Easy Redirect Manager:

It offers an import/export feature for bulk management of redirects. If you’re working on a one-time restructuring or moving to a new host, it can be helpful. 

Redirection plugin is another popular and highly rated tool for this purpose:

It acts as a bit of a housekeeper for your website. It can keep track of 404 errors, manage 301 redirects, and make sure your links stay tidy so your page rank remains respectable.

Let’s walk you through how to use it. 

Start by navigating to Plugins > Add New in your WordPress dashboard and searching for it:

After you install and activate the plugin, you’ll be greeted with an introductory screen with information and an option to start the setup wizard, which provides some simple options for your redirects. The plugin uses Redirection uses the WordPress REST API to communicate with WordPress, the setup wizard also checks that functionality and reports any problems. Here’s a screenshot of the information screen:

After you’ve completed the setup wizard, you can create redirects by navigating to Tools > Redirection:

Here you’ll see a list of all your current redirects. Below that list, there are fields where you can enter a current URL and the target URL to create a new redirect. Click the blue Add Redirect button when you’re finished.

Don’t forget to test your redirects to make sure they’re functioning correctly. You can also visit Tools > Redirection and use the tabs at the top of the screen to monitor your redirect log and 404 errors.

Conclusion

Whether you’re planning to move your website, want to change your permalink structure, or are looking to use redirects to fix broken links and improve your SEO, there are several ways to implement them in WordPress. Which is best for you will depend on your situation and skill level.

The three methods you might consider include: 

1. Via your .htaccess file: This is the best option for whole-site redirects.
2. Editing your functions.php file: A better option for more in-depth and specific redirects. 
3. Installing a plugin: Ideal for users who aren’t comfortable editing core files, or who want ongoing redirect and 404 error monitoring. 

Do you have questions about using redirects on your WordPress website? Share them with us in the comments section below!

The post How to Redirect a WordPress Page (Manually and Using a Plugin) appeared first on Beaver Builder.

If you’re creating a website for this type of business, you need a robust built-in booking system. Fortunately, this is simple to do if you’re using the right tools. In just a few minutes, you can set up a form that enables current and potential customers to reserve the times they want.

In this post, we’ll discuss the advantages of a built-in booking system. Then we’ll show you how to build a website that offers this feature, using Beaver Builder and the BookingPress plugin. Let’s get started!

The Advantages of a Built-in Booking System

Service-based businesses both large and small deal with appointment booking on a daily basis. As your client base grows, this daily task can become unmanageable. The problem is compounded if multiple employees or team members need to book clients at different times.

Too much disorganization can result in miscommunication and missed appointments. Alternately, the booking process might be too complex, scaring potential clients away and impacting the bottom line.

Whether you have an appointment-based business, or you’re building a website for a client that does, a built-in booking system can help eliminate these problems:

With this user-friendly feature, the business can book more appointments and increase profits. Plus, this is an excellent way to boost customer loyalty, especially if you make it easy to purchase and reserve multiple sessions at a time.

As a designer, developer, or agency building this type of site, you’ll be setting your client up for success. Meeting their unique needs is the perfect way to go above and beyond.

Sites That Can Benefit From Built-in Booking Systems

Still not sure if the site you’re building would benefit from a built-in booking system? Here are some types of businesses that might need one:

• Beauty, hair, and nail salons
• Wellness spas
• Private fitness centers, personal trainers
• Yoga studios
• Private clinics (dental, veterinary, etc.)

Of course, these are just a few examples. Just about any business that provides a session-based service can benefit from an online booking system.

How to Build a Beaver Builder Website with a Built-in Booking System (In 3 Steps)

For this tutorial, we’ll be using WordPress, Beaver Builder, and the BookingPress plugin. If you already have your Beaver Builder website up and running, you can skip ahead to Step 2. Otherwise, let’s get your site set up first.

1. Set Up Your Beaver Builder Website

WordPress is a powerful yet easy-to-use Content Management System (CMS), which makes it ideal for both beginners and developers. Plus, it’s free! However, you’ll still need a web host to provide you with the necessary server resources. 

That means choosing a hosting provider should be your first order of business. If you’re not sure how to select the right one, you may want to check our recommended resources. 

After that, you’ll need to install WordPress on your site. Most web hosts provide you with an easy way to do this. Then you’ll require a theme to determine the look and layout of your site. There are plenty of excellent free options in the WordPress Theme Directory.

If you’re interested in a premium theme with advanced functionality and customization options, you might want to check out our Beaver Builder Theme which is included in our Pro, Agency and Ultimate plans:

Our theme is built to run alongside the Beaver Builder plugin, and provides a minimalist base for just about any type of website. It’s an especially powerful tool in the hands of designers and developers looking to create something unique.

2. Create Your Booking Page (And Other Key Pages)

After you’ve installed the Beaver Builder Theme (or another theme of your choice), you’ll need to create your booking website’s primary pages. To simplify the site-building process and gain more control over your design, we recommend installing Beaver Builder:

Our plugin enables you to use drag-and-drop functionality to build fast, mobile-friendly websites. It offers far more flexibility and features than the default WordPress Block Editor, all presented in a streamlined and user-friendly way.

Once you’ve installed and activated the plugin, go to Pages > Add New and hit Launch Beaver Builder. You’ll see your editor screen where you can drag and drop modules, rows, templates, and more:

You’ll want to start by creating the website’s most important page – the booking page. You can do this however you’d like, but to keep things simple, begin by adding a Heading module with some descriptive text (such as “Book an Appointment”):

This is all you’ll need for now, since you’ll be adding the actual booking functionality in the next step. However, feel free to include additional modules with whatever information and imagery you like (or that your client has requested).

At this point, you may also want to create a few more essential pages. At a minimum, you’ll probably need an about page, a services page, a contact page, and a home page. Then you’ll need to build a navigation menu, so current and potential customers can easily make their way around the site.

As you design these pages, don’t forget to incorporate elements of the company’s visual brand, such as its logo or unique color palette. This can help boost credibility with clients and make the booking site appear more professional.

3. Add Your Booking System

Now it’s time to add a booking system to your Beaver Builder site. We’re going to do this with BookingPress. 

This plugin helps streamline the booking process. It comes with many useful features, such as custom email notifications, calendar views, and more. It even integrates with 17+ payment gateways, including PayPal, Stripe, and Square.

We’ll be using the premium version for this tutorial. However, if you’re budget-conscious there’s a free version as well.

After you sign up for a BookingPress plan, install and activate the plugin. Next, navigate to the new BookingPress tab in the left-hand menu. This leads you to the “getting started” wizard:

On this page, you’ll need to enter some basic information, such as the company name and address. You’ll also select some important details, including the correct time format and timezone.

After that, you can add the company logo, website URL, and any other additional details you’d like to include. If you’re using the premium BookingPress plugin, you can indicate whether multiple team members will be using the booking system.

When you’re finished, hit Next to go to the Booking Options page and customize the team’s availability:

If you want to set a dynamic price based on dates and times, you can pick up the Happy Hours Pricing extension (which is one of 35+ BookingPress addons). 

With the premium version of the plugin you’ll be able to add multiple staff members to the following page:

Employees will be able to access a separate staff member dashboard to manage their appointments. This feature can drastically simplify workflows and reduce unnecessary back-and-forth for scheduling.

Next, you’ll describe the services you or your client offer, and set the price and duration for the sessions:

If needed, click on the plus symbol to add another service:

You can also use the Cart Addon if you want to let customers select multiple services.

When you’ve finished adding all the relevant services, hit the Next button to continue with Styling. Now, you’ll be able to customize your booking form:

You can select your font and the color of different design elements on your booking page. If you’re setting the system up for multiple team members, you can also choose a preferred booking form sequence.

When you’re done, select Finish! This will give you a shortcode for your booking form:

Copy the shortcode and navigate to the Booking page you made earlier. Pasting the code into Beaver Builder’s HTML module will add your fully-customized booking form to that page:

Customers will be able to easily choose a service, and then select a time and date from the calendar:

After that, they’ll need to enter some Basic Details. Then, they’ll see a summary of the information they entered before clicking Book Appointment:

Finally, the customer will receive a confirmation number and brief thank you message.

If you’d like, you now have another chance to use Beaver Builder modules to add more content and imagery to this page, or to customize your layout.

Conclusion

Managing appointments manually can be an arduous process. Just about any service-based business can benefit from adding a streamlined appointment booking system to its website. This is an excellent way to add appointment booking to simplify workflows and maximize efficiency.

To recap, here’s how you can create a website with a built-in appointment booking system:

1. Choose a web host, install WordPress, and select a theme.
2. Create your booking page using the Beaver Builder plugin.
3. Customize and add a booking system using the BookingPress plugin.

Related Questions

Can You Create a Booking Website for Free?

With a free platform like WordPress, you can get a website up and running quickly. You can also use the free versions of tools like Beaver Builder and BookingPress to add booking features to that site. However, you will need to pay for web hosting and a domain, both of which can be very affordable.

Is It Hard to Make a Booking Website?

No! With beginner-friendly tools like WordPress, Beaver Builder, and BookingPress, it’s very easy to create an attractive and functional booking website in just a few steps.

The post How to Add Appointment Booking to Your Beaver Builder Site appeared first on Beaver Builder.

A responsive website is one that adapts to the size of the device it is being viewed on so that your website will look great and be easy to use on any device, no matter how small or large.

Beaver Builder can help you make WordPress responsive thanks to its responsive editing tools. The page builder gives you full control over how your website looks regardless of what device visitors use.

In this article, we’re going to discuss the importance of responsive websites. Then, we’ll show you how to use Beaver Builder to make WordPress responsive in four steps. Let’s get to it!

Why You Need a Responsive Website

The concept of a responsive website is simple. It’s a site that should look and function flawlessly (or as close as possible) on a broad range of devices, including mobile.

The smaller the screen, the more difficult it becomes to create a design that’s easy to navigate and that looks good:

As we mentioned earlier, most users browse websites primarily through mobile devices. That means if a website doesn’t function properly on a small screen, or it provides a poor user experience, it’s not going to be popular. In other words, you’ll get less traffic, a higher bounce rate, and fewer conversions.

Modern responsive pages rely largely on what we call ‘breakpoints‘. You can configure elements on a page to modify their style and functionality depending on the resolution they’re viewed at and set multiple breakpoints. This enables you to create designs that work for more types of devices.

Doing this manually requires you to be adept when it comes to web design and development. The good news is that Beaver Builder incorporates a responsive editor mode that makes this process so much easier.

How to Use Beaver Builder to Make WordPress Responsive (4 Steps)

One of the best parts about using Beaver Builder to build WordPress sites is that the included templates are fairly responsive without the need to do a lot of extra work. However, we still recommend that you test every design and module to see how it looks across devices before publishing your .

In the following sections, we’ll show you how to test your Beaver Builder designs for responsiveness. First, let’s talk about responsive layouts.

Step 1: Use Beaver Builder Templates

The easiest way to make WordPress responsive with Beaver Builder is to use one of our pre-set layouts. Beaver Builder ships with a wide variety of page templates you can use on your website. This includes options for Landing Pages, Content Pages, and Micro Pages:

These layouts are fully customizable and you have options for almost every type of page. You can use a template that resembles the type of design you want to use. Then, you’re able to customize the layout by tweaking the modules, re-arranging them, or adding new elements to the page.

The primary advantage of using Beaver Builder templates is that they’re fully responsive. This means they’re configured to look great across all types of devices and screen resolutions.

In any case, you should never publish a page before testing its responsiveness yourself. Beaver Builder enables you to do this using its responsive editing tool.

Step 2: Use Responsive Editing Mode

When you use Beaver Builder, you get to see exactly how a page will look on the front end while editing it. However, by default, the Beaver Builder editor only shows you what the pages will look like on a full screen at a sizable resolution:

If you want to see what a layout will look like on different-sized screens, you’ll need to use Beaver Builder’s responsive editing mode. You can access this mode from the Tools menu in the top-left corner of the screen or by pressing the R key.

Once you open responsive editing mode, you’ll be able to see four unique breakpoints for the layout you’re designing. Each breakpoint comes with a preset resolution. For example, the Small breakpoint triggers for screens with a resolution below 360 x 1131 by default:

You can change the breakpoints for the different layouts you want to design. The Beaver Builder editor works the same regardless of which resolution you’re working with. The only difference is that the layout itself will change since you’re working with less space.

Beaver Builder includes four breakpoints, so you have a greater degree of control over how your pages look for devices of every size.:

• Extra Large: This breakpoint is for devices with a screen width of 1200px or more.
• Large: This breakpoint is for devices with a screen width of 993px to 1200px.
• Medium: This breakpoint is for devices with a screen width of 769px to 992px.
• Small: This breakpoint is for devices with a screen width of 768px or less.

Each breakpoint can look very different depending on the design choices you make. To see how that works, let’s take a look at how you can make individual elements responsive using Beaver Builder.

Step 3: Make Individual Elements Responsive

As we’ve discussed, the main way in which Beaver Builder enables you to make WordPress responsive is by using a set of breakpoints. Each breakpoint represents how a page will look depending on the resolution you use to view it.

Aside from breakpoints, Beaver Builder also enables you to modify the order or ‘stacking’ of elements and columns across different resolutions. In an earlier example, we showed you an About Us page that includes an employee headshot midway down the screen. If we’re customizing this page’s layout for smaller resolutions, we can move that image up, so that the column stacking reverses order on mobile devices:

The stacking order for one breakpoint doesn’t affect the others. This means you can have the same page look entirely different, both in terms of design and functionality for visitors with different resolutions.

In practice, that’s not the best idea. Your website should look cohesive across all devices. However, you can re-arrange the elements if you think it will improve the mobile experience. For example, you might choose to display calls to action earlier on smaller resolutions so users don’t have to scroll down the page to take action.

If you look at the settings screen for individual columns or modules, you can also configure their visibility. The Visibility settings enable you to omit elements from specific breakpoints, which can be useful when working with smaller resolutions:

On top of that, you can configure elements to display for everyone or for logged-in or out users. However, these visibility features are geared towards membership websites, so you can likely ignore them when it comes to making your designs more responsive.

Step 4: Set Responsive Default Text Styles

One thing you may notice while using responsive editing is that text sizes and styles don’t change across breakpoints. This can be a valid design choice as large text is easier to read on smaller devices. However, if you want to customize how the text looks across different resolutions, you can do so within the Beaver Builder rows, columns or modules. Alternatively, if you have the Beaver Builder Theme installed, you can set up text styles within the customizer.

For the latter, go to Appearance > Customize in the WordPress dashboard, then head into the Presets tab. From there, you get to configure the settings for both headings and general text.

To start with, go to General > Headings and select the All Headings option. The menu below enables you to configure the font family, weight, and format you want to use for headings H1 through H6:

If you look at the bottom-left side of the screen, you’ll see you can switch the configuration from desktop to tablets and mobile devices. This means you can set different heading text styles for all three breakpoints.

To change the style for the general text, return to the General menu and go to the Text screen. Here you can configure the font family, weight, size, and line height for general text:

Just like with headings, you can configure the text styles for large screens, tablets, and mobile devices. The settings you apply here will appear inside the Beaver Builder editor when you’re using responsive mode. Make sure to test any changes you make to the text styles to see how they affect readability and continue tweaking them until you’re happy with the results.

Conclusion

There are a lot of ways to make modern websites responsive. If you use WordPress and Beaver Builder, the process is much simpler. Most Beaver Builder designs are responsive out-of-the-box. Moreover, you get access to tools that give you full control over how your website looks across different resolutions. That means you leave nothing up to chance when it comes to the mobile user experience.

If you’re new to Beaver Builder, you might not know how to use it to design responsive WordPress websites:

1. Use Beaver Builder layouts.
2. Use responsive editing mode.
3. Make individual elements responsive.
4. Set responsive default text styles.

Related Questions

Is WordPress Responsive by Default?

Whether your WordPress website is responsive or not will largely depend on what theme you choose to use. Without a theme, WordPress is basically a blank slate. That means you need to make sure that you choose a theme that’s both responsive and highly customizable.

Why Is My WordPress Site Not Responsive?

If your WordPress website doesn’t look good on mobile devices, you might not be using a responsive theme. Using a theme with a responsive design should provide a much better experience for users, and it’ll require less customization on your end. You can also use page builders such as Beaver Builder to make WordPress responsive.

Is Beaver Builder Mobile Friendly?

Beaver Builder offers a variety of tools and features that make it a mobile-friendly WordPress page builder. You can use responsive editing to change how your pages look across different resolutions. The page builder also comes with fully responsive page templates you can use to kickstart designs.

The post How to Use Beaver Builder to Make WordPress Responsive (4 Steps) appeared first on Beaver Builder.

Q: What did the beaver say to his friends at the summer picnic?
A: “Let’s stick together and have a dam good time!”

The team has been working hard to bring several exciting new features to Beaver Builder, and we have a sneak peek to share with you today. There is news about our latest Beaver Builder update (2.7) and some additional courses and content available for Beaver Builder…

Fun Fact about Beaver Kits

Did you know that baby beavers are called “kits?” Beaver Kit is also the name of a new premium template pack we created and released over on Assistant Pro. Since launching the Assistant Pro sharing features and marketplace, the community has been thriving and there are now hundreds of templates and designs available – many of them for free!

We have a Beaver Kit promo video over on YouTube if you’d like to see all it can do.

Getting started with Assistant is easy. Sign up for an account at Assistant.pro and install the Assistant plugin on one or multiple WordPress sites. Now, you’re ready to effortlessly import and use any of the templates and designs or upload your own to share with others!

Do More with Custom Modules

One super-powerful feature of Beaver Builder is the ability to create your own modules with custom HTML, CSS, JS, and PHP. We maintain extensive text documentation on how to create custom modules, and now we’ve summarized and broken down that process into an easy-to-digest custom module course.

The course is available for a one-time $49 fee. You can find it, along with our 7 other free courses, in the Beaver Builder Course Library.

Beaver Builder 2.7 – “Cascade”

The latest version of Beaver Builder just dropped this month. Beaver Builder 2.7 “Cascade” is live and features a new, more-accurate responsive editing interface, per-node CSS and JS, ACF Blocks support, and a lot more.

When we release major updates, we start by making the new version available to download from your account page and manually update your sites. After a few weeks, we push out automatic updates so everyone can update from the WordPress admin area. We just enabled auto updates last week so, if you haven’t logged into your site in a while, you can update today and check out the new goodies!

To learn more about what changed in 2.7, see our update blog post or this quick video over on YouTube.

What’s coming to Beaver Builder next…

Now that 2.7 is all wrapped up, we’ve been working hard to figure out an elegant way to bring some powerful new features to Beaver Builder for our next update. Browser adoption of CSS features like grid and flexbox is ubiquitous, and we plan to introduce support for both very soon.

Introducing the “Box” Module

The solution we’ve come up with is called the “Box” module. It’s a module that, similar to a row or a column, will act as a container. Boxes can be nested, stacked, and arranged horizontally, vertically, or in a grid. Unlike percentage or fixed-width columns, boxes can be more fluid and flexible. Imagine a header with a logo that is 200 pixels where the rest of the space is dynamic based on the screen width.

This is one of those concepts that is much easier to visualize than to explain in words, so have a look at this Box Module teaser video…

Along with pixel-perfect headers, the Box module is going to open up lots of new possibilities for modern page designs. It also outputs less markup than traditional row and column layouts, so designs utilizing the Box module will benefit from fewer elements on the page.

Because the Box module is native, supported in the free version of Beaver Builder, and a tool that has a LOT of variations and combinations, we’re extra excited about the potential for everyone to share and iterate on each other’s creations using Assistant Pro!

Global Styles & Colors

The other big push we’re making is to implement global styling and colors. These features will enable you to set styling options in Beaver Builder for things like typography, links, buttons, and headings, and the settings will apply across your site. You’ll be able to override any of them on a case-by-case basis in Beaver Builder, but imagine setting a button style once in the global style panel, then every button you put on a page inheriting that style by default.

Global colors will allow you to set up a color palette and color names for a site and then easily access those colors in Beaver Builder. No more having to copy and paste hex codes. We’re also exploring the idea of supporting WP global colors with this feature so you’ll have easy access to them if they’re supported and set in your theme.

We don’t have an ETA for these features yet, but we’re excited to get an alpha version out as soon as possible so we can get feedback and work toward getting them launched.

Beavers in the Wild

The world is getting back to normal these days and it feels great. Last week, I took a trip out to Austin, Texas for CloudFest – a web hosting and domain-focused event. A major highlight from the trip was meeting up with one of the more well-known names in the BB community, Zack Pyle!

If you’re not familiar with Zack, he is one of the regulars over at the Beaver Builders Facebook Group and on our BB Slack.

I also had the opportunity to jump on two fun podcasts recently…

On the WP Coffee Talk podcast with Michelle Frichette, I told the story about how I planned and failed to make my co-working space membership a better deal by drinking “free” beer. I also shared one of my favorite coffee cups and the hidden “Easter egg” sticker I have on it.

Over at the WP Minute Podcast, Matt Mederios and I had a longer-form discussion about the future of page builders! Matt has been doing podcasts for a long time, and he really knows the right questions to ask to get folks to open up and share.

Thanks a ton at both the WP Minute and WP Coffee Talk for hosting me. If you listen and enjoy either episode, I am sure Michelle and Matt would love it if you could give their podcasts a nice rating or a share.

WordCamp US

At the end of August, several of the Beaver Builder team will attend WordCamp US in Maryland. I’m particularly excited about this year because the camp falls on my birthday! I’m hoping to host a little celebration and would love for you to join. Shoot us a comment or a tweet if you plan to be there. We’re bringing some special swag to give away.

Tickets are currently sold out, but there is still an opportunity to volunteer and/or speak. Also, if you ask around, tickets can usually be found throughout the WordPress community. Hope to catch you there!

See you soon

It’s been an action-packed Spring and we’re looking forward to a similarly busy and productive Summer. As always, from everyone on our team, thanks for the support and encouragement. Beaver Builder recently celebrated its 9th anniversary, and we wouldn’t still be here if it wasn’t for you.

The post Summer Update – Introducing the “Box” Module 📦 appeared first on Beaver Builder.

Contact forms are a great way to provide support to your customers and prospects. They’re easy to create and affordable, and they can help you improve your customer service.

However, manually replying to every form submission can be a time-consuming task. That’s where automation comes in.

Automating your contact form responses can save you a lot of time and effort. It can also help you improve your customer service by ensuring that all inquiries are responded to promptly and accurately.

In this blog post, we’ll introduce an AI hack for WordPress to help automate your contact form responses as well as how to get started.

What’s the Problem with Manually Managing Contact Forms?

So you may be thinking, “What’s the big deal with manually managing contact form submissions? It is simply replying to questions over email.”

But it’s not as simple as it looks.

Let’s dive into the problems it can cause and why it’s essential to find a smarter solution.

Tedious and Time-Consuming

Manually replying to each and every form submission can quickly turn into a never-ending task. 

It requires you or your team to sift through countless emails, run the information, and draft individual responses.

I get it. Your time is precious, and spending it on repetitive work can steal the time that you can invest in strategic and business-growth activities.

Delayed Response Time

Imagine your customer sending an important inquiry through a contact form, eagerly waiting for a response, only to hear crickets for days.

Not the best experience, right?

Manual management often leads to delays in responding to form submissions, leaving your users in the dark and potentially damaging their trust in your business.

In today’s fast-paced world, customers expect prompt and efficient communication, and failing to meet those expectations can cost you valuable opportunities.

Generic and Impersonal Messages

Have you ever received an automated response that felt like it was written by a robot? It’s not the most pleasant experience.

When manually managing form submissions, it’s easy to fall into the trap of sending generic, one-size-fits-all acknowledgment messages.

But let’s face it, people want to feel seen and appreciated.

A generic response can make your users feel like just another faceless number in the crowd, diminishing their connection with your brand.

What’s the Most Effective Solution?

Now that we’ve uncovered the problems associated with manual form submission management, it’s time to find the most effective solution.

The answer lies in the power of AI and Automation!

With the help of AI and Automation, you can set up a process that will save you from manual work and provide a better experience for your customers.

This process involves two steps:

Part 1: Automate Personalized Submission Acknowledgment Emails

You can use automation/integration tools to connect your form application with your email-sending applications.

This will help you automatically send an email when someone fills out your contact form:

The screenshot above shows a workflow created with SureTriggers, an automation tool.

As per the workflow, you can instantly send emails when someone fills out a contact form made with Beaver Builder.

With this workflow, you can send emails with the same content, but you have the option to add data from the form entries and replace information for every email like name.

And to take it a step further and make your email content dynamic and personalized, you can leverage the power of AI.

OpenAI, in particular, offers language generation capabilities that allow you to customize each acknowledgment message to the individual, making them feel valued and appreciated:

You can incorporate their name, refer to their specific inquiry, and provide them insights about the next steps.

The outcome? A truly personalized experience that leaves a lasting impression on your users.

Part 2: Instantly Notify Your Team Members on New Form Submissions

Now that your customers are satisfied that their query has been heard, they should also expect a response as soon as possible.

So again, we have automation at the rescue!

Automation doesn’t stop at sending acknowledgment emails.

It takes collaboration to the next level by allowing you to notify your team members whenever a new form entry is received.

If you use Slack to communicate with your team, you can instantly send a channel message so the appropriate people from your team can respond to the customer’s query:

By implementing these notification systems, your team can promptly follow up with leads, answer inquiries, or allocate tasks.

All without the need to manually check for new form submissions.

How Do Automation Tools Work?

Automation tools work on the concept of triggers and actions.

Triggers are events that initiate a workflow like a form being filled out or someone making a purchase from your e-commerce store.

While Actions are tasks that are performed when any trigger event happens. For example – creating a card in Trello, or sending a WhatsApp message.

One complete set of trigger and actions is called a Workflow. An example is sending a WhatsApp message when someone makes a purchase from your WooCommerce Store:

The terminology for Workflow can vary from platform to platform but the concept is the same.

Things to Consider While Picking Up an Automation Tool

Once you understand the advantages of using automation tools, the next question arises: “Which automation tool should I use?”

So to help you in selecting the most suitable automation tool for your requirements, here are some important factors to consider:

Know what you need

Make a list of the tasks you want to automate, like contact form replies or automatically add/update email list, add contacts to CRM tools, etc.

Think about every repetitive task that you have in your business and see if they can be automated by connecting different apps.

Easy to use

Look for a tool that is user-friendly and doesn’t require advanced technical skills.

It should have a simple interface and easy-to-understand workflows. In particular, it should not require you to have coding skills so anyone from your team can use it.

Available integrations

Check if the tool can connect with the apps and systems you already use, like your form builders, email marketing tools, e-commerce platforms, CRMs, etc.

You should also check if they have added new applications to their integration list.

Available triggers & actions

If the automation platform can connect with the apps you already use, it’s important to check what triggers and actions are available for those apps.

For example, if you want to add subscribers to your Mailchimp list, make sure the automation tool has a specific “Add Subscriber” action for Mailchimp.

Integrations with AI tools

Using AI in your automated workflows can enhance the process to a great extent. Hence, you should check if the integration platform offers integrations with tools like OpenAI.

Workflow customization features

Make sure the integration tool offers advanced features so that you can customize automated workflows to fit your specific needs like – delays, formatters, schedules, routers, etc.

Scalability

Consider if the tool can handle your growing business needs.

The tool that you select should be able to execute a large number of tasks effectively and you should be able to create multiple workflows without any blockers.

Reviews and Recommendations

Read reviews and recommendations from other users to learn about their experiences with different automation tools.

Support

Check if the tool has a good customer support and helpful documentation. You may want assistance if you have any questions or issues.

Pricing

Lastly, consider the cost of the tool and what you get for your money. Look for value in terms of features, support, and how it benefits your business.

Additionally, you can check if the platform offers a free trial so you can test it as per your needs and then make a decision.

How to Create a Workflow to Send Personalized Emails When Someone Fills Your Contact Forms

Imagine that you have selected your automation tool and now you want to automatically send personalized emails whenever someone fills out a contact form on your website.

To illustrate this process, let’s take a look at the following set of tools as an example:

1. Beaver Builder: Considered one of the top page builders for WordPress, Beaver Builder includes a convenient form block that we’ll use to create our contact form.

2. SureTriggers: This automation tool seamlessly integrates with WordPress, WordPress plugins, and web apps, allowing you to create automated workflows.

3. OpenAI: You might be familiar with OpenAI, the organization behind products like ChatGPT and Dall-E 2. We’ll use OpenAI to generate personalized emails.

4. Gmail: While you can use any email service or SMTP (Simple Mail Transfer Protocol) to send emails through SureTriggers, for simplicity, we’ll use Gmail to send emails when a form is submitted.

5. Slack: We imagine you and your team might use Slack for internal communications and we’ll be sending a message on Slack when new form submissions are received.

Now, let’s delve in and understand how automation tools function and then explore the process of connecting SureTriggers with Beaver Builder, OpenAI, and Gmail to create our desired workflow!

Before You Begin Creating Your Workflow

Before we begin setting up the automated workflow, make sure you have the following:

• SureTriggers account: You can sign up for a SureTriggers account for free, or log in if you already have one.
• Website designed using Beaver Builder: Ensure that your WordPress website has Beaver Builder installed and activated, as this will be the form creation tool we’ll be working with.
• OpenAI account: Register for an account on the OpenAI platform as we will use its API keys to connect it to SureTriggers.
• Gmail account: You probably already have one. If you wish to use that account to send emails, you can certainly do so. Alternatively, you can set up a new Gmail account exclusively for connecting and sending emails with SureTriggers.

Once you have these accounts ready, you can log in to your SureTriggers account and connect all the apps to SureTriggers.

How to Connect Beaver Builder with SureTriggers

To connect SureTriggers with Beaver Builder, all you need to do is install the SureTriggers plugin on your WordPress site where you’re using Beaver Builder.

Here’s a video that will help you understand the installation process.

After successfully installing and activating SureTriggers on your WordPress site, your SureTriggers account will be linked to this WordPress site along with the plugins installed on it.

Next, you can use Beaver Builder’s contact form module to add any kind of form to your website and save it as a new module:

By saving the forms as modules, you will be able to select the form while setting up the Beaver Builder trigger:

If you’re thinking about how to set up the triggers, it is explained further in this article.

How to connect OpenAI, Slack & Gmail with SureTriggers

The process to connect web apps with SureTriggers is pretty straightforward. You can simply follow the steps described below:

1. Log in to your SureTriggers account and go to the Apps screen:

2. Click on the Add New Connection button:

3. Search for OpenAI and click on its icon from the results:

4. Follow the steps on the screen that will help you create a connection between SureTriggers and OpenAI:

After you’ve connected to OpenAI, you can follow the same steps to add a new connection for Gmail and Slack:

Once OpenAI, Gmail, Slack, and Beaver Builder are connected to your SureTriggers account, you can start creating your workflow.

Creating the Workflow

Here’s how to create this workflow:

1. Start by setting up a trigger that activates when someone submits a form using Beaver Builder.
2. Configure an action that uses OpenAI’s capabilities to generate personalized emails.
3. Set up another action to send an email through Gmail to the person who submitted the form.
4. Finally, create an action to send a notification message to your team on Slack whenever a new form submission is received.

By following these steps, you can automate the process of sending a reply to form submitters and keep your team informed about new form submissions.

If you need a detailed guide on how to create this workflow in SureTriggers and access a ready-made workflow template, check out this article.

Conclusion

In conclusion, incorporating AI and automation into your business operations can have a transformative impact.

Automation has revolutionized the way businesses operate and with AI in the picture, the game has completely changed.

Harnessing the power of AI and automation can make a significant difference for your business. It has the potential to revolutionize the way you operate and achieve your goals.

By embracing these technologies, you can streamline processes, boost productivity, and unlock new opportunities for growth and success.

So don’t hesitate to explore the possibilities and reap the benefits of AI and automation in your business endeavors.

The post AI Hacks: Improve Customer Experience with AI-Powered Form Submission Confirmation Emails appeared first on Beaver Builder.

This post was originally published on January 9, 2018, and republished on May 5th, 2023. The question continues to come up and our thoughts about it remain the same.

TL;DR, Imposing a site limit on GPL software is simply putting an unenforceable block in front of using open source code as you please. It’s a bad user experience.

Happy New Year! We mentioned in our last update post that we’re going to shift formats on our blog. In this post, we’re going to answer a question we hear all the time:

“Why don’t you guys offer a cheaper license for only one or two sites?”

Many other companies in the WordPress space sell licenses based on the number of sites the product is being used on. For example, $10 for 1 site, $50 for 5 sites, or $100 for 100 sites.

We considered offering a similar license structure but ultimately decided on allowing unlimited sites for all of our license packages. This approach provides the best user experience given that Beaver Builder is a GPL-licensed product.

What does the GPL have to do with site licenses?

After deciding to fully adopt a GPL license for Beaver Builder, we’ve learned a LOT about the implications and nuances of the license. The GPL enables anyone to use, modify, and distribute our code. The code is free. We don’t have to make it freely available, but nothing is stopping you from taking your copy of Beaver Builder and giving it to your friend. More importantly, nothing is stopping you from changing the code and releasing your own version of it. This is how WordPress was started in the first place. It was a fork of a GPL software project called b2.

Over half a million websites now use and depend on Beaver Builder’s codebase. If Billy, Justin, and I get fed up with technology and decide to start a rock and roll band (which, admittedly, we do joke about sometimes), the code will live on. The project doesn’t end with us.

What’s the Catch?

The catch is (and this is how most WordPress companies protect their business interests) our brand is not under the umbrella of the GPL. The Beaver Builder brand is protected by a registered trademark. You can not take our code, redistribute it, and call it Beaver Builder. Furthermore, we ask anyone that wants to fork Beaver Builder to remove our trademark from the codebase. There is a clear distinction between the code and the brand.

Back to the original question, why don’t we offer single-site licenses? If you buy a copy of Beaver Builder, you’re supporting the team and the further development of the product, the convenience of automatic updates, and access to our awesome support. If we offered a single-site license, it wouldn’t be illegal for you to update a single site, then take that code and go manually update however many other sites you were managing.

That said, it feels disingenuous to force this arbitrary restriction on our customers. We believe in the value of our product. We don’t want to ask you to jump through hoops when you purchase from us.

What About Support?

Support is another can of worms. Some companies in the WordPress space offer fantastic support and some not so much. We take a lot of pride and invest a lot of resources in providing excellent support. It’s completely reasonable for a company to only offer support for a certain number of sites. We want Beaver Builder to appeal to you if you’re building one site or if you’re someone that manages 100+ sites. Whether you’re a small business or a powerhouse design agency, we want to offer the same level and quality of support to everyone.

Surprisingly, we’ve found many of the people using Beaver Builder on 100+ WordPress sites use fewer support resources than some of the folks who are just getting started in web design/WordPress. For us, the number of sites managed doesn’t accurately represent the number of support resources any given user will require, or how much time it will take for us to solve the issues.

Perhaps counterintuitively, the “power users” of Beaver Builder are the ones discovering legitimate bugs and working with us to help fix and solidify the codebase. Power users are also more likely to be using Beaver Builder and other tried and tested plugins and themes that are far less likely to cause conflicts. In the WordPress space, premium software products are almost always more stable and well-maintained than their free alternatives.

GPL + WordPress =

This post isn’t to make a claim that our approach is right for everyone, but we hope to reference this post in the future when the question inevitably arises. We believe in the freedoms of the GPL and—call us crazy—we do our best to maintain a business selling free software!

If you’re curious to learn more about the GPL license and its implications for starting or running a software business, these are a few articles we learned from. And if you’re choosing a plugin or theme for your WordPress site, review the license terms. Join us in using, creating, and championing GPL-licensed products (or, see the article about Mullenweg and Pearson to see what might happen if you don’t).

A human-readable summary of the GPL by attorney, Richard Best

The GPL License Doesn’t Provide The Freedom To Infringe Registered Trademarks by WPTavern

Trademarks in the WordPress ecosystem: An interview with Carl Hancock by Chris Lema

And one of the more entertaining grudge matches in WordPress, Mullenweg and Pearson Square Off on Patents, GPL, and Trademarks

The post Why GPL Products and Limited-Site Licenses Don’t Make Sense appeared first on Beaver Builder.

As of Beaver Builder 2.7, blocks created with Advanced Custom Fields Pro (ACF) will be available for use in both Beaver Builder and Gutenberg.

In this post, we’ll cover everything related to using ACF blocks in Beaver Builder including why it’s useful, how it works, and how to create your first block.

Why ACF Blocks in Beaver Builder?

The introduction of Gutenberg as the WordPress editor made it easier than ever to add rich content to posts. Goodbye shortcodes! Even adding something as simple as a button is nicer now. However, blocks in the editor don’t work in Beaver Builder and vice versa.

ACF blocks come in handy if you use Beaver Builder for site building and page layout while using the WordPress editor to post content. They allow you to create one type of configurable content that can be used in both places.

ACF also makes it easier to build blocks by giving you a GUI to create the form and a framework for spinning them up quickly. From what we’ve found, it’s very similar to how you code a Beaver Builder module.

Imagine creating a Beaver Builder module that displays a custom gallery layout. That’s exactly what I did on the last site I built. Now imagine you’d like to use that same gallery module in a blog post. Before Beaver Builder 2.7, that wouldn’t have been possible. But now, with ACF blocks, it can be done.

How ACF Blocks Work in Beaver Builder?

As you can see in the image above, ACF blocks work in Beaver Builder the same way that modules do. You can drop them in the layout from the content panel and edit the settings when they load.

One notable difference is that all of your ACF fields will show under the Settings tab in Beaver Builder’s settings forms. If you need more tabs, you can use ACF’s tabs as shown in the example above.

To access your ACF blocks in Beaver Builder, open the content panel as shown below. Your blocks will either show under Standard Modules or a custom group if you’ve defined one. Any block categories or icons used to organize and display your blocks in the WordPress editor will be shown there as well.

Aside from that, ACF blocks should work in Beaver Builder the same way that modules do. This includes making use of all the spacing and display settings you get for free under the Advanced tab.

Creating an ACF Block For Beaver Builder

There isn’t a lot you need to know about creating an ACF block for Beaver Builder that you can’t learn from ACF’s documentation and WordPress’ handbook. Blocks created with ACF should just work.

To help, we’ve created an example ACF blocks plugin you can download for reference. However, there are a couple of gotchas you should be aware of…

• JSX Support – Blocks that declare JSX support aren’t currently supported in Beaver Builder and won’t be available. When using block.json, you need to explicitly set this to false as shown in the example below.
• Block Features – Beaver Builder doesn’t currently support additional block features that can be configured in block.json including things like alignment, colors, and variations. We only support the basics shown in the example.

The bare minimum you need to create an ACF block is two files: block.json and template.php. It’s also possible to load style and script files specific to your block by defining those in block.json as you will see.

Configuring block.json

This is a standard WordPress block.json file with the addition of the acf param for defining where your template is located. Without that, you won’t be able to select it in ACF when building your form.

Additionally, this is where you need to set JSX support to false, otherwise, your block won’t load in Beaver Builder.

You can also configure Beaver Builder group support here. This is done using the beaverBuilder param as shown below. By default, blocks will show under the Standard Modules group, but with this method, you can customize it.

The paths to the template file (and style or script files) are relative to your block.json file and need to be stored in the same location.

{
    "name": "acf/bb-example-acf-block",
    "title": "ACF Example Block",
    "description": "An example ACF block that can be used in Beaver Builder.",
    "category": "bb-example-acf-blocks",
    "icon": "admin-appearance",
    "script": "file:./js/scripts.js",
    "style": "file:./css/styles.css",
    "supports": {
      "jsx": false
    },
    "acf": {
        "mode": "preview",
        "renderTemplate": "template.php"
    },
    "beaverBuilder": {
        "group": "ACF Blocks"
    }
}

Configuring template.php

This PHP file is where you output the content for your block. In it, you can query ACF fields as normal with get_field and use the results in your output. If you’re used to working with ACF, this should look very familiar.

<?php

$heading = get_field( 'heading' );
$content = get_field( 'content' );

?>
<div>
	<h3><?php echo $heading; ?></h3>
	<p><?php echo $content; ?></p>
</div>

Loading the Block

Once you’ve created the code for your block, you need to load it using the core function register_block_type. Your block won’t be available to select in ACF when building your form until you do this.

add_action( 'init', function() {
	register_block_type( 'path/to/block.json' );
} );

Creating the Block Form

The last thing you need to do is create a form for your block. You can do this before you code the block, or in tandem, it’s entirely up to you. Just know that the block won’t be available in the field group rules if it doesn’t exist yet.

We’ve found that all ACF field types work for blocks in both Beaver Builder and Gutenberg. If you’ve created an ACF form before, this should all be fairly standard. Simply create a form, set the location to your block, and voila, you’re done!

Exporting the Block Form

This step is optional but can come in handy if you’d like to ship your blocks in a plugin. Under ACF’s tools, you have the option to export or import fields as JSON. This will allow you to store your block’s form in a plugin and even manage it with version control.

After exporting your block’s form, you can always reimport it later if you need to make changes. Once you’re done, just export it again and push those changes to your git repo.

ACF does provide a way to automatically handle JSON files but unfortunately, it only works with a single location. If you do that in a plugin, it could break something else on your site using ACF’s local JSON.

If you’re interested in working with fields this way, here’s how we’re loading them in the example plugin…

add_action( 'acf/init', function() {
	$fields = json_decode( file_get_contents( 'path/to/fields.json' ), 1 );

	/**
	 * Only load if no fields exist in the database with this key.
 	 * This allows you to work on the fields if they have been imported.
	 */
	if ( empty( acf_get_fields( $fields[0]['key'] ) ) ) {
		acf_add_local_field_group( $fields[0] );
	}
} );

Wrapping Up

We’ve been big fans of ACF even before Beaver Builder existed. It’s a powerful tool that has always given us the ability to easily create complex custom solutions. With this integration, we’re more excited about it than ever and hope that you can find it useful for your projects too!

The post ACF Blocks for Beaver Builder and Gutenberg appeared first on Beaver Builder.