The North Commerce module is a Beaver Builder module that allows you to display North Commerce elements on your website. The module becomes available in the Beaver Builder UI when you have the North Commerce plugin installed.

In this article, you will learn how to use the North Commerce module to enhance your WordPress site and create a smooth shopping experience for your customers.

What is North Commerce?

Before diving into the details of the North Commerce Module, it’s essential to understand what North Commerce is and how it can help your e-commerce strategy:

North Commerce is a new, all-in-one e-commerce plugin for WordPress, designed to help users create high-performing online stores and sales funnels.

It provides a range of features to build, manage, and optimize online shops, focusing on speed, ease of use, and customization.

Key Features of North Commerce:

• Custom Checkout Forms: Enhance the checkout process with customizable forms that include options for pre or post-order upsells, boosting your sales potential.
• All-in-One Solution: North Commerce provides essential e-commerce features such as subscription products, payment plans, advanced coupons, and review collection without the need for additional plugins.
• Optimized for Speed: The plugin is engineered for speed, ensuring fast load times and a smooth user experience, which is crucial for retaining customers and improving conversion rates.

North Commerce aims to provide a seamless and powerful e-commerce experience within WordPress. It simplifies building, managing, and optimizing online stores.

Introducing Beaver Builder’s North Commerce Module

The addition of the North Commerce Module allows you to display North Commerce elements directly within your Beaver Builder layouts, offering a more intuitive way to build e-commerce pages:

With this module, you no longer need to rely on shortcodes to display products. Simply drag and drop the North Commerce Module into your page and customize it with the familiar Beaver Builder interface.

Benefits of the North Commerce Module:

• Seamless Integration: The module works within with your existing Beaver Builder layouts, making it easy to add e-commerce functionality to your site without learning new tools.
• Enhanced Control: Gain more control over the appearance and functionality of your e-commerce pages, allowing for a more personalized shopping experience.
• Improved Workflow: Speed up your design process with pre-built layouts and customizable settings that eliminate the need for complex coding.

How to Use the Beaver Builder North Commerce Module

Creating a seamless e-commerce experience is crucial for the success of your online store. The North Commerce Module for Beaver Builder simplifies the process of building stunning, fully functional e-commerce websites.

Step 1: Install Required Plugins

Before getting started, make sure you have the following plugins installed and activated on your WordPress site:

• Beaver Builder Page Builder: A flexible drag-and-drop page builder for WordPress that allows users to create custom layouts and designs without coding.
• North Commerce Plugin: An all-in-one WordPress e-commerce plugin designed to help users create high-performing online stores with a focus on speed and ease of use.
• Beaver Themer (optional): An add-on for Beaver Builder that allows users to create custom headers, footers, product pages, and dynamic content layouts for their entire WordPress site.

Once these plugins are in place, you’re ready to begin crafting your e-commerce site.

Step 2: Add the North Commerce Module to Your Page

Navigate to the page where you want to add your e-commerce features and click to open the Beaver Builder editor. Then, click on the “+” icon in the top right corner to access the modules panel.

In the search bar, type “North Commerce” to quickly locate the module. Once you find it, simply drag and drop the North Commerce module to your desired location on the page:

Adding the North Commerce module to your page is the first step in customizing your e-commerce experience. This gives you the flexibility to incorporate product displays, shopping cart elements, or checkout forms directly into your page’s design. This seamless integration ensures that your e-commerce features blend smoothly with the rest of your content, providing a cohesive and user-friendly experience for your visitors.

Step 3: Configure the North Commerce Module

The North Commerce Module offers a range of settings to help you customize the e-commerce elements on your site to match your brand and optimize the user experience.

Under the General tab, you can select from several layout options, each tailored to deliver a specific type of content or user interaction:

Each layout option caters to different aspects of your e-commerce store, helping you create a cohesive and user-friendly experience. Choose the layout that best fits your needs, whether to highlight products, streamline checkout, or enhance your site’s design.

Next, we’ll explore each layout option and provide guidance on configuring them for your store.

Product Page

The Product Page layout allows you to display a single product, just as you see on the default product page. This layout is perfect for highlighting a specific product anywhere on your site, such as on landing pages, blog posts, or custom sales pages.

Select Product Page from the Layout dropdown, then enter the Product Slug to showcase a specific item:

The product slug is a unique identifier for each product and ensures that the correct product information is displayed.

The Product Page layout gives visitors a detailed view of a product, including images, description, price, and options. It’s perfect for promoting featured products, running marketing campaigns, or creating custom showcases that blend with your site’s design.

Furthermore, by placing a product’s full details in strategic locations, you can effectively drive interest and boost conversions.

Product Gallery

To showcase multiple products on a single page, use the Product Gallery option in the North Commerce module. This feature is perfect for creating visually appealing category pages or product overviews.

Select Product Gallery from the Layout field:

The Product Gallery layout displays your products in a clean, organized grid, typically with three columns. Each product is highlighted with its featured image, title, and price, providing visitors with a clear and attractive presentation of your offerings.

The Product Gallery layout engages customers by displaying multiple products at once. This makes it easier for them to find what they’re looking for.

Product Slider

The Product Slider option enables you to showcase a selection of your North Commerce products in a dynamic, interactive slider. This feature is ideal for making your products more visible and engaging to your site visitors.

To create a product slider, select Product Slider from the Layout field dropdown menu:

Using a product slider on key pages, such as your homepage or landing pages, can effectively draw attention to your products and encourage users to explore your offerings, ultimately driving higher engagement and sales.

Checkout

The North Commerce module allows you to embed the checkout process directly within any page or post. This option gives you flexibility in how and where you guide customers through your sales process. By displaying the North Commerce checkout form on custom pages, you can streamline the purchasing process and reduce friction for your customers.

To use this feature, simply select Checkout in the Layout field:

This will automatically display the checkout form, making it easier for customers to complete their purchase without having to navigate away from the current page.

Integrating the checkout form into strategic locations, such as landing pages or sales funnels, can significantly enhance the user experience and improve conversion rates.

Cart

Lastly, the North Commerce module allows you to display the contents of the user’s cart. This feature is particularly useful when building sales pages and funnels, as it enables customers to easily review their selections before checking out.

To use this feature, select Cart in the Layout field. You’ll see a display similar to the example screenshot below:

Keep reading to learn how to customize the default North Commerce Cart and Checkout pages to better fit your needs.

Step 4: Customize Your Layout

After selecting your layout, you can further personalize the appearance of your e-commerce elements.

In the settings popup, click on the Style tab:

These options allow you to create buttons that match your brand and enhance the overall design of your e-commerce site:

Button Style

• Default Style: Set the appearance of the button in its normal state.
• Hover Style: Customize the button’s appearance when hovered over.

Color Options

• Text Color: Choose the color for the button text.
• Icon Color: Set the color for the button icon.
• Background Color: Select the background color of the button.

Button Border

• Border Styling: Customize the button’s border.
• Hover Border: Style the button border for the hover state.

Next, navigate to the Advanced tab:

Adjust margins for spacing, set visibility rules by device type, and apply animations for dynamic user experiences. You can also add custom code with advanced CSS and Javascript settings. These options give you full control over your content’s display and allow precise tailoring to your design needs.

Conclusion

The North Commerce Module for Beaver Builder allows you to create an engaging and functional online store. Combining North Commerce with Beaver Builder helps you build a visually appealing site that enhances the user experience.

The post North Commerce Module for Beaver Builder appeared first on Beaver Builder.

Our goal with this change is to simplify the decision-making process for joining the Beaver Builder ecosystem, make it easier to build outstanding websites, and better allocate resources to support you and develop great software.

Here are the key changes:

• All of our packages will include Page Builder, Beaver Builder Theme, and Beaver Themer.
• We’re implementing site limits for support and update in two of the three new packages.
• We’re lowering the price of our least expensive plan, and slightly raising the price of our middle-tier plan.

Below is a screenshot of what our new pricing table will look like.

Why These Changes Are Exciting

With more web building choices than ever, we want to make the decision to try Beaver Builder easier. By reducing the entry-level price and bundling Themer and the Beaver Builder Theme with every package, our hope is that we give everyone access to the best tools for building WordPress websites and continue growing the Beaver Builder family. When more people build with Beaver Builder, everyone wins.

The most successful agencies and web builders using the Beaver Builder platform are using Beaver Themer. When we launched Themer in 2017, it was a new idea and an innovative tool that we felt justified being a stand-alone product. Now, we want to remove the extra hurdle so everyone can have access to the most powerful web building tools we offer.

Lastly, by including Themer and the BB Theme in the starter package, we believe it will be easier to encourage clients to maintain their own Beaver Builder license. For years, we’ve seen friction when someone takes over a Beaver Builder website but doesn’t have access to the license or support system. While many people include software licenses and support as part of a care package, the option of having your clients own their own license is now much more realistic.

Frequently Asked Questions

Why implement site limits now?

We somewhat famously proclaimed our distaste for WordPress plugins implementing site limits many years back. We’re stepping back on this approach for a few reasons, mainly, site limits will allow us to better plan and allocate resources. We crunched the numbers, and the vast majority of our users would not be affected by the site limits we’re putting in place.

Will site limits include staging sites?

No. Through some domain rules inspired by our friends at ACF, staging and development sites won’t count towards your install count.

When will the new pricing go live?

On September 10th, 2024.

More questions?

We’re announcing this price change a few weeks before implementing it in hopes that we can get feedback and answer as many questions as possible. Please don’t hesitate to reach out here, on Facebook, or through our support channels with any questions or comments about the upcoming change.

As always, we appreciate your support, and we are as excited about the future of Beaver Builder and WordPress as ever.

The post A New Package Structure and Pricing for Beaver Builder appeared first on Beaver Builder.

Let’s dive into the 48in48 story, explore the benefits it brings to nonprofits, and see some of the standout nonprofit websites that have emerged from this fast-paced event.

What is 48in48?

48in48 is a tech-savvy nonprofit that’s all about empowering other nonprofits. Founded in 2015 by two friends, Jeff Hilimire and Adam Walker, with the following vision:  

“To create a supportive digital ecosystem where nonprofits can thrive, grow, and achieve their goals. By offering free websites, comprehensive marketing training, branding guidance, and reliable digital support we aspire to empower nonprofits to make a meaningful and lasting difference in the world.”

48in48 volunteers have participated in 32+ events and built over 1,300 free, professional websites for nonprofits, saving them a whopping $33 million:

Free Websites for Nonprofits Built with Beaver Builder

A great website helps nonprofit organizations connect with their audience and showcase their mission in a powerful way. 48in48 takes it a step further by offering more than just an improved website presence.

Each 48in48 website package includes:

• A Free WordPress Website Build: A professionally designed website that showcases the nonprofit’s mission and services.
• Support / Hosting: One month of dedicated support and hosting to ensure the website runs smoothly and efficiently.
• Marketing Training: Comprehensive training to help the nonprofits leverage digital marketing tools and strategies to reach a wider audience.
• Nonprofit Networking: Opportunities to connect and collaborate with other nonprofits, fostering a community of support and shared knowledge.

The payoff? Better visibility, more engagement, and more support from donors and volunteers.

The Role of Beaver Builder in the Mission

Our powerful nonprofit website builder has been key in making the process of building 48 websites in 48 hours not only possible but also efficient and effective.

Beaver Builder offers an intuitive, drag-and-drop interface that simplifies website creation, even for users with minimal WordPress experience. Its flexibility and ease of use mean that volunteers can focus on creating beautiful, functional websites that meet the unique needs of each nonprofit.

Here’s how Beaver Builder makes building nonprofit websites a breeze:

• Speed and Efficiency: Beaver Builder allows volunteers to quickly design and customize websites without needing extensive coding knowledge. This speed is crucial when working against the clock to build 48 websites in a weekend.
• User-Friendly Interface: The drag-and-drop functionality enables volunteers to easily add and arrange content, making each website both attractive and user-friendly.
• Consistency and Quality: Beaver Builder ensures a high standard of design across all websites, providing nonprofits with a professional and polished online presence.

Recent Highlights: The Social Justice Event

One of the most recent 48in48 events focused on social justice, showcasing the power of community-driven efforts to promote equality and support underserved communities. This event brought together a diverse group of volunteers dedicated to making a difference.

Beaver Builder’s Marketing Director, Anthony Tran, joined the event as a judge, evaluating the incredible work done by the volunteers. Here’s what he had to say, “Very impressed with the 48in48 teams organization and all the hard work that went into these website projects. Well done!!!”

Here are the top websites of the 48in48 Social Justice Event:

1st Place: Uptown & Boogie Healthy Project

The Uptown & Boogie Healthy Project website is a great example of what dedicated volunteers can achieve in just 48 hours, and it rightfully earned the first place spot in the 48in48 event.

It features an engaging and user-friendly design, compelling content, interactive features, a professional aesthetic, and a responsive and mobile-friendly layout. The site effectively supports the organization’s mission of promoting health and wellness in the community.

2nd Place: Campbell Community Center

The Campbell Community Center website snagged the runner-up spot in the 48in48 event for its clean and engaging design, user-friendly navigation, and clear presentation of the center’s mission and programs.

The site’s vibrant visuals and intuitive layout help visitors easily find information about events, volunteer opportunities, and ways to get involved. It highlights the center’s community impact, showcasing how a well-designed website can enhance nonprofit outreach and support.

3rd Place: I See My Baby

The I See My Baby website earned third place in the 48in48 event for its heartfelt and visually appealing design. The site does an excellent job of conveying the organization’s mission through touching imagery and clear messaging.

Its user-friendly interface makes it easy for visitors to navigate and find relevant information, while interactive features like donation links, shop pages, and contact forms boost user engagement. Overall, the site’s professional look and accessible layout make it a powerful tool for the organization to connect with its audience and promote its cause.

Overall, the winning projects demonstrated outstanding creativity and functionality, showcasing the true potential of nonprofit organizations when equipped with the right tools.

Join the 48in48 Movement

48in48 is more than just an event; it is a movement dedicated to empowering nonprofits through technology. Participation in 48in48 means contributing to a cause that transcends boundaries and creates a lasting impact. Whether as a volunteer, donor, or supporter, involvement helps shape a brighter future for countless communities.

Volunteer to Build Websites

Join their enthusiastic community of skilled volunteers dedicated to building professional websites and providing digital marketing support for nonprofits. Volunteers can share their talents to make a meaningful impact, helping organizations expand their reach and influence. 48in48 proudly hosts events focused on empowering women, promoting social justice, and fostering positive change worldwide.

Nonprofits – Request a Website 

Is your nonprofit in need of a new website? Visit the Nonprofit Hub to submit your request. If chosen, 48in48’s dedicated team of volunteer marketing and design professionals will create a stunning online presence for your organization. Empower your mission with a professionally designed website that showcases your work and connects you with a wider audience.

Sponsor an Event

Getting involved with 48in48’s corporate sponsorship goes beyond giving back—it’s about building connections and camaraderie within your company. Their opportunities allow your organization to make a difference through charitable giving and purpose-driven sponsorships, leaving a lasting global impact.

The post 48in48 Spotlight: Beaver Builder’s Nonprofit Website Builder appeared first on Beaver Builder.

The Bento Grid Design seamlessly combines clean lines, balanced proportions, and intuitive organization, drawing inspiration from Japanese bento boxes. Beaver Builder’s Box Module makes it straightforward to implement this sophisticated layout. Simply drag and drop the Box module to structure your grid, customize each section with text, images, or icons, and ensure your design looks great on any device.

In this article, we’ll walk you through creating a stunning Bento Grid Design using Beaver Builder’s Box module. Get ready to impress your visitors and elevate your website’s look and feel!

Understanding the Bento Grid Design Concept

Before we dive into the technical aspects, let’s first understand what sets the Bento Grid Design apart. Inspired by the Japanese bento box, this design approach emphasizes clean lines, balanced proportions, and seamless organization. The result? A visually appealing grid layout that effortlessly showcases content while maintaining clarity and coherence.

The Bento Grid Design takes its cue from the classic Japanese bento box – where each meal is carefully arranged to create a balanced and delightful experience:

In web design, the Bento Grid mirrors this approach, focusing on simplicity, balance, and precise organization to build layouts that truly connect with users.

Clean Lines

The Bento Grid Design is all about clean lines. Just like a neatly divided bento box, this layout keeps clear boundaries between content elements. This minimalist style boosts visual clarity and adds a touch of sophistication.

Balanced Proportions

Balance is everything in Bento Grid Design. Each element, from image sizes to text blocks and spacing, is thoughtfully proportioned. This careful calibration creates a harmonious look that’s easy on the eyes and maintains a cohesive visual experience.

