Impact headers

The impact header shortcode allows you to display big impact headings. The text between the opening and closing shortcodes is the header text. The options for this shortcode are shown below. See examples here.

OptionDefaultExampleDescription
typeonly-headingtype="heading-subheading-button"The header type:

  • only-heading = Only Heading
  • heading-button = Heading & Button
  • heading-subheading = Heading & Sub-heading
  • heading-subheading-button = Heading, Sub-heading & Button
tagh2tag="h1"Choose the HTML tag to use for the heading, for SEO purposes:

  • h1
  • h2
  • h3
  • h4
  • h5
  • div
  • span
subheading(empty)subheading="This is a subheading"The subheading shows below the main heading.
sub_tagh4sub_tag="h3"Choose the HTML tag to use for the sub-heading, for SEO purposes:

  • h1
  • h2
  • h3
  • h4
  • h5
  • div
  • span
button_text(empty)button_text="Click me"The button text.
button_link(empty)button_link="http://www.example.com"The destination URL of the button.
button_external0button_external="1"Open the destination URL in a new tab/window; 1 is true, 0 is false.
button_animationflipInXbutton_animation="bounceIn"The animate.css animation to use when the button comes into view.
button_animation_delay(empty)button_animation_delay="200"The animation will not start until this number of milliseconds after the element comes into view (1000 milliseconds = 1 second).
button_animation_offset(empty)button_animation_offset="-200"If the number is positive, the animation will start when the element is this number of pixels below the viewport. If the number is negative, the animation will not start until the element is this number of pixels inside the viewport.
quform_idnonequform_id="1"Link button to Quform popup form, the number is the form ID.
stylecolorstyle="light"This will change the color of the Impact header:

  • color = theme Primary color
  • dark = theme Dark color
  • light = theme Light color
  • color no-shadow = theme Primary color with no 3D effect
  • light no-shadow = theme Dark color with no 3D effect
  • dark no-shadow = theme Light color with no 3D effect
margin_top10margin_top="20"The pixel value to use for the CSS margin-top.
margin_bottom10margin_bottom="20"The pixel value to use for the CSS margin-bottom.
convertcvt-phone-ptrconvert="cvt-phone-ldsp"This is a responsive option. It gives you the choice to select when you want to swap to a small device friendly layout:

  • (empty) = None
  • cvt-phone-ptr = Phone portrait
  • cvt-phone-ldsp = Phone landscape
  • cvt-tablet-ptr = Tablet landscape
  • cvt-tablet-ldsp = Tablet landscape
  • cvt-always = Always
hide(empty)hide="hide-phone"This gives you the ability to hide this shortcode on the devices you select:

  • (empty) = None
  • hide-phone-ptr = Phone portrait
  • hide-phone = Phone landscape
  • hide-tablet-ptr = Tablet portrait
  • hide-tablet = Tablet landscape
  • hide-desktop = Desktop
  • hide-large = Large
stretched0stretched="1"This will stretch the impact header to the edge of the main container, giving it a banner effect.
icon(empty)icon="fa-heart"The icon will show to the left of the Heading and Subheading text. Choose an icon from the list. You can also find all the FontAwesome classes on the Cheatsheet page.
icon_animationfadeInUpicon_animation="bounceIn"The animate.css animation to use when the icon comes into view.
icon_animation_delay(empty)icon_animation_delay="200"The animation will not start until this number of milliseconds after the element comes into view (1000 milliseconds = 1 second).
icon_animation_offset(empty)icon_animation_offset="-200"If the number is positive, the animation will start when the element is this number of pixels below the viewport. If the number is negative, the animation will not start until the element is this number of pixels inside the viewport.
id(empty)id="my-header"This will set the id attribute to allow you to make anchor links to this header.

Example

[impact_header type="heading-subheading-button" subheading="This is a subheading" button_text="Click me" button_link="http://www.example.com"]
Heading text is here
[/impact_header]

Button to show popup

The Impact header shortcode can be linked with the [lightbox] shortcode to show a lightbox popup when the user clicks the button. The lightbox trigger should be empty so that it isn’t visible to the user, and the impact header button_link should be set to #lightbox. See the example code below.

[impact_header type="heading-subheading-button" subheading="This is a subheading" button_text="Click me" button_link="#lightbox"]
My fantastic heading!
[lightbox]
[lightbox_trigger][/lightbox_trigger]
[lightbox_content]
This is the content of the lightbox popup.
[/lightbox_content]
[/lightbox]
[/impact_header]
Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy