The Genesis Framework Themes and the powerful Beaver Builder plugin offer a dynamic duo that empowers web designers and developers to craft visually captivating and user-friendly websites. In this article, we'll explore how to utilize Beaver Builder with Genesis Framework Themes to unlock the full potential of your web design endeavours.
Understanding Genesis Framework and its Advantages
Genesis Framework serves as a robust foundation for WordPress themes, providing a secure and search engine-optimised framework. Its modular architecture allows developers to build custom themes while maintaining consistent code standards easily. By harnessing the power of Genesis, your website gains a competitive edge with improved performance, security, and flexibility.
Introducing Beaver Builder - Our Favourite Page Builder
Beaver Builder is a feature-rich page builder plugin that enables users to design captivating web pages effortlessly. Its intuitive drag-and-drop interface lets you create visually stunning layouts without touching a line of code. The plugin offers a wealth of pre-designed templates, modules, and customization options, making it an excellent choice for both beginners and advanced users.
Installing and Activating Beaver Builder
To get started, ensure that you have both the Genesis Framework, a Genesis Theme and Beaver Builder plugin installed and activated on your WordPress website. Once activated, Beaver Builder integrates seamlessly with Genesis, leveraging the framework's solid infrastructure.
Creating Stunning Pages with Beaver Builder and Genesis
Accessing Beaver Builder:
After activation, navigate to your WordPress dashboard and open the page or post editor of the content you wish to customize. Look for the "Launch Beaver Builder" button to access the Beaver Builder interface.
Leveraging the Drag-and-Drop Interface
Beaver Builder's drag-and-drop interface simplifies the design process significantly. Begin by selecting a template or starting from a blank canvas. Then, use the intuitive elements to add rows, columns, text, images, videos, and other content modules to your page.
Utilising Beaver Builder's Modules
Beaver Builder comes equipped with a wide array of modules, such as sliders, call-to-action buttons, forms, and more. These pre-designed elements save time and effort in creating engaging content for your website.
Customising the Design
With Beaver Builder, you have complete control over the design. Easily customise colours, fonts, spacing, and other styling options to match your brand's identity and create a cohesive visual experience. You can create CPT with Genesis and style them with Beaver Themer, including the layout.
Maximising Genesis Theme Compatibility
Beaver Builder is designed to integrate seamlessly with the Genesis Framework. The plugin ensures all your customisations are fully compatible with Genesis, maintaining the framework's code integrity and following best practices.
If you want full-page editing, you may have to create a full-width template with no sidebar if there isn't one available with your child's theme. To achieve this, you'll need to add a page template to your theme's files to eliminate the default sidebar and expand the content area to span the entire width of the screen. You may also have to do a few edits to the CSS that apply to that template, so beaver builder is full width.
Use a body class for your full-width template.
Use a body class for the template you will use with Beaver Builder page builder when you want to do full-width editing on Genesis themes. This can greatly enhance how developers approach styling and theming. Here's a rundown of the advantages of adding a body class to the page template:
Targeted Styling:
- By having a unique body class for specific pages or templates, developers can target styles only for those particular pages. This ensures that CSS changes don't accidentally alter unintended pages or elements.
Reduced Conflicts:
- Beaver Builder and Genesis might have their styles and classes. By using a unique body class, developers can avoid potential conflicts between theme and page builder styles.
Enhanced Organization:
- When reviewing or revisiting the stylesheet at a later date, a distinct body class helps identify which styles are associated with which pages or templates. This organizational advantage speeds up the editing process.
Efficient Overrides: Sometimes, the default styles applied by Beaver Builder or Genesis may not align with your design. By using a body class, it's easier to create CSS overrides that are more specific, thus having a higher priority.
Consistency and Scalability: If a developer wants to ensure a consistent look for all pages using a particular template, a body class can help. By styling under that body class, the developer ensures that all future pages using the same template will inherit the same styles, making the site scalable.
Easier Debugging: If there's a styling issue on a specific page or template, having a body class can help narrow down the potential causes. Debugging becomes more straightforward by temporarily isolating styles linked to that body class.
Better Performance: Targeted styling means less unnecessary CSS code. Ensuring that styles only apply to specific templates or pages where needed reduces the bloat and can slightly improve page load times.
More Control Over Responsiveness: With different body classes, developers can tailor responsive designs to specific page templates. This granularity ensures a better user experience across devices.
Facilitates A/B Testing: If a site owner wishes to test two different designs or layouts for a page, utilizing body classes can make this process smoother. Each version can have its body class, allowing for distinct styling.
Theme Customization: For developers creating child themes for Genesis, unique body classes on templates can help offer more customized design options for end-users, enhancing the child theme's versatility.
In conclusion, adding a body class to the page template when working with Beaver Builder on Genesis themes offers a blend of flexibility, organization, and precision. It's a small step in the development process that can yield significant design, maintenance, and performance benefits.
Optimising for Mobile Responsiveness
One of the critical aspects of modern web design is mobile responsiveness. Fortunately, both Beaver Builder and Genesis are built with responsiveness in mind. Your website's pages will automatically adapt to different screen sizes, ensuring a consistent and enjoyable user experience across devices.
The combination of Genesis Framework Themes and Beaver Builder plugin forms a powerful alliance that empowers web designers and developers to create visually stunning, efficient, and user-friendly websites. By using Beaver Builder's intuitive drag-and-drop interface and taking advantage of Genesis Framework's robust foundation, you can craft a website that stands out from the competition and delights your visitors.
An example of the Page Template for a full width page template for the Genesis Pro Charming Theme
<?php
/**
* This file adds the Beaver template to the Simply Charming Theme.
*
*/
/*
Template Name: Beaver
*/
//* Add custom body class to the head
add_filter( 'body_class', 'charming_add_body_class' );
function charming_add_body_class( $classes ) {
$classes[] = 'charming-beaver';
return $classes;
}
//* Force full width content layout
add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' );
// Remove 'site-inner' from structural wrap
add_theme_support( 'genesis-structural-wraps', array( 'header', 'footer-widgets', 'footer' ) );
//* Remove site header elements
//* remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
//* remove_action( 'genesis_header', 'genesis_do_header' );
//* remove_action( 'genesis_header', 'genesis_header_markup_close', 15 );
//* Remove navigation
//* remove_action( 'genesis_before_content_sidebar_wrap', 'genesis_do_nav' );
//* remove_action( 'genesis_footer', 'genesis_do_subnav', 7 );
//* Remove breadcrumbs
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
//* Remove site footer widgets
//* remove_action( 'genesis_before_footer', 'genesis_footer_widget_areas' );
//* Remove site footer elements
//* remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5 );
//* remove_action( 'genesis_footer', 'genesis_do_footer' );
//*remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15 );
genesis();
