How to Add a Full-Width Parallax Background Image to Dynamik
One of our web design clients was using the Dynamik WordPress theme* which is a Genesis child theme. Dynamik is different from most child themes in that you can make CSS and structural changes via the admin panel. You can even write PHP code in its Custom section. I liked Dynamik so much that I included it in my list of highly customizable premium WordPress themes.
Getting back to my client, he wanted to add a parallax image to his home page, and I wasn’t able to add a parallax image to Dynamik without having to code it HTML and CSS. I didn’t want to go down that route, so I suggested switching to the Beaver Builder theme*, but that would have required a website redesign. He only needed to redesign his front page and rearrange one or two widget areas on his interior pages. The Beaver Builder page builder has the parallax image feature that my client wanted.
After brainstorming a few minutes for a different solution, I came up with the idea of using the Beaver Builder plugin with the Dynamik theme. Using the Beaver Builder plugin would allow my client to continue using Dynamik. In the future, if my client wanted to change the design of other pages, I could create the design easily with the Beaver Builder’s page builder. The Dynamik theme plays well with the Beaver Builder plugin.
In order to follow along, you need to have the Genesis theme, Dynamik child theme, and Beaver Builder plugin on your site. This tutorial also assumes that you have working knowledge with editing theme settings in the WordPress admin panel. With that being said, to add a full-width parallax image on the Dynamik theme via Beaver Builder’s page builder, you’ll need to do the following:
Modify Your Settings in the Dynamik -> Design Section
First, you’ll modify your wrapper styling. To do this, click on the Wrap tab. For the Wrap Margin, you’ll set the top and bottom margin to 0. For the Inner Margin, you’ll set the top and bottom margin to 0. For the Wrap Padding, you’ll set the top, bottom, left, and right padding to 0.
If your site is using a fixed design, you’ll need to switch it to a fluid design. You can do that by going to the Wrap Structure Options and selecting the Fluid Design option.
If your nav menu is below your header, and you don’t want any spacing between your nav menu and parallax image, you’ll need to click on the Nav tab, go to Nav Wrap Margins, and set the bottom margin to 0.
Be sure to click the Save Changes button after you’ve made these changes.
Set your page template to Page Builder
If your page template is set to anything else and you add a parallax image row with the Beaver Builder page builder, the image won’t extend out to the edges of the screen. It will look like this:
The areas that I marked in gray are the margins.
Drag Out a Row and Set the Background Type to Parallax
Rather than recreating the wheel, I’m just going to point you to Beaver Builder’s support articles. Follow the directions in the following links:
To create a full-width parallax image, you’ll need to set both the Width and Content Width fields to Full Width. Keep all of the margins at 0. If you want to show more of the parallax image, increase the top and bottom padding. You can watch me do these steps in the screen recording below,
I hope you enjoyed this blog post or got something out of it. If you did, please feel free to comment down below or even share it. I’d like to give an honorable mention to The Dynamik Beaver. I had taken the advice of the author’s post on how to set up Dynamik for Beaver Builder full-width rows before Cobalt Apps told me about using the Page Builder template.
I don’t have page builder as a template option…..
Make sure you’re running the latest version of Genesis, Dynamik, and WordPress. It would probably be a good idea to make sure all of your plugins are up-to-date, also.