• Menu
  • Skip to right header navigation
  • Skip to primary navigation
  • Skip to secondary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Before Header

Sign up for a WP Engine plan and receive the Genesis Framework and 35+ StudioPress Themes free!

Philip Gledhill

WordPress | Genesis Framework | StudioPress

  • Search
  • Home
  • Genesis Newbie
  • Setup Wizard
  • Genesis Geek
  • Resources
  • Blog
  • Search
  • Home
  • Genesis Newbie
  • Setup Wizard
  • Genesis Geek
  • Resources
  • Blog
  • Content
  • Beaver Builder
  • CSS
  • WooCommerce
  • WP Tutorial
  • Contact
  • Specific Themes
  • Find it
  • Search
  • Home
  • Genesis Newbie
  • Setup Wizard
  • Genesis Geek
  • Resources
  • Blog
  • Content
  • Beaver Builder
  • CSS
  • WooCommerce
  • WP Tutorial
  • Contact
  • Specific Themes
  • Find it
You are here: Home / Genesis framework / How to build a Genesis Child Theme using Dynamik Website Builder

How to build a Genesis Child Theme using Dynamik Website Builder

Build Genesis child themes

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.

Genesis theme settings - Logo
Use image logo
Browse to find your logo image
Make sure you've uploaded your logo image in the Dynamik Website Builder images section.
What is Dynamik Website Builder?
The easy way to build Genesis Child Themes

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.

What is the Genesis Framework?
A Solid Foundation For Your Website

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

Change the colour of the search button in Dynamik Website Builder.
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…

Change navbar colour in Dynamik Website Builder Genesis child theme.
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.

Remove the rounded corners from your sidebars using this tick box.
Change the colour and styling of your Dynamik Website Builder, Genesis child theme, sidebar.
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.

Change colour of Dynamik Website Builder footer.

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.

Tick this box to enable the homepage slider widget area in your theme.
Drag a text widget into the EZ Home Slider widget area. Paste your Nivo slider short code in the text widget.
I pasted the code in to Dynamik Custom CSS tab.
The code I used to change the border colour of Nivo slider in my Dynamik Website Builder 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.

I went to Dynamik Design. Clicked the EZ tab. I set the options as in this screen shot. The bottom two red boxes show how I activated the home page sidebar and the home page slider widget area.
Dynamik Website Builder EZ Fat footer widget area settings.
I used the Genesis Featured Post widget to add content to my EZ home page magazine style Genesis child theme layout.
Adding custom CSS code to the EZ home page.
The Dynamik Website Builder custom code box. Putting code in here is like adding code to the bottom of your site's style.css file.

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.

What is Dynamik Website Builder?
The easy way to build Genesis Child Themes

Looking for a StudioPress theme or hosting?

Check out the two links below…

Get Genesis Framework & StudioPress Themes free.

When you sign up for a WP Engine plan, you receive the Genesis Framework and 36 StudioPress Themes free. That’s over $2,000 in value.

Get Genesis Framework & StudioPress Themes free.Free themes with hosting

Get Premium WordPress Themes

Buy a StudioPress theme outright and use it on all of your sites. There are three ways to get all of the StudioPress themes AND save.

Get Premium WordPress ThemesChoose Your Theme

StudioPress themes FREE with this hosting.

Filed Under: Featured, Genesis framework By: //  by Philip Gledhill

Keep in touch?

I'm constantly discovering new stuff about Genesis, StudioPress and WordPress. If you want to keep up to date with my latest news and info, sign up below...

Previous Post: « How to Install the Genesis Framework
Next Post: Executive Pro Theme SetUp Executive Pro theme from StudioPress»

Primary Sidebar

StudioPress and Genesis Tutorials
  • StudioPress and Genesis Tutorials
StudioPress themes Free with this hosting.