Seamless Organization

Like the artful arrangement in a bento box, the Bento Grid Design focuses on seamless organization. Content is logically and intuitively structured, making it easy for users to navigate. Whether it’s a project portfolio or a product gallery, this layout ensures users find what they need without hassle.

The Result

Combining these principles results in a visually appealing grid layout that goes beyond just looking good. Inspired by the elegance and precision of a bento box, the Bento Grid Design balances form and function. It showcases content beautifully while enhancing usability and user experience.

 By adopting this approach, web designers can build websites that are not only visually stunning but also offer a seamless and intuitive user experience, much like opening a perfectly curated bento box.

Website Examples of Bento Grid Design

Incorporating Bento Grid Design into your web design projects can elevate the overall user experience, providing both clarity and visual interest. The following examples showcase the flexibility and creativity that this layout style can bring to your designs. Each example highlights different approaches and techniques, demonstrating how this design trend can be adapted to suit a wide range of content and purposes.

1. Procreate

The Procreate website effectively employs bento grid design to present information in a clean, organized manner. The homepage features distinct sections, each with its own compartment, showcasing different aspects of the product, such as tools, gallery highlights, and tutorials. These sections are visually separated but maintain a cohesive flow, making it easy for users to navigate and absorb information. The use of varying compartment sizes within the grid layout enhances the visual hierarchy, drawing attention to key features and updates, while maintaining an overall balanced and harmonious look.

2. Apple

The Apple Card webpage uses bento grid design to create a visually appealing and organized layout by dividing the page into distinct sections, each highlighting different aspects of the card. Varying compartment sizes within these sections, such as large images paired with smaller text boxes, establish a clear visual hierarchy and draw attention to key information. Consistent margins, padding, and alignment maintain balance and harmony throughout, enhancing the user experience by making it easy to navigate and absorb information.

3. Aaply

The Aaply webpage uses bento grid design to present its content in a structured and visually engaging manner. The site is divided into distinct sections, each addressing different aspects of the app, such as features, benefits, and pricing. Within these sections, varying compartment sizes and elements, like images, text boxes, and icons, create a dynamic visual hierarchy. This organized layout enhances user navigation and ensures that key information is easily accessible, contributing to a cohesive and user-friendly experience.

Bento Grid Design in WordPress using Beaver Builder

Now that we’ve introduced the concept of the Bento Grid Design, let’s dive into creating our own example using Beaver Builder’s Box Module.

If you’re new to Beaver Builder, don’t worry – its intuitive drag-and-drop interface makes designing straightforward. Consider watching this video from our Box Module Basics Online Course to get a quick overview of how to use the Box Module’s grid feature to create a colorful photo grid:

How to Create a Bento Grid Design with the Box Module

Beaver Builder’s Box module simplifies creating a Bento Grid Design with its drag-and-drop interface, flexible customization options, and advanced layout controls. The Box module allows you to effortlessly add and arrange various content types—such as text, images, and icons—within individual boxes.

With its robust Grid and Flex settings, the module provides precise control over alignment, spacing, and positioning, ensuring a cohesive and visually appealing layout. This combination of user-friendly design tools and powerful customization capabilities enables you to quickly and efficiently create dynamic Bento Grid Designs that enhance the overall aesthetic and functionality of your website.

Let’s take a look at how to build this colorful grid design using Beaver Builder’s Box module:

Step 1: Drag and Drop the Box Module

Begin by opening WordPress and launching Beaver Builder to get started. Click the “+” icon in the upper right corner to open the Content panel, then drag the Box module onto the page:

Step 2: Configure the Grid Layout

Set up your grid layout by adjusting the row and column settings. In the Box Module settings popup, go to the CONTAINER tab and set the Display to Grid.

This action will display the CSS grid options. For a 4×2 grid, set the Columns Number of Tracks to “4” and the Rows Number of Tracks to “2” as shown here:

Next, in the Spacing section, you can increase or decrease the Gap and Padding to refine the layout. Keep in mind that you can always make adjustments later as your grid begins to take shape.

Now, we will add our Flex children containers to form a structured grid, mirroring the compartments of a bento box. Drag a Box module onto the page and drop it inside the grid Box module. In the popup settings box, ensure that this box is set to Flex:

Then, navigate to the Outline Panel, right-click on “Box: Flex Row” and select DUPLICATE. Repeat this action until you have created 4 copies, representing the number of containers you want to display:

Now we are ready to adjust the appearance of each Box and add content.

Step 3: Customize Each Flex Box Module

Each Box module serves as a container for content. In this step, we will customize each Flex Box module. We will work from left to right and top to bottom, starting with the orange 2×2 container on the left:

To achieve this look, click on the first Box module to open up the settings popup. Under the CONTAINER tab, scroll down to Sizing & Placement. Increase the Span to “2” for both the Grid Column and Grid Row in order to achieve a 2 x 2 box like this:

Next, scroll down to the APPEARANCE section and click to add a Background Color:

Drag the Heading and Text Editor modules into the Box module, and add your desired content into each module. To arrange them as shown below, adjust the Flex settings (Direction, Align, Wrap) in the Box module popup:

Once you have finished with the first box module, click on the next Box module. Create a 2 x 1 grid by setting the Sizing & Placement to “2” for Grid Column and “1” for Grid Row:

Then, just as you did with the first box, add a background color, a heading module, and a text module. Adjust the Flex settings for each additional box module to create a visually appealing and balanced layout.

Step 4: Ensure Responsive Design

The next step is to ensure your grid design adapts well to different screen sizes. Use Beaver Builder’s responsive tools to maintain the Bento Grid’s visual integrity across various devices.

Open the Tools menu by clicking the arrow in the top bar of your editing screen and select Responsive Editing from the dropdown. Alternatively, use the keyboard shortcut “R”:

The Responsive Editor offers a precise preview of your layout across various devices. You can view the design at different sizes using the Width and Height options or the Drag Handles:

Note that the Responsive Editor does not create separate layouts for each device size. Instead, you can adjust your design for each device using the Visibility options and Responsive Toggle.

Step 5: Enhance with Interactive Elements (optional)

Depending on your design objectives, you might want to incorporate interactive features like hover effects, clickable links, or animations within each Box module. While some enhancements may require basic coding skills, others are straightforward to implement.

For example, the Box module’s Linking settings let you add a link to the entire box, which includes all child modules within it:

Finally, once your design is finished up, click DONE and then choose SAVE DRAFT or PUBLISH to save or post your work.

By following these steps, you can effectively create a visually organized and engaging Bento Grid Design using the Box module, perfect for enhancing your WordPress website projects.

Conclusion

In summary, mastering Bento Grid Design in WordPress with Beaver Builder’s Box Module unlocks limitless potential for web creators. By blending Japanese design principles with Beaver Builder’s user-friendly interface, you too can present your content in a flexible and visually striking way.

Want more Beaver Builder Box module tips?

• Enroll in our free online course for the box module (free): Box Module Basics: Build Better Layouts with Flexbox + CSS Grid
• Check out Joshua Long’s Beaver Builder Intermediate course (paid): Beaver Builder: Intermediate Crash Course

The post Bento Grid Design in WordPress with Beaver Builder’s Box Module appeared first on Beaver Builder.

Fully customizable, responsive, and built with Beaver Builder’s robust Box Module, the Smile Dental Clinic template helps you to create a polished, professional website that stands out.

In this article, we’ll dive into the features and benefits of our newest starter website and show you how to leverage it for your next WordPress project.

What Are Beaver Builder Starter Websites?

Beaver Builder starter websites are pre-designed templates that you can import into WordPress with just a few clicks and a free Assistant Pro account. These templates are created with the popular Beaver Builder suite of tools, offering pre-built layouts and demo content that can be easily customized to fit your specific needs:

Beaver Builder Website Templates Features and Benefits

Here’s a closer look at what our starter websites have to offer:

• Pre-Built Layouts: Each WordPress template comes with professionally designed layouts, including homepages, service pages, testimonial pages, contact pages, and more. This eliminates the need to start from scratch, providing a solid foundation for your website.

• Demo Content: The templates include placeholder content that you can replace with your own text and images. This helps you visualize the final product as you customize your site, making the process straightforward and intuitive.

• Easy Customization: Beaver Builder’s drag-and-drop page builder allows you to modify layouts, change colors, add content, and more without any coding knowledge. This user-friendly approach ensures that even beginners can create stunning websites.

• Responsive Design: All starter websites are designed to be fully responsive, ensuring that your site looks great on any device, from desktops to smartphones.

• Time-Saving: By using a pre-designed template, you can significantly reduce the time it takes to build a website. This allows you to focus more on content and functionality rather than design and layout.

• Professional Quality: The templates are crafted by professional web developers, ensuring a polished, high-quality appearance that enhances your brand’s credibility.

• Consistent Design Framework: Using a starter website provides a consistent design framework, making it easier to maintain a cohesive look and feel across your entire site.

Overall, Beaver Builder starter websites are a powerful tool for anyone looking to create a beautiful and functional WordPress site quickly and efficiently. Whether you’re a seasoned developer or a complete beginner, these templates make web development a breeze, saving you time and effort while delivering professional results.

What’s Included in the Medical / Dental Clinic Starter Website?

With our medical / dental website template, you get a fully customizable, responsive website that looks fantastic on any device. It’s got everything you need – from sleek design elements to essential pages tailored for medical practices:

• Homepage
• Services Page
• About Us Page
• Testimonials Page
• Blog Page
• Contact Us Page
• Appointments Page

We’ve also included a few useful pages for image credits, typography style examples, and a handy “What’s Included” page:

• Style Examples
• Image Credits
• What’s Included

Plus, Beaver Themer users will be able to take advantage of the following Beaver Themer Layouts & Parts:

• 404
• Blog Archives
• Blog Single Post
• Header
• Footer

How to Import the Dentist Starter Website to WordPress

Setting up your dental website has never been easier, thanks to Beaver Builder and Assistant PRO. With the simple library import feature, you can quickly and effortlessly create a WordPress site tailored for the medical industry.

Forget starting from scratch—just import, customize to your liking, and you’re ready to go. It’s the ultimate time-saver, ensuring your website looks professional and polished right from the start.

Step 1: Install WordPress, Theme, and Plugins

Begin by setting up a fresh WordPress installation if you haven’t done so already. From the WordPress dashboard, navigate to APPEARANCE > THEMES and install your preferred theme. We recommend using Beaver Builder for the best results; however, blank canvas themes like  Astra, GeneratePress, or Page Builder Framework work great too.

Next, you’ll need to install a few essential plugins:

• Beaver Builder Page Builder: For easy drag-and-drop page building.
• Beaver Themer: To create custom layouts and parts.
• Assistant: To import your template library.
• SVG Support (recommended): To safely upload SVG files to your site’s media library.

Step 2: Add the Template Library to Your Assistant Pro Account

To access the Medical/Dental Clinic Starter Website library, use the Assistant plugin, which adds a sidebar to the frontend of your WordPress site. Click the floating pencil icon in the upper right corner to open the sidebar.

From here, click the Community App icon to browse the Assistant community marketplace. In the next window, click on the Beaver Builder icon.

Scroll down to locate and select the Medical/Dental Clinic Library. Next, click the “Get Library – Free” button:

Note that you will need to log in or register for a free account to continue:

Step 3: Import the Template Library into WordPress

Now that you have acquired the template library, it’s time to import it into your WordPress site. Head back to your WordPress site and open the Assistant sidebar once again. This time click on the Libraries App icon and search for your newly added library:

Inside, you’ll find all the assets, including pages, posts, Themer layouts, color palettes, media, and .txt code. To import the entire library, click the gear icon in the upper right corner and select “Import Library.”

Next, download and import the Global Styles and Settings. From the Starter Website Library, select TYPE and choose CODE. Download the provided .txt file.

Now, import the Beaver Builder settings. Exit the Assistant app and navigate to your WordPress dashboard. Go to SETTINGS > BEAVER BUILDER > IMPORT / EXPORT, then select the .txt file from your computer to start the import process.

Step 4: Customize Your Site’s Theme, Menus, and Content

Now that the template is imported, it’s time to make the site uniquely yours:

• Adjust Theme Settings: Depending on your theme, you might need to make a few tweaks to perfect your website. This could include hiding titles or modifying layouts to better suit your style.

• Set Up Home and Post Pages: In your WordPress dashboard, go to SETTINGS > READING and choose your preferred home and post pages.

• Global Settings: Adjust global styles, colors, and typography to match your brand.

• Menus: Create and refine your header and footer navigation menus for an intuitive user experience.

• Content: Replace the demo content with your own text, images, and videos. Add any additional pages or sections as needed.

By now, your site should really be starting to take shape. You should see your vision coming to life with the customized theme, tailored menus, and personalized content.

This is the stage where you can refine the finer details to ensure everything aligns perfectly with your brand. Adjust the layout for optimal user experience, ensure all links and buttons are functioning correctly, and double-check that your content is engaging and informative.

Step 5: Test and Launch Your Website

Before going live, thoroughly test your website to ensure it looks great and functions well on all devices and browsers. Check for responsive design, page load times, and overall user experience.

Once you’re satisfied with the setup and customization, it’s time to launch your new website. Share it with the world and start attracting new patients! Promote your site through social media, email newsletters, and other marketing channels to maximize your reach.

Conclusion

The Dental Clinic Website Template for Beaver Builder is a game-changer for WordPress users looking to create a stunning, functional website quickly and easily. With its modern design, easy customization, and time-saving features, this template is the perfect foundation for your online presence. Showcase your services, highlight patient testimonials, and customize your site with ease.

Explore the Smile Dental Clinic starter website today and take your dental practice’s web presence to the next level with Beaver Builder. Happy building!

The post Dental Clinic Website Template for Beaver Builder appeared first on Beaver Builder.

We’ve also added the first dev releases for Beaver Builder 2.9 and Beaver Themer 1.5 to the downloads section of your account page. You can find those by clicking the “Download and test an upcoming release” button. We’ll update those periodically over the coming months as new features are fine-tuned or completed and set a target release date once we’re happy with those.

Not everything mentioned in this post will be available in those releases, as this is a high-level look at a large body of work. However, we’ll do our best to include what we can as we prepare everything else for a future release and work towards Beaver Builder 3.0.

With that said, let’s dive in!

Table of Contents

• What’s in the Dev Releases?
  • The Loop Module
  • Modules as Blocks
  • Modules Without Wrappers
  • Top-Level Container Modules
• What’s Coming to the Dev Releases?
  • Multiple Backgrounds Field
  • A New Color Picker
  • A New Gradient Picker
  • Themer Layouts in the Post Template Menu
  • Themer Block Theme Support
• What’s Coming in the Future?
  • Dynamic Global Content
  • Module Design Tab and Styling API
  • Slider/Carousel Containers
  • Module Compositions
  • Refreshed Modules
  • JavaScript Module API
  • Block Theme

What’s in the Dev Releases?

Everything in this section is included in the dev releases as of this post. If you download a copy from your account page, you will be able to start testing these out today.

The Loop Module

We wrote about the Loop module in our last dev update, and I’m excited to announce that the first version is ready for testing. If you want to try it, be sure to install Beaver Themer, as it is built on some of that plugin’s features.

So, what exactly is the Loop module? Like the Box module, it is a container module that accepts child modules. However, unlike the Box module, the Loop module will repeat its child modules for each item in the query as defined in the settings, allowing you to build truly custom loop layouts.

It currently supports the same type of queries as our Posts module and new query types, including ACF repeaters and taxonomies such as categories and tags (coming soon). Utilizing the power of Beaver Themer’s field connections, we’re able to support even more data sources for building loops.

The Loop module is a powerful module and the next iteration of our work on container modules in Beaver Builder. If you’re interested in building custom loop layouts for any post type, give it a shot and let us know what you think.

Modules as Blocks

Another feature we discussed in our last dev update that’s ready for testing is using modules as blocks. The block editor is permeating more and more of WordPress, so our goal is to make the tools we create available to everyone, no matter where they’re editing content.

Whether building a page layout in Beaver Builder or writing a blog post in the block editor, a familiar set of tools will be available in both places. We’ve started with a limited selection of modules to kick this off, but you can expect that to grow over time. We’re even looking into support for patterns, but that’s a topic for another section.

Note: If you’re interested in testing this out, be sure to enable the modules you’d like to work as blocks in the admin under Settings > Beaver Builder > Blocks.

Modules Without Wrappers

As part of our continued effort to reduce the markup output by Beaver Builder, all of the Basic modules have been reworked to exclude their wrapper divs. To ensure backward compatibility, you’ll still see wrappers in existing layouts, but anything new dropped on the page will exclude them.

We’ll continue to work on removing wrappers from modules where we can, and anything new we create will definitely not be including them. Hooray for cleaner markup!

Top-Level Container Modules

In addition to removing wrappers from modules, the dev release also includes support for container modules (e.g., Box and Loop) to sit at the top level of the layout where rows live. You no longer need to exclusively use Beaver Builder’s row and column system to build layouts.

Rows and columns aren’t going anywhere since some people still prefer them, but they output a fair amount of markup. If you’re looking for leaner layouts, using container modules instead of rows and columns is the way to go moving forward.

What’s Coming to the Dev Releases?

Everything in this section is not included in the dev releases yet, but it will be soon. We’ll post in our Facebook and Slack groups as new features become available in the dev releases, so stay tuned.

Multiple Backgrounds Field

As our last update post mentioned, a multiple backgrounds field is coming to the Box module. But what wasn’t mentioned is that it’s also coming to rows and columns. In addition to that, this project has morphed into something much bigger for styling modules, which is why it’s not quite ready yet. I’ll discuss that in the “What’s Coming in the Future” section below.

In the meantime, the multiple backgrounds field will really enhance what you can do with the Box module. Combined with the ability to use containers in the top level of the layout, you’ll be able to build full pages with modern modules that take full advantage of the latest CSS layout capabilities.

A New Color Picker

In addition to the styling project I’ll mention below, the multiple backgrounds project also brings a brand new color picker to Beaver Builder. The color picker has been completely rewritten and now supports any CSS color expression you can throw at it.

The new color picker also has built-in support for the eyedropper API that browsers are starting to ship, making selecting colors even easier. In supported browsers, you’ll be able to click the eyedropper and select a color from anywhere.

Finally, while this may not ship in the first version of the new color picker, under the hood, it allows us to enable even more colors beyond the default sRGB color space you are used to. In the future, you’ll be able to switch to a color space that suits you and access an even wider spectrum of colors!

A New Gradient Picker

The color picker isn’t the only styling control improving in the next Beaver Builder update. We’ve also built a new gradient picker that allows you to create gradients with an unlimited number of color stops and blend between them through different color spaces.

The gradient picker is a great example of the new and improved controls you can expect to see as we continue to work on enhancing Beaver Builder’s styling capabilities.

Themer Layouts in the Post Template Menu

This is a minor enhancement but packs a ton of power. In the next version of Beaver Themer, you’ll no longer be required to set a location for singular post layouts. Instead, you can choose for your layouts to appear in the post template menu and select where a layout is applied per post.

In the screenshot above, you’ll see that “My Themer Post Layout” is included in the template menu alongside built-in templates defined by the theme. This enhancement allows the person creating the post to choose which layout they will use. It may not be for every use case, but it’ll give you additional flexibility when needed.

Themer Block Theme Support

For those who have switched from classic themes to block themes, you’ll soon be able to use Beaver Themer’s full power to build any part of your site. From headers and footers to post and archive layouts, a Beaver Builder layout will be able to override anything built in the site editor.

With this addition, you’ll soon be able to take full advantage of the modern features provided by block themes without sacrificing your ability to use Beaver Themer.

What’s Coming in the Future?

Everything in this section is either a new project or a project we spoke about last time that might not be ready for the next release. We’ll post updates as things become ready for testing, but for now, these are still in dev.

Dynamic Global Content

We’ve made much progress on dynamic global content since the last dev update. However, it might not be ready for the next version of Beaver Builder. We’re still chugging away on this project and will get a dev release out for testing as soon as we can.

In the meantime, if you’re unfamiliar with this project, it will allow you to select what fields can be edited in global rows, columns, and modules. Once selected, you can edit those fields per page while the rest of the content and layout are pulled from the global source.

Module Design Tab and Styling API

This is a brand new project since our last dev update and the one I am most excited about. We’re in the midst of a big push to bring several new and modern features to Beaver Builder, and this alone will help us accelerate in that direction.

So, what is it? The design tab is a unified way for us to bring a number of new and existing styling features to modules in a single interface. Currently, module styling can be done by any number of settings across different tabs. With this, you’ll only need to look in one place.

In addition to unifying styling under a single tab, this project will bring new and exciting features to Beaver Builder. Some of the things we’re looking at include support for different states (e.g., hover and focus), the ability to select which element you’re styling within a module, and the ability to style multiple modules at once through inheritance (e.g., all buttons in a box or row).

As this project progresses, we’ll consider new styling fields and refresh the currently available ones. This tab won’t be available in existing modules on day one, but once it’s ready, it’ll be used for anything new. We’ll retrofit a selection of our existing modules with the design tab once we feel confident that it’s ready for prime time.

There’s a lot to discuss here, so it’s hard to cover everything we’d like to do in one section of a post. Keep an eye out for new content on this in the future, as it’s sure to become a major focus.

Slider/Carousel Containers

One of our goals going forward is to continue building on the container module work we did for the Box module to bring you even more powerful modules. You’ll see that in the next release with the Loop module and in a future release with a new container module focused on sliders and carousels.

If you’re unfamiliar with container modules, they are modules that can accept other modules, similar to rows and columns, almost like mini builders. This approach allows much more flexibility than static modules, where you’re confined to what the module can do.

With a slider/carousel container, we can build one module that covers a variety of use cases. From typical hero sliders to testimonials, post carousels, slideshows, and more, we’re looking to build something extremely versatile here. We haven’t broken ground on this project yet, but we’re in the process of planning it out, so stay tuned.

Module Compositions

With the advent of container modules, it’s now possible for us to build all sorts of different content layouts without having to… create new modules! Module compositions is the unofficial term as this isn’t in development yet, but you can think of them like module templates. They are very similar to what WordPress core refers to as block patterns (and may end up there, too).

Many content layouts comprise things we consider primitives (e.g., headings, text, photos, icons, and buttons). Instead of creating new modules, we can build simple compositions using primitives for things like callouts, CTAs, info boxes, cards, testimonials, team members, and more. Adjusting and styling these compositions will be much more flexible than our existing modules, as you won’t be limited to the settings we’ve included in them.

We’re in the process of identifying what compositions we want to start with. Once we’ve finished that, we’ll start designing and building the first round of these for a future Beaver Builder release.

Refreshed Modules

As we work towards a number of new enhancements for building modules, we’ll start refreshing our existing lineup. As mentioned above, you can accomplish a lot with our basic modules, so we’ll likely start with those. Once the design tab is done, expect to see some movement on this front.

JavaScript Module API

The JavaScript module API is still very much on our roadmap, but we’d like to finish flushing out a few things (including the design tab) before fully committing to it since things are rapidly changing. We’ve put down some experimental code and have JavaScript modules working in both Beaver Builder and the block editor, but nothing is ready for testing yet.

Block Theme

The block theme is another project we discussed that’s still being worked on but isn’t ready for a dev release. It’s a lower-priority project with everything else going on, but we’re still eagerly interested in exploring it. Block themes are still a relatively new technology in the WordPress space, so we’re taking our time and asking questions to ensure that we land on something useful for everyone.

Wrapping Up

If you made it this far, thanks for sticking with me on this walk-through of what we’re working on for Beaver Builder 2.9 and beyond. We have a number of sizeable projects in progress and couldn’t be more excited to get some of this stuff into your hands. We’re always open to feedback, so if you haven’t already, download the dev releases and try them out. We’re eager to hear what you think.

Until next time, happy building!

The post Beaver Builder Dev Update: Latest Progress and Future Plans appeared first on Beaver Builder.

With pages for your services, client testimonials, a photo gallery, and bookings, it’s perfect for attracting new clients and showcasing your expertise. Start crafting stunning salon websites with our template and help your clients’ businesses thrive!

In this article, we’ll dive into the features and benefits of our newest starter website and show you how to leverage it for your next WordPress project.

What Are Beaver Builder Starter Websites?

Our starter websites are pre-designed website templates that you can import into WordPress to serve as the foundation for your website. These templates come with pre-built layouts created with our popular Beaver Builder page builder, design elements, and demo content, allowing you to customize them to suit your specific needs without starting from scratch. By using starter websites, you can save a significant amount of time and effort in the web development process.

Features of the Salon Starter Website Template

Beaver Builder starter websites are loaded with features that we think you’re going to love. Our salon website template is designed with beauty and hair salon businesses in mind and includes everything you need to build an impressive site:

Here’s what you can look forward to:

