Documentation

Note: A DWB skin needs Genesis and Dynamik Website Builder to be installed first. A skin is not a theme, but just two files to import – for example – settings, layouts, custom widgets/hooks, CSS and scripts to DWB.

You´ll find a video about how to install Genesis here, and this video shows you how to install Dynamik Website Builder.
To understand how the Dynamik skin feature works, see this video.

How to install a Dynamik Website Builder skin:

• Create some posts and pages, if you didn´t do this yet. Usually you don´t get any content with a skin, so it´s up to you to create it.
• Go through Genesis – Theme Settings and set everything to your liking.
• Go to Appearance – Menus and create a menu (or two). At the bottom, choose one to be your Primary Navigation and save.
• Note: If you already have your own settings and DWB-design in place, the following steps will overwrite them – be sure to export them first to have a backup, before you go on!
• Import the file with the ending .dat in Genesis – Dynamik Settings – Import/Export. See a video here.
• Import the skin zip file in Genesis – Dynamik Design – Import/Export.
• Go to Appearance – Widgets, and drag some widgets into the available widget areas. The After-Header-Homepage widget and the innerpages-header-widget need some content to look right. 😉

FAQ

I don´t need the innerpages-header-widget. I´d like the large After-Header-Homepage widget to display on all pages. How to?
Go to Genesis – Dynamik Custom – Widget Areas. Use the dropdown on the right side of the widget and set it to „Deactivated“. Then go to the tab „Functions“ and search for this line in the code which is displayed there:
if ( is_front_page())
Delete it (or comment it out) and you´re done.

I´d like to have a picture displayed in the After-Header-Homepage widget, instead of the changing color.
Sure – I have included a sample pic to demonstrate this. Go to Genesis – Dynamik Custom – JS. Copy and backup the code (just in case you change your mind later), then delete it all. Next upload your picture in Dynamik Design – Images. Then go to Dynamik Custom – CSS and find these lines:

/*You want an image instead of the color-changer?
Go to JS and delete the script, then uncomment these lines*/
/*.after-header-wrap {
background: url(images/colored-chameleon.jpg) top center no-repeat;
background-size:cover;
}*/

Delete the backslashes and stars – it should look something like this now:

.after-header-wrap {
background: url(images/colored-chameleon.jpg) top center no-repeat;
background-size:cover; /*The pic will always cover the screen. Don´t use a small one, optimize the file-size instead!*/
}

It depends on the content of the widget how much of your pic will be seen now. But you can also define a certain height for this area (adjust to your needs):

.after-header-wrap {
background: url(images/colored-chameleon.jpg) top center no-repeat;
background-size:cover;
height: 500px; /*this is just a sample. Beware if your site is responsive!*/
}