My StudioPress and Genesis Tutorials

  • StudioPress Sites Review
  • Genesis Responsive Slider Tutorial
  • Genesis Featured Post Widget Tutorial
  • StudioPress Core Skills
  • Simple Hooks Tutorial
  • Genesis Simple Edits Tutorial
  • Genesis Dambuster plugin basic settings
  • Beaver Builder Tutorial – The Basics
  • Elementor Tutorial: a Quick Start Guide
  • Changing the color scheme of Altitude, Magazine Parallax Pro themes
  • Basic StudioPress Theme Customization (Old Post)
  • Genesis Framework Widget Areas Tutorial
  • Genesis Grid Loop Tutorial
  • Simple URLs (plugin) Tutorial
  • Simple Sidebars Tutorial
  • Simple Social Icons Plugin
  • Customizing the WordPress Query
  • Category and Tag Archive Listing Pages
  • Adding an author box below posts
  • Choosing the right StudioPress theme (a review)
  • Genesis eNews Extended and Mailchimp
  • StudioPress Pricing Table
  • StudioPress Flexible Layouts
  • Genesis CSS learn how to tweak and customize your site
  • Icons used in StudioPress themes
  • Images in homepage text widgets
  • Using Genesis Column Classes To Build Layout Grids
  • Sticky Header or Menu in Genesis
  • Plugins used in StudioPress themes
  • Genesis Simple FAQ plugin
  • Strong Testimonials Plugin – The Basics
  • Cornerstone Content: a simple how to guide
  • Genesis Portfolio Pro
  • Setup Generate Pro theme
  • Setup Hello Pro
  • Set up Altitude Pro theme
  • Setup – Executive Pro Theme
  • Parallax Pro Theme Review
  • Setup Parallax Pro Theme
  • Changing Google Fonts in a Genesis child theme (Parallax Pro)
  • Setup Daily Dish Pro theme
  • Setup Metro Pro theme
  • Foodie Pro Overview
  • Smart Passive Income Pro Theme: set up guide
  • Academy Pro theme Setup Guide
  • Authority Pro Theme: setup guide
Install the Genesis Framework
  • Are you ready to take your first steps? Watch as I install WordPress and Genesis.

Rainmaker Platform – a Review

  • Discover if you need the Rainmaker Platform
FoodieProTutorials
Build your own Genesis child themes with Dynamik Website Builder

Genesis Design Palette Pro

  • Customize your theme with Genesis Design Palette Pro

DIY Webdesign with Dynamik Website Builder AND Genesis Extender plugin

  • Genesis Child Theme Tutorial with Dynamik Website Builder
  • StudioPress theme customisation with the Genesis Extender plugin
  • Dynamik Fixed Background Image

StudioPress Accelerator

  • StudioPress Accelerator, the budget-friendly way to get a seriously fast website.

Are you getting stuck setting up a StudioPress site?Please let me know if you get stuck.

Disclosure: I receive compensation from some of the companies whose products I review.

How my affiliate links work…

  • I only get paid if someone buys a product. Not because someone clicks a link.
  • You pay the same price using my links or the StudioPress site.
  • If I earn some commission I can spend some more time making more tutorials.
  • P.S. Thanks to all those folks who have bought through my links.
  • It's much appreciated :-)

Philip Gledhill web design

Philip Gledhill is a Bradford web designer and WordPress assistant.

Genesis Extender

Customise your Genesis child theme the easy way.

The Genesis Extender Plugin

Get The Genesis Framework

WordPress Hosting

WordPress Hosting, Which Deal is Best For You?

Genesis – StudioPress resources

There are many good websites where you can find information about the Genesis Framework.

I use the sites listed below on a weekly or even daily basis to find answers, solutions and basic information.

I hope you find them as useful as I have.

Bill Erickson
WordPress Consultant

  • Tutorials
  • Code

Designs by Nick the Geek
Genesis based WordPress development and tutorials for everyone

  • Genesis Explained a good introduction to the code that makes Genesis work

Greg Rickaby
Front-End Developer @WebDevStudios

  • Code Snippets

Christopher Cochran
web/tech/design/music

  • The Visual Hook Guide

Carrie Dils

Genesis Developer and Web Designer

  • Genesis Tutorials and Information

Carrie Dils course on Lynda.com

  • There are two Genesis courses on Lynda.com. Up and Running with Genesis and Customizing Themes. Both are well worth a look. And if you're new to Lynda.com you can usually get a 7 day free trial.

Sridhar Katakam

  • Loads of WordPress and Genesis tutorials. Well worth a look.

Genesis For Beginners

  • pdf book

StudioPress.tv

  • Some basic videos from StudioPress

Brian Gardner

  • Code snippets and info from the man behind StudioPress

Sure Fire Web Services Inc
Web Design Tips, WordPress Development Help,and Genesis Framework Tutorials

  • Useful Genesis links page

WP Smith

  • Genesis code snippets

Footer

Web Hosting

If you’re in the market for premium web hosting from a team you trust why not checkout StudioPress Sites. It’s designed to be Fast, Secure & Worry Free!

Site Map

Site Map: if you can’t see what you’re looking for read through my sitemap, it may well be there :-)

Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Cookie Policy
  • Search
  • Home
  • Genesis Newbie
  • Setup Wizard
  • Genesis Geek
  • Resources
  • Blog

Site Footer

This website is independently owned by an affiliate marketer of StudioPress. It is not sponsored by StudioPress, WP Engine, Copyblogger Media LLC, WordPress, or Automattic Inc. WordPress, Genesis, StudioPress and WP Engine, are registered trademarks of their respective owners.

Copyright © 2019 Philip Gledhill · Privacy policy and disclosure