{"id":28468,"date":"2021-08-18T17:00:33","date_gmt":"2021-08-18T15:00:33","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=28468"},"modified":"2021-08-18T14:04:03","modified_gmt":"2021-08-18T12:04:03","slug":"how-to-add-section-title-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-add-section-title-in-wordpress\/","title":{"rendered":"What Is a Section Title and How to Add It in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]If you\u2019re searching for an effective and stylish way to grab the attention of your website visitors while they scroll through your pages, then section titles are certainly the way to go. These typography elements <strong>can help users understand what your content is about fast<\/strong>, further contributing to the user-friendliness of your site and making them interested in exploring more.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For this reason, we\u2019ve decided to show you how you can create and add a section title to your WordPress site using the practical <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\">Qi Addons for Elementor Plugin<\/a> and its Section Title widget. In addition, we will also share some of the most common practices when it comes to adding this useful element to a page, so make sure to read on as we talk about:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-is-a-section-title\">What Is a Section Title and Why Is It Useful?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-use-section-titles-on-a-page\">How to Use Section Titles on a Page?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#most-common-practices\">Some of the Most Common Practices When Using Section Titles<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-a-section-title-with-a-plugin\">Adding a Section Title in WordPress Site With a Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-is-a-section-title\"><\/a>What Is a Section Title and Why Is It Useful?<\/h2>\n<p>[\/vc_column_text][vc_column_text]A section title is a typographic decoration element often used to capture the attention of users and allow them to easily remember the most important information within a page or section. Unlike <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-use-header-tags-for-seo\/\">header tags<\/a> that are also used to provide a better content structure and boost the SEO of your site, the main purpose of section titles is to<strong> give a clear idea of what a specific section is about<\/strong>. They have the power to offer a precise overview of your content while engaging and inspiring readers to view more of your content all at once. Therefore, it can be said that section titles also allow users to understand more about different pages without actually reading the entire content.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"517\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Qi-Section-Title.jpg\" class=\"attachment-full size-full\" alt=\"Qi Section Title\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Qi-Section-Title.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Qi-Section-Title-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Qi-Section-Title-768x410.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Qi-Section-Title-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-use-section-titles-on-a-page\"><\/a>How to Use Section Titles on a Page?<\/h2>\n<p>[\/vc_column_text][vc_column_text]There are many different ways in which section titles can be used on a page. For example, they can serve as a <strong>preview of different topics addressed on a page<\/strong> and act as a sort of <a href=\"https:\/\/qodeinteractive.com\/magazine\/add-table-of-content-to-wordpress\/\">table of contents<\/a>. They can also be quite handy when used as an introduction to your business, product, or services. Oftentimes, you can see them on websites as sections that consist of a captivating title, informative subtitle, and\/or additional text section that contains some of the brand\u2019s key characteristics, brief about info, or even its core principles and philosophies. When used in this way, they can even<strong> represent a preview or teaser of different pages<\/strong>. In these cases, section titles can also include buttons that, when clicked on, lead to other pages, allowing them to learn more about the topics in question and explore the site in more detail.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]News sites and blogging platforms also use section titles to list some of their newest and most popular blog posts or even featured articles. Every section title can provide a clear idea of the article\u2019s subject and can include its first 30-50 words right below, along with a link that leads to the entire article.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]All in all, how you will use section titles depends entirely on your purpose and design vision.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;qi-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"most-common-practices\"><\/a>Some of the Most Common Practices When Using Section Titles<\/h2>\n<p>[\/vc_column_text][vc_column_text]Since section titles also serve to captivate the attention of visitors (aside from providing them with different types of information), this leaves space for plenty of creativity and experimentation on your part. Still, there are some general rules you can follow when generating your own section title. For example, <strong>adding a different font type to your section title compared to the one you\u2019re using for the rest of your site\u2019s typography<\/strong> is perfectly fine as it can help engage your audience. If you want, you can add one of the decorative or <a href=\"https:\/\/qodeinteractive.com\/magazine\/elegant-fonts\/\">elegant fonts<\/a>, or even use some more unconventional font types to make them look particularly striking. Still, you should make sure that they look clean and are easy to read in general.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can also feel free to experiment with the size of your section titles, their font weight, style, and decoration options. This means you can <strong>make your section title appear bold, italic, underline, or even combine all these traits at once<\/strong> \u2013 as long as they match the overall design style of your site.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The same goes for choosing whether your section titles will all be uppercase, lowercase, capitalized at the beginning of each word, or whether you will capitalize the beginning of the first word only. Most often, however, you will run into section titles that are either capitalized at the beginning of each word or come with only the first word capitalized except for things like conjunctions, prepositions, and articles (and, or, but, a, the, in, to, etc.).<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, we recommend that you <strong>refrain from using periods<\/strong> (or full stops) at the end of your section titles. The reason for this is simple \u2013 section titles represent titles, after all, and titles don\u2019t have periods. Furthermore, a period can make the reader stop reading when they run into them. This can be counterproductive as titles should inspire the user to keep reading. Therefore, it\u2019s important to keep their reading flow going without distracting them with full stops.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-a-section-title-with-a-plugin\"><\/a>Adding a Section Title in WordPress Site With a Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]Now, while it\u2019s true that you can add section titles in WordPress using the HTML code, it\u2019s much easier to do so using the help of a full-featured section title widget. Namely, the <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\">Qi Addons for Elementor<\/a> plugin comes packed with 60 different flexible widgets that allow you to fully customize different sections of your WordPress site in any way you like with complete ease.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"493\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Qi-Addons-For-Elementor.jpg\" class=\"attachment-full size-full\" alt=\"Qi Addons For Elementor\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Qi-Addons-For-Elementor.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Qi-Addons-For-Elementor-300x153.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Qi-Addons-For-Elementor-768x391.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Qi-Addons-For-Elementor-620x315.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/section-title\/\">Section Title<\/a> is one such widget that you can use to create fully customizable and captivating titles for different page sections. You will get to <strong>adjust various header tags, add colors, and set different typography options<\/strong> for each separate section of your title. Moreover, not only will you be able to do all this to your title, but you will also be able to <strong>customize your subtitle, include additional text, and even add button and button icons<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"512\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Qi-Section-Title-2.jpg\" class=\"attachment-full size-full\" alt=\"Qi Section Title\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Qi-Section-Title-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Qi-Section-Title-2-300x159.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Qi-Section-Title-2-768x406.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Qi-Section-Title-2-620x328.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Before we show you how to add a section title in WordPress, we should note that the Qi Addons for Elementor is a plugin that works with Elementor (as its name suggests). Therefore, you should have the Elementor page builder installed first in order to use this plugin.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Also, in case you prefer to watch videos instead of reading, we\u2019ve got a video for you that covers the same subject, so make sure to check it out:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]<iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/fO41Kwhkkgs\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;][vc_column_text]With that said, let\u2019s see how you can easily add a section title in WordPress using the Qi Addons for Elementor\u2019s practical and versatile Section Title widget.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Adding the Section Title Widget and Using the Content Tab<\/h3>\n<p>[\/vc_column_text][vc_column_text]Go to the backend of your page or post using the Elementor page builder. Then, <strong>search for the Section Title widget in the Elementor sidebar and drag it over to the right side of the screen.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Section Title Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Widget.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Widget-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Widget-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Widget-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You will notice that the default section title has some placeholder content that consists of a subtitle, title, and some additional text.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Default-Look.jpg\" class=\"attachment-full size-full\" alt=\"Section Title Default Look\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Default-Look.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Default-Look-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Default-Look-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Default-Look-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The first thing we will replace is the title. To do this yourself, you should click the <em>Title<\/em> field on the left (located in the <em>Content<\/em> tab) and replace the existing text with your own. You can do the same to your Subtitle.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Title-and-Subtitle.jpg\" class=\"attachment-full size-full\" alt=\"Section Title Title and Subtitle\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Title-and-Subtitle.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Title-and-Subtitle-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Title-and-Subtitle-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Title-and-Subtitle-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, this next option called <em>Subtitle Position<\/em> allows you to pick the desired position of your subtitle \u2013 just like its name indicates. It\u2019s set to be placed above the title by default, but you can easily change it to be below the title (we\u2019ve left ours at default, i.e. above the title).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Subtitle-Position.jpg\" class=\"attachment-full size-full\" alt=\"Section Title Subtitle Position\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Subtitle-Position.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Subtitle-Position-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Subtitle-Position-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Subtitle-Position-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, there\u2019s the <em>Text<\/em> field that allows you to replace the default text with your own. We\u2019ve inserted the content from one of the available examples that can be found on the widget\u2019s page.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Text-Field.jpg\" class=\"attachment-full size-full\" alt=\"Section Title Text Field\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Text-Field.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Text-Field-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Text-Field-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Text-Field-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Of course, you can also use some of the other available options that will allow you to change the look of your text. For example, you can change the HTML tag, make your text appear bold, italic, underline, format it as a list, etc. You can even add media and use the Text mode to add any code or style it with CSS if you\u2019d like.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Text-Field-Options.jpg\" class=\"attachment-full size-full\" alt=\"Section Title Text Field Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Text-Field-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Text-Field-Options-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Text-Field-Options-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Text-Field-Options-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Right underneath, you have the option that determines the line break position. For example, if you insert the number three into this field, the line will break after the third word. And in case you want to have multiple line breaks, simply separate your numbers using the comma.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Positions-of-Line-Break.jpg\" class=\"attachment-full size-full\" alt=\"Positions of Line Break\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Positions-of-Line-Break.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Positions-of-Line-Break-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Positions-of-Line-Break-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Positions-of-Line-Break-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you want to disable the title line break for screens with a size 1024 and lower, you should use the option with the same name by switching it to <em>Yes<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Disable-Line-Break.jpg\" class=\"attachment-full size-full\" alt=\"Disable Line Break\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Disable-Line-Break.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Disable-Line-Break-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Disable-Line-Break-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Disable-Line-Break-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, the <em>Position of Decorated Words<\/em> option will allow you to decorate certain words from your title to make them stand out better. Simply set their number here and separate them by commas. We\u2019ve entered the numbers one, two, and three, and you can instantly see how these words have changed their look.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Decorated-Words.jpg\" class=\"attachment-full size-full\" alt=\"Decorated Words\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Decorated-Words.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Decorated-Words-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Decorated-Words-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Decorated-Words-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The default decoration is set to italic, but you can easily change that by heading to the <em>Style<\/em> tab and finding the <em>Title Different Decoration<\/em> option.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"561\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Different-Decoration.jpg\" class=\"attachment-full size-full\" alt=\"Title Different Decoration\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Different-Decoration.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Different-Decoration-300x174.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Different-Decoration-768x445.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Different-Decoration-620x359.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can pick from bold, italic, and underline once you open the dropdown. Feel free to choose any option that works for you.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Going back to the <em>Content<\/em> tab and its settings, we will remove the values for decorated words as we\u2019ve just added them to quickly demonstrate what this option does.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Similar to the above-mentioned option, there\u2019s also the option called <em>Positions of Different Colored Words<\/em>. For example, if you set \u201c1,2,3\u201d in this field, you will see that the first three words will have a different color compared to others.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Different-Colored-Words.jpg\" class=\"attachment-full size-full\" alt=\"Different Colored Words\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Different-Colored-Words.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Different-Colored-Words-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Different-Colored-Words-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Different-Colored-Words-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once again, you can set your preferred color using the <em>Style<\/em> tab. Then, you should find the <em>Title Different Color<\/em> option. Of course, you can use this option to set whichever color you like using the color picker or entering the hex code.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"708\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Different-Color.jpg\" class=\"attachment-full size-full\" alt=\"Title Different Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Different-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Different-Color-300x219.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Different-Color-768x561.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Different-Color-620x453.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, <strong>the <em>Enable Button<\/em> option will allow you to have a button in your section title element.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Enable-Button.jpg\" class=\"attachment-full size-full\" alt=\"Enable Button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Enable-Button.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Enable-Button-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Enable-Button-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Enable-Button-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you switch this setting to <em>Yes<\/em>, you will also get to use the <em>Button<\/em> section that contains different options related to your button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Button Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Settings-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]There\u2019s the <em>Layout<\/em> option that allows you to choose whether your button will be Filled (which is our default), Outlined or Textual.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Also, the <em>Button Types<\/em> option lets you set the type of your button. You will be able to choose from <em>Standard<\/em> (which is our default), <em>With Inner Border<\/em>, and <em>Icon Boxed<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Layout-and-Type.jpg\" class=\"attachment-full size-full\" alt=\"Button Layout and Type\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Layout-and-Type.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Layout-and-Type-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Layout-and-Type-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Layout-and-Type-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you want, you can also enable the <em>Button Text Underline<\/em>. Here\u2019s what it looks like if you switch it to <em>Yes<\/em> (we will switch this option back to default right afterward):[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Underline.jpg\" class=\"attachment-full size-full\" alt=\"Button Underline\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Underline.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Underline-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Underline-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Underline-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can also pick the button <em>Size<\/em> and choose from Normal (this is our default), Small, Large, and Normal Full Width.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here you will also find the <em>Button Text<\/em> field option that will allow you to enter your desired button text. We\u2019ve replaced ours with the text that says \u201cView More\u201d.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Size-and-Button-Text.jpg\" class=\"attachment-full size-full\" alt=\"Button Size and Button Text\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Size-and-Button-Text.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Size-and-Button-Text-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Size-and-Button-Text-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Size-and-Button-Text-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The Button Link option lets you insert a link. We\u2019ve used a hashtag as a placeholder.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Link.jpg\" class=\"attachment-full size-full\" alt=\"Button Link\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Link.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Link-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Link-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Link-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, the <em>Button Icon<\/em> set of options allows you to add and adjust the button icon settings. Click anywhere on the (+) field (you can also pick from Icon Library or upload SVG) to choose one of the available icons. We\u2019ve opted for using the <em>Angled Arrow<\/em> icon for ours.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Icon.jpg\" class=\"attachment-full size-full\" alt=\"Button Icon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Icon.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Icon-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Icon-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Icon-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Hit the <em>Insert<\/em> button once you&#8217;re done with your selection.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"645\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Icon-Library.jpg\" class=\"attachment-full size-full\" alt=\"Button Icon Library\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Icon-Library.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Icon-Library-300x200.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Icon-Library-768x511.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Icon-Library-620x413.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you choose your icon, you can also set the icon position by using the option with the same name. This option is set to <em>Right<\/em> by default, but you can also change it to <em>Left<\/em> if you\u2019d like.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Icon-Position.jpg\" class=\"attachment-full size-full\" alt=\"Button Icon Position\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Icon-Position.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Icon-Position-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Icon-Position-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Icon-Position-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">The Style tab Options<\/h3>\n<p>[\/vc_column_text][vc_column_text]Moving on to the <em>Style<\/em> tab \u2013 here you will have access to all sorts of options related to styling.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first available option is <em>Alignment<\/em> \u2013 it is set to Left by default, but you can also switch the alignment of your text to Center or Right.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Next, you can choose the Title Tag. You can pick anything from H1 to H6 or set it to P (Paragraph).<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Alignment-and-H-Tag.jpg\" class=\"attachment-full size-full\" alt=\"Section Title Alignment and H Tag\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Alignment-and-H-Tag.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Alignment-and-H-Tag-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Alignment-and-H-Tag-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Alignment-and-H-Tag-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can also easily change your <em>Title Color<\/em> by using the color picker.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Color.jpg\" class=\"attachment-full size-full\" alt=\"Title Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Color-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Color-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Color-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you open the <em>Title Typography<\/em> setting, you will get access to plenty of different options related to typography. These include font <em>Family<\/em>, <em>Size<\/em> (we\u2019ve set 70 pixels for ours), <em>Weight<\/em>, <em>Transform<\/em>, <em>Style<\/em>, and <em>Decoration<\/em> options.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"553\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Typography.jpg\" class=\"attachment-full size-full\" alt=\"Title Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Typography.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Typography-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Typography-768x438.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Typography-620x354.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, you can add more space to your title using the <em>Line Height<\/em> option, while <em>Letter Spacing<\/em> lets you create more space between the letters themselves.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"553\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Line-Height-and-Letter-Spacing.jpg\" class=\"attachment-full size-full\" alt=\"Title Line Height and Letter Spacing\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Line-Height-and-Letter-Spacing.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Line-Height-and-Letter-Spacing-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Line-Height-and-Letter-Spacing-768x438.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Line-Height-and-Letter-Spacing-620x354.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The next two options are the ones we\u2019ve already mentioned at the beginning \u2013 the <em>Title Different Color<\/em> and <em>Title Different Decoration<\/em>. These allow you to set the different color or decoration to particular words in your title.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"570\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Different-Color-and-Style.jpg\" class=\"attachment-full size-full\" alt=\"Title Different Color and Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Different-Color-and-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Different-Color-and-Style-300x176.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Different-Color-and-Style-768x452.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Different-Color-and-Style-620x365.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, the <em>Subtitle Tag<\/em> option lets you choose from H1 to H6 (or P). We\u2019ve used the H6 tag for ours.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Subtitle-Tag.jpg\" class=\"attachment-full size-full\" alt=\"Subtitle Tag\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Subtitle-Tag.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Subtitle-Tag-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Subtitle-Tag-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Subtitle-Tag-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Subtitle Color<\/em> option works on the same principle as any other color picker, while the <em>Subtitle Typography<\/em> contains all the options like the Title Typography (the only difference being that these options apply to the subtitle instead of the title).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Subtitle-Color-and-Typography.jpg\" class=\"attachment-full size-full\" alt=\"Subtitle Color and Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Subtitle-Color-and-Typography.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Subtitle-Color-and-Typography-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Subtitle-Color-and-Typography-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Subtitle-Color-and-Typography-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Afterward, you have the <em>Text Color<\/em> and the <em>Text Typography<\/em> options, both of which you can use to further style the look of your text.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Text-Color-and-Text-Typography.jpg\" class=\"attachment-full size-full\" alt=\"Text Color and Text Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Text-Color-and-Text-Typography.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Text-Color-and-Text-Typography-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Text-Color-and-Text-Typography-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Text-Color-and-Text-Typography-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, the <strong><em>Spacing Style<\/em> settings include plenty of options for further adjusting the different margin and padding options.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"519\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Spacing-Style-1.jpg\" class=\"attachment-full size-full\" alt=\"Spacing Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Spacing-Style-1.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Spacing-Style-1-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Spacing-Style-1-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Spacing-Style-1-620x332.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Title Margin<\/em> will allow you to create space all around the title by increasing the values and keeping all fields linked. If you delink these values, you can set different values for each side of the title margin. For example, we\u2019ve set 15px for the top margin to create more space between the title and the subtitle and left other margins at 0px.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Margin.jpg\" class=\"attachment-full size-full\" alt=\"Title Margin\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Margin.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Margin-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Margin-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Title-Margin-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]There\u2019s also the <em>Subtitle Margin Top<\/em> option. If you increase this value, you will be able to get more space above the subtitle.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Also, the <em>Text Margin Top<\/em> option will allow you to add more space between the title and your text. We\u2019ve set ours at 15px.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Subtitle-and-Text-Margin-Top.jpg\" class=\"attachment-full size-full\" alt=\"Subtitle and Text Margin Top\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Subtitle-and-Text-Margin-Top.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Subtitle-and-Text-Margin-Top-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Subtitle-and-Text-Margin-Top-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Subtitle-and-Text-Margin-Top-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, the <em>Subtitle Padding<\/em> allows you to shift the position of your subtitle by adding the values to your padding.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The<em> Text Padding<\/em> option works the same way as the previous one, only it applies to the text instead.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Subtitle-and-Text-Padding.jpg\" class=\"attachment-full size-full\" alt=\"Subtitle and Text Padding\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Subtitle-and-Text-Padding.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Subtitle-and-Text-Padding-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Subtitle-and-Text-Padding-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Subtitle-and-Text-Padding-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Last but not least, the <em>Button Margin Top<\/em> option shifts the button away from the text. You can set the value using the slider \u2013 we set ours at 45px.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"570\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Margin-Top.jpg\" class=\"attachment-full size-full\" alt=\"Button Margin Top\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Margin-Top.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Margin-Top-300x176.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Margin-Top-768x452.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Margin-Top-620x365.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Button Style<\/em> set of options allows you to style the look of your button in more detail.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first option is the text button <em>Typography<\/em> which features the same options as all other Typography options (that we\u2019ve mentioned a few times already).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"580\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Typography.jpg\" class=\"attachment-full size-full\" alt=\"Button Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Typography.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Typography-300x180.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Typography-768x460.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Typography-620x371.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, you have access to two different tabs called <strong><em>Normal<\/em> and <em>Hover<\/em><\/strong>. The former has options for setting the button style <strong>when displayed normally, i.e. when it\u2019s not hovered over<\/strong>. The latter tab contains options for <strong>adjusting the look of your button when a user hovers over it<\/strong>. The options you set under the <em>Normal<\/em> tab will automatically apply to the Hover ones. Therefore, you can use the Hover tab to make desired changes.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"533\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Normal-and-Hover.jpg\" class=\"attachment-full size-full\" alt=\"Button Normal and Hover\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Normal-and-Hover.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Normal-and-Hover-300x165.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Normal-and-Hover-768x422.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Normal-and-Hover-620x341.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Let\u2019s take a look at what you can find in the <em>Normal<\/em> tab. First things first, you will be able to change the button text and background colors. For the text color, we\u2019ve added a hex code ((#fffff) to make ours white. For our background color, we\u2019ve used the #fc8d70 hex code to turn it into a nice tangerine shade.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"527\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Text-and-Background-Color.jpg\" class=\"attachment-full size-full\" alt=\"Button Text and Background Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Text-and-Background-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Text-and-Background-Color-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Text-and-Background-Color-768x418.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Text-and-Background-Color-620x337.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Border Color<\/em> will allow you to set the color of the button border, while the <em>Border Width<\/em> values can also be increased right below.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"528\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Border-Color-and-Border-Width.jpg\" class=\"attachment-full size-full\" alt=\"Border Color and Border Width\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Border-Color-and-Border-Width.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Border-Color-and-Border-Width-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Border-Color-and-Border-Width-768x418.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Border-Color-and-Border-Width-620x338.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, the <em>Border Radius<\/em> option can make the edges of the button appear more rounded. There is a small radius by default, but by delinking the values, you will make this default radius disappear (this is what we did). If you link the values together, you can increase all the sides evenly, or delink them and set each one separately.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Border-Radius.jpg\" class=\"attachment-full size-full\" alt=\"Button Border Radius\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Border-Radius.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Border-Radius-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Border-Radius-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Border-Radius-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The next option is the <em>Button Padding<\/em> that affects the space around the button content. If you keep increasing these values, you will see the way your button size will grow. Again, if you want to set different values for different sides, you need to delink the fields. We\u2019ve added 14px for the top, 40 for the right side, 14 for the bottom, and 40 on the left.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"523\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Padding.jpg\" class=\"attachment-full size-full\" alt=\"Button Padding\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Padding.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Padding-300x162.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Padding-768x415.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Padding-620x335.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you\u2019re done with adjusting the <em>Normal<\/em> button settings, you can switch to the <em>Hover<\/em> tab. For the most part, these options are similar to the normal ones. Without touching any of the options, the look of the button will remain pretty much the same when hovering over it. But, if you want to change your text hover color, background and border hover colors, this is the place to do it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"567\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Hover-Options.jpg\" class=\"attachment-full size-full\" alt=\"Button Hover Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Hover-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Hover-Options-300x176.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Hover-Options-768x449.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Hover-Options-620x363.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]One thing that differs from the <em>Normal<\/em> set of options is the <em>Reveal Background<\/em> option. To properly demonstrate what this option does, we will set the <em>Background Hover Color<\/em> first. You can change this color to anything you like \u2013 we\u2019ve added a random one for our example (#B85B5B). Now, when you hover over the button you will see the colors changing.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Hover-Background-Color.jpg\" class=\"attachment-full size-full\" alt=\"Button Hover Background Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Hover-Background-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Hover-Background-Color-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Hover-Background-Color-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Hover-Background-Color-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Button-Hover-Color.gif\" class=\"attachment-full size-full\" alt=\"Section Title Button Hover Color\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, the <em>Reveal Background<\/em> option will determine the way this new color is revealed. For example, if you switch this option to Horizontal, the hover color will move in horizontally, like this:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"562\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Reveal-Background.jpg\" class=\"attachment-full size-full\" alt=\"Button Reveal Background\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Reveal-Background.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Reveal-Background-300x174.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Reveal-Background-768x445.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Reveal-Background-620x360.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Button-Hover-Reveal-Horizontal.gif\" class=\"attachment-full size-full\" alt=\"Section Title Button Hover Reveal Horizontal\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In a similar fashion, if you change this option to Vertical, the color will move in vertically:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Button-Hover-Reveal-Vertical.gif\" class=\"attachment-full size-full\" alt=\"Section Title Button Hover Reveal Vertical\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This effect can be quite useful if you want to add some cool effects to your button and make it stand out even more. That being said, we haven\u2019t planned to use it for our design, so we will switch it back to None and clear the background hover color.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Now, the next set of options, called <em>Button Icon Style<\/em>, can be useful to those who\u2019ve decided to add an icon to their button (like we did).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here you will get to adjust the <em>Icon Size<\/em> (you can either type to change it or use the help of the slider). We\u2019ve set ours at 16px.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"465\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Icon-Size.jpg\" class=\"attachment-full size-full\" alt=\"Button Icon Size\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Icon-Size.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Icon-Size-300x144.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Icon-Size-768x369.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Icon-Size-620x298.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Here you will also find another two switch tabs \u2013 Normal and Hover. Once you click on Hover, you will get to use the <em>Move Icon<\/em> option that will help you set the way the icon moves on hover. Think of it as adding a small animation effect that will make your icon move.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]It\u2019s set to Horizontal Short by default, but you can also change it to Horizontal, Vertical, Diagonal, and None (which will keep the icon still\/unmoving on hover). We\u2019ve kept the Horizontal Short animation for ours.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"469\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Move-Icon-Hover.jpg\" class=\"attachment-full size-full\" alt=\"Button Move Icon Hover\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Move-Icon-Hover.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Move-Icon-Hover-300x145.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Move-Icon-Hover-768x372.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Move-Icon-Hover-620x300.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Button-Hover-Icon-Move.gif\" class=\"attachment-full size-full\" alt=\"Section Title Button Hover Icon Move\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the Normal tab, you will get to choose the <em>Icon Color<\/em> \u2013 the option which does the same job as any other color option. We\u2019ve kept our icon color white to match the button text.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"529\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Icon-Color.jpg\" class=\"attachment-full size-full\" alt=\"Button Icon Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Icon-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Icon-Color-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Icon-Color-768x419.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Icon-Color-620x338.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, the <em>Icon Margin<\/em> option will allow you to move the icon further from the button text. We\u2019ve delinked the values and changed the left padding to 10px.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"476\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Icon-Margin.jpg\" class=\"attachment-full size-full\" alt=\"Button Icon Margin\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Icon-Margin.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Icon-Margin-300x147.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Icon-Margin-768x377.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Icon-Margin-620x305.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In our case, the <em>Button Inner Corner Style<\/em> option is empty because we\u2019ve used the Filled button layout. In case we had used the layout with the inner border, we would\u2019ve been able to use these options.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Inner-Border-Style.jpg\" class=\"attachment-full size-full\" alt=\"Button Inner Border Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Inner-Border-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Inner-Border-Style-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Inner-Border-Style-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Inner-Border-Style-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The same rule applies to the <em>Button Underline Style<\/em> option \u2013 if you enable the Button Text Underline, you will have access to options that stylize it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"535\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Underline-Style.jpg\" class=\"attachment-full size-full\" alt=\"Button Underline Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Underline-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Underline-Style-300x166.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Underline-Style-768x424.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Button-Underline-Style-620x342.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, there is also the <em>Advanced<\/em> tab which contains multiple options related to positioning, responsiveness, entrance animations, and more. That being said, these options are available for all Elementor widgets, so we won\u2019t be covering them in this tutorial.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Advanced-Tab.jpg\" class=\"attachment-full size-full\" alt=\"Section Title Advanced Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Advanced-Tab.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Advanced-Tab-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Advanced-Tab-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Advanced-Tab-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Hit the <em>Publish\/Update<\/em> button at the bottom once you\u2019re satisfied with your settings<\/strong> and you\u2019re all set.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Update-Button.jpg\" class=\"attachment-full size-full\" alt=\"Update Button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Update-Button.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Update-Button-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Update-Button-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Update-Button-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And here\u2019s what our end result looks like:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Result.jpg\" class=\"attachment-full size-full\" alt=\"Section Title Result\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Result.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Result-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Result-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Section-Title-Result-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Wrapping Things Up<\/h2>\n<p>[\/vc_column_text][vc_column_text]A section title is a great typography element you can use to capture the attention of your visitors and get them to explore different sections and pages of your WordPress site. We recommend using the Qi Addons for Elementor plugin\u2019s Section Title widget as it will allow you to customize your section titles down to the tiniest detail. You will get to adjust your typography, add additional text, change colors, add buttons and hover animations, and use many other options that will help your section titles truly stand out.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Now that you\u2019ve gone through all the options that come with this useful widget, you should know how to create all the examples available on the widget\u2019s page. It\u2019s completely up to you to decide whether you want to use the same options that we did or want to create something else entirely. Just make sure to follow our instructions carefully and pick the options that work the best with your site\u2019s design.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>A section title can grab the attention of visitors and help them understand what your content is about. Read on to learn how to add section titles in WordPress.<\/p>\n","protected":false},"author":2,"featured_media":28546,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[114,4,54,13],"class_list":["post-28468","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-qi-addons-for-elementor","tag-tips","tag-typography","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/28468","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=28468"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/28468\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/28546"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=28468"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=28468"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=28468"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}