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.

• First read part one, to get a clear understanding of the concept of the Cobaltapp product Dynamik
• Follow the discussions on the facebook group

hammWe would never have bought Beaver Extender 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 Facebook Beaver Builder group. 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 CobaltApps. He saw that ‘some’ Genesis/Dynamik users stepped over to Beaver Builder and with very valid arguments. Among them: ‘What tasks are left for Dynamik if the Beaver Builder plugin does nearly 90% of all page design?’ 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.

Hooks

Like us, many just bought the Beaver Builder plugin and afterwards the Beaver Builder theme and started ‘playing’ with that combination. 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 ‘event’. 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.

Dynamik is setting paramters where you can and programming where you need

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 overwhelming, since you have to learn where all these settings have there influence, since it is the back-end of Dynamik without a preview mode.

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.

After you learned that step, Dynamik offers the following more advanced features under ‘Dynamik Custom’:

  • A complete PHP functions builder (yes, you need PHP knowledge, but the Builder offers many features to make creating/editing functions relatively easy)
  • A JavaScript editor
  • A WordPress/Page template creator
  • Labels and conditionals to place any content anaywhere (a bit like Beaver Tunnels)
  • Create your own widget areas
  • Create you own hook boxes
  • Create your own childtheme after the job within Dynamik is done

extender-hook-map

The integrated visual Extender hooks map

What is Beaver Extender?

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.

What we did not know and just recently ‘discovered’ 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 ‘interactive’ 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 Yellow Pencil. We are not experienced enough yet to compare this one to the Extender approach.

But it is very important to keep track where all CSS changes will be stored. David Waumsley made an article 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 another great article of David.

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 ‘just’ handcoding it all in the Beaver Builder childtheme.

Our first steps

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 had to offer compared to Dynamik. We expected more or less the same……. 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.

front-end-css-beaver-extender

Front-end CSS editor also teaches you on how to code CSS

After the initial version a lot of ‘pre Dynamik’ users asked for the PHP builder, which gave some extra power to the latest version 1.0.3. We think that ‘pre Dynamik’ users might buy Extender just because of that reason. And that might make the market for Beaver Extender a bit larger.

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.

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.

Using Templates in Beaver Extender

When I started writing this part, we were looking for a clear way to explain the differences in the meaning of ‘templates’ in Beaver Builder plugin compared to ‘templates’ within Beaver Extender. Just when I finished the initial piece 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.

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.

In short, templates in Beaver Builder contain your own designed ‘parts’ which are stored as custom post types and can be used in any pagebuilder design. For example a ‘call-out’ row could be a template and can be used at all or certain page.

bb-template

attributesIn the above example I made a template to be shown before the footer on every page. I made the conditional with Beaver Tunnels. 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 ‘default template’ (full width), the ‘no header/footer’ template (landing pages) and the ‘sidebar’ template (right sidebar).

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 ‘Page Attributes’ while in page edit mode.

php-builder-hooks-extender

The PHP Builder might help you develop your PHP skills

Is Beaver Extender right for you?

In our previous article 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 ‘grabbing’ 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.

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 ‘pro’ required design skills within the Beaver Builder playing field.

Is the price right? Well Eric priced it like the Genesis Extender plugin, because of the same functionallity. We don’t know yet if (average) Beaver Builder users will compare the $119 for ‘ust’ 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.

8 Comments

  1. David Waumsley on October 15, 2016 at 13:23

    Thank you Peter. This has saved me a lot of time. I see the Beaver Extender renewals are at 50% which seems a good way to go with the Beaver Builder ones at 40%.

    Eric does great work, but I never used Genesis Extender. For me, this only seems useful if your customers don’t mind you leaving your tools behind when the jobs over.

    Thank you for the mention and kind words 🙂

    • Peter Luit on October 15, 2016 at 13:27

      Thanks David for the extra note on renewal discounts.

  2. Martin on October 15, 2016 at 14:37

    I haven’t used extender on beaver builder but on genesis you can export all your changes as a child theme and then remove the plugin. The client never knows that you used it.

    Is that the same for the beaver version

    • Peter Luit on October 15, 2016 at 19:21

      Genesis on its own does not have an export function to make a child theme. Making a Genesis based child theme is ‘handwork’. If you use Dyanmik you can do ‘that’ in a more interactive way. Yes, and then you can remove Dynamik.

  3. Athlone on October 15, 2016 at 20:28

    Intriguing article and has me thinking. I’m. Looking for quality tools to help me do my job quicker, and although I initially dismissed Beaver Extender, I am reconsidering. Thank you for the indepth article Peter.

    • Peter Luit on October 15, 2016 at 20:36

      Thanks Athlone, make up your mind as objective as possible for the need of BE in specific high-end applications.

  4. Grant on October 16, 2016 at 04:03

    Hi Peter!

    So from what you’ve done with Extender will you be using it on client websites?

    • Peter Luit on October 16, 2016 at 07:53

      Hi Grant, yes I would use it one more complicated applications, where I used Genesis/Dyanmik before. But my market for the Beaver Builder combination will grow faster.

Leave a Comment