Introducing Dynamik Website Builder 2.0

This update was a long time coming, but it’s finally here. Not earth shattering, but not too shabby either. I wanted to provide something that you could smoothly transition into, yet enjoy notable refinements and new features. So let’s see what I came up with.

All New Front-End CSS Builder

First, I completely re-built the Front-End CSS Builder and Style Editor tool. Actually, I created a new Plugin called FE CSS Builder that can be used on other themes and then integrated that into Dynamik and both Genesis Extender and Beaver Extender Plugins. It’s more refined and I believe provides a more intuitive front-end styling experience. One of the coolest bits is that fact that the element selector drop-down menu now highlights elements while hovering over them in the menu. In other words, there’s no need to select a specific element to see the highlight effect, it happens on the fly. Now I rarely even look at the names of the elements in the menu, but instead let the highlighted areas tell me what will be affected by the CSS code.

Genesis/Dynamik Hooks Map

Now, when you have the FE CSS Builder enabled and you’re logged into your site, you’ll find not only a CSS Builder icon, but a Hooks Map icon as well. When clicked it reveals the names and locations of all the Genesis and Dynamik hooks, all live on the front-end of your site. This can be super useful for locating that precise hook to use when working the things like Custom Widget Areas, Hook Boxes and custom functions.

Fixed “Sticky” Header Feature

One, or two, or maybe a few hundred requests came through for this one. 🙂 I resisted making this too big or option-rich as I wanted to make sure it didn’t conflict with the many no-coding design options. So it’s a simple feature, but super flexible and simply implements fixed header functionality with a single “Save Changes”, which I know many members will appreciate. Be sure to check out the screencast below to see some of the various ways it can be customized.

All New Code Editor Integration

The Custom CSS, Functions, and JS editors that were previously using the CodeMirror code editor are now powered by the much more powerful and refined Ace Editor. This provides much better find/replace search functionality, code snippets (can finish writing code for you based on suggestions as you type), and parse error messaging that can help pinpoint poor or even broken code.

Other Notable Features & Refinements

  • Ace Editor integration and AJAX save functionality for the Dynamik Skin {CSS} {PHP} {JS} code editors.
  • New sections in the back-end CSS and PHP Builder tools.
  • Replaced the “Select All Text” buttons in the Code Builders with “Copy To Clipboard” functionality.
  • Tweaked the Dynamik License page to accommodate requests from members regarding not revealing number of active sites and hiding the license key from plain view.

You can checkout the changelog here: https://cobaltapps.com/dynamik-2-0-changelog/

And be sure to check out the Dynamik 2.0 Intro Screencast as well: