Breakthrough Pro is a legacy theme and has a widgetized home page. So you have a choice, you can use the front page widget areas to make the theme look like the demo. Or you can use one of the Genesis Blocks page layouts to get more control of how your front page looks.
I think the demo site looks great and has enough customization options to allow you to build your own front page with your own content. So I’d be tempted to stick with the widgetised homepage even though you don’t have as many customization options as you have when you use a Genesis blocks layout.
The widget areas are…
- Primary sidebar.
- After Entry.
- Front page 1 to front page 6.
- Above Footer CTA.
- Footer.
When using Breakthrough Pro, you need an extra plugin to make Genesis Blocks layouts look their best.
Breakthrough Pro has a wide built in margin and to make Genesis Blocks layouts look their best you’ll need to install a plugin called Fullwidth Templates for Any Theme & Page Builder.
Then, when you build pages using Genesis Blocks layouts, select the FW Fullwidth page template.
The plugin is called Fullwidth Templates for Any Theme & Page Builder.
Breakthrough pro Customizer tab.
This has three sub tabs…
- Hero section settings.
- Image settings.
- Basic settings.
Hero section settings. (customizer).
Tick the box to display or not display the home page hero section. This tab also has a box where you type the, Break through the noise, headline text. And a place to type the text and link for the big red button.
Dashboard > Appearance > Customize > Breakthrough Pro Settings > Hero Section Settings
- If you want to display the homepage hero section, with image and big red button, tick this box.
- This is the main homepage hero text. Type your own text into the box. On the demo site the text is Break through the noise in the market.
- Hero colored button text. On the demo site this is the big red button that says See our case studies.
- Hero colored button URL. paste the URL of the web page you want viewers to see after they click the button.
Image Settings. (customizer).
Breakthrough Pro has several large letterbox shaped images that display in various parts of the home page and other pages.
Dashboard > Appearance > Customize > Breakthrough Pro Settings > Image Settings
The images are…
- Front page 1.
- Front page 2.
- Front Page 3.
- Default Post, Page, and Portfolio Image.
- Footer Image.
The front page images only display if you use the front page widget areas and the homepage hero section.
If you remove the footer image, no image shows. If you remove the Default Post, Page, and Portfolio Image. And you don’t select a featured image when you write a page or post, the posts will not have a big banner image at the top of the page. If it is activated in the customizer, the Default Post, Page, and Portfolio Image shows as the default featured image at the top of posts and pages. (And portfolio items.)
Basic Settings. (customizer).
Modify the Breakthrough Pro Theme basic settings.
Dashboard > Appearance > Customize > Breakthrough Pro Settings > Basic Settings
In the basics settings tab of the customizer you can…
- Enable the “intro” paragraph style on single posts.
- Show featured image on posts.
- Show featured image on pages.
- Show a colored overlay on featured images.
Background image tab. (customizer).
The background image shows in the thin border round the edge of Breakthrough Pro. This is a dark blue border on the demo site. The border is so thin it seems pointless using a background image.
Footer Widget Area.
The single footer widget area is a flexible layout. If you put 1, 2, 3, or 4 widgets in the footer widget area the widgets will display in a single row of up to four columns. If you place five widgets the layout will change to two rows of two with a single full width row beneath them.
The footer menu.
This displays below the footer widget area and above the footer credits. However, it doesn’t stand out and your readers can easily miss it.
Customizer > Colors.
In the colors tab of the customizer you can change…
- Background Color: this is the thin dark blue border that surrounds the entire site.
- Color 1: this color is used in titles, menu links, post info links, default buttons, image overlays and more.
- Color 2: this color is used in call-to-action and primary buttons, breadcrumbs, links, and more.
