{"id":802,"date":"2019-08-12T15:00:26","date_gmt":"2019-08-12T13:00:26","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=802"},"modified":"2020-08-05T13:43:52","modified_gmt":"2020-08-05T11:43:52","slug":"set-wordpress-title-area","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/set-wordpress-title-area\/","title":{"rendered":"How to Set Up your WordPress Title Area with Qode Interactive Themes"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]The title area is one of the vital parts of any web page. As its name suggests, it is <strong>the part of the page where your title goes<\/strong>, so naturally you want to pay extra attention to it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]When using a<a href=\"https:\/\/qodeinteractive.com\/themes-list\/\"> premium WordPress theme<\/a>, all the content and settings you have imported are set to a certain default. However, you\u2019re in no way obliged to use those settings and that content. This goes for the title area, too. Some users like to turn it off, and some like to customize it to better fit their needs.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Qode Interactive\u2019s themes are no exception. Each theme comes with a <strong>preset title area that the user can later change<\/strong> to his or her liking. In this article, we\u2019re going to show you just how to do that.[\/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=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Title-Area.jpg\" class=\"attachment-full size-full\" alt=\"Qode Themes Title Area\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Title-Area.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Title-Area-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Title-Area-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We also have a video tutorial on setting up the title area using the <a href=\"https:\/\/qodeinteractive.com\/wordpress-theme\/bridge-creative-multi-purpose-wordpress-theme\/\">Bridge theme<\/a> that you can check out &#8211; the steps are basically the same for all Qode themes.[\/vc_column_text][vc_empty_space height=&#8221;41px&#8221;][vc_column_text]<iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/imvYlUukBhU\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">About the Title Area<\/h2>\n<p>[\/vc_column_text][vc_column_text]As we explained above, when you purchase a theme and import its content, the settings are going to be the same as in the theme demo. That means that if a theme has a prominent title area on all pages, your website is going to have it too. If, on the other hand, the theme creators believe your website would look better with a smaller title area, or perhaps with the title area visible only on specific types of pages, that\u2019s what you\u2019re going to get upon import. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, it\u2019s important to remember that all this can be changed quickly and easily. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you have imported one of Qode Interactive\u2019s WordPress themes, there are<strong> two ways you can customize the title area settings<\/strong>:[\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;]<div class=\"qodef-ordered-list-item \">\n\t        <div class=\"qodef-ol-title-holder\">\n            <span class=\"qodef-ol-title-number\">1.<\/span>\n            <span class=\"qodef-ol-title-content\"><span><strong>Using the theme\u2019s general settings<\/strong>. Changes made here are general, meaning they apply to your entire site and all its pages. <\/span><\/span>        <\/div>\n    <\/div><div class=\"qodef-ordered-list-item \">\n\t        <div class=\"qodef-ol-title-holder\">\n            <span class=\"qodef-ol-title-number\">2.<\/span>\n            <span class=\"qodef-ol-title-content\"><strong>Using page or post settings<\/strong>. These settings will apply only to that specific page or post.<\/span>        <\/div>\n    <\/div>[vc_column_text]It\u2019s very useful to have this sort of flexibility in setting the title area. For example, you may want your blog pages to have a title area but you don\u2019t want one on your shop pages. Or, you need the title area on your home page but not on any other page. With our themes, choosing exactly where your title area will appear and what it will look like is simple. Let\u2019s take a look.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Customizing the Title Area from the General Settings<\/h2>\n<p>[\/vc_column_text][vc_column_text]When using one of Qode Interactive\u2019s themes, your WordPress Admin menu will feature general theme options for that particular theme. You can find those options in the left side menu on your dashboard. Now, in our example we\u2019ll be using the Barista theme, so the name of this options panel will be Edge Options, since Barista is developed by Edge. But if you\u2019re using a theme from one of the other authors that are a part of Qode Interactive (Qode, Select, Elated or Mikado), the name of the options panel will simply be the author\u2019s name, followed by the word \u201coptions\u201d. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Clicking on the options panel will reveal a list of settings. The one we\u2019re looking for today is 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=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Title-Area-1.jpg\" class=\"attachment-full size-full\" alt=\"Qode Themes Title Area Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Title-Area-1.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Title-Area-1-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Title-Area-1-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Note that the specific settings available may vary from theme to theme, but there are always enough of them to allow for different combinations. The settings themselves are very simple and self-explanatory. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]They are divided into two groups: <em><strong>Title Settings<\/strong><\/em> and <em><strong>Typography<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Title Settings<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Title-Area-2.jpg\" class=\"attachment-full size-full\" alt=\"Qode Themes Title Area General Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Title-Area-2.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Title-Area-2-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Title-Area-2-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Let\u2019s take a look at some of the options here: [\/vc_column_text][vc_empty_space height=&#8221;23px&#8221;]<ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Show Title Area<\/strong>. This is one of the options for enabling or disabling the title area. As we said earlier, if we disable the title area here, it will not appear anywhere on the site except for the pages for which the title area is specifically enabled.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Title Area Type<\/strong>. Here you can choose the type of title area you\u2019d like to use \u2013 standard, centered, breadcrumbs, standard with breadcrumbs, etc. The available options may vary depending on the theme you\u2019re using.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Enable Breadcrumbs<\/strong> and <strong>Enable Separator<\/strong>. These two options let you easily display or hide the breadcrumbs and separator in your title area.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Animations<\/strong>. This option allows you to enable and set an animation type for your title area.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Vertical Alignment<\/strong> and <strong>Horizontal Alignment<\/strong>. Here you can set the vertical and horizontal alignments for the elements in your title area.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_column_text]Depending on the theme, your Title Settings may also include other options, such as <strong>height, background color, background image, background image behavior<\/strong>, and so on. You can find out more about all the available options and what each one does in the theme\u2019s documentation.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Typography<\/h3>\n<p>[\/vc_column_text][vc_column_text]In this section, you can set the font and style of your <strong>Title<\/strong>,<strong> Subtitle<\/strong> and <strong>Breadcrumbs<\/strong> (if you\u2019re using them).[\/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=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Title-Area-3.jpg\" class=\"attachment-full size-full\" alt=\"Qode Themes Title Area Settings on Page\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Title-Area-3.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Title-Area-3-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Title-Area-3-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After you have set the desired text color, font style and weight, as well as letter spacing and text transform, don\u2019t forget to click on Save Changes. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Note that some themes come with theme-specific title area options that may not be available with other themes. [\/vc_column_text][vc_empty_space height=&#8221;81px&#8221;][vc_separator color=&#8221;custom&#8221; accent_color=&#8221;#f0f0f0&#8243;][vc_empty_space height=&#8221;50px&#8221;][vc_widget_sidebar sidebar_id=&#8221;top-picks-banner&#8221;][vc_empty_space height=&#8221;28px&#8221;][vc_separator color=&#8221;custom&#8221; accent_color=&#8221;#f0f0f0&#8243;][vc_empty_space height=&#8221;84px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Page or Post Settings<\/h3>\n<p>[\/vc_column_text][vc_column_text]Page- or post-specific title area settings can be accessed by clicking on the page or post you want to edit. The settings are located near the bottom of the edit screen. [\/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=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Title-Area-4.jpg\" class=\"attachment-full size-full\" alt=\"Qode Themes Title Area Page Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Title-Area-4.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Title-Area-4-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Title-Area-4-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This section may not include all of the options we\u2019ve seen under general title area settings, but it will have the most important ones. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here you can decide whether or not to <strong>show title area<\/strong>, and specify the<strong> title area type<\/strong>. You can also enable or disable <strong>breadcrumbs<\/strong> and <strong>separator<\/strong>, if the theme allows it, as well as choose <strong>animations<\/strong>, and the <strong>vertical<\/strong> and <strong>horizontal alignment<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Other options may include<strong> background image, title area height, title tag, subtitles (with text, color, tag, padding), breadcrumbs color<\/strong>, and so on.[\/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=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Title-Area-5.jpg\" class=\"attachment-full size-full\" alt=\"Title Area Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Title-Area-5.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Title-Area-5-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Title-Area-5-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Again, the settings you make here will only apply to that specific page or post. Once you\u2019ve set everything, click on Save Changes and preview your live page to see if everything looks and works fine. [\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]Whether or not you will use a title area at all, or if you choose to use it for some pages and not for others \u2013 depends entirely on you. The title area can make a good addition to the site architecture and provide an important visual and contextual clue, but in some cases it might be unnecessary or simply get in your way. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Now that you know how to easily enable, disable and customize the title area for your website and pages, all you need to do is decide whether you need it and how you want it to look and behave. [\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>The title area is one of the vital parts of any web page. As its name suggests, it is the part of the page where your title goes, so naturally you want to pay extra attention to it.<\/p>\n","protected":false},"author":3,"featured_media":1205,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[16,4,13],"class_list":["post-802","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-themes","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/802","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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=802"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/802\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/1205"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=802"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=802"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=802"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}