{"id":52,"date":"2023-09-26T07:14:30","date_gmt":"2023-09-26T07:14:30","guid":{"rendered":"https:\/\/docs.codevibrant.com\/azure\/?p=52"},"modified":"2024-01-09T09:23:13","modified_gmt":"2024-01-09T09:23:13","slug":"how-to-change-the-site-style","status":"publish","type":"post","link":"https:\/\/docs.codevibrant.com\/azure\/how-to-change-the-site-style\/","title":{"rendered":"How to Change the Site Style?"},"content":{"rendered":"\n<p><strong>Site Styles<\/strong> encapsulates the layout option for your site. You can change your website\u2019s layout option with the help of Azure\u2019s customizer. In Site Style\u2019s customizer, you have three different option to change your site i.e. <strong>Layout<\/strong>, <strong>Container Width<\/strong>, and <strong>Site Mode<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Video Guide<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Azure Complete Walkthrough\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/-BAtD90lTGg?start=28&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\"><em>Starts at the relative time<\/em>.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">To go to the Site Style of the Azure News Theme: <\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to your website&#8217;s WordPress Dashboard, then <strong>Appearance &gt;&gt; Customize<\/strong><\/li>\n\n\n\n<li>Then, click on the <strong>General Settings &gt;&gt; Site Style<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"471\" src=\"http:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/Site-Style-General-Settings.jpg\" alt=\"Site Style Customizer\" class=\"wp-image-53\" srcset=\"https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/Site-Style-General-Settings.jpg 1000w, https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/Site-Style-General-Settings-300x141.jpg 300w, https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/Site-Style-General-Settings-768x362.jpg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Changing the layout<\/h3>\n\n\n\n<p>In Azure theme, there are 3 different layout options for you to change.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Full Width Layout<\/strong><\/li>\n\n\n\n<li><strong>Boxed Layout<\/strong><\/li>\n\n\n\n<li><strong>Separate Layout<\/strong><\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"233\" height=\"203\" src=\"https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/image-3.png\" alt=\"Layouts in Site Style Settings\" class=\"wp-image-54\" style=\"width:246px;height:214px\"\/><\/figure><\/div>\n\n\n<p>Based on how you want to change the layout of your site, you can select any of these three options.<\/p>\n\n\n\n<p><strong><em>The default Site layout is set to \u2018Separate Layout\u2019.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/em><\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Main Container Width<\/h3>\n\n\n\n<p>You can adjust your layout\u2019s width with the slider as shown in the image below. The width layout is set from <strong>0<\/strong> as in minimum width and <strong>2040<\/strong> as maximum width. You can <strong>restore the layout<\/strong> to the default by selecting <strong>Restore to default Width icon<\/strong> besides the <strong>slider<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Site Mode<\/h3>\n\n\n\n<p>Azure theme\u2019s site mode has two different options. They are; <strong>Light Mode <\/strong>and <strong>Dark Mode.<\/strong> You can select either of those, which will make your website\u2019s site to that mode by default. Meaning if you select <em><strong>Dark<\/strong><\/em> in the <strong>Site Mode<\/strong>, your website will by default be in <strong>Dark Mode <\/strong>and vice versa.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Site Styles encapsulates the layout option for your site. You can change your website\u2019s layout option with the help of Azure\u2019s customizer. In Site Style\u2019s customizer, you have three different option to change your site i.e. Layout, Container Width, and Site Mode. Video Guide To go to the Site Style of the Azure News Theme: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-52","post","type-post","status-publish","format-standard","hentry","category-general-settings"],"_links":{"self":[{"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/posts\/52","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/comments?post=52"}],"version-history":[{"count":7,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/posts\/52\/revisions"}],"predecessor-version":[{"id":382,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/posts\/52\/revisions\/382"}],"wp:attachment":[{"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/media?parent=52"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/categories?post=52"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/tags?post=52"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}