Please follow these steps to install the design:
- Install the latest version of WordPress
- Upload the latest version of the Genesis theme framework
- Upload the latest version of Dynamik Website Builder
- Extract the .zip folder on your desktop (the file you downloaded), you should now be left with: an “assets” folder, a .dat file and a .zip file
- In the WP admin area, go to Genesis > Dynamik Settings > Import/Export
- In the Import Settings/Custom Options section, click the Choose File button and browse to the .dat file
- Click the Import Custom Options button (this imports in the custom CSS, hookboxes, etc… now it’s time to import the design)
- Go to Genesis > Dynamik Design > Imp/Exp
- In the Dynamik Skin Import section, click the Choose File button and browse to the .zip file (it’s probably on your Desktop or Downloads folder)
- Then click Import Skin
- You are done
Included Photoshop files
When you extracted the zip onto your desktop there is a folder called ‘assets’ - this includes various professionally made graphics (in Photoshop .PSD format) that you can use in your site! Sweet deal huh?
At the top of all pages you’ll find an address, the name of the design and a phone number. This not only adds some visual eye candy but is also very useful for mobile site visitors as they have quick access to information at the top of every page. Here’s how to edit that area:
1) Go to Genesis > Dynamik Custom > Hook Boxes > below-header
2) There you will find the HTML that displays in that section. Below is a screenshot with the left side content, middle content and the right side content highlighted. This is where you can make your content changes to the header.
The demo design uses Meta Slider for the Home page slider. It’s a simple and free way to have multiple responsive image sliders on your website.
- To get started with the slider, start by Creating Your Images – Create your banners images with a size of 1040 X 470 and save them as jpg’s
- Once the plugin is installed go to Meta Slider in the admin area
- Add your slides by clicking on the Add Slide button
- Once your slides are added, click the Flex Slider button on the right, then scroll down and under Advanced Settings check the Stretch.
- Then click the Save button
- Once saved, scroll all the way down and find the box labeled Usage, copy that shortcode, then add a page to your WordPress Pages section and name it HOME and paste the slider shortcode at the top of the page.
The rest homepage is easy to setup! Here’s how:
1.) To get the content looking the same as the demo, open the included assets folder and open the file named home-page-html.txt
2.) Copy all that HTML
3.) Paste it into the content area (under the slider shortcode that you added in the previous step) of the TEXT tab, like this:
4. ) Scroll down a bit and choose the Full Width Content layout option, like this:
5. ) Click on Publish to save the page.
6.) Then go to Settings > Reading. In the Front page displays section, choose A static page and select HOME from the dropdown menu like this:
7.) On the front end of your website it should now look like the demo. Good job!
8.) To edit that section just take a look at the code and you’ll see image src code, replace the demo image URLs with your image URLs.
The homepage content is made up of 1 block of content that consists of one text heading, one Gravity Forms form and social media icons. This blocks is setup/edited in the Appearance > Widgets > EZ Fat Footer 1 section.
Open the /assets folder (you downloaded this) and find the file named html-ez-footer.txt Copy paste the html into the EZ Fat Footer Widget.
Here is a guide of what content is placed within that widget.
Towards the top of the widget is the text header, below that is shortcode used to generate the form and at the bottom is the social media icons. This is where you can make your content changes to the EZ Footer.
Note: This demo is using Gravity Forms to generate the form in the footer. If you are using another WP Form Plugin, swap out the Gravity Forms shortcode with the shortcode that your forms plugin uses.
If you would like to use Gravity Forms but you don’t have a copy of it yet, you can pick one up here (affiliate link)
Form Styling Note: If you are using Gravity Forms and want the footer form to be styled the same as you see on the demo, make sure it’s the first form that you create so it has the form id of “1” That way it match the form ID used in the footer and will apply the css to your form. The same for the form used on the Contact page. If you want it to be styled the same, make sure it’s the second form that you create on the site so it has the form id of “2”
Need more Gravity Forms help? Or want to learn how to make super fancy forms? Check out our Learn Gravity Form’s course.
Social Media Icons Tip: The social media icons used in this demo are made up of a single image. If you want to do the same thing and have each link to the social media account, you’ll need to use a hotspot generator, which can be found in our Toolkit.
The footer information (some links and a copyright) is controlled by going to Genesis > Dynamik Custom > Hook Boxes > footer. There you will find the HTML that displays in that area:
To deactivate this, just choose Deactivate from the Hooked drop down menu, like this: