Beaver Builder Modules

Beaver Builder is a powerful drag-and-drop page builder that makes it easy to create beautiful, responsive websites. Based on the provided image, here is a detailed explanation of each standard module in Beaver Builder and how to use them effectively.

Basic Modules

1. Audio

  • Purpose: Embed audio files directly into your pages.
  • Usage: Drag the Audio module to your page, upload your audio file, and configure settings like autoplay, loop, and volume control.

2. Button

  • Purpose: Add customizable buttons to your pages.
  • Usage: Drag the Button module to your desired location, set the button text, URL, and style (color, size, alignment). Customize further with icon options and hover effects.

3. Button Group

  • Purpose: Create a group of buttons.
  • Usage: Drag the Button Group module to your page, add multiple buttons, and configure each one’s text, link, and style. Ideal for creating call-to-action sections with multiple options.

4. Heading

  • Purpose: Add headings to structure your content.
  • Usage: Drag the Heading module to your page, choose the heading level (H1, H2, etc.), and enter your text. Customize the font, size, color, and alignment.

5. HTML

  • Purpose: Insert custom HTML code.
  • Usage: Drag the HTML module to your page and paste your HTML code. Use this for advanced customizations or to embed third-party widgets.

6. List

  • Purpose: Create ordered and unordered lists.
  • Usage: Drag the List module to your page, enter list items, and choose between bullet points or numbers. Customize the list style, color, and spacing.

7. Photo

  • Purpose: Add images to your page.
  • Usage: Drag the Photo module to your desired location, upload or select an image from the media library, and configure the size, alignment, and link settings.

8. Text Editor

  • Purpose: Add and format text content.
  • Usage: Drag the Text Editor module to your page, enter and format your text using the rich text editor. This module supports basic formatting, links, and media embeds.

9. Separator

  • Purpose: Insert horizontal lines to separate content.
  • Usage: Drag the Separator module to your page and customize the style, color, and thickness of the line.

10. Video

  • Purpose: Embed videos from YouTube, Vimeo, or self-hosted videos.
  • Usage: Drag the Video module to your page, enter the video URL or upload a video file, and configure settings like autoplay, loop, and aspect ratio.

11. Smart Slider

  • Purpose: Add sliders to showcase multiple pieces of content.
  • Usage: Drag the Smart Slider module to your page and select or create a slider using the Smart Slider plugin. Customize the slides, transition effects, and settings.

Box Modules

1. Box

  • Purpose: Create boxed content sections.
  • Usage: Drag the Box module to your page, add content (text, images, buttons), and customize the box style, background, and padding.

2. Flex Columns

  • Purpose: Create flexible column layouts.
  • Usage: Drag the Flex Columns module to your page, add columns, and adjust the width and spacing. Populate columns with other modules for complex layouts.

3. 3×2 Grid

  • Purpose: Add a grid layout with 3 columns and 2 rows.
  • Usage: Drag the 3×2 Grid module to your page and fill each grid cell with content modules (text, images, buttons).

4. 4×2 Grid

  • Purpose: Add a grid layout with 4 columns and 2 rows.
  • Usage: Drag the 4×2 Grid module to your page and fill each grid cell with content modules (text, images, buttons).

5. Split Header

  • Purpose: Create a header section with split content.
  • Usage: Drag the Split Header module to your page, add a title and subtitle, and customize the style, alignment, and spacing.

6. Photo Grid

  • Purpose: Create a grid of photos.
  • Usage: Drag the Photo Grid module to your page, upload or select images from the media library, and customize the grid layout, spacing, and style.

Media Modules

1. Content Slider

  • Purpose: Create a slider for text and media content.
  • Usage: Drag the Content Slider module to your page, add slides with text, images, and buttons, and configure slider settings like transition effects and timing.

2. Gallery

  • Purpose: Display a gallery of images.
  • Usage: Drag the Gallery module to your page, select images from the media library, and customize the gallery layout, columns, and spacing.

3. Icon

  • Purpose: Add icons to your page.
  • Usage: Drag the Icon module to your page, choose an icon from the library, and customize the size, color, and alignment.

4. Icon Group

  • Purpose: Group multiple icons together.
  • Usage: Drag the Icon Group module to your page, add icons, and configure the layout, spacing, and style.

5. Map

  • Purpose: Embed a Google Map.
  • Usage: Drag the Map module to your page, enter the address or coordinates, and customize the map settings like zoom level and height.

6. Slideshow

  • Purpose: Create a slideshow of images.
  • Usage: Drag the Slideshow module to your page, add images from the media library, and configure slideshow settings like transition effects and timing.

7. Testimonials

  • Purpose: Display customer testimonials.
  • Usage: Drag the Testimonials module to your page, add testimonials with text and images, and customize the layout and style.

Actions Modules

1. Callout

  • Purpose: Highlight important information with a callout box.
  • Usage: Drag the Callout module to your page, add a title, description, and button, and customize the style and alignment.

2. Call to Action

  • Purpose: Create a call-to-action section.
  • Usage: Drag the Call to Action module to your page, add a headline, description, and button, and customize the style and alignment.

3. Menu

  • Purpose: Add a navigation menu.
  • Usage: Drag the Menu module to your page, select a menu from the WordPress menus, and customize the layout and style.

4. Subscribe Form

  • Purpose: Add a subscription form for newsletters.
  • Usage: Drag the Subscribe Form module to your page, configure form fields, and connect to your email marketing service.

5. Contact Form

  • Purpose: Add a contact form.
  • Usage: Drag the Contact Form module to your page, add form fields, and configure email settings.

6. Login Form

  • Purpose: Add a login form for users.
  • Usage: Drag the Login Form module to your page and configure the settings for user login and registration.

7. Search

  • Purpose: Add a search bar.
  • Usage: Drag the Search module to your page and customize the style and placeholder text.

Layout Modules

1. Accordion

  • Purpose: Create expandable accordion sections.
  • Usage: Drag the Accordion module to your page, add accordion items, and configure the style and behavior.

2. Pricing Table

  • Purpose: Display pricing plans in a table format.
  • Usage: Drag the Pricing Table module to your page, add pricing plans, and customize the layout and style.

3. Sidebar

  • Purpose: Add a sidebar to your page.
  • Usage: Drag the Sidebar module to your page, select a sidebar from the WordPress sidebars, and customize the layout and style.

4. Tabs

  • Purpose: Create tabbed content sections.
  • Usage: Drag the Tabs module to your page, add tab items with content, and configure the style and behavior.

Info Modules

1. Countdown

  • Purpose: Add a countdown timer.
  • Usage: Drag the Countdown module to your page, set the end date and time, and customize the style and layout.

2. Number Counter

  • Purpose: Display animated number counters.
  • Usage: Drag the Number Counter module to your page, set the starting and ending numbers, and customize the style and animation.

Posts Modules

1. Posts Carousel

  • Purpose: Display posts in a carousel format.
  • Usage: Drag the Posts Carousel module to your page, select the post type, and configure the layout, style, and animation settings.

2. Posts

  • Purpose: Display a list of posts.
  • Usage: Drag the Posts module to your page, select the post type, and customize the layout, style, and filtering options.

3. Posts Slider

  • Purpose: Display posts in a slider format.
  • Usage: Drag the Posts Slider module to your page, select the post type, and configure the layout, style, and animation settings.

By understanding and utilizing these modules, you can create a dynamic and engaging website with Beaver Builder. Experiment with different modules to see how they can enhance your site’s functionality and appearance. Happy building!