The Dynamik Website Builder for Genesis – A First Look

In the series of WordPress Frameworks, we continue with the Dynamik Website Builder for Genesis Review.

The Dynamik Website Builder – also dubbed DWB and Dynamik – is a creation of Eric Hamm. Yes, that is right, the same guy who also created the Catalyst Framework.

Technically, the Dynamik Website Builder is a Genesis child theme. In an earlier post, the question “Is it a child theme, or is it a framework?” was answered in favor of the framework. Dynamik is empowered 800+ design options, considerable more than child themes usually incorporate. BTW, the Genesis Framework has been covered here the other day.

Dynamik adds three pages to the Genesis panel:

• Dynamik Settings
• Dynamik Design
• Dynamik Custom

These will be referred to as the Dynamik panel. Let us have a closer look at these pages. You will notice that the blue [Save Changes] button is always visible and within reach for quick saves.

The Dynamik Settings

In this part of the Dynamik Panel you define the general settings and the structure of your website.

The Dynamik Settings page serves three horizontal tabs:

• Child Theme Info
• General Settings
• Import/Export

The Child Theme Info screen provides a brief introduction to Dynamik and refers to resources like the forum, tutorials and screencasts. This page also summarizes your WordPress environment – the version numbers of PHP, WordPress, and Dynamik.

At the General Settings you configure how to handle Page Titles of all or only of selected page IDs, whether you want to include the Genesis In-Post Options with certain Custom Post Types, activate WordPress Post Formats, enable the Responsive Design Options, and set your Custom Thumbnail Sizes. When setting your preferences for the thumbnails, you can also opt for one of the two Thumbnail Modes – Resize or Crop.

When enabled, Dynamik supports the following WordPres Post Formats:

• Standard
• Aside
• Audio
• Chat
• Gallery
• Image
• Link
• Quote
• Status
• Video

Activating the WordPress Post Formats turns Dynamik into a full featured tumblog, since it not only supports Post Formats, but it will also load the relevant icon and attach it to the post.

The Design Options Control lets you choose from three levels of design in terms of details. You can choose for:

• Structure & Settings – you will only see the non-styling options like content structures, placement, settings, and the like
• Design Standard – the majority of the Dynamik Options will visible, but only some Margin and Padding options
• Kitchen Sink – you will encounter a full display, including all Margin and Padding options

The last tab within the Dynamik Settings is Import/Export. For the export respectively import job on hand, you can choose which settings you to include:

• Theme Settings
• Custom CSS
• Custom Functions
• Custom Conditionals
• Custom Widget Areas
• Custom Hook Boxes

The above mentioned settings are all configured at the Dynamik Settings page and the Dynamik Custom page. The settings from the Dynamik Design page are not included here, nor the settings from the Genesis panel. The latter have their own Import/Export facilities (Genesis >> Import/Export).

The Dynamik Design Options

On this page you create and maintain the styling of the Dynamik child theme. All customization options are grouped and packed together under 21 tabs:

Body Wrap Header Nav Subnav HeaderNav Content Comments Sidebars Footer

Widths EZ Widgets Search Crumbs Tax Author Post Nav Responsive Images Skins Import/Export

You will probably admit, that this is a very comprehensive list. But there is no need to be overwhelmed. Basically, every tab serves a list of styling elements relevant to the name stated on the tab. Setting the preferred values for these elements is a matter of point-and-click.

Let us have look at the Content tab, which serves the most extensive list of options.

With the first six elements you can tweak the presentation of the Headings. First you select your preferred font. Dynamik offers standard and Google fonts to choose from.

The second step is to set the size for the different headings (H1-H6) in px or em. Next you choose your colors – either with the help of a color picker, or you can enter the hex code directly.

Last but not least – as far as the headings are concerned – you pick your colors for the H2 heading link in visited and hover state.

In a similar approach you proceed with the Content Byline, Paragraph, Blockquote, Image Caption, Meta, Backgrounds, Borders, Paddings and Margins, and finally the list style type. Your options here are none, disc, circle, and square.

As you will understand, the list of options for the other components is less broad than the gamut of options concerning the content area.

At the Wrap tab, you can choose between two different structure options for the wrap. The default setting is the Fixed Design, also known as a boxed design. You can also choose for a Fluid Design – aka stretched design (as here above). Changing the wrap structure is a matter of clicking a radio-button.

The Widths tab lets you set your desired widths for the content area and the sidebar or sidebars for the six Genesis layouts (Genesis >> Theme Settings >> Default Layout).

The EZ Widget Areas are a very interesting feature. With these control options, you can easily activate and customize the following widget areas:

• Static Homepage – helps you build and style your static homepage, you can choose – among others – from 49 predefined homepage layouts
• Homepage Extras – activating a static homepage sidebar or a homepage slider is a matter of a mouse click
• Feature Top – these widget areas are displayed before the content area and the slider, you can choose from six predefined layouts and add here your styling
• Fat Footer – lets you add and style a widgetized footer with up to four areas, for which you can choose from six predefined footer layouts – again just a matter of pulling down a menu

Please note that the slider dimensions as configured at the above mentioned Home EZ Widgets Area Extra, will overrule the settings entered on the Genesis >> Slider Settings page.

By default, Dynamik incorporates three widgetized areas – header right, and two sidebars. However, you can add about any custom widget area you want. While exploring Dynamik, it was quite easy to create six additional widgetized areas without even having to look at the PHP code.

The following widget areas were created on the fly:

• the EZ Home Slider – in this area you can basically add any slider; customers of Dynamik can download the Nivo Slider and Showcase Gallery plugins from the forum – gratis!
• four EZ Fat Footer areas – just like the EZ Home Slider created at the EZ Widget Areas
• after_post_dwb – a Custom Widget Area on single post pages created at Dynamik Custom >> Widget Areas

Dynamik installs with the same seven custom widgets as the Genesis child themes by StudioPress:

• Category Menu
• eNews and Updates
• Featured Page
• Featured Posts
• Latest Tweets
• Page Menu
• User Profile

With the Dynamik Design Import/Export options you can backup, restore and transfer the settings of the Dynamik child theme. At the Dynamik Settings >> Import/Export we have already encountered a similar option for settings from the Dynamik Settings and the Dynamik Custom pages.

The Dynamik CSS Builder

At the top of the Dynamik Design page will you see the [CSS Builder] button. By clicking this button, the Custom CSS Builder will appear. You can enter any custom code manually in the text box of the CSS Builder on the right.

You can also compose your custom CSS code by setting the desired value in the mid column and confirm your settings by clicking the button on the left. This will enter a line of CSS code – the property and the entered value – in the CSS box.