• Modern Design: Modern layouts that can be easily customized to fit a wide range of industries and purposes.
• Responsive Layout: Designed to be fully responsive, ensuring that your website looks great on any device, from desktops to smartphones.
• Easy Customization: With Beaver Builder’s intuitive drag-and-drop interface, customizing the starter websites is a breeze. You can easily modify layouts, change colors, add your content, and more without any coding knowledge.
• Demo Content: Each starter website comes with demo content that you can use as a guide or replace with your own. This helps you visualize the final product as you customize your site.
• Fast Loading Times: Optimized for performance, ensuring that your website loads quickly and provides a smooth user experience.
• Simple Page Import: Quickly and easily set up your salon website with the power of Assistant PRO. Simply register for a free account to get started.

Benefits of Using the Starter Website for Your Salon Site

Using starter websites for your web development projects offers several advantages:

• Time-Saving: One of the most significant benefits of using starter websites is the time savings. Instead of building a website from scratch, you can import a template and customize it to meet your needs, drastically reducing development time.
• Professional Quality: Professionally designed and developed, ensuring that your website has a polished, high-quality look and feel.
• Reduced Costs: By using a starter website, you can save on design and development costs. This is especially beneficial for small businesses and freelancers with limited budgets.
• Consistency: Starter websites provide a consistent design framework, making it easier to maintain a cohesive look and feel across your website.
• Ease of Use: Beaver Builder’s drag-and-drop interface makes it easy for anyone, regardless of technical expertise, to create and customize a website.

What’s Included in the Salon Starter Website?

From sleek design elements to essential pages customized for the salon industry, this template has everything you need to launch your website with confidence. Below you will find a list of page links that will take you to the various pages included in this library:

• Homepage
• Services
• About Us
• Gallery
• Testimonials
• Blog
• Contact Us
• Booking
• Simple Page
• Thank You Page

We’ve also included a few useful pages for image credits, typography style examples, and a handy “What’s Included” page:

• Style Examples
• Image Credits
• What’s Included

Beaver Themer users will be able to take advantage of the following Beaver Themer Layouts & Parts:

• 404
• Blog Archives
• Blog Single Post
• Header
• Footer

Beaver Builder Global Styles and Settings

The Chic Haven Salon templates make use of Beaver Builder’s Global Styles and Settings, so you can easily tweak typography and brand colors. Simply adjust the Global Styles to fit your brand:

Rows, Columns, and the Box Module

Similar to the Good Vibes Restaurant starter website, the salon template set uses the Box Module rather than columns for layout. It’s a great basis for you to learn from if you haven’t already explored the power of the Box Module.

With the introduction of the Box Module in Beaver Builder 2.8, it’s now both possible and recommended to transition from using rows and columns for your layouts. By harnessing the power of Flex and Grid, you can achieve layouts that are far superior to traditional column-based designs.

How to Import the Salon Website Template

Setting up your salon website has never been easier, thanks to the power of Beaver Builder and Assistant PRO. With the simple library import feature, you can quickly and effortlessly set up a beautifully designed website tailored for the beauty industry. 

No more starting from scratch—just import, customize to your liking, and you’re ready to go. It’s the ultimate time-saver that ensures your website looks professional and polished right from the start. Here’s how it works:

Step 1: Install WordPress, Theme and Plugins

Let’s begin by setting up a new WordPress installation if you haven’t already. If you’re adding templates to an existing site, keep in mind they’ll inherit the current theme and settings.

Next, install your preferred theme. We recommend Beaver Builder for the best results, but Blank Canvas themes like  Astra, GeneratePress, or Page Builder Framework work great too.

Now you are ready to add the following required plugins: Beaver Builder page builder, Beaver Themer, Assistant, and SVG Support (recommended):

Step 2: Add the Salon Starter Website Library to Your Assistant Pro Account

To access the Salon Starter Website Library, we will use the Assistant plugin, which adds a sidebar to your WordPress site’s frontend pages. Just click the floating pencil icon in the upper right corner to toggle the sidebar on.

In the Assistant sidebar, click the Community App icon to browse the Assistant community marketplace. Note that you will need to login or register for a free account in order to proceed.

Once logged in, click on the Beaver Builder icon and look for the Chic Haven Salon Library. Click the “Get Library – Free” button:

Step 3: Import the Salon Template Library Into WordPress

If you navigated away, let’s head back to your WordPress site and open the Assistant sidebar once again. Click on the Libraries App icon and search for your new library. Inside, you’ll find all of your assets including pages, posts, Themer layouts, color palettes, media, and .txt code:

To import the entire library, click the gear icon in the upper right corner and select “Import Library.”

Next, proceed to download and import the Global Styles and Settings. From the Starter Website Library, select TYPE and choose CODE. Download the provided .txt file.

Now it’s time to import the Beaver Builder settings. Exit the Assistant app and navigate to your WordPress dashboard. Go to SETTINGS > BEAVER BUILDER > IMPORT / EXPORT, then select the .txt file from your computer to initiate the import process.

Step 4: Customize Your Site’s Theme, Menus, and Content

Depending on your theme, you might need to make a few adjustments to get your website just right. Tweak settings like hiding titles or modifying layouts to suit your style.

Next, set up your home and post pages through your WordPress dashboard. Just go to SETTINGS > READING and choose your preferred pages:

Then, you will need to create your header and footer navigation menus. Go to APPEARANCE > MENUS to build and refine your menus, ensuring your visitors have an intuitive browsing experience.

Use Beaver Builder’s drag-and-drop interface to customize the template. Add your content, change colors, modify layouts, and more to make the website unique.

Step 5: Test and Launch Your New Website

It’s time to put the finishing touches on your website before the big debut. Before launching your website, test it on various devices and browsers to ensure a seamless user experience.

Now you’re ready to publish your new website and share it with the world.

Conclusion

The Chic Haven Salon starter website template for Beaver Builder is a game-changer for anyone wanting to create a stunning, functional salon website quickly and easily. With its modern design, easy customization, and time-saving features, this template provides the perfect foundation for your salon’s online presence. Whether you’re showcasing services, displaying client testimonials, or setting up an appointment booking system, the Chic Haven Salon template has got you covered.

Explore the Chic Haven Salon starter website today and take your salon’s web presence to the next level with Beaver Builder. Happy building!

The post NEW! Salon Website Template for Beaver Builder appeared first on Beaver Builder.

Let the Box Module Course and Beaver Builder Starter Websites be your guide to building exceptional websites that captivate and engage your audience. Let’s get started!

Introducing the Box Module Online Course

We’re excited to launch our new FREE online course for the Box Module. This course delves deep into the capabilities of the Box Module, empowering you to unleash its full potential in your website designs:

The Box Module serves as its own little microcosm within Beaver Builder, offering a significant boost to your site-building power through the utilization of modern layout models like Flex and Grid.

What will you learn? The course begins with a quick overview of the Box Module’s settings, followed by a series of engaging demo videos that will guide you through its features and functionalities:

Whether you’re a beginner or a seasoned pro, this course is tailored to support you every step of the way on your website-building journey.

But that’s not all – we have another exciting announcement!

Introducing Beaver Builder Starter Websites

In addition to the Box Module online course, our first Starter Website to be released on Assistant Pro is the Good Vibes Restaurant. This comprehensive library comes packed with professionally designed templates and robust features, all available for free!

In addition, the new Good Vibes Restaurant starter website was built entirely with the Box Module. With this Assistant Pro library, you can experience firsthand how the Box Module can help you build an entire pixel-perfect website effortlessly:

Whether you’re a seasoned pro or just dipping your toes into the world of web design, our starter websites will streamline the entire process, allowing you to bring your vision to life in no time. 

And the fun doesn’t stop there! We are working on more Beaver Builder starter website designs in a variety of industries such as the following:

• Salon Website
• Gym Website
• Pet Care Website
• Dentist Website
• Agency Website
• Girl Boss Website
• Contractor Website
• Coach Website
• Lawyer Website
• Small Business Website
• Church Website

What’s Included in a Beaver Builder Starter Website?

Each Starter Website is designed with the end user in mind and includes relevant pages related to the industry. For example, the Good Vibes Restaurant includes the following:

• Homepage
• About Us
• Blog
• FAQs
• Gallery
• Menu
• Reservations
• Testimonials
• Simple Page
• Contact Us

Furthermore, you will find a few useful pages for image credits, typography style examples, and a “What’s Included” page:

