{"id":4095,"date":"2026-10-28T04:02:54","date_gmt":"2026-10-28T04:02:54","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/animation-title\/"},"modified":"2026-11-04T05:17:38","modified_gmt":"2026-11-04T05:17:38","password":"","slug":"animation-title","status":"publish","type":"docs","link":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/animation-title\/","title":{"rendered":"Animation Title"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The Animation Title Block adds a heading with an animation. You can rotate a set of words, draw a line under or around a word, make a word wave, bring the whole heading in with one of fourteen entrance effects, or let it follow the scroll with one of five scroll effects.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use it for hero headings and section titles that should catch the eye.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How to Create an Animated Heading in WordPress Gutenberg | ShapeBlock Pro Animation Title\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/50ZYmL5DLyE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add an Animation Title Block<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Follow these steps to add and configure the Animation Title Block in the Gutenberg editor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Add the Animation Title Block<\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Open a page or post in the WordPress Gutenberg editor.<\/li>\n\n\n\n<li>Click the <strong>+<\/strong> button to open the block inserter.<\/li>\n\n\n\n<li>Search for <strong>Animation Title<\/strong> under ShapeBlock.<\/li>\n\n\n\n<li>Insert the Animation Title Block into your page.<\/li>\n\n\n\n<li>Select the block to access its settings in the right-hand sidebar.<\/li>\n\n\n\n<li>Type the text before and after the animated words directly on the heading.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"260\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-animation-title-1.webp\" alt=\"Animation Title block in the block inserter\" class=\"wp-image-4091\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-animation-title-1.webp 350w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-animation-title-1-300x223.webp 300w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Configure the Animation Title Block<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Select the Animation Title Block and open its settings in the right-hand sidebar. The available tabs are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Settings:<\/strong> Choose the animation and its words, and set the HTML tag.<\/li>\n\n\n\n<li><strong>Style:<\/strong> Customize the heading, text shadow, and animated words.<\/li>\n\n\n\n<li><strong>Advanced:<\/strong> Configure the block padding, margin, and background.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Click <strong>Replay the animation<\/strong> in the block toolbar to play it again in the editor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"640\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-animation-title-2.webp\" alt=\"Animation Title block selected in the editor with its settings sidebar\" class=\"wp-image-4092\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-animation-title-2.webp 1440w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-animation-title-2-600x267.webp 600w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-animation-title-2-300x133.webp 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-animation-title-2-1024x455.webp 1024w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-animation-title-2-768x341.webp 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Settings Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Settings tab contains the <strong>Animation<\/strong> and <strong>Heading<\/strong> panels.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Animation<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Animation:<\/strong> Choose the animation. The list has three groups.\n<ul class=\"wp-block-list\">\n<li><strong>Animated Words:<\/strong> Rotating Words (the words take turns), Highlighted Word (a line draws itself under or around the word), and Wave (the letters rise and fall).<\/li>\n\n\n\n<li><strong>Comes In When Seen:<\/strong> The whole heading comes in as it scrolls into view. Choose from Characters (Slide In), Split Letters, Split Words (Up), Split Lines (From Below), Split Lines (3D From Below), Split Lines (From the Right), Split Letters (From the Right), Split Lines (From Above), Text Reveal (Letters Fade In), Text Word (Fall and Turn), Text Bounce, Typewriter, Words Slide Up, and Words Rotate In.<\/li>\n\n\n\n<li><strong>Follows the Scroll:<\/strong> The whole heading follows the scroll as it moves up the screen. Choose from Text Reveal Scroll, Text Reveal Up, Text Fade Up, Text Zoom In, and Text 3D Effect.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Animated Words:<\/strong> Rotating Words only. Enter the words, one per line. They take turns between the text before and after.<\/li>\n\n\n\n<li><strong>Highlighted Word, Wave Word, Coloured Words:<\/strong> For the other animations, enter the word to animate. With entrance and scroll effects this is optional: the words get a style of their own in the Style tab.<\/li>\n\n\n\n<li><strong>Line:<\/strong> Highlighted Word only. Choose Underline, Circle, Curly, Double Underline, or Strike Through. Set the <strong>Line Colour<\/strong> and <strong>Line Width<\/strong>.<\/li>\n\n\n\n<li><strong>Time Between Pieces (ms):<\/strong> Entrance effects only. Set the delay between one letter, word, or line and the next.<\/li>\n\n\n\n<li><strong>Turn In From:<\/strong> Text 3D Effect only. Choose Top, Bottom, Left, or Right.<\/li>\n\n\n\n<li><strong>Word Effect:<\/strong> Rotating Words only. Choose how words change: Slide Up, Slide Down, Fade, Zoom, Flip, Blur, or Wipe.<\/li>\n\n\n\n<li><strong>Time Each Word Shows (ms):<\/strong> Rotating Words only. Set how long each word stays.<\/li>\n\n\n\n<li><strong>Animation Speed (ms):<\/strong> Set how long the animation takes.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#f3edec;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px\"><strong>Note:<\/strong> Word Effect, Time Each Word Shows, and Animation Speed start on <strong>Default<\/strong>, which uses the value set for the whole site under <strong>ShapeBlock &gt; Animation<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Heading<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>HTML Tag:<\/strong> Choose the tag used for the heading, such as H1 or H2.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"1010\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-animation-title-3.webp\" alt=\"Animation Title block, Settings tab in the sidebar\" class=\"wp-image-4093\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-animation-title-3.webp 280w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-animation-title-3-83x300.webp 83w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Style Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Style tab contains the <strong>Heading<\/strong>, <strong>Text Shadow<\/strong>, and animated words panels. The last panel is named after the chosen animation, for example <strong>Animated Words<\/strong> or <strong>Highlighted Word<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Heading<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Colour:<\/strong> Set the heading color.<\/li>\n\n\n\n<li><strong>Typography:<\/strong> Customize the font family, size, weight, style, text transform, line height, and letter spacing. Responsive settings are available for desktop, tablet, and mobile devices.<\/li>\n\n\n\n<li><strong>Outlined Letters:<\/strong> Show the letters as outlines only. Set the <strong>Outline Colour<\/strong> and <strong>Outline Width (px)<\/strong>.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Text Shadow<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Shadow Colour:<\/strong> Pick a color to add a shadow behind the text.<\/li>\n\n\n\n<li><strong>Across (px), Down (px), Blur (px):<\/strong> Set the shadow offset and softness. These options appear when a shadow color is set.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. Animated Words<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Style:<\/strong> Choose how the animated words look: Plain, Gradient, Highlight, Underline, or Outline.<\/li>\n\n\n\n<li><strong>Colour:<\/strong> Set the word color, or the outline color with the Outline style.<\/li>\n\n\n\n<li><strong>Gradient or Highlight Colour:<\/strong> Set the gradient or the highlight color. These options appear with the Gradient and Highlight styles.<\/li>\n\n\n\n<li><strong>Line Colour:<\/strong> Set the underline color. This option appears with the Underline style.<\/li>\n\n\n\n<li><strong>Typography:<\/strong> Customize the font family, size, weight, style, text transform, line height, and letter spacing. Responsive settings are available for desktop, tablet, and mobile devices.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"850\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-animation-title-4.webp\" alt=\"Animation Title block, Style tab in the sidebar\" class=\"wp-image-4094\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-animation-title-4.webp 280w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-animation-title-4-99x300.webp 99w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Advanced Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Advanced tab provides additional spacing and background controls for the Animation Title Block. These settings apply to the entire block.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Spacing<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Padding:<\/strong> Set the inner spacing around the entire Animation Title Block. Configure the top, right, bottom, and left values separately.<\/li>\n\n\n\n<li><strong>Margin:<\/strong> Set the outer spacing around the entire Animation Title Block. Configure the top, right, bottom, and left values separately.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Both controls support responsive settings for desktop, tablet, and mobile devices.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Background<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Background:<\/strong> Customize the background of the entire Animation Title Block using a background color or gradient.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#f3edec;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px\"><strong>Note:<\/strong> The background applies to the whole block area.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Live demo:<\/strong> see the Animation Title Block in action on the <a href=\"https:\/\/shapekode.com\/product\/shapeblock\/animation-title\/\">Animation Title demo page<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Animation Title Block adds a heading with an animation. You can rotate a set of words, draw a line under or around a word, make a word wave, bring the whole heading in with one of fourteen entrance effects, or let it follow the scroll with one of five scroll effects. Use it for [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[16,30],"doc_tag":[],"class_list":["post-4095","docs","type-docs","status-publish","hentry","doc_category-content-block","doc_category-pro-blocks"],"year_month":"2026-11","word_count":872,"total_views":"6","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Sojib","author_nicename":"shapekode-admin","author_url":"https:\/\/shapekode.com\/product\/shapeblock\/author\/shapekode-admin\/"},"doc_category_info":[{"term_name":"Content Block","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/content-block\/"},{"term_name":"Pro Blocks","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/pro-blocks\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/comments?post=4095"}],"version-history":[{"count":2,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4095\/revisions"}],"predecessor-version":[{"id":5506,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4095\/revisions\/5506"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=4095"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_category?post=4095"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_tag?post=4095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}