Occasionally I will be posting tutorials to help fellow developers and those interested in building their own websites. I hope you find this tutorial helpful!
Many people have asked for a step-by-step tutorial on how I created my custom homepage with parallax-style backgrounds using Dynamik Website Builder on the Genesis Framework. I love using Dynamik because I can be as creative as I like with my design and I know I can easily build it out.
Create a Custom Page Template
Go to Genesis > Dynamik Custom > Templates
Create new custom template. Give it a filename and a template name (I named mine F5D Homepage). The template name will display as an option when you create new pages in WordPress. Choose ‘Page Template’ from the dropdown.
Add the following to the code box:
This forces full-width content layout and replaces the default Genesis loop with a custom loop we will create later.
Create a Fluid Page Label
Go to Genesis > Dynamik Custom > Labels
Create a new custom label named ‘Fluid Page’. This will allow you to easily target the page using CSS.
Create Your Homepage
Go to Pages > Add New
Create a new blank page and give it a title of ‘Home’.
Under ‘Page Attributes’ select your newly created template ‘F5D Homepage’ (or whatever you named it).
Scroll down to the section ‘Dynamik Labels’ and check the box for ‘Fluid Page’.
Go to Settings > Reading
Set you front page to the new ‘Home’ page you just created.
Your new homepage should look something like this:
Add a Conditional
Go to Genesis > Dynamik Custom > Conditionals
We only want to add widget sections to our home page, so we will create a conditional. From the Examples dropdown, select ‘Is Front Page’ and then save your changes.
Create Widget Areas
Go to Genesis > Dynamik Custom > Widget Areas
Create the following 3 widget areas:
Set them all to ‘Shortcode’
Feel free to add as many widget areas as you need. The creative possibilities are endless using Dynamik!
Hook Custom Widget Areas into Genesis Loop
Go to Genesis > Dynamik Custom > Hook Boxes
Add 1 hook box for your homepage. Give it the name ‘home_page. Select ‘genesis_loop’ from the dropdown. Remember we removed the default loop, so now we are replacing it with our custom widget areas. From the ‘Select Conditionals’ dropdown, select ‘is_front_page’ to only apply this custom loop to the homepage.
Drop the following code into the hook box:
Add Content to New Widget Areas
Go to Appearance > Widgets
You should see your newly created widget areas:
Add text widgets to home_after_header and home_before_footer. Theses two text widgets will sit atop your large background images. Add title and text and check the ‘Automatically add paragraphs’ box (this will wrap your text in p tags).
Add another text widget to home_main. Just for kicks I added some dummy text from Hipster Ipsum.
Set Custom Widget Area Backgrounds to Transparent
Go to Genesis > Dynamik Design > Widgets
Locate ‘Custom Widget Background’ and select ‘Transparent’ from the dropdown.
Your homepage should now look like this:
Add Background Images
Go to Genesis > Dynamik Design > Images
Upload two background images to use for your top and bottom widget areas. Image size is important, you want the backgrounds to look good on large desktop displays so I create 1920 x 1080 images. File size is equally important; you want the images to load quickly on mobile devices. I sample down my .jpgs to as small as possible while retaining as much quality as possible. The images I’m using here are around 200 KB.
I upload any images that are strictly part of my site design using the Dynamik image upload page. This places the images in the /wp-content/uploads/dynamik-gen/theme/images/ directory. For blog posts I use the standard WordPress media uploader.
Go to Genesis > Dynamik Custom > CSS
Add the following code to the CSS code box:
First we will set our fluid page to full width:
Next we will set our inner wraps to 1140px width:
Add a little CSS to your top and bottom widget areas to use the images as backgrounds:
Next let’s style our overlay text:
And the main section text:
Your homepage should now look something like this:
Here is all the CSS to easily copy/paste:
That’s all there is to it! Let me know in the comments if you have any questions or you need help setting this up. Once you see how easily this all comes together you can get as creative as you like!