• Image Credits
• Style Examples
• What’s Included

If you are using Beaver Themer, then you’ll also find a helpful set of Beaver Themer Layouts & Parts:

• 404
• Blog Archives
• Blog Single Post
• Header
• Footer

Beaver Builder Global Styles and Settings

The Good Vibes Restaurant library makes extensive use of Beaver Builder Global Styles and Settings.  This means that you can adjust typography and brand colors very quickly and efficiently.  Simply make adjustments to the Global Styles and see what works for you aesthetically.

Rows, Columns, and the Box Module

With the arrival of the Box Module in Beaver Builder 2.8 it is both possible and encouraged to switch from using rows & columns for layout, to instead combining rows with the Box Module on the basis that the Box Module layouts are far superior to column based layouts.

This entire library uses the Box Module rather than columns for layout so it’s a great basis for you to learn from if you haven’t already explored the power of the Box Module.

Stock Imagery and Custom Vectors

The Good Vibes Restaurant Starter Website library includes a selection of free to use stock images; however, they are generally just to illustrate the sort of images you might want to use for your own needs.

Additionally, this library includes some custom designed vector graphics (forks, spoons etc) which you are free to use for your project.

How to Import the Beaver Builder Starter Website

Starter Websites offer a convenient, affordable, and efficient way to create professional-looking websites with minimal effort. Let’s dive into the details of how it works:

1. Install WordPress, Theme and Plugins

Begin by setting up a new WordPress installation if you haven’t already. Alternatively, you can add templates to an existing site, though they will adopt the current theme and settings.

Next, install your preferred theme. We suggest Beaver Builder for optimal results. Additionally, Blank Canvas themes like Astra, GeneratePress, or Page Builder Framework work well.

Once your theme is installed, proceed to add necessary plugins. For the best performance with the Good Vibes Restaurant template, ensure you have the following: Beaver Builder page builder, Beaver Themer, Assistant, and SVG Support (recommended):

2. Access the Starter Website Library in Your Assistant Pro Account

To access the Starter Website Library, utilize the Assistant plugin, which adds a sidebar to your WordPress site’s frontend pages. Simply toggle the sidebar on by clicking the floating pencil icon located in the upper right corner.

Within the Assistant sidebar, find the Community App icon to browse the Assistant community marketplace:

Look for the Good Vibes Restaurant Library, then click the “Get Library – Free” button. Upon clicking the Get Library button, you will be directed to the Assistant Pro website.

Finally, navigate to your Assistant Pro account dashboard by clicking the “View in Libraries” button.

3. Import the Beaver Builder Starter Website to WordPress

After obtaining your library, return to your WordPress site and access the Assistant sidebar once again. Click on the Libraries App icon and search for your newly acquired library in the next window. Within this library, discover a wealth of assets including pages, posts, Themer layouts, color palettes, media, and .txt code.

To import the entire library, click the gear icon in the upper right corner and select “Import Library“:

Once the import process completes, proceed to download and import the Global Styles and Settings. From the Starter Website Library, select TYPE and opt for CODE. Download the .txt file provided:

With your settings in hand, it’s time to import the Beaver Builder settings. Exit the Assistant app and navigate to your WordPress dashboard. Go to SETTINGS > BEAVER BUILDER > IMPORT / EXPORT, then select the .txt file from your computer to initiate the import process.

4. Adjust Your Website’s Theme, Menus, and Content

Let’s fine-tune your website for perfection. Depending on your chosen theme, a few tweaks may be needed to achieve your desired look. Adjust settings like hiding titles or modifying layouts to align with your preferences.

Next, establish your home and post pages through your WordPress dashboard. Simply navigate to SETTINGS > READING to designate your preferred pages.

Crafting seamless navigation is crucial. Head to APPEARANCE > MENUS to create and refine your header and footer menus, ensuring an intuitive browsing experience for your visitors.

Now, inject personality into your site by updating content, images, and links to echo your brand’s essence. Unleash your creativity as your website truly comes to life!

5. Review and Launch Your New Website

It’s time to dot the i’s and cross the t’s before your big website debut. Take a moment to review your site. Once you’re confident in its perfection, your website is complete and ready to share with the world!

With the Starter Websites in Assistant Pro, harnessing the power of Beaver Builder’s new box module to create stunning, professional-looking websites has never been easier.

Conclusion

In a nutshell, Beaver Builder’s got some seriously cool stuff to up your website game: the Box Module Online Course and the Beaver Builder Starter Websites. Whether you’re diving into the nitty-gritty of the Box Module or playing around with the slick templates in the Starter Websites, we’re here to support you every step of the way:

• Enroll in the Box Module Online Course and harness the power of Flex and Grid within your Beaver Builder layouts.
• Sign up for a free Assistant Pro account or log in to your existing account to access the Starter Websites.

Let’s create something amazing together!

The post Box Module Online Course and Beaver Builder Starter Websites appeared first on Beaver Builder.

How it All Started

Before there was Beaver Builder… there was FastLine Media. A small web design agency run by three tech-loving guys (Billy Young, Justin Busa, and Robby McCullough) in sunny California. Business was good at the time… they created WordPress websites for clients using themes, templates, and custom coding to fit client requests.

But, they realized there has to be a better way of building websites where you don’t have to toggle between the backend of the WordPress admin panel and refreshing to view your changes on the front end.

Customer support requests were a nightmare because clients couldn’t make changes on their own without reaching out to their developers for every little thing.

The guys started dreaming up a tool to revolutionize web design. What if we could make a “front end drag and drop builder” to make building websites faster and easier for agency owners and be intuitive enough for clients to make changes without knowing how to code?

FastLine Page Builder was Born!

In 2014, the guys launched the first page builder plugin for WordPress. It completely changed how websites would be created going forward.

Fun Fact: Did you know that the plugin was not called Beaver Builder at first?

The original name was actually “FastLine Page Builder”!

At first, things started slow, and as you can imagine the name didn’t catch on.

With the advice of a friend who was an experienced marketer, they needed to change their name to improve their branding and make something that would stand out and be memorable.

Story Behind the Name “Beaver Builder”

Here is a snippet from a blog post written by Robby back in 2015 about the story behind the name:

“Luckily for us though, one of our first customers was a “marketing guy.” He not-so-subtly told us that we had an amazing product, but our marketing sucked. He gave us some great free advice. We took it and it worked! So, we decided to bring him on as a contractor/consultant. On his suggestion, we… completely rebranded our product. He suggested that our name at the time, FastLine Page Builder, didn’t mean anything and that it was kinda “lame.”

Here’s another familiar story: we needed a name. Gosh, it’s hard to name a product. We spent weeks coming up with ideas. Everything depends on the name, and EVERY good name is seemingly taken (especially when you’re talking about getting the .com without paying a mint). We struggled with this for several weeks.

After much frustration, and in an attempt to get the guys to crack a smile, I started thinking about animals that build stuff. Bees build hives. Spiders build webs. Yeah, okay that’s a start. Beavers build dams… beaver build… it alliterates well.. I perked up and jokingly said, “how about Beaver Builder?” We laughed, “hahaha.” It’s funny, but no one will take us seriously with a name like that. But, like school girls, we couldn’t stop giggling about it. It was so fun and memorable. Luckily, compared to a suit-and-tie corporate culture, the WordPress culture is pretty casual and playful. After a bit of debate, we decided to try and pull it off!”

With a new name, and rebranded website, they were ready to take the WordPress world by storm.

10 Years and Almost 10 Million Downloads!

The company has gone from a small idea in Billy’s garage to powering millions of WordPress sites worldwide.

The founders are all very humble and feel awkward talking about their success… but I don’t mind and am very proud to be part of this global remote team.

But, we wouldn’t be here without the support of the Community. Let’s talk about some of their success stories.

Community Success Stories

Ready for some warm fuzzies? Let’s dive into some Success Stories and see firsthand how Beaver Builder has changed lives and businesses for the better.

“Beaver Builder gives you the tools you need to get started. As you scale, it then becomes more robust with you. It’s like the Ferrari of website builders.” ~ Mike Rux, ciphersdigital.com

From mom-and-pop shops to big-name brands, we’ve got a success tale for every occasion. Spoiler alert: it’s all sunshine and rainbows!

Have you seen some of the sites built with Beaver Builder?

Check out some of the Website Examples that have been created for agencies, blogs, businesses, coaches, courses, colleges, events, podcasts, etc.

