How to build a Genesis Child Theme using Dynamik Website Builder

Build your own Genesis child themes with Dynamik Website Builder. I’ve made 20+ video tutorials to help you get started. Change your site’s colour scheme, make the logo bigger and even make your own page templates. You can do it all with Dynamik Website Builder.

On this page I show you how to build a child theme for the Genesis Framework. I used Dynamik Website Builder made by Cobalt Apps.

Dynamik Website Builder is a Genesis Child Theme with both point and click styling tools and built in code editors for CSS and PHP. I think of DWB as Dreamweaver for WordPress.

I recommend that you watch the videos and look at the screen shots first, then read the text.

First we’ll change the logo type from text to image then add an image logo.

Go to…

• Dashboard > Genesis > Dynamik Design.
• Click the Header tab. Scroll down to find, Select logo type.
• Click the link.

The link takes you to, Genesis > Theme Settings.
Scroll down to Header and choose image logo from the drop down list.
Save your settings. (Big blue button.)

Next step…
Go to Dashboard > Genesis > Dynamik Design. Click the Images tab.
Browse for and upload your logo image. It should be 400×100 pixels.
You can change the size of the logo area. But that’s for another video.

Then…
Go to Go to Dashboard > Genesis > Dynamik Design. Click the Header tab.
Scroll down the page until you find the, Select Logo Image section.
Choose your logo from the drop-down list.

You must use the upload process just described before the image will be available to use as a logo in Dynamik Website Builder.

Our next task is to edit the search button background and border colour.

Go to Dashboard > Genesis > Dynamik Design.

• Click the Search tab.
• Scroll down the page to find Search Button Background and Search Button Border.
• Choose a colour using the colour picker or type in your colour code.
• Make sure Color and NOT Transparent is selected from the drop-down list.

The navigation bar…

Genesis has three navigation bars built in. Nav, Subnav and Header Nav. The navigation bar I used was below the site header area so I used the Subnav navigation bar.

Edit the Subnav, navigation bar text colour.

• Go to Dashboard > Genesis > Dynamik Design.
• Click the Subnav tab.
• Find Inactive/Hover/Active page, font colours.
• Use the dialogue box to set the colour of text in your nav bar.
• I chose Inactive Color: FFFFFF, Hover Color: CCCCCC, Active Color: CCCCCC.

This gave me white text for the navbar and Gray text for the active page link on the navbar.

Now we’ll edit the colour of the navigation bar in our Genesis child theme.
Scroll down the Dynamik Design, Subnav page and find background settings for…

• Main Background.
• Inactive Page Background.
• Page Hover Background.
• Active Page Background.

In the video I set the first three background colours to #ED4C1B.
I set Active Page Background colour to #CC4117.

These settings gave me an orange navigation bar with white text. The active page link in the navbar is a darker colour giving it a button effect.

The next job is to change how the sidebars in our Genesis child theme look.

The first thing I did was to go to…

• Dashboard > Genesis > Dynamik Design.
• Click the Wrap tab.
• Scroll down to General Border Radious.
• Un-tick the, Enable General Border Radius: box.

This removed the rounded corners on the sidebar. If you’d like your Genesis child theme to keep the rounded corners, ignore that step.

Now go to…
Dashboard > Genesis > Dynamik Design.

• Click the Sidebars tab and make these changes…
• Sidebar Heading Font: colour #6C7030
• Sidebar Content Font: colour #6C7030
• Sidebar Content Link: Link colour #ED4C1B
• Sidebar Heading Background: colour #F5F5CB
• Sidebar Content Background: colour #F5F5CB
• Sidebar Heading Border: Top/Bottom 2px solid #6C7030
• Sidebar List-Style Bottom Border: 1px solid #6C7030

Next I wanted to change the footer section background colour.

This is how I did it…

• Dashboard > Genesis > Dynamik Design.
• Click the Footer tab.
• In the Footer Background dialogue box I typed #6C7030.
• And saved my changes.

Adding Nivo slider to the home page of my Genesis child theme.

First set up your slider, then go to…

• Dashboard > Genesis > Dynamik Design.
• Click the EZ tab.
• Scroll down to Homepage EZ-Widget Area Extras and find, Homepage Slider, tick the Activate box.
• Now go to Dashboard > Appearance > Widgets.
• Drag a Text Widget in to the EZ Home Slider widget area.
• Paste the Nivo Slider short code into the text widget. (You get the slider short code when you set up the slider.)
• Save your settings.

Nivo slider border colour

I want to change the colour of the border around Nivo Slider. So I pasted some CSS code into Dynamik. This is how I did it.

Go to…

• Dashboard > Genesis > Dynamik Custom.
• Click the CSS tab.
• Type the code below into the custom code box.

How I made the Magazine style home page.

So far we’ve built a nice looking Genesis child theme but if you want more, Dynamik Website Builder has the tools to deliver.

To see how I built the magazine style home page for my Genesis child theme you really need to watch the video and look at the screen shots. But this is an overview of what I did.

I went to Dashboard > Genesis > Dynamik Design. Then clicked the EZ tab.

I set the home page type to a EZ static home page. Don’t confuse the EZ static homepage with a WordPress static home page, they’re two completely different things.

There are almost fifty different box layouts for the main homepage content area. I chose four boxes, two rows of two. I used the point and click styling options to make changes to the look of these four boxes.

I scrolled down the page to the Homepage EZ Widget Area Extras section. I added a sidebar and a slider widget area to the home page by just selecting the tick boxes in this section.

Building the footer section of my Genesis child theme

I then scrolled further down the EZ settings page to the section labelled Fat Footer EZ-Widget Areas.

I chose to display a two box fat footer with one wide and one narrow box. I then used the point and click settings to change some background colours in the footer.

The CSS editor in Dynamik Website Builder

You can’t change everything in your Genesis child theme using point and click styling options, so I used the built in CSS editor to make some code. Dynamik Website Builder has some #Custom buttons along side the point and click settings. The #Custom buttons open a text box where you can paste your own CSS. The CSS code you paste in only affects that particular section.

I also pasted some code into Dynamik Website Builder’s custom CSS section. You find this by going to…
Dashboard > Genesis > Dynamik Custom. Then select the CSS tab. Pasting code in the custom CSS tab is the same as pasting code into the bottom of your theme’s style sheet.

This basic Genesis child theme is now taking shape. But there are many more elements of our child theme we could style if we wanted to. But that will have to wait for another day and another tutorial.

So far I haven’t come across any Genesis child themes that can’t be built using Dynamik Website Builder. But, as they say, there’s a first time for everything. Maybe I will find something Dynamik can’t do. But all in all, I think it’s fantastic software at a good price. I love it, and if you’re willing to put the time into learning how it works, I think you’ll love it too.

Why not go to Cobalt Apps now and see what you think? They’ve got some great products on offer.