{"id":38940,"date":"2017-07-26T23:57:10","date_gmt":"2017-07-27T06:57:10","guid":{"rendered":"http:\/\/wpbeaveraddons.com\/?p=38940"},"modified":"2019-07-15T01:21:02","modified_gmt":"2019-07-15T08:21:02","slug":"getting-started-beaver-builder","status":"publish","type":"post","link":"https:\/\/wpbeaveraddons.com\/getting-started-beaver-builder\/","title":{"rendered":"Getting Started with Beaver Builder"},"content":{"rendered":"

Are you one of those bright brains who had a great idea to start your website but got stuck because you don\u2019t know how to code\u00a0<\/span>Well, you don\u2019t have to worry now! There is a very concrete and powerful solution to that.<\/span><\/p>\n

Introducing the Beaver Builder<\/span><\/h1>\n

\"\"<\/p>\n

Beaver Builder<\/a> is a front end drag and drop page builder plugin that helps you build your website without writing code. You can create your site by just selecting and dragging the element or the content and just placing it wherever you need, and that is it! Beaver Builder will handle the code part itself!<\/span><\/p>\n

Beaver Builder<\/a>\u00a0comes with various modules and\u00a0<\/span>more than 30 pre-built templates just for landing pages. Other than that you will also get 25 content pages to choose from! <\/span><\/p>\n

Editing and customizing these templates is easy. You can do that by adding or removing the modules you want to see there, and you can do all this in real time!<\/span><\/p>\n

So let\u2019s jump to it and see how can you install this awesome plugin onto your website.<\/span><\/p>\n

Step-by-step Beaver Builder Installation Guide<\/span><\/h2>\n

Step 1:<\/strong> First thing you need to do is to open your WordPress Admin area. Now select the “Plugins” options and then click on the “Add New” button.<\/span><\/p>\n

\"\"<\/p>\n

Step 2:<\/strong> Click on the “Upload” button at the top of the page.<\/span><\/p>\n

\"\"<\/p>\n

Step 3:<\/strong> Upload the Beaver Builder plugin and then click on the “Install Now” button.<\/span><\/p>\n

\"\"<\/p>\n

Step 4:<\/strong> Click on “Activate” button to enable the plugin.<\/span><\/p>\n

\"\"<\/p>\n

Congratulations! You have successfully installed the Plugin on your Website!<\/b><\/p>\n

Now since we are done with the installation, we can begin to learn how to make a full page using the Beaver Builder, but before proceeding, I think we should clarify some basics first.<\/span><\/p>\n

Global Settings<\/span><\/h3>\n

Global Settings are the options for your whole website. When you make changes in the Global Settings, It reflects on the all the pages rather than just a single page. <\/span><\/p>\n

Accessing the global settings is very easy. Here are the steps:-<\/span><\/p>\n

Step 1:<\/strong> While in the page editor, click on the Tools button in the top right corner of the window.<\/span><\/p>\n

\"\"<\/p>\n

Step 2:<\/strong> Then select “Global settings” which is just above the cancel button, and you are in the Global Settings section!<\/span><\/p>\n

\"\"<\/p>\n

Here is an image showing how global settings look.<\/p>\n

\"\"<\/p>\n

There are many options in the Global Settings Panel like responsiveness, margin, padding, the maximum width of the web page, etc. and you can also add custom CSS and JavaScript if you want to.<\/span><\/p>\n

Beaver Builder Theme<\/span><\/h3>\n

The Beaver Builder(plugin) is the base product, and it gives you the access to edit and make changes in your content area. On the other hand, the Beaver Builder Theme assists in altering everything except the Content area which includes sections like header, footer, sidebars, etc. <\/span><\/p>\n

The Beaver Builder Theme<\/a> comes with the Pro Pack of Beaver Builder<\/a> which includes the Beaver Builder plugin as well. The Beaver Builder Theme is a must buy if you want to gain full control of the page. Having the freedom to edit everything including the header and footer will give you the immense liberty to edit the website. The website will become your sandbox, and you can create whatever you like!<\/span><\/p>\n

In this tutorial also, we will be using the Beaver Builder Theme as well to make the necessary changes. Having the theme will make the job of making a custom landing page barely a job of minutes!<\/span><\/p>\n

Row Layouts<\/span><\/h3>\n

Have you ever made a sketch of anything before drawing anything? You remember that stencil of blocks that you make to ensure which design goes where? Layouts are exactly the same.<\/span><\/p>\n

When you insert 4 column layout, you get four different blocks(columns) to add your four different modules. With multiple column layouts, you get the freedom to insert multiple elements which mean you do not have to insert a single module in a row necessarily. <\/span><\/p>\n

For example, if you want to make a custom offers page with a countdown timer. You can choose a 2 Column Row Layout. Insert the countdown timer in the first column and the other column, give the description and the redirect link. <\/span><\/p>\n

Don\u2019t worry if you are getting all confused. It will all be explained in detail later on.<\/span><\/p>\n

Beaver Builder has nine different types of Row Layouts. 1 Column, 2 Columns, 3 Columns, 4 Columns, 5 Columns, 6 Columns, Left Sidebar, Right Sidebar, Left and Right Sidebar. All of them have different layout style and different column structures as well.<\/span><\/p>\n

How can you insert a Row Layout in your Page using the Beaver Builder?<\/span><\/h3>\n

Step 1:<\/strong> Open the Page builder of the page that you want to be edited and click on the Add Content button.<\/span><\/p>\n

Step 2:<\/strong> Expand the Row Layout tab by clicking on it once.<\/span><\/p>\n

Step 3:<\/strong> Simply choose the desired layout and drag and drop it wherever you want to on the web page.<\/span><\/p>\n

The Builder will automatically adjust the other elements to make room for your custom row.<\/span><\/p>\n

Modules<\/span><\/h3>\n

Think of modules as building blocks of your website. A web page needs a combination of modules that work together to give the most amazing experience to the user and the freedom to interact with the site. Let’s say if you have a contact us page on your website then the Email ID field, the text message on confirming the subscription, etc. becomes your elements.<\/span><\/p>\n

Numerous elements come with the Beaver Builder, and every one of them has a unique job and believe me Beaver Builder has left no zones untouched. The package comes with every module that you can ever think of ranging from just a Button to a Count down timer. Now since we are on it, Let’s learn…<\/span><\/p>\n

How to add a module to your webpage via Beaver Builder?<\/span><\/h3>\n

Step 1:<\/strong> Go to your desired page and open the Beaver Builder editor and click on the \u201cAdd Content\u201d button at the top right corner of the page.<\/span><\/p>\n

\"\"<\/p>\n

Step 2:<\/strong> Now, there are two different tabs, first is “Basic Modules” and the second one is “Advanced Modules”. Select the one you want.<\/span><\/p>\n

\"\"<\/p>\n

Step 3:<\/strong> Find the desired module and then just simply drag it and drop wherever you want to see it on the page and voila! It\u2019s done.<\/span><\/p>\n

\"\"<\/p>\n

There are many other changes that you can make to your widgets. We will see each of them individually later.<\/span><\/p>\n

Since now we are all set to create our first landing page, Let’s jump to it!<\/span><\/p>\n

How To Build a Landing page for your website using the Beaver Builder?<\/span><\/h2>\n

Creating a whole landing page surely does sounds scary, but actually, it\u2019s unbelievably comfortable. Believe me or not you can build your entire landing page within 5 minutes! Having a hard time believing me? Check it yourself!<\/span><\/p>\n

Now since Beaver Builder comes with almost 30 pre-made landing page templates, I will go with a Pre-designed template. Beaver Builder has spared no design. Every impressive design you can think of, it is already in the Beaver Builder landing page templates library. So, in this example, we will make a landing page using one of the templates.<\/span><\/p>\n

Here is a step by step guide on \u201cHow to make a Landing page using the Beaver Builder<\/strong>\u201d<\/span><\/p>\n

Step 1:<\/strong> First of all you have to add a new page to your website. For this, go to your admin area and click on pages and click on add new page.<\/span><\/p>\n

\"\"<\/p>\n

Step 2:<\/strong> Now in the WordPress new page screen, look at the right side of the screen. You will find Page Attributes panel. Select the option \u201cNo header\/Footer\u201d for the Template option.<\/span><\/p>\n

This will remove the header and the footer from the page.<\/span><\/p>\n

\"\"<\/p>\n

Step 3:<\/strong> Now under the Title bar look for the \u201cPage builder tab.\u201d Click it, and this will launch the Beaver Page Builder.<\/span><\/p>\n

If you are starting the Beaver Builder for the first time, a tutorial will pop up. You can skip that as we have explained everything here \ud83d\ude42<\/span><\/p>\n

\"\"<\/p>\n

Step 4:<\/strong> As the editor will open, a window for templates will open up. Select any of the templates that you like. You can change the template later as well.<\/span><\/p>\n

Here, I am choosing the Scroller Template.<\/span><\/p>\n

\"\"<\/p>\n

Step 5:<\/strong> Upon selecting, you can see the web page is automatically loaded.<\/span><\/p>\n

Step 6:<\/strong> Now we only need to edit this page to make it the way we want. Let\u2019s start with the Welcome heading. Click on the \u201cWelcome to Scroller!\u201d title. This will open the editing options for the title.<\/span><\/p>\n

\"\"<\/p>\n

Step 7:<\/strong> Under the General Tab, change the heading from \u201cWelcome to Scroller!\u201d to \u201cWelcome to my Blog!\u201d<\/span><\/p>\n

\"\"<\/p>\n

Step 8:<\/strong> Now let\u2019s go a step further and modify the font to something else. To do this, you have to go to the style tab, and under the structure panel, you will find Font option. Select any other font that you like. I am going with \u201cABeeZee\u201d font. Click on the Save Button.<\/span><\/p>\n

\"\"<\/p>\n

Step 9:<\/strong> Under the Heading, there is a sub heading. Change this also with whatever text you like. I am going with \u201cScroll down to discover more!\u201d. Just Click on the text and when the editor opens up, Replace the text and click on save button.<\/span><\/p>\n

\"\"<\/p>\n

Step 10:<\/strong> As I don\u2019t want the Button here, so I will just remove the button by clicking on the \u201cx\u201d button on the top left corner of the button.<\/span><\/p>\n

When the delete confirmation message shows up, click yes to remove.<\/span><\/p>\n

\"\"<\/p>\n

Step 11:<\/strong> Scroll down and make the changes as you desire by just clicking on the modules and editing the options as per your choice. I have also changed the Title Text and the text paragraph by following the same steps mentioned above. Here are the changes that I made.<\/span><\/p>\n

\"\"<\/p>\n

Step 12:<\/strong> The images also can be easily changed.<\/span><\/p>\n

Step 12(A):<\/strong> Click on the image or click on the little wrench icon at the corner of the picture.\u00a0<\/span>The photo settings window will open up.<\/span><\/p>\n

\"\"<\/p>\n

Step 12(B):<\/strong> Click on the \u201cSelect Photo\u201d link under the general tab and select the desired image. This will fetch the picture and just click on the save button, and the changes will be made.<\/span><\/p>\n

\"\"<\/p>\n

Repeat this step for all the images that you want to change. If you want to change the image on the background, click on the wrench icon and look for the Background parallax under the General tab and change the picture and click save.<\/span><\/p>\n

Now, on the third section of the page, there is an empty container in front of the parallax scroll, This does not look good, right? Let’s add something there. Just follow the steps we discussed earlier adding a module to the page and add a map there.<\/span><\/p>\n

\"\"<\/p>\n

After dragging and dropping the Map module, entered the location address. Here, I am setting Goa, India as my location on the map. Set the location and click save.<\/span><\/p>\n

I thought a little explanation would make more sense, so I added another Heading Module above the Map. This is how I did it.<\/span><\/p>\n

Step 1:<\/strong> I added a simple heading above the map by simple drag and drop operation.<\/span><\/p>\n

Step 2:<\/strong> I added the Text as \u201cMy next Travel Destination\u201d on the heading.<\/span><\/p>\n

\"\"<\/p>\n

Step 3:<\/strong> I customized the attributes a little bit, and these are the changes I made.<\/span><\/p>\n