{"id":3302,"date":"2016-08-11T18:48:49","date_gmt":"2016-08-11T18:48:49","guid":{"rendered":"http:\/\/wpbeaveraddons.com\/?p=3302"},"modified":"2017-03-15T05:33:11","modified_gmt":"2017-03-15T12:33:11","slug":"beaver-builder-web-design-tips","status":"publish","type":"post","link":"https:\/\/wpbeaveraddons.com\/beaver-builder-web-design-tips\/","title":{"rendered":"10 Tips to Speed up your Web Design Process with Beaver Builder"},"content":{"rendered":"

Beaver Builder has become the favorite page builder plugin for a lot of WP users, developers and agencies.\u00a0At our agency<\/a>, we use Beaver Builder to build client websites. Over the period I and my team have learned some tricks that help us speed up our development process.<\/p>\n

Here’s what we have learned and I hope this will be helpful to a lot of\u00a0Beaver Builder users.<\/p>\n

1. First things first – Deciding the Layout & Color Scheme<\/h3>\n

\"color-scheme\"<\/p>\n

Before you start any web design project, it’s best to have a clear picture of your design, layout, and feature requirements.\u00a0BB has spoiled a lot of designers, many of them now design in the\u00a0browser rather than Photoshop or Illustrator. It’s always good to draw a rough mockup of the layout and mark the sections\u00a0that will be re-used or appear on all the pages.<\/p>\n

I sometimes do this using pen and paper for small websites (5-10 pages). Bigger websites need more planning and in that case, you can use Moqups<\/a> or any other wireframing tool of your choice.<\/p>\n

2.\u00a0Preparing the base – Global Settings<\/h3>\n

Global settings allow you to set the max-width (content width), margin, padding and width (for the Row). This is very handy. I\u00a0set this up before starting to work on the layout. This saves me time from editing each row individually and setting up the values.<\/p>\n

For e.g. you are building a full-width layout and content width is 1200px with no margin and a default 20px padding. You can put this in Tools > Global Settings<\/strong>. Now, every time you add a row, these settings will be applied to it automatically.<\/p>\n

\"Beaver<\/p>\n

3. Using saved Modules & Rows<\/h3>\n

Once you have finalized the mockup, it’s time to start building the page or home page. Once the home page is complete, just go to the page and see what modules and sections you will need to re-use. Save those modules and rows. This will\u00a0cut down your development time as you won’t be\u00a0clicking the same options again to achieve the same design.<\/p>\n

This feature is handy when you want to simply re-use something as is or re-use something with further customization. It’s like setting up a boilerplate for your workflow.<\/p>\n

4. Using Global Rows & Modules<\/h3>\n

Do you have a signup form that appears on multiple pages? Does your site have a call to action bar that appears in the\u00a0footer on all the pages? Then you should start using Global Rows & Modules. This lets you\u00a0save a row or module and re-use it in multiple pages.<\/p>\n

But, how is different from saved rows\u00a0& modules?<\/strong><\/p>\n

The biggest advantage of global row \/ module is that when you edit this module \/ row, the changes are applied on all\u00a0the instances of the module \/ row. So, you won’t need to go and edit each module \/ row individually.<\/p>\n

5. Using Color Presets<\/h3>\n

\"colors\"<\/p>\n

This is a nifty feature, I have used it and love it. We often need to re-use a set of colors while building a site. Saving a color to presets when you use it for the first time, will save you some time of re-picking the color or copying the color code from elsewhere.<\/p>\n

\"Beaver<\/p>\n

6. Using Templates<\/h3>\n

Beaver Builder offers\u00a0a bunch of professionally designed, beautiful page templates. You can use these templates to build home page and inner pages quickly. Later on, swap the elements and update the styling as per your requirements.<\/p>\n

Additionally, I also have my own templates that I re-use. These are for common pages like about, contact and a blank page with heading and separator. These templates can be exported and re-used on every site that you build.<\/p>\n

7. Import \/ Export templates<\/h3>\n

As I mentioned above, the templates can be saved and\u00a0imported on another site that you are working on. Similarly, you can also save and export the modules and rows.<\/p>\n

These templates can be exported and re-used on every site that you build. You can check this article<\/a> for more details on import \/ export feature.<\/p>\n

\"beaver-builder-template-export\"<\/p>\n

8. Use BB Theme<\/h3>\n

BB\u00a0Theme has been a great time saver for me.\u00a0It goes along with Beaver Builder really well and has been built thoughtfully to integrate well with Beaver Builder. It has only essential but good number of options that will let you customize the layout and styling.<\/p>\n

Once you are done setting up the basic layout and styling, you can use the builder to build rest of the pages.<\/p>\n

A lot of BB users also recommend using GeneratePress and Dynamik + Genesis. I have used these two themes as well but\u00a0for small sites, I love using BB theme. For bigger sites which need more control over layout and styling, I would go for Genesis + Dynamik. I am yet to build a complete site with GeneratePress. I have only used it for a trial site and loved the features that it offers even in the free version.<\/p>\n

So, pick the one that you find useful. In my case, BB theme wins the vote for\u00a0essential and useful options.<\/p>\n

9.\u00a0Deactivate Caching Plugins<\/h3>\n

Caching plugins can be a big pain. Sometimes we forget that we have a caching plugin active and keep wondering why the changes are not reflecting on the site. It’s always good to deactivate the caching plugins before you start working on a site.\u00a0Activate the plugin after you are done with the changes. To be on a safer side, flush the cache after activating the plugin so that it will rebuild the cache.<\/p>\n

Personally, I also enable the WP_DEBUG<\/strong> mode as it stops BB’s default caching behavior<\/strong> as well.\u00a0This is something I would recommend only to\u00a0intermediate and advanced users. Enabling the debug mode can start displaying some\u00a0PHP warnings or notices depending on the kind of plugins you have on your site.<\/p>\n

10. Using PowerPack Add-on<\/h3>\n

PowerPack\u00a0Beaver Builder Addon<\/a>\u00a0comes with several useful features and modules. Modules like Content Grid, Smart Banners, Smart Headings, Advanced Button, Info Box lets you add content to your site easily and quickly. Then there are form modules which you can use to style forms built with popular form plugins. And, we also have creative modules like Row Separators, Gradient Background etc. that will\u00a0let you be creative with Beaver Builder.<\/p>\n

On top of this, you also get 100+ Row Templates<\/a>\u00a0and 100+ Page Templates<\/a>\u00a0that will let you build websites quickly. We keep adding new templates to our Beaver Builder Templates<\/a> Library.<\/p>\n

\"beaver-builder-templates\"<\/p>\n

That’s all from\u00a0the PowerPack today. Let us know if you have any other tips and tricks that you use to speed up the process.<\/p>\n

Photo Courtesy – Unsplash Creative \/ Design Collection<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Beaver Builder has become the favorite page builder plugin for a lot of WP users, developers and agencies.\u00a0At our agency, we use Beaver Builder to build client websites. Over the period I and my team have learned some tricks that help us speed up our development process. Here’s what we have learned and I hope…<\/p>\n","protected":false},"author":1,"featured_media":3342,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_lock_modified_date":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[4,27,14],"tags":[],"class_list":["post-3302","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips","category-beaver-builder","category-web-design"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/3302"}],"collection":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/comments?post=3302"}],"version-history":[{"count":0,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/3302\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media\/3342"}],"wp:attachment":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media?parent=3302"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/categories?post=3302"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/tags?post=3302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}