Welcome to the Genesis Child Theme Challenge featuring the Dynamik Website Builder, a tool celebrated for its extensive design flexibility and advanced CSS capabilities. This series guides through the task of recreating the iconic eleven40 Pro child theme by StudioPress, showcasing Dynamik’s powerful customization features. Prepare to delve into theme adaptation and design finesse, with a step-by-step demonstration on building a functional and visually similar replica of eleven40 Pro.
Breaking Down The Theme
Recreating the eleven40 Pro theme begins with understanding the fonts, colors, and dimensions of its elements. The demo page offers a practical model, and by using Google Chrome’s inspection tools, the essential CSS properties that define the site’s appearance are identified within minutes.
The eleven40 Pro theme primarily uses two fonts: Oswald for headlines and Lora for the body text. The color scheme is dominated by a light black shade (#333333) for most text and headlines.
In terms of layout, the site adopts a fluid design, allowing the header to stretch and fit the full page width. The navigation menu is positioned to the right of the site title, complemented by a top banner for customizable messages. The design also features a minimalist sidebar and a three-column ‘fat footer’ at the bottom.
These key elements will be integrated into the new theme, with most properties conveniently adjustable through Dynamik’s Design Options.
Structuring Layout and Fonts
Although the original eleven40 Pro theme offers several layout options, our focus is a single layout which is the content/sidebar layout.
- At this juncture, the content width is set to 850px, and the sidebar is 250px. This can be easily done under the Width’s tab;
- The fluid layout can be achieved with ease. Under the Wrap tab, there’s a Fluid Design radio button option under Wrap Structure Options that needs to be selected;
- As Oswald is the default font in Dynamik, we’ll need to adjust the font size to 24px for the Site title, 36px for Post headlines and 14px for Sidebar headers.
Designing the Navigation Menu
Under normal circumstances, Dynamik places its navigation menu underneath the header. However, we aim to tweak this setup and position it adjacent to the site title.
Luckily, the Genesis Framework includes a Header Right Widget area that suits our needs. By dropping the Custom Menu widget into this area, our menu is established.
Next, we adjust the header title and header widget area widths (Header tab), and style our menu (Header nav tab).
Creating a Robust Footer
The other main feature we aim to reproduce is Eleven40 Pro’s striking three-column footer. This could be a challenge with other themes, but Dynamik’s built-in support simplifies the process.
- Under the EZ tab, a section titled Fat Footer EZ-Widget areas is present;
- All that’s needed is to select the EZ Fat Footer 3 layout, enabling the three column widgetized layout feature of Eleven40 Pro.
Incorporating Custom CSS
Although Dynamik includes the Oswald font by default, the Lora font utilized by Eleven40Pro is not built in. Since Dynamik currently lacks the functionality to add new Google web fonts through Design settings, the Lora font must be loaded manually (as detailed in this post). Following this, the necessary elements can be styled using Dynamik’s Custom CSS feature as demonstrated here:
/* Post content styles */
.entry-content p, .entry-content ul li, .entry-content ol li {
font-family: Lora, serif;
font-size: 16px;
}
/* Post byline styles */
.post-info {
font-family: Lora, serif;
font-size: 14px;
}After these steps, we can set our post body and post byline fonts to use the Lora font with the CSS code.
Conclusion
In conclusion, this comprehensive guide reveals the potential and flexibility of the Dynamik Website Builder. It walks you through the process of recreating the popular StudioPress eleven40 Pro child theme, demonstrating the power of this tool in customizing and designing websites. With the combination of design options, CSS builder, and a bit of creativity, it is clear that Dynamik Website Builder can virtually transform our site design aspirations into reality. If the initial process seems intricate, the final result is certainly gratifying. Whether you’re curious about the process or eager to apply the recreated theme to your website, the provided download link ensures hands-on experience with this functional, close-to-real clone. After delving into the eleven40 theme free, consider reading the “Divi Theme Review” to further expand your understanding of versatile WordPress themes.