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.
| Option | Default | Example | Description |
|---|---|---|---|
| type | only-heading | type="heading-subheading-button" | The header type:
|
| tag | h2 | tag="h1" | Choose the HTML tag to use for the heading, for SEO purposes:
|
| subheading | (empty) | subheading="This is a subheading" | The subheading shows below the main heading. |
| sub_tag | h4 | sub_tag="h3" | Choose the HTML tag to use for the sub-heading, for SEO purposes:
|
| 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_external | 0 | button_external="1" | Open the destination URL in a new tab/window; 1 is true, 0 is false. |
| button_animation | flipInX | button_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_id | none | quform_id="1" | Link button to Quform popup form, the number is the form ID. |
| style | color | style="light" | This will change the color of the Impact header:
|
| margin_top | 10 | margin_top="20" | The pixel value to use for the CSS margin-top. |
| margin_bottom | 10 | margin_bottom="20" | The pixel value to use for the CSS margin-bottom. |
| convert | cvt-phone-ptr | convert="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:
|
| hide | (empty) | hide="hide-phone" | This gives you the ability to hide this shortcode on the devices you select:
|
| stretched | 0 | stretched="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_animation | fadeInUp | icon_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]