{"id":24459,"date":"2017-04-22T09:52:01","date_gmt":"2017-04-22T16:52:01","guid":{"rendered":"http:\/\/wpbeaveraddons.com\/?p=24459"},"modified":"2017-04-22T10:19:29","modified_gmt":"2017-04-22T17:19:29","slug":"beaver-builder-theme-review","status":"publish","type":"post","link":"https:\/\/wpbeaveraddons.com\/beaver-builder-theme-review\/","title":{"rendered":"Beaver Builder Theme Review &#8211; Build Impressive WordPress Websites"},"content":{"rendered":"<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/wpbeaveraddons.com\/go\/bbtheme\/\">Beaver Builder Theme<\/a> is a lightweight, SEO optimized and easy-to-use WordPress theme.\u00a0It comes with an elegant design and various options to control the layout and styling.\u00a0<\/span><\/p>\n<p>The <strong><a href=\"https:\/\/wpbeaveraddons.com\/go\/bbtheme\/\">Beaver Builder theme<\/a><\/strong>\u00a0uses the WordPress customizer for theme options. This makes it\u00a0easy to preview the changes right on the front-end without any delay. The theme also has great support and integration for WooCommerce. So, you can easily build an eCommerce website for yourself or your clients.<\/p>\n<p>Extensive documentation and an array of hooks &amp; filters will make it a developer&#8217;s favorite theme. On the other hand, easy to use options, essential design elements and typography controls are a huge time saver.<\/p>\n<p>Here&#8217;s an in-depth review of the Beaver Builder Theme.\u00a0This article walks you through all the customizer options and\u00a0features that the theme provides.<\/p>\n<hr \/>\n<p><strong>So, let\u2019s start<\/strong>:<\/p>\n<p>After Installing and activating the <strong><a href=\"https:\/\/wpbeaveraddons.com\/go\/bbtheme\/\">Beaver Builder theme<\/a><\/strong> to your WordPress dashboard, you can check the theme options under<strong> Appearance &gt; Customize<\/strong>.<\/p>\n<p>The customizer allows a live preview of the changes to your site before publishing them. You can navigate to different pages on your site within the preview.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-24460\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/customize-beaver-builder-theme.png\" alt=\"customize beaver builder theme\" width=\"800\" height=\"383\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/customize-beaver-builder-theme.png 800w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/customize-beaver-builder-theme-300x144.png 300w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/customize-beaver-builder-theme-768x368.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<hr \/>\n<p>Let\u2019s look into the <strong>Header Settings<\/strong> and explore the various header layout options it provides. Beaver Builder Theme has three different Header Layouts with their styling options.<\/p>\n<ol>\n<li>Top Bar Layout with Top Bar Style<\/li>\n<li>Header Layout with Header Style<\/li>\n<li>Nav Layout with Nav style<\/li>\n<\/ol>\n<h3>Top Bar Layout:<\/h3>\n<p>You can enable this option to add a sleek top bar to the header. It comes with two layout options as below:<\/p>\n<ul>\n<li>1 Column Layout: the content gets centered aligned.<\/li>\n<li>2 Column Layout: the left column gets left-justified &amp; the right column gets right-justified at larger screen sizes. In mobile view, the two columns become stacked and centered aligned.<\/li>\n<\/ul>\n<h3>Top Bar Style:<\/h3>\n<p>You can set following styles to the Top Bar.<\/p>\n<ul>\n<li>Set Background Color, Opacity, Gradient and Image<\/li>\n<li>Customize the color of links, text, and hover as per your choice.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-24462\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/top-bar-layout.png\" alt=\"top bar layout\" width=\"800\" height=\"353\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/top-bar-layout.png 800w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/top-bar-layout-300x132.png 300w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/top-bar-layout-768x339.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<h4><\/h4>\n<h3>Header Layout:<\/h3>\n<p>This section lets you set the Header layout. Settings for this section apply to the main Header and Menu area. You get a variety of options like:<\/p>\n<ul>\n<li><strong>Nav Bottom<\/strong>: Adjust the Padding of the Header Menu. Also, you can enable the Fixed Header or Disable it when the page scrolls. Apart from this, you can also set Content Layout settings to None\/ Text\/ Social Icons or both.<\/li>\n<li><strong>Nav Right\/Left\/Center<\/strong>: For all the three Nav style you can adjust the Padding and set Sticky Header for the page.<\/li>\n<li><strong>Nav Center + Inline Logo<\/strong>: Along with the Padding and fixed Header, an inline logo will appear on the Left or Right side of odd menu items.<\/li>\n<li><strong>Nav Vertical Left\/Vertical Right<\/strong>: Main Header and menu items appear in a vertical bar along the left or right side of the page. But fixed header setting would not be found in left and right Nav layout. You can customize setting for the width and padding of the left or right bar as required.<\/li>\n<\/ul>\n<h3>Header Style:<\/h3>\n<p>You can style the Background and Text of the main Header and Menu as per your desired look and feel.<\/p>\n<ul>\n<li>Background Options: You get <strong>four styling<\/strong> options to adjust Header &amp; Menu, i.e., Background Color, Opacity (to add transparency to the background), Gradient, and Image.<\/li>\n<li>Text: You can set Text color, Link color, and Hover color.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-24463\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/header-layout.png\" alt=\"bb header layout\" width=\"800\" height=\"353\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/header-layout.png 800w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/header-layout-300x132.png 300w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/header-layout-768x339.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<h4><\/h4>\n<h3>Header Logo:<\/h3>\n<p>A logo is very crucial for website branding. Beaver Builder theme gives you two options to choose from, either go for Text or Image as the logotype. If you choose Text, you can set its Font Size, Weight (Normal &amp; Bold) and Style.<\/p>\n<h3>Nav Layout:<\/h3>\n<p>Adjust the spacing between navigation menu items. You can Enable or &amp; Disable setting for search Icon. For mobile navigation, select a Menu Button or a Hamburger Icon.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-24464\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/nav-layout.png\" alt=\"bb nav layout\" width=\"800\" height=\"353\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/nav-layout.png 800w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/nav-layout-300x132.png 300w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/nav-layout-768x339.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<h3><\/h3>\n<p>Beaver Builder Theme provides you control over layout styling. You can set the layout for Blog, Archive, Single Post, and WooCommerce. Let&#8217;s check the options provided for each of these.<\/p>\n<h3>Blog Layout<\/h3>\n<p>Set the layout for Blog using the options provided in this section.<\/p>\n<p>Sidebar Settings in Blog Layout:<\/p>\n<ul>\n<li>You can set <strong>Sidebar<\/strong> Position\/Size\/Display. If you adjust the page to No Sidebar then, the blog will be displayed in full screen.<\/li>\n<li>If you save the Sidebar <strong>Display setting<\/strong> to Desktop Only, then the Sidebar will not be visible on mobile devices.<\/li>\n<\/ul>\n<p>Post Settings in Blog Layout:<\/p>\n<ul>\n<li>You can make it <strong>Visible<\/strong> to your visitors or <strong>Hide<\/strong> the Post Author\/Date and Comment Count.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-24465\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/bb-content-customizer.png\" alt=\"bb content customizer\" width=\"800\" height=\"353\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/bb-content-customizer.png 800w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/bb-content-customizer-300x132.png 300w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/bb-content-customizer-768x339.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3>Archive Layout<\/h3>\n<p>Do you need an Archive or not it totally depends on you. If you are planning for a blogging website, you can safely forget about the one. But if your site has content that users might find interesting after a certain time, then an Archive can be considered.<\/p>\n<p>Set the following for Archive Layout:<\/p>\n<ul>\n<li><strong>Show Full Text<\/strong> &#8211; If you select No, the excerpt will be shown.<\/li>\n<li><strong>&#8220;Read More&#8221; Text<\/strong>&#8211; Set anything related to your blog posts like Learn More, Know More, Buy Now, etc.<\/li>\n<li><strong>Featured Image<\/strong> &#8211; You can set Featured Image: Beside Post, Above Titles, Above Post or Hidden, whichever suits your need.<\/li>\n<\/ul>\n<h3>Post Layout<\/h3>\n<p>Settings to Post Layout lets you reset the entire post page setting. You can customize full page of blog post allowing to what all categories you want your user should look.<\/p>\n<p>Set either Visible Or Hidden to following:<\/p>\n<ul>\n<li>Featured image<\/li>\n<li>Post categories<\/li>\n<li>Post Tags<\/li>\n<li>Prev\/ Next Post links<\/li>\n<\/ul>\n<h3>WooCommerce Layout<\/h3>\n<p>As the name suggests you can make complete customization for your shopping website.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-24466\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/woocommerce-layout.png\" alt=\"woocommerce layout\" width=\"800\" height=\"353\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/woocommerce-layout.png 800w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/woocommerce-layout-300x132.png 300w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/woocommerce-layout-768x339.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>You get <strong>three options<\/strong> to customize the WooCommerce Layout:<\/p>\n<ul>\n<li><strong>Sidebar Settings<\/strong>: It has Sidebar settings same as explained above in Blog Layout.<\/li>\n<li><strong>Add To Cart Button<\/strong>: You can Hide \u201cAdd To Cart\u201d button on product category page. But I would like to suggest that you keep Add To Cart Button visible to every product category page. User finds it comfortable and convenient while shopping online.<\/li>\n<li><strong>WooCommerce Styling<\/strong>: Enable or disable the theme\u2019s custom WooCommerce styles.<\/li>\n<\/ul>\n<h3>Footer Customization<\/h3>\n<p>Beaver Builder theme gives full control over to your site\u2019s Footer appearance. Theme options panel has two different Footer Layout with their Styling Options.<\/p>\n<ul>\n<li><strong>Footer Widget Layout<\/strong> &#8211; You can set Footer Widgets as Disable, All Pages or Homepage Only.<\/li>\n<li>Footer Widgets Style &#8211; Same as Styling options as mentioned in \u201cTop Bar Style.\u201d<\/li>\n<li><strong>Footer Layout<\/strong> &#8211; Site Footer Layout is the bottom bar that anchors the website. You can keep Text, Social Icon, Text &amp; Social Icons, and Menus in Footer Column Layout.<\/li>\n<li>Footer Style &#8211; Same settings as mentioned in \u201cTop Bar Style.\u201d<\/li>\n<\/ul>\n<p>Apart from this, you can also set <strong>Parallax Effect to Footer area<\/strong>. Now, this is something unique and stylish \ud83d\ude09<\/p>\n<h3>Footer Widgets Customization<\/h3>\n<p>The widget customizer panel lets you add a widget, remove or reorder. Like in WordPress dashboard, you can here in the customizer panel of Beaver theme set the Primary Sidebar &amp; Footer Widgets up to four columns.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-24467\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/bb-widgets-layout.png\" alt=\"bb widgets layout\" width=\"800\" height=\"353\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/bb-widgets-layout.png 800w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/bb-widgets-layout-300x132.png 300w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2017\/04\/bb-widgets-layout-768x339.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<hr \/>\n<h3>Have Your Custom CSS Code?<\/h3>\n<p>You can make use of the\u00a0<strong><a href=\"http:\/\/kb.wpbeaverbuilder.com\/article\/159-customizer-settings-the-code-tab\" target=\"_blank\" rel=\"noopener noreferrer\">Code Tab<\/a>\u00a0<\/strong>in the customizer. It gives you the ability to add HTML, CSS, Header, Footer or JavaScript code into the Beaver Builder Theme&#8217;s markup.<\/p>\n<h3>Export or import Customizer settings:<\/h3>\n<p>It is very easy to export or import Customizer settings in the Beaver Builder theme. You can either save the settings for a website or import the settings from another site.<\/p>\n<p>As said above, Beaver Builder Theme settings are made through the WordPress Customizer, so you can easily export your theme&#8217;s settings and import them elsewhere by just installing the <strong><a href=\"https:\/\/wordpress.org\/plugins\/customizer-export-import\/\" target=\"_blank\" rel=\"noopener noreferrer\">Customizer Export\/Import Plugin<\/a><\/strong>.<\/p>\n<h3>Pricing<\/h3>\n<p>Beaver Builder Theme is a premium theme and comes bundled with the premium version of the Popular WordPress Page Builder Plugin &#8211;\u00a0Beaver Builder. The theme is available only with the <a href=\"https:\/\/wpbeaveraddons.com\/go\/bbpricing\/\" target=\"_blank\" rel=\"noopener noreferrer\">Pro Package priced at $199<\/a>. This package gives you access to the Beaver Builder Plugin, Beaver Builder Theme, support and upgrades for 1 year for both theme and plugin. You can use the theme and plugin on unlimited sites.<\/p>\n<p>As the theme is available only with $199 package, it is expensive as compared to the other themes available in the market. But, it&#8217;s worth the investment.<\/p>\n<hr \/>\n<p>You have got every reason to say Yes to this theme. Set yourself for creating a sales page, a perfect landing page, website for a creative agency, an eCommerce store, portfolio, multiple blog layouts, and a lot more.<\/p>\n<p>Beaver Builder theme is also a developer friendly theme as it comes with an array of <a href=\"http:\/\/kb.wpbeaverbuilder.com\/article\/143-theme-action-reference\" target=\"_blank\" rel=\"noopener\"><strong>Hooks<\/strong><\/a> and <a href=\"http:\/\/kb.wpbeaverbuilder.com\/article\/144-theme-filter-reference\" target=\"_blank\" rel=\"noopener\"><strong>Filters<\/strong><\/a>. Altogether the design and appearance of Beaver Builder theme are impressive.<\/p>\n<p>So, get the BB theme and share your excellent website designs in the comment below. If you have a question related to the Beaver Builder theme feel free to comment. I would be happy to help you \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Beaver Builder Theme is a lightweight, SEO optimized and easy-to-use WordPress theme.\u00a0It comes with an elegant design and various options to control the layout and styling.\u00a0 The Beaver Builder theme\u00a0uses the WordPress customizer for theme options. This makes it\u00a0easy to preview the changes right on the front-end without any delay. The theme also has great&hellip;<\/p>\n","protected":false},"author":1274,"featured_media":25387,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[4,27],"tags":[35,36,37],"acf":[],"_links":{"self":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/24459"}],"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\/1274"}],"replies":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/comments?post=24459"}],"version-history":[{"count":0,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/24459\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media\/25387"}],"wp:attachment":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media?parent=24459"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/categories?post=24459"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/tags?post=24459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}