Fancy headers

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: `h1` `h2` `h3` `h4` `h5` `div` `span`
type	(empty)	`type="style2"`	The header style: `(empty)` – Blank `style1` – Underline full width. `text-line` – Underline text width. `text-line fixed-width` – Underline fixed width. `style1 prime-line` – Underline full width, primary line text width. `prime-line` – Primary line text width. `prime-line fixed-width` – Primary line fixed width. `style1 prime-line animate-line` – Animated, underline full width and primary line text width. `style1 prime-line animate-line fixed-width` – Animated, underline full width and primary line fixed width. `prime-line animate-line` – Animated, primary line text width. `prime-line animate-line fixed-width` – Animated, primary line fixed width. `style2` – Primary color box `style3` – Bubble box (uses Light color)
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: `(empty)` – Default `reverse` – Reverse `shuffle` – Shuffle
icon_position	(empty)	`icon_position="icon-above"`	Where to show the icon in relation to the header text: `(empty)` – Left `icon-above` – Above
size	(empty)	`size="small"`	There are 5 overall sizes for the fancy headers: `(empty)` – Inherit from tag `small` `medium` `large` `huge`
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: `(empty)`– Inherit `textleft` – Left `textcenter` – Center `textright` – Right
text_align_convert_device	(empty)	`text_align_convert_device="mobile"`	Change the text alignment for smaller devices? Which devices to use the new alignment: `(empty)` – None `phone` – Phones `tablet` – Tablets `mobile` – All mobile devices
text_align_convert_align	(empty)	`text_align_convert_align="textcenter"`	Choose a new text alignment for smaller devices. Options: `textleft` – Left `textcenter` – Center `textright` – Right
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: `(empty)` – Em `px` – Pixels
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]

Example

Explore

Feedback

About us

We are web team who one sunny day decided to become ThemeCatcher and devote our combined efforts to make web products that are user friendly and affordable.

We have been building web sites as a team since 2002, we ran an agency for 3 years before moving to ThemeCatcher which has been our most suited project thus far.

You'll find our work on the Envato Network, you can visit our portfolios on CodeCanyon and on ThemeForest.