Chris Lema was one of many WordPress influencers who recommended Beaver Builder to their community. https://chrislema.com/recommend-beaver-builder/

Over the years the reputation of the company of being a stable, reliable product has stood the test of time and has led us to where we are today.

But, don’t take my word for it… let’s see some reviews from our customers.

Future of Beaver Builder

Hold onto your hats, folks, ’cause the fun’s just getting started! We’ve got big plans brewing, from top-secret projects to game-changing updates.

Justin recently wrote a post about some things we’re working on, and some of the plans we have for the future of Beaver Builder.

If you haven’t read the post here are some of the highlights:

• Box Module Multiple Backgrounds
• Loop Builder Module
• Dynamic Global Content
• Modules Without Wrappers
• Top-Level Container Modules
• New JavaScript Module API
• Modules as Blocks
• Block Theme
• and More…

Here are some teasers for you to check out.

Box Module Mulitple Backgrounds

Loop Builder Module

Think of us as your friendly neighborhood web-building superheroes, here to save the day with our pixel-perfect powers.

Stay tuned, ’cause the best is yet to come!

Special Birthday Sale

Here is a quick video from our team and community wishing you all a Happy Birthday!

To celebrate our 10-year anniversary we wanted to offer a special birthday sale.

Ready to join the bash? From April 2nd to 30th, we’re offering 20% discount on all Beaver Builder plans, Beaver Themer, and Assistant Pro.

It’s our way of saying thanks for supporting us throughout the years. So grab your confetti cannon and let’s make some magic!

Learn more about this offer here: https://www.wpbeaverbuilder.com/birthday-sale/

Wrapping Up

As we raise our glasses to the last decade, we want to raise a toast to you, our incredible community. Here’s to a future filled with more laughs, more love, and more jaw-dropping websites than ever before.

Cheers to ten years of Beaver Builder brilliance!

Ready to join the fun? Share your favorite Beaver Builder memories and let’s keep the party going in the comments below!

Don’t forget to follow us on social media for all the latest updates and shenanigans. Let’s make some web-building magic together!

The post Beaver Builder Birthday: Celebrating 10 Years of Success! appeared first on Beaver Builder.

Fortunately, using Beaver Builder and a quality membership plugin, you can implement these types of restrictions on your WordPress site. You’ll be able to decide what content is open to the public and what can only be accessed by specific users. Even better, this can be as simple as toggling a setting.

In this article, we’ll share a few scenarios where implementing content restrictions makes sense. Then, we’ll show you how to add content restriction in Beaver Builder with the ARMember plugin in three simple steps. Let’s get to it!

When to Use Content Restriction on Your Website

There are a lot of scenarios where it makes sense to restrict some (or most) of the content on your site. How those restrictions work and when to implement them will depend on what tool you use. In any case, here are some of the most common scenarios:

• Membership or subscription sites. Membership sites tend to offer restricted content. For example, streaming websites or online magazines are membership sites based on subscriptions. Without an active subscription, you can’t get access to their content.
• Websites with early-release content. If you subscribe to any content creators from platforms such as YouTube, you’ll know it’s relatively common for them to restrict content to paying users. In these cases, you can get access to videos and other forms of content before they are released to the public.
• Online learning websites. Educational websites are a fantastic example of effectively using a paywall. With a lot of these sites, you can’t access their exclusive courses until you’re a member. Typically you’ll also need to choose one of multiple membership tiers.
• Regional or location-based restrictions. This is a very specific scenario, but one that you might have to consider depending on where your site’s audience is located. If your website shares copyrighted content, you might need to restrict its availability depending on the user’s location.
• Restrict specific parts of a page or a post. In some cases, you might want to restrict the content of a page or post so that only members can see it. For instance, you may offer a tutorial blog post for free, but restrict the embedded video that accompanies it to paying users.

Note that these aren’t the only scenarios where it makes sense to restrict content on your website. You’re free to set up members-only or private sections on any kind of website. 

If you’re interested in implementing any kind of content restriction, you’ll want to use a plugin that works with Beaver Builder. That way, you’ll be able to build your website using the Beaver Builder plugin while also choosing what parts of it won’t be accessible to the public.

How to Add Content Restriction in Beaver Builder (3 Steps)

If you use Beaver Builder, you know it can help you with almost any kind of project you need. In many cases, if you can’t find a feature or module that you’re looking for, there are plugins that can integrate it into the builder.

In this tutorial, we’ll show you how to use Beaver Builder with the ARMember plugin to implement content restriction in WordPress. 

Step 1: Create a Page or Post Using Beaver Builder

If you’re not familiar with how Beaver Builder works, the page builder offers a drag-and-drop experience. It enables you to design pages and posts using a row and column system. 

You can decide how many columns each row (or section) will include and add one or more modules within each of them:

There are tons of Beaver Builder modules to choose from. These include larger elements like sidebars and videos, as well as smaller design features like buttons and icons.

If you want to kickstart the website building process, Beaver Builder also includes a selection of modern WordPress templates. These are pre-designed pages you can use as the foundation for new designs:

When you select a template, you can modify any aspect of it. That includes the layout, which modules it includes, as well as their individual settings:

Once you have the foundation of your page or post in place, you’ll need to create an element that will be restricted for certain users. We’ll explore this in the next step.

Step 2: Add Members-Only Content to the Page

Now, we’re going to show you an example of adding members-only content to a page. We’ll set up a simple landing page that includes a button to download a PDF. This button will only appear for the users you choose. 
To start, we set up a large hero section with an image background. This is a simple full-width row using the Background Photo option that you can access if you click on the element to modify its settings:

Next up, we’ll add a Call-to-Action (CTA) using the Heading module. In our case, we’re using a simple prompt that says “Access your download”:

Note that every module in Beaver Builder comes with unique settings. The Heading module, for instance, enables you to choose what level of heading you want to use. You can also modify the heading’s style, including its font, color, size, spacing, and more.

With the heading in place, let’s move on to some simple description text above the download button. For this, we’re going to use the Text Editor module:

Next up, we have the actual download button. The Beaver Builder Button module enables you to customize the style of the element. You can even include an icon inside the button:

Beaver Builder provides you with a selection of simple icons. For this example, we’re using one that reflects a download so there’s no confusion about what the button does.

Note that this entire row won’t be visible to most users depending on what kind of content restriction you set up. With that in mind, it’s important to also include non-restricted content on the page.

That way, users that don’t have access to the restricted content will still be able to see something. For this tutorial, we set up a simple section that explains non-members don’t have access to the downloadable content:

With the method of content restriction we’ll use, non-members will only be able to see the bottom section. The part of the page that includes the downloadable content won’t show up for visitors, and you can decide exactly which WordPress user roles will have access to it.

It’s important to note that this functionality isn’t part of Beaver Builder. To add content restriction as an option, we’ll use a WordPress membership plugin.

Step 3: Restrict Access to the Module or Row

To enable content restriction in Beaver Builder, we’ll use the ARMember plugin, which comes in both a premium and a free version. This tool is ideal due to the built-in ARMember integration with Beaver Builder, which adds new options to module settings when using the page builder.

You can see these options by selecting a module, going to its settings window, and navigating to the ARMember tab. This tab will give you the option to restrict content for specific sets of users in WordPress:

Click on Select ARMember access and then select Yes. This will open a new menu where you can select who has access to or who can see the module:

You can select either a specific user role or a more broad option, such as logged-in users. Note that you can configure different ARMember content restriction settings for several blocks, which gives you a great deal of control over who gets to see restricted content.

The ARMember integration also adds content restriction options for rows. This means you can choose to restrict entire rows, which is perfect for the example we showed you earlier. In our case, we can configure the row’s settings to hide all the modules it contains except for a specific membership or subscription plan.

When you’re happy with the changes you’ve made, save them and close the Beaver Builder editor. Now, you can check out your site and test the content restriction settings in action!

Conclusion

Restricting content on your website can be a great way to make money or grow your business. You can paywall premium material like online courses, or simply encourage people to sign up for a membership to get access to freebies.

If you use Beaver Builder, you can restrict content with the ARMember plugin. Here’s a brief recap of how this process works:

1. Create a page or post using Beaver Builder.
2. Add members-only content to the page.
3. Restrict access to the module or row using the ARMember integration with Beaver Builder.

Do you have any questions about how to restrict content in Beaver Builder? Let’s talk about them in the comments section below!

The post How To Add Content Restriction in Beaver Builder appeared first on Beaver Builder.