Special Heading

Overview

This element allows you to create custom headings with various styles, with different fonts, colors, etc Below you can find a few examples how a heading could look like.

View examples of special heading.

CODE SNIPPETS

How to use the snippets?

NOTE: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.

Shortcode

[av_heading tag='h3' padding='10' heading='Hello' color='' style='' custom_font='' size='' subheading_active='' subheading_size='15' custom_class='' admin_preview_bg='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-1g3l495'][/av_heading]

CUSTOMIZATION

Heading with multiple fonts

To add multiple font styles in a Special heading element wrap the words in  or tags and use the below CSS.

Select the heading style as “Modern centered“.

WELL DONE is better than well said.

/*----------------------------------------
// CSS - HEADING WITH MULTIPLE FONTS
//--------------------------------------*/

#top  .av-special-heading-tag {  
  font-family: Montserrat, sans-serif;  
}

#top  .av-special-heading-tag strong {
  font-weight: 700;
}

#top  .av-special-heading-tag em {
  font-family: 'Playfair Display', serif;
  text-transform: lowercase;
  font-style: italic;
}

Custom styled heading and subheading

Custom styled heading and subheading. Heading style used in the below example is “Modern centred”.

Special Heading

With a line in between

/*----------------------------------------
// CSS - CUSTOM STYLED HEADING AND SUBHEADING
//--------------------------------------*/

/* special heading */
#top  .av-special-heading-tag {  
  
  font-weight: 900;
  color:#1769ff;
  font-size: 30px;
font-family: 'Abril Fatface', cursive;
}

/* subheading */
#top  .av-subheading {
  font-size: 10px!important;
  text-transform: uppercase;
  letter-spacing: .5em;
  color: #a5a9ab;
font-family: 'Roboto Slab', serif;
}

Heading with lines on the sides

Custom CSS code for special heading with lines on both the sides.

Special Heading

/*----------------------------------------
// CSS - HEADING WITH LINES ON THE SIDES
//--------------------------------------*/

/* special heading */
#top  .av-special-heading {    
    font-weight: 900;
    color:#1769ff;
}

#top   .av-special-heading-tag {
    display: inline-block!important;
    position: relative;
}

#top  .av-subheading {
    margin: 15px 0 0 0;
}

  .av-special-heading-tag::before,   .av-special-heading-tag::after {
    content: '';
    position: absolute;
    top: 50%;
    transform : translateY(-50%);
    border-top: 2px solid currentcolor;
    width: 30%;
    color: #333;
}

#top   .av-special-heading-tag::before {
  left: -40%;
}
#top   .av-special-heading-tag::after {
  right: -40%;
}

Heading with underline

The heading say’s it all. To have an underline styled heading please use the CSS below.

SPECIAL HEADING

With a line in between

/*----------------------------------------
// CSS - HEADING WITH UNDERLINE
//--------------------------------------*/

/* special heading */
#top  .av-special-heading {    
    font-weight: 900;
}

#top  .av-special-heading-tag {
    display: inline-block!important;
    position: relative;
font-family: 'Anton', sans-serif;
font-size: 42px;
text-transform: uppercase;
}

#top   .av-subheading {
    margin: 25px 0 0 0;
font-family: 'Bitter', serif;
text-transform: uppercase;
letter-spacing: .5em;

}

  .av-special-heading-tag::before,   .av-special-heading-tag::after {
    content: '';
    position: absolute;
    top: 125%;
    transform : translateY(-0%);
    border-top: 2px solid currentcolor;
    width: 120%;
}

#top   .av-special-heading-tag::before {
  left: -0%;
}
#top   .av-special-heading-tag::after {
  right: -0%;
}

Remove the solid line on default special heading

The heading say’s it all. To have an underline styled heading please use the CSS below.

/*----------------------------------------
// CSS - Hide default heading border
//--------------------------------------*/

#top .av-special-heading .special-heading-inner-border {
    display: none;
}

Resource

Contributed video:

Special Heading Element Tutorial