A third way of using the Custom CSS Builder is by clicking on of the [#Custom] buttons. Most font options are accompanied by such a button. This button displays or hides, a box where you can enter or paste custom CSS code.

The Dynamik Custom Options

At this page you can unleash even more Dynamik power by applying Custom CSS, Custom Functions, Custom Conditionals, Custom Widget Areas and Custom Hook Boxes.

The first feature of the Custom Options is an interesting one. It is the Custom CSS tab, which lets you activate the Custom CSS Builder in Front-End Mode.

You can choose between Full Mode and Editor Only Mode. The latter is for those who know how to code CSS. When you are not familiar with CSS, the Full Mode will help you to grab the correct CSS selector and enter your desired values.

Here is how it works. First check only the Activate Front-end CSS Builder box and hit the blue [Save Changes] button. Next, hit the Click To View Front-end link. This will open the front-end of the website in a new browser tab/window.

You will notice a [Show/Hide CSS Builder] button in the upper right corner of your screen – a button not visible for the visitors on your site.

Clicking the [Show/Hide CSS Builder] button will launch the CSS Builder in Full Mode – on the Front-End, at the left side of the screen. A second button appears in the top right corner, the blue [Save Changes] button. You will also notice a bar at the top of the screen to help you select the proper element so that you can style it. What you see on the left side of the screen depends on your choice in the top bar.

Suppose we want to alter the background of the header. How do we achieve that goal?

1. go to the drop-down menu below “Select/Insert an Element to be styled” and select Header. If you want to see the selectors, just click the red [Enable Element Selectors] button, this will be replaced by a green [Disable Element Selectors] button

2. the selected element – here Header – turns green so that we can verify that we have selected the proper element

3. clicking the double arrows button, will enter the selector, including opening and closing brackets, into the Custom CCS Builder box

4. now you can enter the desired values between those brackets, for example

background: #00AAFF;

5. you will see the result instantly; the header background turns blue

6. when you are satisfied with the results, first touch the “Click to Insert Into Custom CSS Editor” and then hit the blue [Save Changes] button

That is how the Custom CSS Builder in Front-End Mode works.

The Custom Functions tab serves a text area where you can enter custom PHP code. When you know PHP you can create your own code. There are also lots of code snippets for the Genesis Framework scattered all over the internet. You might stumble into something useful. And when you open a thread in the StudioPress or Dynamik support forum, you might get some pre-cooked custom code to help you on your way.

In the example above, I have entered a code snippet to replace the primary navigation menu to the top of the page. Snippets and tutorials like this are available from the StudioPress Tutorials page.

With Custom Conditionals you dynamically assign Widget Areas and Hook Boxes to selected pages – single post pages, singular pages, archive pages, etc. These conditions are formulated with WordPress Conditional Tags.

In the example above, I have created a conditional for a single post page, but only regarding the post with ID  ‘717’ – the number between brackets in the Tag field. The ‘is_single_post_dwb’ will be displayed in the drop-down menu – as you will see in a moment.

Creating Custom Widget Areas is a straight-forward process:

1. enter a name
2. select one of the 48 hooks
3. select a conditional that determines in which circumstances the widget area should appear
4. click the blue [Save Changes] button

The 48 available hooks are grouped in the following categories: Page, Header, Content, Loop, Comment, Sidebar, Footer, and EZ Hooks.

In this example, a widget area named ‘after_post_dynamik’ has been created. Since the ‘is_single_post_dwb’ from the Custom Conditional example above has been selected, this widget area will only appear on the single post page of the post with the ID ‘717’.

For the Custom Hook Boxes you use in fact the same hooks as for the Custom Widget Areas. The difference between the two is that while you add one or more widgets to a Widget Area, you enter plain text or code into a Hook Box.

In a Hook Box, you can enter HTML, CSS, PHP or JavaScript. An alternative is displaying a Hook Box with a shortcode.

Recap Dynamik Website Builder for Genesis Review

Dynamik is a great addition to the Genesis Framework. It allows you to create a Genesis based custom website without coding. The structure of the website is shaped partly within the Genesis Theme Settings and for the other part within the Dynamik Settings and the Dynamik Custom Options. The styling of the website is created at the Dynamik Design page.

Dynamik adds 49 predefined static homepage layouts. Including the default blog homepage, you have 50 homepage options to choose from. When you combine this with the possibilities conveyed by the Genesis Connect for BuddyPress and the Genesis Connect for WooCommerce plugins, you have in fact all the tools you need to create any kind of website or blog with the Genesis/Dynamik duo.

You can get additional Dynamik skins from the Dynamik Marketplace. Skins are pre-customized settings for the Dynamik child theme, which are exported from or uploaded to the Dynamik child theme. Applying a new skin is like getting an instant website makeover. At the moment, the Marketplace offers 19 Dynamik Skins – free as well as premium. Individual premium skins are available from $19.

The Dynamik child theme is available for $77 and the Genesis Framework is $59.95 – you need both. A very nice bonus for customers of Dynamik is that they can download the Nivo Slider as well as the Showcase Gallery – both premium plugins by dev7studios – for free from Dynamik the support forum. Just like the Dynamik Theme Cheat Sheet that will get you up-and-running in no time.