Build beautiful websites with Beaver Builder
Watch the video below for my first look at Beaver Builder
BY Paul Therond - April 2016
An excellent, light-weight WordPress editor that allows you to create custom design templates and other pages and posts within WordPress quickly and easily.
BEAVER BUILDER Review
Hey! Everyone it’s Paul Therond here and today we're going to have a look at a Word Press plug in called beaver builder. This is a plugin that helps you to really spruce up your website and really getting your Word Press pages looking exactly as you wanted too because as great as Word Press is one of the one only criticisms that can really be pointed at it. It is a fact that it's what you see is what you get editor where you type in your images and video and audio and that isn't always the base in terms of creating the exact look and feel that you're wanting to go for. And this is where number of editors such as beaver builders, such as thrive content builder, visual composer, motor press editor. All these type of plug ins are trying to get help you to really create a page and ultimately a website that you can be proud of showing.
So today we're going to demonstrate the beaver builder in my previous reviews and have a look at the visual composer and we've had a look at thrive content builder which are all excellent tools but I think what you gonna see of this particular review today is beaver builder is potentially a slightly higher level in some aspects and especially when it comes to ease of use and practicality when using the actual plug in. Now I'm just here on the Edit post page so what we gonna do is the first thing that we have to look for is we need to look for this page builder button over here.
Now, if you don't see this after you install beaver builder this is a very simple reason for that and I'll just go here into the settings to show you. So you see here for go settings and page builders and this is the beaver builder and we're gonna open up in a new tab just to show you what the issue might be if you don't see the little icon here to start building your page. So we go here and we go two modules, post types and select the post type you would like to go to work with. So by default, I think it's only selected on post so you know if you're trying to edit a page you wouldn't see a page but what you need to do is you need to select all of these over here that you want the beaver builder to work on it and then just save post types and then you will see a screen similar to what you are seeing here. Now you might depending you know I've got beaver build over here now and that is my template so you probably won't see that if you're not using to be yourself.
So I’m gonna click page builder and what does it look is the front editor where you can start building your page. Now the first thing that does it shows your number of templates, now these templates are very nice, very professionally designed. I would sell the slightly higher pedigree than thrive content builder or visual composer anything those but not just many of them. That is the way I will give few extra points for example for thrive content builder just because of so the amount of templates they have. But the templates that you have are very nice, you’ve got home page's, content pages and then also your templates which is a very important in terms of improving your workflow later. Once you've created a design and layout then you're happy with either simply save it to your templates and there it is ready for you to go every single time. But for now, I'm not for this particular video I'm just gonna give you a very brief introduction to all the elements of beaver builder and then I will shoot a follow video we're going to some more advanced in editing techniques and features but this video today is really just an overview. So here we are beaver builder now there's a number of things that you can't control of beaver builder so you can't edit the side bar here this is controlled by the template at this moment in time and this is another plug in that shows you know suggested post to people. So these are not eligible things, this area here is the editable area that you can start using. You can't edit like the post title like that you have to do that from the previous screen saver, go and click back. If I type in something like beaver builder test for example and then go back to the page builder we should see that it's now been edited with that.
Again, I showed you the template and this is kind of demonstrating you know what aspects of beaver builder, what aspects it actually will help you to improve. So stuff like this you know, post title, sidebars and any other little plug ins you might have comment areas in there and then it’s all controlled by your templates. I mean my top over here which is my menu and my logo over there and also my foot on not controlled by the beaver builder simply just the content editor. But not being said that they are always where you know you can actually make his full screen and actually control side buyers and I’m might include that in second video. But for now let's have a look at beaver builder and on the right hand side here we have all the elements that we can use. The first thing I'll have a look at you know we’ve got different like a bro layouts and you see over here right sidebars that I was just talking about earlier. If you made this whole thing for words on your template you could actually control things are just side bar that within the beaver builder but for now let me just demonstrate to you for example a two-column approach and there's your two columns and see how easy it is here too just for example I can make that you know make that column smaller or bigger or whatever and then what you do is you add content to these particular column. So you know here's a content over here and you know for example we can add audio and you just select audio and you had different advanced features over all and I demonstrate that with a photo for example. So let me select photo and see what show it here maybe we select Netflix over here and gonna press save. Now let me click back over and there's a number of different options you can have different type of crops you can make it like for example a circle. So you see what it look like a circle and you’ve got alignment issues and all the line that you expect in a caption, you can make image linkable. What I wanna show you earlier who was advanced every single module that you insert using page button you can edit them all. Now this is a big, big picture because honestly this is the worst thing about the standard Word Press that is often doesn't format your alignment correctly. So you're padding and sometimes you might heading at the top then you know your texts a little bit too close to the heading but then when you press enter it puts too much space and you know this is an issue of padding and you know any good Word Press editor like beaver builder and thrive content building needs to have this particular feature of margins to really give you full control of editing the placement of images and text and video in your website. So for example if I want to change the top margin over here to maybe for example minus 45 just to demonstrate you see how just moved up over there and you see by using the same here you have full control of the placement of elements within your website but we’re gonna leave that for 0 now and you’ve got responsive layout which is generally you always wanted responsive layout and then you can have like a little animation effects on the text and the images such as you know slide up for example then press save. You actually see that when you publish the page.
Okay! But let's continue, I wanted this to be a bit more simply video to show you the elements. So we have audio, we have button, HTML, heading photo, super rated text editor and video. Now, all of that is quite intuitive and quite easy to understand and demonstrate the separated for you so you just can see the separator. You’ve got different type of styles, you can make the separator little bit thicker so for example maybe 10 pixels and again you know what I'm doing here. This is a great thing about being a beaver builder you actually you get to see a live what you're doing. So you know I click dashed over here and live you get to see that in many ways as one of the best features of beaver builder. You know other builder including the beaver builder which stand of my template. They don't actually show you live what you are doing so I can sometimes be a little bit difficult to understand. You know the setting that you have just saved how that exactly looks and this is a way beaver builder really does shine. This is live editing feature here gonna press save on the separator and go back, edit content. The heading is really the heading is just like a normal text but also gives you the ability to like add links, different styles of the header and stuff. So I'll just say, you know again test header and again for example maybe change the style to H1 and maybe change text color to something like that. Okay?
All quite and easy to use, you can also add HTML may be let me demonstrate the buttons for you. So the button, this is a nice feature, you can select icons and let say, let's put some blue over there, click here and again we have a link so say whatever.com, new window and we can change our style. So background color, we can change the background color of our button, it's maybe make a green like this and then we can have a color so let's maybe say we wanted to be gold type color and then the text color maybe, let say, white.
Okay? So you see the text color change and then when you publish that you will see that when you hover of those buttons that would change the button to gold. Okay! So those are some of the basic elements, basic module as it's called beaver builder. Now let’s have a look at some of the advanced modules, we've got colt to action call to action is very similar to the button but let just add like a header, like introducing the button kind of thing, colt out, contact form, content slider countdown, gallery icon group, map menu number, counter post, post carousel slider, pricing table, sidebar, slideshows, social buttons, subscribe form, tabs and testimonials. So those are all the features of advanced modules as you can see is quite few. Let’s see what would be a good thing to let maybe show you, colt out, can just type in whatever. Style, image, select them again, maybe the images are here and colt to action. Maybe this is not, I'm not really seeing anything to different of these in terms of what called colt out just simply adding an image or whatever so I'm just gonna press cancel maybe show you something else. Content form that's quite self- explanatory and content slider again. I'll show you count down maybe, press save and please enter the data in the future. So let's say, the second and press save. So there's a countdown, what else do we have here? Gallery is quite self-explanatory icon, icon group. Icon is what I show you an icon group you know you could have a number of icons. I guess I can maybe demonstrate for you, quite nice you know when you creating those landing pages and you know you wanna talk about like our services and have an icon for our services and contact us and have an icon for contact us.
So let's show it to you here, so let's maybe have a color icon and then we can add an icon then let’s maybe save that. What you can do is we can increase the size of these icons. So for example, it's a sixty and quickly demonstrate what else kind of thinking when I was thinking about this in terms of those like layouts that I create a two-column approach and then I probably actually wouldn't use an icon group that would just simply add icons. So what will I do here is I will add a text editor to there and then call this one for example services maybe make it H2 tag and then I will just simply duplicated over here and I'll move as it is good to be able to show you these type of editing features and then I'm gonna add content. Go back to advanced modules not icon group and I ‘m just gonna say icon. Put under services and linked in icon and let’s choose the bus this time then style and I'm gonna say for example maybe a 100 pixels, okay? Then, press save.
Let say for example we wanted this to be contact us, I think you get the idea of what I'm trying to say here in terms of you know when you see those layouts where you know on the landing pages or whatever and you got the icons in the design. So this is how you can start to use the beaver builder to be able to make these type of edit. So let say for example use over here, make sure it’s still 100 pixels then press save and I think you get the idea and you can also change colors. So let's say for example, we want this to be more the green color, press save and now as you can see the icon color has been changed. So that's some good examples here. Just what have can be done gallery, icon maps, menu and post feature. The post feature is quite nice you know if you wanted for example maybe spruce up your blog landing page, using this editor you can just simply drag it over then all your latest posts. I quickly show you over here, you can add post by categories post type, post page and etc. and then ordered by. So if for example you wanted to show your most popular content, you know the content that gets the most comments and people appreciating it you might wanna organized but comment count and then that will show all your latest person have the most comments on it. So again you know just some handy features over here, you can filter by different post by categories, by text, a lot of customization over here then just press save and you will now see for example one of my posts over here that had the most comments on it.
Now doesn't look too good in this particular format because it's a bit of a narrow content area over here but if this was full words for example we might be able to fit two or three of these posts per row but for now I’m just gonna delete this content over here. Okay? Add content and let's see what else I can show you, tabs, subscribe form, social buttons, social buttons is just quite stock standard. You can see show, etc and etc and then just press save then that’s what it looks like over there. What else? Maybe in the comments section as you are viewing this, maybe any of these over here particularly strike you that you want to see a little bit more of what it looks like just let me know and I can maybe record in the follow up video. Pricing table might be interesting to see, edit in a pricing box so let’s just say tests over here and say a price of 36 or whatever and 360 per year per and feature one. So you can add feature and press save so that’s pricing box 1. What I would probably do here so you see how it's taking up the whole wide over here. What I would probably do you know most pricing options I give you three pricing options, I would add content, I would scroll to the top row, add layout and then you now do a three column layout and then you would add one of those pricing boxes per each of these columns. If you have any two pricing options but actually you will have two but that's where I think that’s the pricing box would actually work quite well.
Okay! Advanced module anything else here, maybe testimonials. Testimonials really what is does is kind of like rotates between different testimonials, hitting testimonials and then you edit your testimonials. How I’ve been doing this to other products so let’s have a look here that may be used as a major here. Could be a little bit more for enough, resize as well and then just retyping testimonial one for example then press save and then I'm just gonna simply copy it just so you can see what it does. So you see where we got these buttons over here and then after a few seconds it will do that and then show you next testimonial. So that is advanced modules and let’s just say this particular module you really want to see what it does before you buy beaver builder that helps you to make and buying decision just let me know and I can either record it in a second video or maybe do a screenshot just to show you what it looks like. The other thing is here is Word Press wages and now this is something that a lot of you and developers and real hardcore customizing you gonna love to see because you can actually add all the different Word Press elements of your particular website into your content area. So depending on the plug ins that you have, you might see some additional options over here. So for example, I have something called thrive leads and I could for example incorporate that into this particular page because I have their particular Word Press plug in installed on my website. Either say, you might have different plug ins and this is something that you gonna very much like to see. You know if you've had those questions you know I bought this great little plug in but how can I incorporate you know that subscribed for all that light box or whatever into my particular post and this is how you can do it using the beaver builder. Just got the stock standard where Word Press elements such as archives, calendar these over here again customized to me because of my template using elegant themes, links made a page's RSS. I'll just you know demonstrate one over here so for example recent comments and number of comments to show. Let's say 7 comments and title you just type whatever you want for the title and they are some of the most recent comments on my particular website. So that is what Word Press widget means. So I think you know my intention for this video was initially is quite a basic run through and just a quickly almost kind of just simply show you just the features here of beaver builder. I think it's actually turned out to show you a few more of the actual customization and then you know the editing options that you have and just the flexibility and scope that you have when using this plug in. So I think that’s quite good and I am sure I will still record a second part of this video will show you may be some more advanced editing techniques, maybe as I say you know if there's a particular feature that you really want to know whether it be the beaver builder can do it or not in a particular design and we can definitely look at that and also something that I want to do is actually compare beaver builder to thrive content builder which is the other plugin that I have installed on this particular website. You know there's pros and cons of each I find thrive content builder has more templates than be beaver builder but I do like the ease of using usability of beaver builder compared to thrive. But that being said Shane and Paulino the team behind thrive content builder literally every week releasing updates and improvements. So it's something to keep an eye. For me personally I have both, I actually did purchase both thrive content builder and beaver builder and I enjoy using both but it's really up to you today what you prefer. So definitely have a look at one of my previous videos we had talked about thrive content builder and then also now comparing it to this and then really it is up to you in terms of what is your preference but I think what will be good for a future videos where I actually create a page you know and then show you a page layout and then use both beaver builder and thrive content builder. So I kind of get that look and feel and then you know going to show you the whole process behind it and which one may be a bit easier and less frustrating and etc. But they are these beaver builder for you I hope this helps in terms of making, inform, purchase decision and as I say if you have any comments or questions just let me know either on this video or the post on my website. Thanks for watching and as I say I really do hope that this helps you. Good bye!
06-08-2016 EDIT: Beaver Builder 1.8 Just Launched
I logged into my WordPress today and noticed the upgrade icon and saw it was Beaver Builder 1.8. I have been waiting a while for this one as it presents a major upgrade overhaul for the builder. Full Changelog for you below.
Change Log from 1.7.8
1.8 – 06/07/2016
This update adds a number of new features. Be sure to check out the blog post for detailed info on what was added.
- Added 16 new home page templates.
- Added the ability for theme authors to load third party templates into all version of the builder (including the lite) using the new Template Data Exporter. Please read the docs for more info on that.
- Added the ability to export single templates or groups of templates using the WordPress Exporter.
- Added a patch for the WordPress Importer to prevent it from breaking imports in certain situations.
- Added a setting in the advanced tab to show rows/modules/columns based on if a user is logged in, logged out, or never show them (they only appear while editing). You can also choose the capability logged in users must have to see a row/column/module.
- Added a setting in the advanced tab to reverse the column stacking order on smaller devices.
- Added settings to vertically center or top align content in full height rows and equal height columns.
- Added settings to add a video background to a row using external links instead of the media library.
- Added settings in the Icon Group module to choose individual icon colors and link targets.
- Added settings in the Heading module to set the line-height and letter spacing.
- Added settings in the Separator module to set the width and alignment.
- Added a setting to the Accordion module that makes the first item open by default.
- Added a setting in the Posts module to customize the “No Posts Found” message.
- Added settings to all modules with buttons for fading in icons on hover and choosing a hover opacity for transparent backgrounds.
- Added settings to the Contact Form module for customizing the button.
- Made changes to the Contact Form module so the recipient's email address is no longer visible in the markup.
- Captions are now displayed in the Gallery module's lightbox.
- PHP files can now be used to register templates and load template data from the database.
- Added caching to FLBuilderModel::get_user_template_type to cut down on the number of queries it runs.
- The form validation required message is now translatable.
- Empty index files are now added the cache directories to prevent browsing.
- Added a button for resizing settings lightboxes so they fill the screen.
- Added support for oEmbeds in the Text Editor module.
- Changed row and module templates to saved rows and modules.
- Tweaked templates admin settings terminology.
- Tweaked draft and discard button terminology.
- Increased size of the publish button.
- Added a setting to collapse inactive items in accordion mode for the Menu module.
- Updated Font Awesome.
- Sticky posts are no longer included when using the fl_builder_insert_layout shortcode.
- Added an above title option for image position in the Posts module.
- Fixed issues with exporting and importing new templates.
- Fixed issues with layout CSS/JS not exporting and importing.
- Fixed incorrect module paths on Windows servers.
- Fixed the alignment setting preview for the Heading module.
- Fixed the incorrect load order of FLBuilder::render_query CSS in IE.
- Fixed RTL issues with the Content Slider and Post Slider modules.
- Fixed an IE11 bug with images that have height:auto in equal height columns.
- Fixed a PHP notice when adding Post Slider and Post Carousel modules to the page.
- Fixed a PHP error when the time field is used inside a nested form.
- Fixed a bug with duplicate rows adding backslashes to text.
- Fixed a bug with nested Tab modules via the fl_builder_insert_layout shortcode.
- Fixed an issue with sticky posts being included when using the fl_builder_insert_layout shortcode.
- Fixed a PHP notice when using the fl_builder_insert_layout shortcode on a 404 page.
- Fixed TinyMCE link editor not closing since WordPress 4.5.
- Fixed a fatal error with the new Template Data Exporter caused by unsupported syntax in certain PHP versions.
- Fixed a PHP warning caused by plugin activation.
- Fixed the display of SVG files in the Photo module.
- Fixed CSS specificity issues in IE when using the fl_builder_render_layout shortcode.
Get the updated Beaver Builder here
And we will throw in a template of your choice from our vast library of top WordPress themes.