Fancy headers

The fancy header shortcode displays stylish headings. The options for this shortcode are shown below. See examples here.

OptionDefaultExampleDescription
tagh2tag="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_animation0letter_in_animation="1"Animation for text entrance.
letter_animationfadeInletter_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-1font_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
stretched0stretched="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-1margin_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-1padding_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_spacing0letter_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_weight0font_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.
uppercase0uppercase="1"Makes the text all uppercase.
bold0bold="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]
Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy