The home page is divided into 9 widgetized stripes (the Hero Section, Front Page 1 – 6, Above Footer CTA, and Footer widget areas). The Hero Section supports a title, button text, and a background image. The widgetized stripes support flexible layout configurations where the layout of the widget area is based on the number of widgets used in that area. For example, a single widget is full width while 4 widgets are divided into 4 columns. The screenshot below illustrates how flexible widgets are distributed across different widget areas. Note that every row doesn’t contain the same number of widgets, even though the overall width of each row is the same.
Here is the configuration that applies to the Front Page 1 widget area:
Here is the configuration that applies to the Front Page 2, Front Page 3, Front Page 5, Above Footer CTA, and Footer widget areas:
Here is the configuration that applies to the Front Page 4 and Front Page 6 widget areas:
Breakthrough Pro sets 5 images in the Customizer: background images for the Hero Section; background images for the Front Page 3, Front Page 5, and Footer widget areas; and an image to use at the top of posts, pages, and portfolio items if a featured image is not set. In our demo, the background images are 1600 x 420 px.
The theme uses 4 custom image sizes:
- header-image = 1600 x 420 px
- featured-image = 800 x 440 px
- portfolio = 510 x 650 px
- front-about = 590 x 390 px
Breakthrough Pro also includes code and scripts that change the layout or add features, including:
- reducing the secondary navigation to a single level
- moving the secondary navigation to the footer and renaming it
- adding a script to match the height of selected entries
- adding a script to calculate a complementary hover tint from the user-chosen color
- adding a script to add an overlay color on selected images
- moving the post info above the post title and adding the author’s gravatar
- moving featured images above the post title
- changing the default “read more” text to “Continue Reading” on select pages
- adding support for an “intro” paragraph style
- adding support for ionicons
One of the scripts included with Breakthrough Pro adds an image overlay to full width images, featured images, and portfolio images using the CSS filter property. When the featured is enabled in the Customizer (the default), a color specified in the Customizer is used as the image overlay using the url() parameter of the filter property. Not all browsers support this parameter. See caniuse.com support for CSS filter effects for the latest support. At the moment, Microsoft Edge only offers partial support, so the feature won’t work for visitors using the Edge browser.
The screenshot below shows the impact of using the default image overlay color on one of the home page images. The composite image was made so that the overlay is disabled on the top half of the image and enabled on the bottom. Image overlays can help to make a collection of images assembled from different sources more closely match a site’s color palette.
Introduced on 9/21/18, Breakthrough Pro is a 2 column theme with 3 layout options. Three of the 6 standard Genesis layout options have been removed to simplify content creation. The theme includes a landing page template. Beyond the WordPress standards of custom menus and threaded comments, the Breakthrough Pro theme also supports a custom logo, a custom background (not used on our demo), and a mobile specific menu.
Breakthrough Pro also supports Google web fonts (specifically Alegreya Sans and PT Serif).
Here are all of the widget areas for the Breakthrough Pro theme:
We’ve got a live demo of the Breakthrough Pro theme that shows off its basic features.
The Breakthrough Pro theme is available on our plans with premium themes, from PERFORMplus and up.
If you haven't signed up for one of our plans, you can ask pre-sales questions about the Breakthrough Pro theme by reaching out via our contact form. Existing customers should use our ticket-based email support to ask questions about the Breakthrough Pro theme.