{"id":836,"date":"2016-10-15T09:55:00","date_gmt":"2016-10-15T07:55:00","guid":{"rendered":"https:\/\/www.nieuwsmarkt.nl\/?p=836"},"modified":"2017-10-01T09:09:56","modified_gmt":"2017-10-01T07:09:56","slug":"first-impressions-of-beaver-extender","status":"publish","type":"post","link":"https:\/\/www.nieuwsmarkt.nl\/nl\/blog\/2016\/10\/15\/first-impressions-of-beaver-extender\/","title":{"rendered":"First impressions of Beaver Extender"},"content":{"rendered":"<p><strong>For years we have been working with the Genesis\/Dynamik combination. Genesis is still one of the best hook based foundations on which space\/speed effective childthemes can\u00a0be developed. Dynamik is in its basic idea a childtheme, but it acts like a WordPress theme development tool. Cobaltapps saw the Beaver Builder market growing and developed Beaver Extender. Our first impressions.<\/strong><!--more--><\/p>\n<p><em>\u2022 First read <a href=\"https:\/\/www.nieuwsmarkt.nl\/nl\/blog\/2016\/09\/16\/does-beaver-builder-theme-need-cobaltapps-extender\/\">part one<\/a>, to get a clear understanding of the concept of the Cobaltapp product Dynamik<br \/>\n\u2022 Follow the <a href=\"https:\/\/www.facebook.com\/groups\/beaverbuilders\/674644729361546\/\" target=\"_blank\">discussions<\/a> on the facebook group<\/em><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-783\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/09\/hamm-300x300.jpg\" alt=\"hamm\" width=\"240\" height=\"240\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/09\/hamm-300x300.jpg 300w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/09\/hamm-150x150.jpg 150w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/09\/hamm.jpg 512w\" sizes=\"auto, (max-width: 240px) 100vw, 240px\" \/>We would never have bought <a href=\"https:\/\/cobaltapps.com\/downloads\/beaver-extender-plugin\/\" target=\"_blank\">Beaver Extender<\/a> if Eric Hamm would not have opened up his mind as he did the last month, by playing a much more active role in the <a href=\"https:\/\/www.facebook.com\/groups\/beaverbuilders\/\" target=\"_blank\">Facebook Beaver Builder group<\/a>. He learned that the market around theme development is changing and that the Genesis approach does not seem the only way to go for his company <a href=\"https:\/\/cobaltapps.com\/\" target=\"_blank\">CobaltApps<\/a>. He saw that &#8216;some&#8217;\u00a0Genesis\/Dynamik users stepped over to Beaver Builder and with very valid arguments. Among them: &#8216;What tasks are left for Dynamik if the Beaver Builder plugin does nearly\u00a090% of all\u00a0page design?&#8217; Most just answered with header (including menu) and footer. And most complained specially about the complicated way Dynamik had become in setting up the various menus. Now we experience a possitive change in the way Eric is looking to the market and also part of his excisting customers in the Beaver Builder community.<\/p>\n<h3>Hooks<\/h3>\n<p>Like us, many just bought the Beaver Builder plugin and afterwards the Beaver Builder theme and started &#8216;playing&#8217; with that <a href=\"https:\/\/www.wpbeaverbuilder.com\/pricing\/\" target=\"_blank\">combination<\/a>. And many were surprised by the very well developed hook structure offered in the Beaver Builder theme. And besides that setting up the menu was just a one click &#8216;event&#8217;. Did that throw away the Genesis\/Dynamik combination forever? Well, that is hard to answer and depends very much on what your demands and skills were (or still are) within Dynamik.<\/p>\n<blockquote><p>Dynamik is setting paramters where you can and programming where you need<\/p><\/blockquote>\n<p>Setting parameters is the most common starting point when you start to use Dynamik. All definable sections have their own set of parameters in colors, fonts, margins, paddings and other possible options. At first it will be <a href=\"https:\/\/www.nieuwsmarkt.nl\/nl\/blog\/2016\/09\/16\/does-beaver-builder-theme-need-cobaltapps-extender\/\">overwhelming<\/a>, since you have to learn where all these settings have there influence, since it is the back-end of Dynamik without a preview mode.<\/p>\n<p>Once you learned to use that, the next step is to do your own dedicated CSS styling (if needed) in the front-end CSS-Builder. A very nice and interactive tool, which displays direct results on the page where you insert\/edit your own CSS code. The learning curve requires to know CSS a bit more than average.<\/p>\n<p>After you learned that step, Dynamik offers the following more advanced features under &#8216;Dynamik Custom&#8217;:<\/p>\n<ul>\n<li>A complete PHP functions builder (yes, you need PHP knowledge, but the Builder offers many features to make creating\/editing functions relatively\u00a0easy)<\/li>\n<li>A JavaScript editor<\/li>\n<li>A WordPress\/Page template creator<\/li>\n<li>Labels and conditionals to place any content anaywhere (a bit like Beaver Tunnels)<\/li>\n<li>Create your own widget areas<\/li>\n<li>Create you own hook boxes<\/li>\n<li>Create your own childtheme after the job within Dynamik is done<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/10\/extender-hook-map.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-906\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/10\/extender-hook-map.jpg\" alt=\"extender-hook-map\" width=\"700\" height=\"405\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/10\/extender-hook-map.jpg 1440w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/10\/extender-hook-map-300x174.jpg 300w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/10\/extender-hook-map-768x444.jpg 768w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/10\/extender-hook-map-1024x592.jpg 1024w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<blockquote><p>The integrated visual Extender hooks map<\/p><\/blockquote>\n<h3>What is Beaver Extender?<\/h3>\n<p>First a bit of history around the Extender products form CobaltApps. We did not use Genesis Extender, which is a plugin (not a childtheme like Dynamik). That plugin was developed for editing existing Genesis childthemes. Since we had Dynamik we could create our own childthemes by exporting all settings, code and needed media files. Exporting child themes based on using Dynamik was one of our favorite features.<\/p>\n<p>What we did not know and just recently &#8216;discovered&#8217; is that the Extender products does not use the back-end CSS and parameter settings for each component in the childtheme. That means that the learning curve to use Extender requires more direct skills of any combination of CSS, JavaScript and PHP. CSS could be done like in Dynamik in the front-end and competes in a way with other &#8216;interactive&#8217; CSS tools. It is a matter of taste to like the Extender setup. There are many more front-end CSS tools, which might offer even a more intuitive way of working. Recently we started to use <a href=\"https:\/\/codecanyon.net\/item\/yellow-pencil-visual-css-style-editor\/11322180\" target=\"_blank\">Yellow Pencil<\/a>. We are not experienced enough yet to compare this one to the Extender approach.<\/p>\n<p>But it is very important to keep track where all CSS changes will be stored. David Waumsley made an <a href=\"http:\/\/only.beaverjunction.com\/where-to-put-css-in-beaver-builder\/\" target=\"_blank\">article<\/a> on all the possible variations and without knowing what and where you are editing CSS, things can become confusing. If you want to know more about the various front-end CSS editors, we like to refer to <a href=\"http:\/\/only.beaverjunction.com\/css-editors-for-beaver-builder\/\" target=\"_blank\">another great article<\/a> of David.<\/p>\n<blockquote><p>In short Beaver Extender goes far beyond the theme Customizer offered in the front-end. Once you learn how to use Beaver Extender with some PHP and CSS knowledge, you will discover the power of moving, removing or manipulating every single element in the Beaver Builder theme is much easier compared to &#8216;just&#8217; handcoding it all in the Beaver Builder childtheme.<\/p><\/blockquote>\n<h3>Our first steps<\/h3>\n<p>Well, we have to admit, we were a bit confused at first sight. But that was we did not prepair ourselfs very well on what Beaver Extender\u00a0had to offer compared to Dynamik. We expected more or less the same&#8230;&#8230;. But working with it for a while learned us that all the Dynamik settings options were not missing and would not add any value to page templates (with their own local CSS settings) and all global CSS settings offered by the Beaver Builder plugin and the Beaver Builder theme customizer. It would simply become an overload if Beaver Extender would also offer all the back-end CSS like in Dynamik.<\/p>\n<p><a href=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/10\/front-end-css-beaver-extender.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-931\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/10\/front-end-css-beaver-extender.jpg\" alt=\"front-end-css-beaver-extender\" width=\"700\" height=\"407\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/10\/front-end-css-beaver-extender.jpg 1440w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/10\/front-end-css-beaver-extender-300x174.jpg 300w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/10\/front-end-css-beaver-extender-768x446.jpg 768w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/10\/front-end-css-beaver-extender-1024x595.jpg 1024w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<blockquote><p>Front-end CSS editor also teaches you on how to code CSS<\/p><\/blockquote>\n<p>After the initial version a lot of &#8216;pre Dynamik&#8217; users asked for the PHP builder, which gave some extra power to the latest version 1.0.3. We think that &#8216;pre Dynamik&#8217; users might buy Extender just because of that reason. And that might make the market for Beaver Extender a bit larger.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/186076746?title=0&amp;byline=0&amp;portrait=0\" width=\"700\" height=\"394\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<blockquote><p>Have a look at some of the nice features in the front-end CSS editor, which cannot be done by the customizer, but can be done by Extender without coding.<\/p><\/blockquote>\n<p>So, we were looking for the added value in the Extender Custom settings, like we were used to use in Dynamik. First of all before you consider buying beaver Extender, know that this requires know-how before using any of the custom settings. Beaver Extender is an advanced plugin for more advanced developers\/designers.<\/p>\n<h3>Using Templates in Beaver Extender<\/h3>\n<p>When I started writing this part, we were\u00a0looking for a clear way to explain the differences in the meaning of &#8216;templates&#8217; in Beaver Builder plugin compared to &#8216;templates&#8217; within Beaver Extender. Just when I finished the initial\u00a0piece of the article Eric Hamm published a little tutorial on this, which made clear on how the term templates are used in the Beaver Builder childtheme to change the setup the standard template in the parent theme. Watch this movie and hopefully it will make things clear to you as well, because the word templates might confuse you the first time you see it in Beaver Extender.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/187398974?title=0&amp;byline=0&amp;portrait=0\" width=\"700\" height=\"394\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<blockquote><p>In the tutorial above you can also learn about the power of using some base PHP code and make small modifications the change the basic template files in the Beaver Builder child theme.<\/p><\/blockquote>\n<p>In short, templates in Beaver Builder contain your own designed\u00a0&#8216;parts&#8217; which are stored as custom post types and can be used in any pagebuilder design. For example a &#8216;call-out&#8217; row could be a template and can be used at all or certain page.<\/p>\n<p><a href=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/10\/bb-template.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-872\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/10\/bb-template.jpg\" alt=\"bb-template\" width=\"700\" height=\"285\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/10\/bb-template.jpg 1440w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/10\/bb-template-300x122.jpg 300w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/10\/bb-template-768x313.jpg 768w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/10\/bb-template-1024x417.jpg 1024w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-854 alignright\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/10\/attributes.jpg\" alt=\"attributes\" width=\"200\" height=\"232\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/10\/attributes.jpg 293w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/10\/attributes-259x300.jpg 259w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/>In the above example I made a template to be shown before the footer on every page. I made the\u00a0conditional with <a href=\"https:\/\/beavertunnels.com\/\" target=\"_blank\">Beaver Tunnels<\/a>. In Erics tutorial you see the concept of changing the base of some of the basic templates used in Beaver Builder theme, which are in fact standard template files to determine the base of your layout, in BB case the &#8216;default template&#8217; (full width), the &#8216;no header\/footer&#8217; template (landing pages) and the &#8216;sidebar&#8217; template (right sidebar).<\/p>\n<p>You could use Beaver Extender for creating a left hand sidebar template by copying the basic sidebar code and change the position of the sidebar. After you created that, it will appear as a template under &#8216;Page Attributes&#8217; while in page edit mode.<\/p>\n<p><a href=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/10\/php-builder-hooks-extender.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-913\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/10\/php-builder-hooks-extender.jpg\" alt=\"php-builder-hooks-extender\" width=\"700\" height=\"406\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/10\/php-builder-hooks-extender.jpg 1440w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/10\/php-builder-hooks-extender-300x174.jpg 300w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/10\/php-builder-hooks-extender-768x446.jpg 768w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/10\/php-builder-hooks-extender-1024x594.jpg 1024w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<blockquote><p>The PHP Builder might help you develop your PHP skills<\/p><\/blockquote>\n<h3>Is Beaver Extender right for you?<\/h3>\n<p>In our <a href=\"https:\/\/www.nieuwsmarkt.nl\/nl\/blog\/2016\/09\/16\/does-beaver-builder-theme-need-cobaltapps-extender\/\" target=\"_blank\">previous article<\/a> we were kind of negative about the potential of Beaver Extender, because we kind of misunderstood the concept compared to Dynamik. Now that we played a bit with it, we think that Eric made good choices on how to setup Extender just like Genesis Extender for the existing Genesis child themes. The added value is for sure &#8216;grabbing&#8217; all individual elements much easier compared to using an inspector in the browser and then copy\/paste the code to the customizer and then change it (and that is only for CSS), because an inspector does not grab any PHP code. If you know little about PHP, Extender might learn you to start using it by modifying various parts and you also learn where Extender places the template files in the child theme to get a clear feeling of the basic concepts of using them in your development environment.<\/p>\n<p>Is it right for you? Again it al depends, that was clear from the beginning. But after playing with it we could position Extender much better. It is the right starting tool to get to know on how to use PHP and\/or CSS in a more professional and structured way within more &#8216;pro&#8217; required design skills within the Beaver Builder playing field.<\/p>\n<p>Is the price right? Well Eric priced it like the Genesis Extender plugin, because of the same functionallity. We don&#8217;t know yet if (average) Beaver Builder users will compare the\u00a0$119 for &#8216;ust&#8217; the Beaver Extender plugin with the price of $199 for the pro version of Beaver Builder (plugin and theme), both offered with one year support. That remains to be seen, next year we will know more about that, if Eric keeps an open mind in the beaver Builder community where he is very active now. And thanks to that changed attitude, we will for sure use Beaver Extender in more complicated web solutions.<\/p>","protected":false},"excerpt":{"rendered":"<p>For years we have been working with the Genesis\/Dynamik combination. Genesis is still one of the best hook based foundations on which space\/speed effective childthemes can be developed. Dynamik is in its basic idea a childtheme, but it acts like a WordPress theme development tool. Cobaltapps saw the Beaver Builder market growing and developed Beaver Extender. Our first impressions.<\/p>","protected":false},"author":2,"featured_media":782,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,3],"tags":[],"class_list":["post-836","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-review","category-test"],"_links":{"self":[{"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/posts\/836","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/comments?post=836"}],"version-history":[{"count":4,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/posts\/836\/revisions"}],"predecessor-version":[{"id":956,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/posts\/836\/revisions\/956"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/media\/782"}],"wp:attachment":[{"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/media?parent=836"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/categories?post=836"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/tags?post=836"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}