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 headings1

Display Headings for Content Boxes:

display headings2

Creating a Display Heading

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

display headings editor button

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

display headings3

  • 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:

[incept_display heading="h1" style="display-1" align="left"]Your Heading[/incept_display]

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.

The default styling starts with the standard Heading styles:

h1, h2, h3, h4, h5, h6 {     font-family: 'Open Sans', sans-serif;     font-weight: 600;     line-height: 1.2;     margin: 0 0 16px; }

Then for the Display Headings:

.display-1, .display-2, .display-3, .display-4 { 	line-height: 1; } .display-1 { 	font-size: 3rem; } .display-2 { 	font-size: 2.5rem; } .display-3 { 	font-size: 2rem; } .display-4 { 	font-size: 1.5rem; } .display-5 { 	font-size: 1.25rem; }

Based on whatever you want to customize, you can focus on the the above.