J&B’s Signature CTA Hero “Page Section”
Our signature CTA hero “page section” element provides a great opportunity to work the page title into a section with some subtext and at least one CTA, while providing immediate visual context with a background image. A very potent first section for key pages.
Creation in WPBakery Page Build (Jupiter 6)
You’ll need to start by adding a Jupiter “Page Section” element. This is distinct from the regular Page Builder “Section”, which is mostly for grouping rows. The “Page Section” element is much more robust and has unique options needed for the look achieved with this section.
“Page Section” Settings
Under the “Page Section Settings > General” (click the pencil next to the red “Page Section” tab in the back-end Page Builder view, note the following changes:
Background Image
This should be something that looks most natural in a widescreen, landscape view, but also will work decently when portrait on mobile. If you can’t find an image that can do both, there’s a portrait image option below it for a second “mobile” image.
Background Position
“Center Center” typically works best.
Cover Whole Background
Enabled
Overlay Color
Typically works best as black (#000000) but sometimes a dark brand color from the client can also work – they just often are too much or too bright. When in doubt, stick with black.
Overlay Color Mask Opacity
0.6 on average. You want this to be as light as possible without making the text hard to read. The default, 0.5 is usually a bit too light, but you can try it. We usually settle for 0.6-0.7, but have gone as dark as o.95 on some very bright background images.
Padding Top
200px average. This can vary a bit depending on how tall their header is when transparent. 150-200px is the range we usually end up in. The goal is to have a distinct but not overly-tall space between the transparent header and the H1 below.
Padding Bottom
50px will usually do. Sometimes 80-100px might be necessary depending on the last element contained within the Page Section, but those are usually buttons with 30px bottom padding or so, giving you at least 80px on the bottom (30px + 50px).
Extra Class Name
“text-white” should ensure all text and buttons are dark-background-friendly and styled properly. If this doesn’t work, contact the account’s developer.All other options should be left alone.
Jupiter Page Options
Below the WPBaker Page Builder editor and (typically) Yoast’s SEO boxes, you should eventually see “Jupiter Page Options”.
Manage Page Elements
Select “Remove Page Title”.
Stick Template?
Enable.
Jupiter Styling Options
This is typically the last left/main column box in the page editor.
Override Global Settings
Enable. This is disabled by default. It will reveal a large number of additional settings below it.
Header Styles
Will be on “1”, which is typically the default. You can double-check in the Theme Options. Toolbar will need to be turned “off”, being “on” by default.
Upload Logo (Light Skin)
This needs to be a mono white (or nearly so) version of their logo. Logo variants should already exist. If you don’t have access to one in Media – try searching “logo-white”, or just “logo” or “white” after clicking “Upload” – check the client folder on Google Drive. As a last resort, contact a PM.
Upload Logo (Header Sticky State)
This should be defined as whichever version of their logo shows appropriately on their sticky header. Will usually be the same version as their full-size header on most pages, not the white version used above for “Upload logo (Light Skin)”. Again, can typically be found searching for “logo” on the Upload option.
Transparent Header
Enable.
“Page Section” sub-elements
In the Page Section, add one the following elements:
- H1 title: this should be on the longer side, but remain on just one line at full-width if possible. The SEO title may double as this.
- Summary sales paragraph(s): This should, in 2-5 sentences, summarize the product/service/page, and encourage the visitor to take action in at least one way via the options below:
- CTA:
- Gravity Form: 2-4 fields, 1 row if possible (1-3 fields), with the submit button centered. The site dev likely has a class defined for these niche forms for formatting.
- 1-2 Buttons: Our defaults for these have the first one link to a conversion/contact page, and the second one just scroll down to the next section with an anchor link. If two buttons are present, both buttons should be in 1/2 width columns (6/12cols), center aligned within each column, and contain 30px bottom padding only.
Example Pages to Emulate
Gravity Form Example
https://jackandbean.com/services/creative-services/