{"title":"Configuring Phlox General Layout and Design Options","id":36682,"link":"https:\/\/env.averta.net\/en\/step\/configuring-phlox-general-layout-and-design-options\/","parent":[35058],"content":"<p>In the customizer, you can find a general section which contains all of the options that are related to general changes of website appearance. Such as overall layout of the website that allows you to choose full width layout or boxed one, logo and its customization, adding your social network profiles to the website, etc.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-36693 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/general-customization.png\" alt=\"general-customization\" width=\"315\" height=\"388\" \/><\/p>\n<p>You can simply access these general settings:<\/p>\n<ol>\n<li>Go to your <strong>WordPress admin panel<\/strong><\/li>\n<li>Click on the <b>Appearance<\/b> on the <b>Dashboard<\/b><\/li>\n<li>Then?go to the <b>Customize &gt; General<\/b><\/li>\n<\/ol>\n<div style=\"clear: both;\"><\/div>\n<h3>Video Tutorial<\/h3>\n<div style=\"position: relative; height: 0; padding-bottom: 56.25%;\"><iframe loading=\"lazy\" width=\"560\" height=\"315\" style=\"position: absolute; width: 100%; height: 100%; left: 0; display: block;\" src=\"https:\/\/www.youtube.com\/embed\/8GiqLqtsWrU?rel=0&amp;ecver=2\" frameborder=\"0\" encrypted-media=\"\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<hr style=\"clear: both;\" \/>\n<h3><img decoding=\"async\" loading=\"lazy\" class=\"alignright wp-image-36689 size-full\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/general-layout-settings-e1479112649641.png\" alt=\"general-layout-settings\" width=\"314\" height=\"406\" \/>General Layout<\/h3>\n<p>This section lets you change the overall layout of your website.<\/p>\n<div style=\"clear: both;\"><\/div>\n<h4 style=\"clear: both;\">Website Layout<\/h4>\n<p>Here you can choose whether to show your website in a boxed area or in a fullwidth layout<\/p>\n<div class=\"row\"><div class=\"column col-half\">\n<div id=\"attachment_36700\" style=\"width: 1923px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-36700\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-36700 size-full\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/full-layout-2.png\" alt=\"full-layout\" width=\"1913\" height=\"1922\" \/><p id=\"caption-attachment-36700\" class=\"wp-caption-text\">Fullwidth Layout<\/p><\/div>\n<\/div><div class=\"column col-half\">\n<div id=\"attachment_36701\" style=\"width: 1915px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-36701\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-36701 size-full\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/boxed-layout-2-1.png\" alt=\"boxed-layout-2\" width=\"1905\" height=\"1949\" \/><p id=\"caption-attachment-36701\" class=\"wp-caption-text\">Boxed Layout<\/p><\/div>\n<\/div><\/div>\n<p>By choosing the boxed layout, you are able to add a custom background to your website including setting custom color or specifying background image. For more information about the background image options, check <a href=\"https:\/\/env.averta.net\/en\/step\/configuring-phlox-general-layout-and-design-options\/?b=,\" title=\"Configuring Phlox General Layout and Design Options\">this article<\/a>\n<h4>Site Max Width<\/h4>\n<p>This option allows you to choose a maximum width size of your website main wrapper.<\/p>\n<hr \/>\n<h3>Logo<img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-36694 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/logo-preview.png\" alt=\"logo-preview\" width=\"453\" height=\"205\" \/><\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignright wp-image-36695 size-full\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/logo-settings-e1479113757676.png\" alt=\"logo-settings\" width=\"312\" height=\"695\" \/><\/p>\n<p>In this section you can upload your website logo:<\/p>\n<ol>\n<li>Go to your <strong>WordPress Admin Panel<\/strong><\/li>\n<li>Click on the <b>Appearance<\/b> on the <b>Dashboard<\/b><\/li>\n<li>Then?go to the <b>Customize &gt; General &gt; Logo<\/b><\/li>\n<li>Click?<strong>Add Image?<\/strong>to upload your logo<\/li>\n<\/ol>\n<p>In addition, set the width size of the logo that you want to appear in the website header by entering it in?<strong>Logo Width<\/strong>?option.<\/p>\n<p class=\"aswi-text-box box-info\"><strong>Note: <\/strong>It is recommended to upload your logo in a large format size to let Phlox choose the best size relative to screen type.<\/p>\n<hr style=\"clear: both;\" \/>\n<h3><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-36705 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/page-animation-and-preloading-e1479122545270.png\" alt=\"page-animation-and-preloading\" width=\"315\" height=\"619\" \/>Page Animation and Preloading<\/h3>\n<p>By?switching on?<strong>Page Animation<\/strong>, when users navigate between pages, they realize the first page faded out and the second one will fade in.<\/p>\n<p>When you <strong>Enable Page Preloading?<\/strong>the page will not be displayed until the page fully loads.<\/p>\n<p>If you?<strong>Add Progress Bar<\/strong>, while the page is loading, a progress bar appears?before the entire page is loaded. You can choose the color of this bar with <strong>Progress Bar Color<\/strong>.<\/p>\n<hr style=\"clear: both;\" \/>\n<h3><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-36707 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/custom-js.png\" alt=\"custom-js\" width=\"298\" height=\"907\" \/><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-36706 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/custom-css-1.png\" alt=\"custom-css\" width=\"313\" height=\"578\" \/>Custom CSS and JS Codes<\/h3>\n<p>These options are available for adding custom CSS and JS codes. Just type the custom CSS or Javascript in the related sections. the &lt;script&gt; or &lt;style&gt; tag are not required in these fields.<\/p>\n<p class=\"aswi-text-box box-recommend\"><strong>Recommended: <\/strong>Find out more information about custom CSS\/JS in <a href=\"https:\/\/env.averta.net\/en\/step\/adding-custom-css-and-custom-javascript\/?b=36304,36304\" title=\"Adding Custom CSS and Custom JavaScript\">this article<\/a>.<\/p>\n","type":"solution"}