Skip to content

J&B’s Signature CTA Hero “Page Section”

You are here:
  • Main
  • Design
  • J&B's Signature CTA Hero "Page Section"
< All Topics

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/

Dual Button Example

https://landmarkroofingaz.com/services/spray-foam-roofing/