{"id":3115,"date":"2021-06-23T09:23:41","date_gmt":"2021-06-23T09:23:41","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=3115"},"modified":"2023-02-21T10:39:56","modified_gmt":"2023-02-21T10:39:56","slug":"how-to-use-the-heading-widget-on-the-elementor-page-builder","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-use-the-heading-widget-on-the-elementor-page-builder\/","title":{"rendered":"How to Use the Heading Widget"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3115\" class=\"elementor elementor-3115\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-76ab0f3c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"76ab0f3c\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5c39d4b9\" data-id=\"5c39d4b9\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a4f3e0c elementor-widget elementor-widget-video\" data-id=\"a4f3e0c\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/lDIkQCCOw7Q&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6fbd3b9c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6fbd3b9c\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7a4a5be7\" data-id=\"7a4a5be7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-671ab291 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"671ab291\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1721\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1721\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1722\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1722\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1721\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1721\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1721\" tabindex=\"0\" hidden=\"false\"><p>Headings are important elements on your site. They help visitors and search engines scan your website easily, understand the hierarchy of a page, and of course..deliver an impactful message!<\/p><p>This tutorial will cover:<br \/>\u2714\ufe0e Styling headings to suit your designs<br \/>\u2714\ufe0e Adjusting them for mobile devices<br \/>\u2714\ufe0e Using HTML Tags for your Page Hierarchy &amp; SEO<br \/>\u2714\ufe0e And much more!<\/p><p>Extra Links:<br \/><a href=\"https:\/\/elementor.com\/academy\/how-to-use-elementor-landing-page-builder\/\">Landing Pages<\/a><br \/><a href=\"https:\/\/elementor.com\/help\/dynamic-tags-pro\/\">Dynamic Tags [PRO]<\/a><br \/><a href=\"https:\/\/elementor.com\/academy\/global-colors-fonts-creating-a-design-system-with-elementor\/\">Global Colors &amp; Fonts Webinar<\/a><br \/><a href=\"https:\/\/elementor.com\/academy\/elementor-responsive-101-all-you-need-to-know\/\">Responsive 101<\/a><br \/><a href=\"https:\/\/youtube.com\/playlist?list=PLZyp9H25CboG9373TVRjekeSDulk-L3jP\" target=\"_blank\" rel=\"noopener\">Advanced Tab Playlist<\/a><\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1722\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1722\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1722\" tabindex=\"0\" hidden=\"hidden\"><p>Hi all, it\u2019s Ziv from Elementor. Today we\u2019ll cover one of the most important and most used widgets &#8211; the heading widget!<\/p><p>As you probably know, headings are important elements on any kind of web page. They help visitors and search engines scan your website easily, understand the hierarchy of a page, and of course, deliver an impactful message!<\/p><p>So let\u2019s dive in and explore the heading widget.<br \/>I\u2019ll be using this cool dog food landing page as an example.<br \/>You can find this template in the Elementor landing pages library. Follow the link I left in the description to learn more about it.<\/p><p>I\u2019ll be using this cool dog food landing page as an example, which you can find in the Elementor Landing Pages Library. Follow the link I left in the description to learn more about it.<\/p><p>Okay. From the widget panel, drag and drop a heading widget onto your page. The blue line indicates where it will be positioned when you let go.<br \/>Let\u2019s first type the text.<\/p><p>By the way, if you are an Elementor Pro user, you can use the Dynamic tags feature instead of typing static text. It enables you to select text to appear dynamically, such as a post\u2019s title, date or time. The same goes for any other field with this icon.<\/p><p>Next, you can link the heading to another page on your site, by simply typing the name and selecting it from the list. Or paste any external link you want in the field.<\/p><p>Here, you can choose to use one of these preset sizes. Soon I\u2019ll show you how to set an exact size as well.<\/p><p>Next, you can decide which HTML tag the heading gets. This will help you establish the hierarchy within the page. And when done correctly is great for your SEO.<\/p><p>H1 defines the most important heading, and H6 the least important one.<\/p><p>You can control the alignment of the text over here.<\/p><p>Great, the content is all set. Time to Style this Heading!<\/p><p>You can set the text color, either by choosing a custom one from the color picker. Or select one of your predefined global colors, if you\u2019re working with a design system. They help you work smarter by enabling you to save colours and use them anywhere throughout your site.<\/p><p>The same goes for Typography, you can choose one of your global fonts, or click the pencil icon to give it a custom style.<br \/>You can set the font family, size, weight, and a lot more.<\/p><p>I\u2019ll go ahead and increase the font size, and adjust the line height a bit.<\/p><p>Pay attention that some of these options, such as the size, have device icons next to them. It indicates that you can set specific sizes for desktop, tablet and mobile devices.<br \/>I\u2019ll go ahead and choose mobile. It\u2019ll automatically take you to the Mobile Responsive Mode. Then simply adjust the size.<\/p><p>You can click here to check out the Tablet Mode.<br \/>And adjust the size the same way.<br \/>To exit the mobile responsive mode, click here.<\/p><p>Next, if you want to, you can add a cool text shadow to your heading.<br \/>You can control the shadow color, the horizontal and vertical positions, as well as its blur strength. You can always click reset to remove it.<\/p><p>Another cool way to liven up your designs is by applying a Blend Mode. They let you create cool effects by combining the widget\u2019s styling with the background behind it. There are multiple options to choose from, but you do need something to blend with. I\u2019ll add an image to the section\u2019s background so you can see.<br \/>Then, back in the heading widget, simply play around with the Blend Modes and styling, till you\u2019re happy with the result.<\/p><p>Cool! We&#8217;re almost done. I\u2019ll go ahead and set it back to how it was.<\/p><p>Lastly, In the advanced tab you can find many additional settings, such as margin, padding, the z-index, motion Effects, mask, positioning, and a lot more. To learn more about these settings, checkout our dedicated Advanced Tab playlist.<\/p><p>Well that\u2019s it! Now you know how to use the heading widget, and style them to your liking, so they deliver a powerful message.<br \/>We look forward to seeing how you use heading widgets. So Feel free to share your designs in the comments!<\/p><p>As always, don\u2019t forget to subscribe to our YouTube channel for more tips and tutorials. Ciao for now!<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview Headings are important elements on your site. They help visitors and search engines scan your website easily, understand the hierarchy of a page, and of course..deliver an impactful message! This tutorial will cover: \u2714\ufe0e Styling headings to suit your designs \u2714\ufe0e Adjusting them for mobile devices \u2714\ufe0e Using HTML Tags for your [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":4205,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-3115","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Use the Heading Widget - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/how-to-use-the-heading-widget-on-the-elementor-page-builder\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use the Heading Widget - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview Headings are important elements on your site. They help visitors and search engines scan your website easily, understand the hierarchy of a page, and of course..deliver an impactful message! This tutorial will cover: \u2714\ufe0e Styling headings to suit your designs \u2714\ufe0e Adjusting them for mobile devices \u2714\ufe0e Using HTML Tags for your [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-use-the-heading-widget-on-the-elementor-page-builder\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-23T09:23:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-21T10:39:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Heading-Widget-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use the Heading Widget - Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/how-to-use-the-heading-widget-on-the-elementor-page-builder\/","og_locale":"en_US","og_type":"article","og_title":"How to Use the Heading Widget - Academy","og_description":"Overview Transcript Overview Headings are important elements on your site. They help visitors and search engines scan your website easily, understand the hierarchy of a page, and of course..deliver an impactful message! This tutorial will cover: \u2714\ufe0e Styling headings to suit your designs \u2714\ufe0e Adjusting them for mobile devices \u2714\ufe0e Using HTML Tags for your [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-use-the-heading-widget-on-the-elementor-page-builder\/","og_site_name":"Academy","article_published_time":"2021-06-23T09:23:41+00:00","article_modified_time":"2023-02-21T10:39:56+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Heading-Widget-1.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-heading-widget-on-the-elementor-page-builder\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-heading-widget-on-the-elementor-page-builder\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Use the Heading Widget","datePublished":"2021-06-23T09:23:41+00:00","dateModified":"2023-02-21T10:39:56+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-heading-widget-on-the-elementor-page-builder\/"},"wordCount":853,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-heading-widget-on-the-elementor-page-builder\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Heading-Widget-1.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-heading-widget-on-the-elementor-page-builder\/","url":"https:\/\/elementor.com\/academy\/how-to-use-the-heading-widget-on-the-elementor-page-builder\/","name":"How to Use the Heading Widget - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-heading-widget-on-the-elementor-page-builder\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-heading-widget-on-the-elementor-page-builder\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Heading-Widget-1.jpg","datePublished":"2021-06-23T09:23:41+00:00","dateModified":"2023-02-21T10:39:56+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-heading-widget-on-the-elementor-page-builder\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-use-the-heading-widget-on-the-elementor-page-builder\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-heading-widget-on-the-elementor-page-builder\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Heading-Widget-1.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Heading-Widget-1.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-heading-widget-on-the-elementor-page-builder\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"How to Use the Heading Widget"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/3115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=3115"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/3115\/revisions"}],"predecessor-version":[{"id":9623,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/3115\/revisions\/9623"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/4205"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=3115"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=3115"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=3115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}