Advanced Heading Block

Blog Staff

May 2, 2022

Advanced heading is all in one tool for any kind of text. Think about it as flagship of typography on your site because it has mind blowing possibilities. Just want to show some of them.

Example of animated heading. It has several styles of animations.

Slide effect

Animate your heading
creativityimaginationinspirationpassion

Push Effect

Just because creativityimaginationinspirationpassion in your mind

Loader Effect

Just because creativityimaginationinspirationpassion in your mind

Rotate effect

Just because creativityimaginationinspirationpassion in your mind

Zoom Effect

Just because creativityimaginationinspirationpassion in your mind

Type Effect

Just because in your mind

Also, you can add different additional elements to heading. For example, lines, borders, circles, etc

I am heading with zigzag element

Good option is ability to add circles.

You can configure also size, spacing, colors for each element

I am heading with circle number

You can also find the possibility to add dynamic highlight for Heading. If you have an Animation addon, you can also animate it

Highlighted Heading block is here

And you can add custom or predefined animations for Heading Appearance

GreenShift – Page-Building Gutenberg Blocks

You can change also shadows and even use up to 3 shadows in the same time to make 3d effects

I am heading block with 3 shadows

Also you can add Cliping mask to your headings

Image Mask

Copy this post’s content

Copy code below, and paste it (CTRL+V) in content of page

<p>Advanced heading is all in one tool for any kind of text. Think about it as flagship of typography on your site because it has mind blowing possibilities. Just want to show some of them.</p>

<p>Example of animated heading. It has several styles of animations.</p>

<p>Slide effect</p>

<div id="gspb_row-id-gsbp-f56d3839-c572" class="gspb_row gspb_row-id-gsbp-f56d3839-c572 wp-block-greenshift-blocks-row alignfull gspb_row-id-gsbp-f56d3839-c572"><div class="gspb_row__content"> 
<div id="gspb_col-id-gsbp-fc15b69e-5ef0" class="gspb_row__col--12 wp-block-greenshift-blocks-row-column  gspb_col-id-gsbp-fc15b69e-5ef0">
<h2 id="gspb_heading-id-gsbp-ef629266-25b1" class="gspb_heading gspb_heading-id-gsbp-ef629266-25b1 "><span class="text-anim text-anim--slide js-text-anim">Animate your heading<br> <span class="text-anim__wrapper js-text-anim__wrapper"><span class="text-anim__word js-text-anim__word text-anim__word--in">creativity</span><span class="text-anim__word js-text-anim__word ">imagination</span><span class="text-anim__word js-text-anim__word ">inspiration</span><span class="text-anim__word js-text-anim__word ">passion</span></span></span></h2>
</div>
 </div></div>

<p>Push Effect</p>

<h2 id="gspb_heading-id-gsbp-0d41c724-8e60" class="gspb_heading gspb_heading-id-gsbp-0d41c724-8e60 "><span class="text-anim text-anim--push js-text-anim">Just because <span class="text-anim__wrapper js-text-anim__wrapper"><span class="text-anim__word js-text-anim__word text-anim__word--in">creativity</span><span class="text-anim__word js-text-anim__word ">imagination</span><span class="text-anim__word js-text-anim__word ">inspiration</span><span class="text-anim__word js-text-anim__word ">passion</span></span></span> in your mind</h2>

<p>Loader Effect</p>

<h2 id="gspb_heading-id-gsbp-bfa374b8-76f8" class="gspb_heading gspb_heading-id-gsbp-bfa374b8-76f8 "><span class="text-anim text-anim--loader js-text-anim">Just because <span class="text-anim__wrapper js-text-anim__wrapper"><span class="text-anim__word js-text-anim__word text-anim__word--in">creativity</span><span class="text-anim__word js-text-anim__word ">imagination</span><span class="text-anim__word js-text-anim__word ">inspiration</span><span class="text-anim__word js-text-anim__word ">passion</span></span></span> in your mind</h2>

<p>Rotate effect</p>

<h2 id="gspb_heading-id-gsbp-5ebcdb91-def2" class="gspb_heading gspb_heading-id-gsbp-5ebcdb91-def2 "><span class="text-anim text-anim--rotate js-text-anim">Just because <span class="text-anim__wrapper js-text-anim__wrapper"><span class="text-anim__word js-text-anim__word text-anim__word--in">creativity</span><span class="text-anim__word js-text-anim__word ">imagination</span><span class="text-anim__word js-text-anim__word ">inspiration</span><span class="text-anim__word js-text-anim__word ">passion</span></span></span> in your mind</h2>

<p>Zoom Effect</p>

<h2 id="gspb_heading-id-gsbp-237fe66b-76d0" class="gspb_heading gspb_heading-id-gsbp-237fe66b-76d0 "><span class="text-anim text-anim--zoom js-text-anim">Just because <span class="text-anim__wrapper js-text-anim__wrapper"><span class="text-anim__word js-text-anim__word text-anim__word--in">creativity</span><span class="text-anim__word js-text-anim__word ">imagination</span><span class="text-anim__word js-text-anim__word ">inspiration</span><span class="text-anim__word js-text-anim__word ">passion</span></span></span> in your mind</h2>

<p>Type Effect</p>

<h2 id="gspb_heading-id-gsbp-b9c715c2-886c" class="gspb_heading gspb_heading-id-gsbp-b9c715c2-886c "><span class="text-anim text-anim--typewriter js-text-typewriter">Just because <span class="gstypewrite" data-type="["creativity","imagination","inspiration","passion"]" data-period="500"></span></span> in your mind</h2>

<p>Also, you can add different additional elements to heading. For example, lines, borders, circles, etc</p>

<div class="gspb_heading_sep_gsbp-c7821350-fd59"><div class="gspb_heading_sep gspb_heading_sep_before"><svg width="88" height="11" viewBox="0 0 88 11" xmlns="http://www.w3.org/2000/svg"><path d="M87.387 9.066c-7.279 0-7.279-6.787-14.557-6.787-7.28 0-7.28 6.787-14.561 6.787-7.283 0-7.283-6.787-14.565-6.787l-14.562 6.787c-7.286 0-7.286-6.787-14.57-6.787-7.287 0-7.287 6.787-14.571 6.787" fill="none"></path></svg></div><div id="gspb_heading-id-gsbp-c7821350-fd59" class="gspb_heading gspb_heading-id-gsbp-c7821350-fd59 ">I am heading with zigzag element</div><div class="gspb_heading_sep gspb_heading_sep_after"><svg width="88" height="11" viewBox="0 0 88 11" xmlns="http://www.w3.org/2000/svg"><path d="M87.387 9.066c-7.279 0-7.279-6.787-14.557-6.787-7.28 0-7.28 6.787-14.561 6.787-7.283 0-7.283-6.787-14.565-6.787l-14.562 6.787c-7.286 0-7.286-6.787-14.57-6.787-7.287 0-7.287 6.787-14.571 6.787" fill="none"></path></svg></div></div>

<p>Good option is ability to add circles.</p>

<p>You can configure also size, spacing, colors for each element</p>

<div class="gspb_heading_sep_gsbp-fc7e38eb-ea4d"><div class="gspb_heading_sep gspb_heading_sep_before"><div class="gs-numhead__circle"><span>1</span></div></div><div id="gspb_heading-id-gsbp-fc7e38eb-ea4d" class="gspb_heading gspb_heading-id-gsbp-fc7e38eb-ea4d ">I am heading with circle number</div></div>

<p>You can also find the possibility to add dynamic highlight for Heading. If you have an <a href="https://greenshiftwp.com#animation">Animation addon</a>, you can also animate it</p>

<h2 id="gspb_heading-id-gsbp-c5b8971e-85a7" class="gspb_heading gspb_heading-id-gsbp-c5b8971e-85a7 "><span class="gspb_heading_highlight gspb-inview">Highlighted Heading block is here</span></h2>

<p>And you can add custom or predefined animations for Heading Appearance</p>

<h2 id="gspb_heading-id-gsbp-32ea4eda-a016" class="gspb_heading gspb_heading-id-gsbp-32ea4eda-a016 " data-aos="custom" data-aos-easing="ease" data-aos-duration="700">GreenShift - Page-Building Gutenberg Blocks</h2>

<p>You can change also shadows and even use up to 3 shadows in the same time to make 3d effects</p>

<h2 id="gspb_heading-id-gsbp-6d9c716c-5efe" class="gspb_heading gspb_heading-id-gsbp-6d9c716c-5efe ">I am heading block with 3 shadows</h2>

<p>Also you can add Cliping mask to your headings</p>

<h2 id="gspb_heading-id-gsbp-83979744-24db" class="gspb_heading gspb_heading-id-gsbp-83979744-24db ">Image Mask</h2>

design, text

2 responses to “Advanced Heading Block”

Cheryl Tauer

September 6, 2022

How do i activate I can not get it to show up in wordpress I have downloaded done all i no to do help please
1. Blog Staff
  
  September 11, 2022
  
  Better to write to support of plugin or use Contact details

Advanced Heading Block

Animate your heading creativityimaginationinspirationpassion

Just because creativityimaginationinspirationpassion in your mind

Just because creativityimaginationinspirationpassion in your mind

Just because creativityimaginationinspirationpassion in your mind

Just because creativityimaginationinspirationpassion in your mind

Just because in your mind

Highlighted Heading block is here

GreenShift – Page-Building Gutenberg Blocks

I am heading block with 3 shadows

Image Mask

2 responses to “Advanced Heading Block”

Animate your heading
creativityimaginationinspirationpassion