{"id":9556,"date":"2020-07-21T15:00:22","date_gmt":"2020-07-21T13:00:22","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=9556"},"modified":"2023-08-30T13:08:40","modified_gmt":"2023-08-30T11:08:40","slug":"add-widget-to-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/add-widget-to-wordpress\/","title":{"rendered":"How to Add Widgets to Your WordPress Website"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]If you want to improve the look of your website&#8217;s design and the way your content is presented as a whole, you don&#8217;t need to be a WordPress expert, nor do you need to know how to code. You just need the right set of <a href=\"https:\/\/qodeinteractive.com\/magazine\/useful-wordpress-widgets\/\">useful WordPress widgets<\/a> that will do the job for you.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This time around, we\u2019ll introduce you to these handy elements and show you how to add a widget to WordPress \u2013 including an overview of widget-related options that come with <a href=\"https:\/\/qodeinteractive.com\/themes-list\/\">Qode Interactive themes<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">What are WordPress Widgets?<\/h2>\n<p>[\/vc_column_text][vc_column_text]Widgets represent a set of tools that, together with different WordPress themes and plugins, <strong>allow you to add all sorts of features that make your website more appealing, functional, and user-friendly<\/strong> to your visitors.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, you shouldn\u2019t confuse widgets with plugins. Namely, the main <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-widgets-vs-plugins\/\">difference between widgets and plugins<\/a> is that plugins are pieces of software (like apps or add-ons) that can perform numerous functions within your WordPress core, while widgets can only be added to certain areas of your website and mostly have a purpose of improving its appearance and accessibility. That being said, many plugins also include widgets among their features.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can use widgets to add items to predefined widget areas (such as a sidebar area, a footer area, and so on). A widget can be an image gallery, a list of popular posts, social network feed, and so on.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Aside from default widgets that come together with the WordPress core, or those that are integrated with a specific WordPress theme, there are plenty of third-party tools on the web that come packed with all sorts of useful widgets. But ultimately, it all comes down to choosing those widgets that you think will prove most useful for your specific purposes. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]It\u2019s fairly easy to add WordPress widgets to the predefined widget areas. Let\u2019s take a look at how you can do this both on a default WordPress theme and in Qode themes. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here\u2019s what you\u2019ll learn:[\/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=\"#locating-widgets\">Locating Widgets in Your WordPress Admin<\/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-widgets-to-a-wordpress-widget-area\">Adding Widgets to a WordPress Widget Area<\/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=\"#removing-widgets\">Removing Widgets in WordPress<\/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-widgets-in-qode-interactive-themes\">Adding WordPress Widgets in Qode Interactive Themes<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;70px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"locating-widgets\"><\/a>How To Locate Widgets in Your WordPress Admin<\/h2>\n<p>[\/vc_column_text][vc_column_text]To find your widgets, go to <em><strong>Appearance &gt; Widgets<\/strong><\/em> in your WordPress admin dashboard.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once there, you will see a list of all <em>Available Widgets<\/em> (such as the Gallery widget, Recent Comments widget, Archives, 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=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/1-Locating-Widgets-in-Your-WordPress-Admin.jpg\" class=\"attachment-full size-full\" alt=\"Locating Widgets in Your WordPress Admin\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/1-Locating-Widgets-in-Your-WordPress-Admin.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/1-Locating-Widgets-in-Your-WordPress-Admin-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/1-Locating-Widgets-in-Your-WordPress-Admin-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]On the right, you will see all the available widget areas where you can place any widget of your choice. We do have to note that the widget areas at your disposal will depend on a theme you\u2019re using. So, if you run into a theme that only has a few widget areas available,\u00a0 you can always <a href=\"https:\/\/qodeinteractive.com\/magazine\/add-widget-area-to-wordpress\/\">create a custom widget area<\/a> to expand your possibilities.[\/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=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/2-Available-widget-areas.jpg\" class=\"attachment-full size-full\" alt=\"Available widget areas\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/2-Available-widget-areas.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/2-Available-widget-areas-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/2-Available-widget-areas-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;79px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-widgets-to-a-wordpress-widget-area\"><\/a>How to Add Widget to a WordPress Widget Area<\/h2>\n<p>[\/vc_column_text][vc_column_text]Widgets can be added to your widget areas in different ways, the easiest being the one where you <strong>drag-and-drop it from the list of available widgets on the left to the desired area on the right<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Alternatively, you can click on the widget itself and choose one of the available widget areas from the dropdown. Then, simply hit the <em><strong>Add Widget<\/strong><\/em> 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=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/3-Adding-Widgets-to-a-WordPress-Widget-Area.jpg\" class=\"attachment-full size-full\" alt=\"Adding Widgets to a WordPress Widget Area\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/3-Adding-Widgets-to-a-WordPress-Widget-Area.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/3-Adding-Widgets-to-a-WordPress-Widget-Area-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/3-Adding-Widgets-to-a-WordPress-Widget-Area-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In case you need an accessibility mode, you can enable it by clicking the <em><strong>Enable accessibility mode<\/strong><\/em> button located in the top right corner of your 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=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/4-Enable-accessibility-mode-button.jpg\" class=\"attachment-full size-full\" alt=\"Enable accessibility mode button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/4-Enable-accessibility-mode-button.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/4-Enable-accessibility-mode-button-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/4-Enable-accessibility-mode-button-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you do this, your Widgets screen will slightly change, with an <em><strong>Add<\/strong><\/em> button appearing next to every widget. Clicking on this button will allow you to choose a widget area of your preference with 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=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/5-Add-button-appearing-next-to-widget.jpg\" class=\"attachment-full size-full\" alt=\"Add button appearing next to widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/5-Add-button-appearing-next-to-widget.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/5-Add-button-appearing-next-to-widget-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/5-Add-button-appearing-next-to-widget-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Aside from adding widgets by using the Widgets screen, you can also do this using the live preview functionality. Go to <em><strong>Appearance &gt; Customize &gt; Widgets<\/strong><\/em> and you will be able to add your widgets and see them live on your 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=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/6-Customize-Widgets.jpg\" class=\"attachment-full size-full\" alt=\"Customize Widgets\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/6-Customize-Widgets.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/6-Customize-Widgets-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/6-Customize-Widgets-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]However, it\u2019s important to note that you won\u2019t be able to see every available widget on this page, which is why we recommend that you add your widgets in the <em>Appearance &gt; Widgets<\/em> screen.[\/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=\"removing-widgets\"><\/a>How to Remove Widgets in WordPress<\/h2>\n<p>[\/vc_column_text][vc_column_text]The process of removing widgets is quite easy. On the <em>Appearance &gt; Widgets<\/em> page, you should <strong>click on the title of a widget that you wish to remove<\/strong>. This action will expand the widget\u2019s options. Then, click the <em>Delete<\/em> 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=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/7-Removing-Widgets-in-WordPress.jpg\" class=\"attachment-full size-full\" alt=\"Removing Widgets in WordPress\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/7-Removing-Widgets-in-WordPress.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/7-Removing-Widgets-in-WordPress-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/7-Removing-Widgets-in-WordPress-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This will remove the widget from the widget area as well as all its options. In case, however, that you don\u2019t want to lose the settings of a widget in question, <strong>you can drag and drop it to the <em>Inactive Widgets<\/em> section instead<\/strong> (located in the bottom left corner of the 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=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/8-Inactive-Widgets-section.jpg\" class=\"attachment-full size-full\" alt=\"Inactive Widgets section\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/8-Inactive-Widgets-section.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/8-Inactive-Widgets-section-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/8-Inactive-Widgets-section-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, we have to note that neither one of these actions will completely remove your widget from the available widgets list. If you want, you can always add the desired widget all over again \u2013 both from the <em>Available Widgets<\/em> and <em>Inactive Widgets<\/em> list.[\/vc_column_text][vc_empty_space height=&#8221;81px&#8221;][vc_widget_sidebar sidebar_id=&#8221;latest-themes&#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=\"adding-widgets-in-qode-interactive-themes\"><\/a>Adding WordPress Widgets in Qode Interactive Themes<\/h2>\n<p>[\/vc_column_text][vc_column_text]While a default installation of WordPress contains some of the essential widgets, <strong>many WordPress themes also come packed with their own list of unique, predefined widgets<\/strong>. Of course, this is also the case with our own themes. Let\u2019s take a look at some of the widgets that come with Qode themes, as well as how to add them to your WordPress site.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Just like with any other theme, you will be able to find a list of widgets specific to Qode themes among all other widgets in <em>Appearance &gt; Widgets<\/em>, on the left side of the 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=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/9-Widgets-in-Qode-Interactive-Themes.jpg\" class=\"attachment-full size-full\" alt=\"Widgets in Qode Interactive Themes\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/9-Widgets-in-Qode-Interactive-Themes.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/9-Widgets-in-Qode-Interactive-Themes-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/9-Widgets-in-Qode-Interactive-Themes-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]On the right, you will see all available widget areas where you can place your widgets. Unlike free WordPress themes, <strong>Qode themes come with various premade widget areas<\/strong>. For example, if you are using the Bridge theme, some of its predefined areas will include Header Top Left, Header Top Right, Bottom Right, Footer Bottom Left, Right, and Center, and the list goes on.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/10-Premade-widget-areas.jpg\" class=\"attachment-full size-full\" alt=\"Premade widget areas\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/10-Premade-widget-areas.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/10-Premade-widget-areas-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/10-Premade-widget-areas-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]While most theme authors create and adjust their own widgets and widget areas in the same way, there is one particularly useful option that comes with Qode themes, called <em><strong>Custom Widget Area<\/strong><\/em>. <strong>This option allows you to create your own custom widget areas which can be allocated anywhere on the page<\/strong> when needed.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/11-Custom-Widget-Area.jpg\" class=\"attachment-full size-full\" alt=\"Custom Widget Area\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/11-Custom-Widget-Area.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/11-Custom-Widget-Area-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/11-Custom-Widget-Area-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To demonstrate, we will create a new custom widget area called <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-display-opening-hours-in-wordpress\/\"><em><strong>Opening Hours<\/strong><\/em><\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once the Opening Hours widget area shows up on the widget area list, you can add a <em><strong>[BHI] opening hours overview widget<\/strong><\/em> (by dragging and dropping it or clicking on the widget itself and then selecting <em><strong>Add Widget<\/strong><\/em>).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/12-Opening-hours-overview-widget.jpg\" class=\"attachment-full size-full\" alt=\"Opening hours overview widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/12-Opening-hours-overview-widget.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/12-Opening-hours-overview-widget-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/12-Opening-hours-overview-widget-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, you can add this custom area to any page of your choice with the help of <strong>Widgetised Sidebar<\/strong> (an element that you will find when using the WPBakery Page Builder to edit your 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=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/13-Widgetised-Sidebar.jpg\" class=\"attachment-full size-full\" alt=\"Widgetised Sidebar\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/13-Widgetised-Sidebar.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/13-Widgetised-Sidebar-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/13-Widgetised-Sidebar-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can select the area you wish to add to your page using the dropdown in the <em>Widgetised Sidebar Settings<\/em> (which will open the instant you add a Widgetised Sidebar). From there, you will also be able to add any other widget area that came included with the Qode theme, aside from this custom-made area.[\/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=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/14-Widgetised-Sidebar-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Widgetised Sidebar Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/14-Widgetised-Sidebar-Settings.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/14-Widgetised-Sidebar-Settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/14-Widgetised-Sidebar-Settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And that\u2019s how you add widget areas (and widgets) to any page on your site. Once you\u2019re done, you can also see a preview of your 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=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/15-add-widget-areas-to-any-page-on-your-site.jpg\" class=\"attachment-full size-full\" alt=\"Add widget areas to any page on your site\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/15-add-widget-areas-to-any-page-on-your-site.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/15-add-widget-areas-to-any-page-on-your-site-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/15-add-widget-areas-to-any-page-on-your-site-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;79px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]WordPress widgets are incredibly useful tools that can be used and adjusted to fit the specific needs of your website. Apart from their capability to improve the way your site looks, they can also boost its practicality and ease of use. If the widgets that come packed with the default WordPress installation aren\u2019t enough for your needs, tons of other available widgets can be found on the web. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Our own<strong> Qode themes also contain many custom-made widgets which, just like any other widgets, can be easily added with the help of the <em>Appearance &gt; Widgets<\/em> screen<\/strong> and also include many useful predefined widget areas. No matter which WordPress theme or a set of widgets you end up using, we hope this tutorial will prove to be useful.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Read on to learn how to add a widget to your WordPress site and improve the look of your website&#8217;s design and the way your content is presented as a whole.<\/p>\n","protected":false},"author":2,"featured_media":9579,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[14,4,13],"class_list":["post-9556","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-core","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/9556","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=9556"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/9556\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/9579"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=9556"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=9556"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=9556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}