Shortcodes – Display Headings

The Display Headings shortcodes provide at least a couple, but very flexible heading styles. At least two of them are using primarily in Content Boxes, but for this tutorial, we will focus more on the “Display Headings”. Although if you like how the headings for the Content Boxes look, you can still use them in your page content.

Display Headings:

Display Headings for Content Boxes:

Creating a Display Heading

To insert a display heading, you will click on the “Display Heading” shortcode editor button:

After clicking on the button, you will be presented with a popup window to make your selections as to the following attributes:

Heading – This is in reference to using an H1, H2, H3, H4, H5, or H6 headings

Style – This is in reference to the heading style (see the Display Headings screenshot further up this tutorial)

Align – This refers to aligning your heading to the left, center, or right

Once you insert your Display Headings shortcode, it should look something like this:

Once you insert the shortcode, replace the placeholder text “Your Heading” with your own. You can also add a second sub-heading if you choose by inserting another one right after the first one.

NOTE You do not have to match an H1 heading with a Display-1 style, you can use Display-3 if you want.

Customizing Your Headings

If you want to customize the display heading attributes, such as font family, weight, colour, etc., you can do this by creating custom CSS in your own stylesheet from a plugin like “Simple Custom CSS“, Jetpack’s own Custom CSS feature, or your child theme’s style.css file.