Adding Your Content
In this tutorial you will learn to edit Text, Headings, Images and Video.
Start with the Quick Start Guide, this covers the basics to get your site up and running. is a
The basic and advanced modules are explained further below.
1. Quick Start Guide
1. Always start with the Page Builder
2. Editing text
3. Changing images
2. Basic Modules
Basic Modules are available in any page that you create with Beaver Builder. They can be accessed in the panel on the right > Add Content > Basic Modules.
To begin customizing your page layout, drag and drop a row layout of your choice onto the page. A row is required for modules, but if you drag out a module before creating a row, a row will be automatically created for you. For any module that you drag onto a row, you can move it using the move icon, modify settings using the tool icon, duplicate it using the copy icon and lastly, delete it using the x icon.
Audio
The Audio module is essentially a wrapper for WordPress’ core audio and playlistshortcodes. It allows you to insert either a player for a single audio file or a player for multiple audio files (a playlist) with a number of customization settings.
Adding a New Button
The Button module is exactly that, a button that you insert into your layout to lead visitors elsewhere within your site or to an external link. You can specify the text for the button, where it should like to as well as if it should open in a new tab or window. In terms of styling, there are a variety of options available to you in the style tab for colors, fonts and general appearance.
Adding a Heading
The Heading module inserts a heading or title into your row. This is similar to a page or post heading except that with our heading module, you can style it to your liking and give it unique spacing using the margins.
HTML
The HTML module allows you to insert any custom HTML code into your layouts using a basic HTML editor. Just drop an HTML module into your layout and start typing!
Adding a new Photo
The Photo module allows you to insert a photo from your WordPress Media Library or a specific link.
Inserting a Separator
The separator module inserts a line to separate content which can be styled in terms of color, style, size and of course spacing if desired.
Using Text Editor
The Text Editor module gives you the ability to add a block of text using an instance of the standard WordPress editor.
Inserting a Video
The Video module allows you to insert a video from the WordPress Media Library or use an embed code provided by a third party such as Vimeo or YouTube.
3. Advanced Modules
Advanced Modules are available in any page that you create with Beaver Builder. They can be accessed in the panel on the right > Add Content > Advanced Modules.
To begin customizing your page layout, drag and drop a row layout of your choice onto the page. A row is required for modules, but if you drag out a module before creating a row, a row will be automatically created for you. For any module that you drag onto a row, you can move it using the move icon, modify settings using the tool icon, duplicate it using the copy icon and lastly, delete it using the x icon.
Inserting an Accordion
The Accordion module allows you to insert an interactive accordion into a row. It essentially can be used as an FAQ, Q&A or feature list for text content anywhere within your layout.
Adding a Call To Action
The Call to Action module is similar to the Callout module, just a bit simpler in the way that it allows you to call attention to specific content, i.e. specific services you offer or a special. There are a handful of settings available for the Call to Action module. The general and style settings apply to the title and text of the callout module as well as alignment, while the button settings adjust the user interaction.
Adding a Callout
The Callout module is a more robust method of calling attention to specific content, i.e. specific services you offer or a special. There are a handful of settings available for the Callout module. The general and style settings apply to the title and text of the Callout module as well as alignment, while the image and call to action settings adjust the more robust options. You can include an image or icon with specific settings to each for your callout box and specify where it should lead if clicked.
Adding a basic Contact Form
The Contact Form module allows you to insert a contact form directly into a row. The basic settings allow you to enter an email address to where the message should be sent as well as spacing options if desired.
Inserting a Countdown
The Countdown module is a module that allows you to insert a countdown timer into your layouts that counts down to zero from a date and time that you specify. It allows you to specify the exact date and time, including choosing the timezone that should be used, and has a number of styling settings for customizing the look of your countdown timers.
Adding an Image Gallery
The Gallery module allows you to insert a gallery of images into a row. You can choose that gallery of images from your WordPress Media Library or if you have a SmugMug account, any of your SmugMug galleries. If choosing one of your SmugMug galleries, you will need to go into the gallery you would like to choose, click the Share button > Get a Link > Feed Links and copy the RSS link to insert in the Feed URL field in the gallery module. The gallery module has several settings and even allows captions to be displayed.
Inserting an Icon
The Icon module allows you to insert icons from Font Awesome, Foundation or WordPress into your layouts. You can also link it, add text, style it with several options and give it spacing if desired.
Using the Icon Group
The Icon Group module allows you to insert a group of icons from Font Awesome, Foundation or WordPress into your layouts. You can then link each to whatever you like and add specific spacing if desired.
Adding a Map
The Map module allows you to insert a Google map with a marker pointing to your address. You can specify a height depending on how it is used in a row and adjust spacing if needed using the margin settings.
Using and Changing the Menu
Like the built-in Custom Menu widget, the Menu module allows you to select one of your menus that was created under Appearance > Menus to insert into your layouts. That’s where the similarities stop as the Menu module allows you to do so much more with options for the layout, style, and responsive display of your menus. You can read more about the Menu module and how it works on our blog.
Adding New Posts
The Posts module allows you to insert a group of posts into your layouts with several layout options available to achieve different looks. You can also fine tune what posts are displayed using the Content tab in the Posts module settings.
Inserting a Posts Carousel and Posts Slider
The Posts Carousel and Posts Slider modules are similar to the Posts module in that they allow you to insert a group of posts into your layouts with several layout options available. The difference is that each of these modules allows you to either create a carousel of posts, or a slider of posts. You can read more about each of these modules on our blog.
Adding a Pricing Table
The Pricing Table module allows you to insert a pricing table with as many columns as you like! You can configure options such as title, price (and frequency), features and a button. There are also a handful of styling and spacing options to get you up and running featuring your pricing beautifully as well as quickly!
Inserting a Sidebar
The Sidebar module gives you the ability to insert any of your WordPress sidebars into your layouts. These can be accessed and configured in your WordPress dashboard under Appearance > Widgets.
Adding a Slideshow
The Slideshow module allows you to insert a slideshow of images into your layouts. You can choose images from your WordPress Media Library or if you have a SmugMug account, any of your SmugMug galleries. If choosing one of your SmugMug galleries, you will need to go into the gallery you would like to choose, click the Share button > Get a Link > Feed Links and copy the RSS link to insert in the Feed URL field in the Slideshow module. The Slideshow module has several display, playback and control settings all available to customize the user experience to your liking.
Using Social Buttons
The Social Buttons module allows you to insert popular social sharing buttons so visitors can share, like or post content to their social networks while on your site. You can choose the source they interact with whether it be the current page or a specific page such as your homepage. You can also choose which buttons to show and which to hide.
Adding a Subscribe Form
The Subscribe Form module works just like any other module. Drop it onto a page, configure the settings and you’re done. However, unlike other modules, this module allows you to make a connection to a third party service such as AWeber or MailChimp to subscribe your users to an email list. Simply choose a service, follow the instructions for connecting your account, select a list and you’re ready to start collecting email addresses. Please see this blog post for more details regarding the Subscribe Form module.
Adding Tabs
The Tabs module allows you to easily insert tabbed text content into your layouts. This is a great tool for inserting large amounts of text into a small space! The Tabs module settings allow you to add multiple tabs and structure them horizontally or vertically in addition to a handful of spacing settings if needed.
Using Testimonials
The Testimonials module allows you to add a basic slider with testimonials to your layouts. The options are pretty self explanatory, but one thing to consider is that if you are using the Testimonials module along with other modules, you’ll want to keep the layout set to compact. If you are using only the testimonials module in a row, you can select wide so that it takes up the entire row. You can customize a variety of options as well as add as many testimonials as you like.