The fancy header shortcode displays stylish headings. The options for this shortcode are shown below. See examples here.
| Option | Default | Example | Description |
|---|---|---|---|
| tag | h2 | tag="h4" | The header HTML tag. Use the appropriate tag for better SEO and usability:
|
| type | (empty) | type="style2" | The header style:
|
| animation | (empty) | animation="fadeIn" | Add an animation when the header comes into view, use the shortcode generator to see available options. |
| animation_delay | (empty) | animation_delay="1500" | The animation will not start until this number of milliseconds after the element comes into view (1000 milliseconds = 1 second). |
| animation_offset | (empty) | 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. |
| icon | (empty) | icon="icon-heart" | The icon will show to the left of the Heading, use the shortcode generator to see available options. |
| letter_in_animation | 0 | letter_in_animation="1" | Animation for text entrance. |
| letter_animation | fadeIn | letter_animation="fadeInUp" | Add a letter animation when the header comes into view, use the shortcode generator to see available options. |
| letter_animation_type | (empty) | letter_animation_type="shuffle" | Choose the type of letter animation:
|
| icon_position | (empty) | icon_position="icon-above" | Where to show the icon in relation to the header text:
|
| size | (empty) | size="small" | There are 5 overall sizes for the fancy headers:
|
| font_size | -1 | font_size="36" | Set a custom font size in px. |
| text_align | (empty) | text_align="textright" | Text alignment for the header. Options:
|
| text_align_convert_device | (empty) | text_align_convert_device="mobile" | Change the text alignment for smaller devices? Which devices to use the new alignment:
|
| text_align_convert_align | (empty) | text_align_convert_align="textcenter" | Choose a new text alignment for smaller devices. Options:
|
| stretched | 0 | stretched="1" | This will stretch the header to the edge of the main container, giving it a banner effect. |
| max_width | (empty) | max_width="200px" | Set the maximum width of the header. |
| margin_top | -1 | margin_top="20" | Set the margin-top, for default margins based on Size, use -1. |
| margin_bottom | (empty) | margin_bottom="20" | Set the margin-bottom, for default margins based on Size, use -1. |
| padding_top | -1 | padding_top="20" | Set the padding-top, for default padding based on Size, use -1. |
| padding_bottom | (empty) | padding_bottom="20" | Set the padding-bottom, for default padding based on Size, use -1. |
| letter_spacing | 0 | letter_spacing="10" | Set the letter-spacing value. For better accuracy, em are used to set the letter spacing. If you need a larger space use px. The value 0 will inherit from the theme styles. Enter a value in a hundredth of an em or px. |
| unit | (empty) | unit="px" | Set the letter-spacing unit:
|
| font_weight | 0 | font_weight="700" | Set the font-weight, the lower the number the thinner the text. You must make sure you link to the Google font files required for each weight you use in your site. The value 0 will inherit from the theme styles. |
| uppercase | 0 | uppercase="1" | Makes the text all uppercase. |
| bold | 0 | bold="1" | Makes the text bold. |
| id | (empty) | id="my-header" | This will set the id attribute to allow you to make anchor links to this header. |
| class | (empty) | class="my-header" | Add additional classes to the header |
Example
[fancy_header type="style2"]My heading[/fancy_header]