{"id":24136,"date":"2018-02-22T00:00:00","date_gmt":"2018-02-21T18:30:00","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/?post_type=docs&#038;p=24136"},"modified":"2023-01-27T13:08:52","modified_gmt":"2023-01-27T07:38:52","slug":"site-layout-overview","status":"publish","type":"docs","link":"https:\/\/git-staging.wpastra.com\/es\/docs\/site-layout-overview\/","title":{"rendered":"Presentaci\u00f3n del sitio"},"content":{"rendered":"<p>Se trata de una funci\u00f3n premium disponible con<strong> Astra Pro<\/strong> Complemento. Para utilizar estas funciones Pro, es necesario tener el plugin <a href=\"https:\/\/wordpress.org\/themes\/astra\/\">Tema Astra<\/a> junto con el Addon Astra Pro instalado en su sitio web. <\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#cae3f3\"><strong>Pasos r\u00e1pidos para crear un dise\u00f1o de sitio utilizando el m\u00f3dulo Dise\u00f1os de sitio<\/strong><br><strong>Paso 1:<\/strong> Aseg\u00farese de tener instalado y activado el complemento Astra Pro. <a href=\"https:\/\/git-staging.wpastra.com\/es\/docs\/how-to-install-astra-pro-addon-plugin\/\">\u00bfC\u00f3mo instalar el complemento Astra Pro?<\/a><br><strong>Segundo paso:<\/strong> Active el m\u00f3dulo desde las Opciones de Astra en la secci\u00f3n <em>WordPress Dashboard &gt; Apariencia &gt; Opciones de Astra<\/em><br><strong>Paso 3:<\/strong> Visita el personalizador [ <em>Apariencia &gt; Opciones Astra &gt; Global &gt; Contenedor &gt; Dise\u00f1o del sitio<\/em> Opciones y configuraci\u00f3n del dise\u00f1o del sitio<\/p>\n\n\n\n<p>Puede activar el m\u00f3dulo desde\u00a0\u00a0<strong>Astra &gt; M\u00f3dulos Astra Pro<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/01\/Site-Layout-module.gif\"><img fetchpriority=\"high\" decoding=\"async\" width=\"600\" height=\"281\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/01\/Site-Layout-module.gif\" alt=\"\" class=\"wp-image-145042\"\/><\/a><\/figure>\n\n\n\n<p>Con el m\u00f3dulo Dise\u00f1o del sitio, puede gestionar el dise\u00f1o general del sitio web.<\/p>\n\n\n\n<p>Una vez activado el m\u00f3dulo, puede encontrar la configuraci\u00f3n de Dise\u00f1o del sitio en <strong>Apariencia &gt; Personalizar &gt; Global &gt; Contenedor &gt; Dise\u00f1o del sitio<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/01\/site-layouts.gif\"><img decoding=\"async\" width=\"600\" height=\"281\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/01\/site-layouts.gif\" alt=\"\" class=\"wp-image-145043\"\/><\/a><\/figure>\n\n\n\n<p>El dise\u00f1o elegido se aplicar\u00e1 a la envoltura exterior del sitio. El dise\u00f1o por defecto ser\u00e1 \"Ancho completo\". Las opciones disponibles con los m\u00f3dulos de dise\u00f1o del sitio se explican en los art\u00edculos individuales enlazados a continuaci\u00f3n.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/git-staging.wpastra.com\/es\/docs\/full-width-site-layout\/\">Dise\u00f1o de ancho completo<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/git-staging.wpastra.com\/es\/docs\/max-width-site-layout\/\">Anchura m\u00e1xima<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/git-staging.wpastra.com\/es\/docs\/padded-site-layout\/\">Disposici\u00f3n acolchada<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/git-staging.wpastra.com\/es\/docs\/fluid-site-layout\/\">Disposici\u00f3n de fluidos<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Esta es una caracter\u00edstica Premium disponible con el plugin Astra Pro Addon. Para utilizar estas caracter\u00edsticas Pro, es necesario tener el tema Astra junto con el Astra Pro Addon instalado en su sitio web. Pasos R\u00e1pidos para Crear el Dise\u00f1o del Sitio utilizando el M\u00f3dulo de Dise\u00f1os del SitioPaso 1: Aseg\u00farese de que tiene instalado el complemento Astra Pro [...]<\/p>","protected":false},"author":20,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"docs_category":[119],"docs_tag":[],"class_list":{"0":"post-24136","1":"docs","2":"type-docs","3":"status-publish","5":"docs_category-site-layout"},"spectra_custom_meta":{"_yoast_wpseo_primary_docs_category":["119"],"_wp_old_slug":[""],"_wp_page_template":["default"],"_edit_lock":["1685939856:89"],"_edit_last":["89"],"onesignal_meta_box_present":["1"],"onesignal_send_notification":[""],"site-sidebar-layout":["default"],"site-content-layout":["default"],"theme-transparent-header-meta":["default"],"_yoast_wpseo_content_score":["90"],"wpil_links_inbound_internal_count_data":["a:10:{i:0;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:46:\"https:\/\/wpastra.com\/docs\/site-layout-overview\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:1;s:4:\"post\";O:15:\"Wpil_Model_Post\":5:{s:2:\"id\";s:5:\"24131\";s:5:\"title\";s:30:\"Global Container - Astra Theme\";s:4:\"type\";s:4:\"post\";s:7:\"content\";s:5125:\"<!-- wp:paragraph -->\n<p>A container is an area where we display the content. In general, the container encloses the whole page.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>The content area and the sidebar are parts of the container. The content area is technically called as the primary container, whereas the sidebar is the secondary container.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can apply container layouts globally for the entire website through the Customizer option at <strong>Appearance &gt; Customizer &gt; Global &gt; Container<\/strong>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Different containers can be applied for individual pages and posts from <a href=\"https:\/\/wpastra.com\/docs\/meta-settings-free\/\">meta settings<\/a>. These are page-specific settings that have high priority than customizer settings. <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Container Width<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Content will be display within this width. You can try width in combination with container layout to create different views. <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":39937,\"align\":\"center\",\"linkDestination\":\"media\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-container-width.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-container-width.png\" alt=\"\" class=\"wp-image-39937\"\/><\/a><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Container Layout<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Astra offers 4 types of Containers Layout. These are global containers that will be applied to the entire website. But you can set different containers' layout for different post types with <em>Dedicated Container Layout<\/em>. To have more control over container layout on each page you can refer page meta settings. <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>All container layout types are explained in the following links -<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li><a href=\"\/docs\/boxed-container-layout\/\">Boxed<\/a><\/li><li><a href=\"\/docs\/content-boxed-container-layout\/\">Content Boxed<\/a><\/li><li><a href=\"\/docs\/full-width-contained-container-layout\/\">Full Width \/ Contained<\/a><\/li><li><a href=\"\/docs\/full-width-stretched-container-layout\/\">Full Width \/ Stretched<\/a><\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Dedicated Container Layout<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Above 4 types of container layouts are separately available for the following post types.  That means if you choose default layout as Boxed and for Archives you choose Full Width\/Contained. Then the entire site except archive pages will have Boxed layout while Archive pages will have Full Width\/Contained layout.  <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li><strong>Page Layout<\/strong> - For only pages<\/li><li><strong>Blog Post Layout<\/strong> - For blog archive and single blog post pages <\/li><li><strong>Archives Layout<\/strong> - All archives <\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:image {\"id\":39941,\"align\":\"center\",\"linkDestination\":\"media\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-page-specific-container.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-page-specific-container.png\" alt=\"\" class=\"wp-image-39941\"\/><\/a><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>Astra has integration with a few popular plugins. When those plugins are installed you will get dedicated container layout options for those plugin pages too. Below is the list of plugins that has integration with Astra - <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>WooCommerce<\/li><li>LifterLMS<\/li><li>LearnDash<\/li><li>EDD (Easy Digital Downloads)<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:image {\"id\":39943,\"align\":\"center\",\"linkDestination\":\"media\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-container-woo-pages.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-container-woo-pages.png\" alt=\"\" class=\"wp-image-39943\"\/><\/a><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Note:<\/strong><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>We provide more advanced options in dedicated modules of <strong>Astra Pro Addon<\/strong> plugin. And such options are available in dedicated modules of Astra Pro Addon plugin. For e.g.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>Container layout can be overridden by the page meta settings. The priority of the meta settings is higher than the customizer settings. Read more about Meta Settings <a href=\"https:\/\/wpastra.com\/docs\/meta-settings-free\/\">here<\/a>.<\/li><li>The width of the container depends on the <a href=\"https:\/\/wpastra.com\/docs\/site-layout-overview\/\">Site Layout<\/a> settings.<\/li><\/ol>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p><\/p>\n<!-- \/wp:paragraph -->\";s:5:\"links\";O:8:\"stdClass\":4:{s:4:\"view\";s:44:\"https:\/\/wpastra.com\/docs\/container-overview\/\";s:4:\"edit\";N;s:6:\"export\";s:68:\"https:\/\/wpastra.com\/wp-admin\/post.php?area=wpil_export&post_id=24131\";s:7:\"refresh\";s:99:\"https:\/\/wpastra.com\/wp-admin\/admin.php?page=link_whisper&type=post_links_count_update&post_id=24131\";}}s:6:\"anchor\";s:11:\"Site Layout\";s:15:\"added_by_plugin\";b:0;}i:1;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:46:\"https:\/\/wpastra.com\/docs\/site-layout-overview\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:1;s:4:\"post\";O:15:\"Wpil_Model_Post\":5:{s:2:\"id\";s:5:\"24141\";s:5:\"title\";s:22:\"Full Width Site Layout\";s:4:\"type\";s:4:\"post\";s:7:\"content\";s:1637:\"<!-- wp:paragraph -->\n<p>This is a premium feature available with <strong>Astra Pro Addon<\/strong> plugin. To use these Pro features, you need to have the <a href=\"https:\/\/wordpress.org\/themes\/astra\/\">Astra theme<\/a> along with the Astra Pro Addon installed on your website.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Please refer&nbsp;the following <a href=\"https:\/\/wpastra.com\/docs\/site-layout-overview\/\">document<\/a>, to begin with, Site Layout. <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>A website generally has the main wrapper followed by the container.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>The main wrapper consists of header, content, sidebar, and footer \u2014 the entire website;<\/li><li>And the container is the child wrapper that includes a content &amp; sidebar.<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>When you select the Full-Width Site Layout, the main wrapper of the website goes edge to edge of the browser. Whereas the content is managed by the container width.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can find the setting to manage Full-Width Site Layouts under <strong>Appearance &gt; Customize &gt; Global &gt; Container &gt; Site Layout.<\/strong><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":39718,\"align\":\"center\",\"linkDestination\":\"media\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-2-full-width-layout.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-2-full-width-layout.png\" alt=\"\" class=\"wp-image-39718\"\/><\/a><\/figure><\/div>\n<!-- \/wp:image -->\";s:5:\"links\";O:8:\"stdClass\":4:{s:4:\"view\";s:48:\"https:\/\/wpastra.com\/docs\/full-width-site-layout\/\";s:4:\"edit\";N;s:6:\"export\";s:68:\"https:\/\/wpastra.com\/wp-admin\/post.php?area=wpil_export&post_id=24141\";s:7:\"refresh\";s:99:\"https:\/\/wpastra.com\/wp-admin\/admin.php?page=link_whisper&type=post_links_count_update&post_id=24141\";}}s:6:\"anchor\";s:8:\"document\";s:15:\"added_by_plugin\";b:0;}i:2;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:46:\"https:\/\/wpastra.com\/docs\/site-layout-overview\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:1;s:4:\"post\";O:15:\"Wpil_Model_Post\":5:{s:2:\"id\";s:5:\"24143\";s:5:\"title\";s:21:\"Max Width Site Layout\";s:4:\"type\";s:4:\"post\";s:7:\"content\";s:2521:\"<!-- wp:paragraph -->\n<p>This is a premium feature available with <strong>Astra Pro Addon<\/strong> plugin. To use these Pro features, you need to have the <a href=\"https:\/\/wordpress.org\/themes\/astra\/\">Astra theme<\/a> along with the Astra Pro Addon installed on your website.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Please refer&nbsp;the following <a href=\"https:\/\/wpastra.com\/docs\/site-layout-overview\/\">document<\/a>, to begin with, Site Layout.  <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>A website generally has the main wrapper followed by the container.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>The main wrapper consists of header, content, sidebar, and footer \u2014 the entire website;<\/li><li>And the container is the child wrapper that includes a content &amp; sidebar.<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:image {\"id\":39721,\"align\":\"center\",\"linkDestination\":\"media\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-2-max-width.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-2-max-width.png\" alt=\"\" class=\"wp-image-39721\"\/><\/a><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In Max Width Site Layout, the main wrapper of the website is set to a certain maximum width. We have also provided settings for you to control the top and bottom margin, so you can design your website to appear like a real box.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can find the setting to manage Max Width Site Layout under <strong>Appearance &gt; Customize &gt; Global &gt; Container &gt; Site Layout<\/strong><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":39723,\"align\":\"center\",\"linkDestination\":\"media\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-2-max-width-2.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-2-max-width-2.png\" alt=\"\" class=\"wp-image-39723\"\/><\/a><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Other Notes:<\/strong><br>If you have the Colors and Background module enabled from Astra Pro, you get an option to set a background image for the entire site under<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Please refer -&nbsp;<a href=\"https:\/\/wpastra.com\/docs\/how-to-set-background-image-for-the-site\/\">How to set Background Image for the site?<\/a><\/p>\n<!-- \/wp:paragraph -->\";s:5:\"links\";O:8:\"stdClass\":4:{s:4:\"view\";s:47:\"https:\/\/wpastra.com\/docs\/max-width-site-layout\/\";s:4:\"edit\";N;s:6:\"export\";s:68:\"https:\/\/wpastra.com\/wp-admin\/post.php?area=wpil_export&post_id=24143\";s:7:\"refresh\";s:99:\"https:\/\/wpastra.com\/wp-admin\/admin.php?page=link_whisper&type=post_links_count_update&post_id=24143\";}}s:6:\"anchor\";s:8:\"document\";s:15:\"added_by_plugin\";b:0;}i:3;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:46:\"https:\/\/wpastra.com\/docs\/site-layout-overview\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:1;s:4:\"post\";O:15:\"Wpil_Model_Post\":5:{s:2:\"id\";s:5:\"24149\";s:5:\"title\";s:17:\"Fluid Site Layout\";s:4:\"type\";s:4:\"post\";s:7:\"content\";s:2638:\"<!-- wp:paragraph -->\n<p>This is a premium feature available with <strong>Astra Pro Addon<\/strong> plugin. To use these Pro features, you need to have the <a href=\"https:\/\/wordpress.org\/themes\/astra\/\">Astra theme<\/a> along with the Astra Pro Addon installed on your website.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Please refer&nbsp;the following&nbsp;<a href=\"https:\/\/wpastra.com\/docs\/site-layout-overview\/\">document<\/a>, to begin with, Site Layout.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph {\"customBackgroundColor\":\"#cae3f3\"} -->\n<p style=\"background-color:#cae3f3\" class=\"has-background\"><strong>Quick Steps to Enable Fluid Site Layout with Astra<\/strong><br><strong>Step 1:<\/strong> Make sure you have the Astra Pro Addon plugin installed and activated. <a href=\"https:\/\/wpastra.com\/docs\/how-to-install-astra-pro-addon-plugin\/\">How to Install Astra Pro Addon plugin?<\/a><br><strong>Step 2:<\/strong> Activate the Site Layout module from the Astra Options under the <em>WordPress Dashboard &gt; Appearance &gt; Astra Options<\/em><br><strong>Step 3:<\/strong> Visit customizer [ <em>Appearance &gt; Customize &gt; Global &gt; Container<strong> <\/strong>&gt; Site Layout <\/em>] and select Fluid as Site Layout settings.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Just as the name suggests \u2014 when fluid site layout is enabled, the entire website goes edge to edge of the browser, on all screen sizes.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you have a website where you have a lot of content; for example blog, online magazine, or for any reason, if you need your entire website including header, footer, and main content area to span across the entire browser on all screen sizes, the Fluid Site Layout is for you.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>The setting for Fluid Site Layout can be found under <strong>Appearance &gt; Customize &gt; Global &gt; Container &gt; Site Layout<\/strong><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":39710,\"align\":\"center\",\"linkDestination\":\"media\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-2-fluid-layout.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-2-fluid-layout.png\" alt=\"\" class=\"wp-image-39710\"\/><\/a><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Astra has provided an option to manage the padding on left and right.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>On responsive devices, this padding is automatically adjusted.<\/p>\n<!-- \/wp:paragraph -->\";s:5:\"links\";O:8:\"stdClass\":4:{s:4:\"view\";s:43:\"https:\/\/wpastra.com\/docs\/fluid-site-layout\/\";s:4:\"edit\";N;s:6:\"export\";s:68:\"https:\/\/wpastra.com\/wp-admin\/post.php?area=wpil_export&post_id=24149\";s:7:\"refresh\";s:99:\"https:\/\/wpastra.com\/wp-admin\/admin.php?page=link_whisper&type=post_links_count_update&post_id=24149\";}}s:6:\"anchor\";s:8:\"document\";s:15:\"added_by_plugin\";b:0;}i:4;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:46:\"https:\/\/wpastra.com\/docs\/site-layout-overview\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:1;s:4:\"post\";O:15:\"Wpil_Model_Post\":5:{s:2:\"id\";s:5:\"24152\";s:5:\"title\";s:18:\"Padded Site Layout\";s:4:\"type\";s:4:\"post\";s:7:\"content\";s:2294:\"<!-- wp:paragraph -->\n<p>This is a premium feature available with <strong>Astra Pro Addon<\/strong> plugin. To use these Pro features, you need to have the <a href=\"https:\/\/wordpress.org\/themes\/astra\/\">Astra theme<\/a> along with the Astra Pro Addon installed on your website.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Please refer&nbsp;the following&nbsp;<a href=\"https:\/\/wpastra.com\/docs\/site-layout-overview\/\">document<\/a>, to begin with, Site Layout. <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Technically, Padded is just the Full-Width Site Layout, with extra options for the padding across the website edges.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>The padding remains consistent even when user scrolls and thus, it results in a neat frame kind of design for the website, seen on many creative websites.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can find the settings in <strong>Appearance &gt; Customize &gt; Global &gt; Container &gt; Site Layout<\/strong><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":39704,\"align\":\"center\",\"linkDestination\":\"media\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-2-padded-layout.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-2-padded-layout.png\" alt=\"\" class=\"wp-image-39704\"\/><\/a><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Note:<\/strong> Padded layouts work best with Full Width \/ Stretched.<br>You can manage the padding independently for different devices as we\u2019ve provided that flexibility.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Here is one of the Astra Demo Websites where we have used padded layout option:<br><a href=\"https:\/\/websitedemos.net\/plant-shop-03\/\">https:\/\/websitedemos.net\/plant-shop-03\/<\/a><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Other Notes:<\/strong><br>If you have the Colors and Background module enabled from Astra Pro, you get an option to set a background image for the entire site under<br>Please refer-&nbsp;<a href=\"https:\/\/wpastra.com\/docs\/how-to-set-background-image-for-the-site\/\">How to set Background Image for the site?<\/a><\/p>\n<!-- \/wp:paragraph -->\";s:5:\"links\";O:8:\"stdClass\":4:{s:4:\"view\";s:44:\"https:\/\/wpastra.com\/docs\/padded-site-layout\/\";s:4:\"edit\";N;s:6:\"export\";s:68:\"https:\/\/wpastra.com\/wp-admin\/post.php?area=wpil_export&post_id=24152\";s:7:\"refresh\";s:99:\"https:\/\/wpastra.com\/wp-admin\/admin.php?page=link_whisper&type=post_links_count_update&post_id=24152\";}}s:6:\"anchor\";s:8:\"document\";s:15:\"added_by_plugin\";b:0;}i:5;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:46:\"https:\/\/wpastra.com\/docs\/site-layout-overview\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:1;s:4:\"post\";O:15:\"Wpil_Model_Post\":5:{s:2:\"id\";s:5:\"24299\";s:5:\"title\";s:26:\"Boxed \u2013 Container Layout\";s:4:\"type\";s:4:\"post\";s:7:\"content\";s:2760:\"<!-- wp:paragraph -->\n<p>As explained in the <a href=\"\/docs\/container-overview\/\">Container Overview<\/a> article, typically a website can have two containers viz: <strong>Primary Container<\/strong> and <strong>Secondary Container<\/strong>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Primary Container is where the main content appears, whereas Secondary Container consists of the sidebar and various different widgets in the sidebar.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>When you select the \u201cBoxed Layout\u201d; the individual containers and widgets appear in boxes.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can find the setting under <strong>Appearance &gt; Customize &gt; Global &gt; Container<\/strong><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":39666,\"align\":\"center\",\"linkDestination\":\"media\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-2-boxed.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-2-boxed.png\" alt=\"\" class=\"wp-image-39666\"\/><\/a><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>You can change the background color from<strong> Customizer &gt; Global &gt; Colors &gt; Base Colors &gt; Base Colors.<\/strong><br><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":39669,\"align\":\"center\",\"width\":949,\"height\":465,\"linkDestination\":\"media\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-2-background-color.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-2-background-color.png\" alt=\"\" class=\"wp-image-39669\" width=\"949\" height=\"465\"\/><\/a><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Other Notes:<\/strong><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can apply boxed containers for selected pages or posts from meta settings.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>The width of the container depends on the <a href=\"\/docs\/site-layout-overview\/\">Site Layout<\/a> settings.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you have <strong>Astra Pro Addon<\/strong> plugin, you can find additional options such as background color through our <a href=\"https:\/\/wpastra.com\/docs\/colors-background-module\/\">Colors &amp; Backgrounds<\/a> module. In case, if you don\u2019t have Astra Pro, you can also add a background image with Custom CSS.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Also, we provide more styling options in dedicated modules of <strong>Astra Pro Addon<\/strong> plugin. Learn more about the <a href=\"https:\/\/wpastra.com\/docs\/site-layout-overview\/\">Site Layout<\/a> module of Astra Pro Addon.<\/p>\n<!-- \/wp:paragraph -->\";s:5:\"links\";O:8:\"stdClass\":4:{s:4:\"view\";s:48:\"https:\/\/wpastra.com\/docs\/boxed-container-layout\/\";s:4:\"edit\";N;s:6:\"export\";s:68:\"https:\/\/wpastra.com\/wp-admin\/post.php?area=wpil_export&post_id=24299\";s:7:\"refresh\";s:99:\"https:\/\/wpastra.com\/wp-admin\/admin.php?page=link_whisper&type=post_links_count_update&post_id=24299\";}}s:6:\"anchor\";s:11:\"Site Layout\";s:15:\"added_by_plugin\";b:0;}i:6;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:46:\"https:\/\/wpastra.com\/docs\/site-layout-overview\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:1;s:4:\"post\";O:15:\"Wpil_Model_Post\":5:{s:2:\"id\";s:5:\"24304\";s:5:\"title\";s:32:\"Content Boxed - Container Layout\";s:4:\"type\";s:4:\"post\";s:7:\"content\";s:2658:\"<!-- wp:paragraph -->\n<p>As explained in the <a href=\"https:\/\/wpastra.com\/docs\/container-overview\/\">Container Overview<\/a> article, typically a website can have two containers viz: <strong>Primary Container<\/strong> and <strong>Secondary Container<\/strong>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Primary Container is where the main content appears, whereas Secondary Container consists of the sidebar and various different widgets in the sidebar.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>When you select the \u201cContent Boxed Layout\u201d; only the primary container appears in the boxed format. And the sidebar or secondary container comes up on a plain background.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":42805,\"align\":\"center\",\"linkDestination\":\"media\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/09\/ast-2-content-boxed-1.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/09\/ast-2-content-boxed-1.png\" alt=\"\" class=\"wp-image-42805\"\/><\/a><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>Content Boxed Layout is great for the content websites, blogs, and pages where you need to highlight the content area more than the sidebar.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can find the setting under <strong>Appearance &gt; Customize &gt; Global &gt; Container<\/strong><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Also, you can apply a different container for each individual pages from meta settings.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Other Notes:<\/strong><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can apply a Content Boxed container for selected pages or posts from meta settings.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>The width of the container depends on the <a href=\"https:\/\/wpastra.com\/docs\/site-layout-overview\/\">Site Layout<\/a> settings.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you have&nbsp;<strong>Astra Pro Addon<\/strong>&nbsp;plugin, you can find additional options such as background color through our&nbsp;<a href=\"https:\/\/wpastra.com\/docs\/colors-background-module\/\">Colors &amp; Backgrounds<\/a>&nbsp;module. In case, if you don\u2019t have Astra Pro, you can also add a background image with Custom CSS.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Also, we provide more styling options in dedicated modules of&nbsp;<strong>Astra Pro Addon<\/strong>&nbsp;plugin. Learn more about the&nbsp;<a href=\"https:\/\/wpastra.com\/docs\/site-layout-overview\/\">Site Layout<\/a>&nbsp;module of Astra Pro Addon.<\/p>\n<!-- \/wp:paragraph -->\";s:5:\"links\";O:8:\"stdClass\":4:{s:4:\"view\";s:56:\"https:\/\/wpastra.com\/docs\/content-boxed-container-layout\/\";s:4:\"edit\";N;s:6:\"export\";s:68:\"https:\/\/wpastra.com\/wp-admin\/post.php?area=wpil_export&post_id=24304\";s:7:\"refresh\";s:99:\"https:\/\/wpastra.com\/wp-admin\/admin.php?page=link_whisper&type=post_links_count_update&post_id=24304\";}}s:6:\"anchor\";s:11:\"Site Layout\";s:15:\"added_by_plugin\";b:0;}i:7;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:46:\"https:\/\/wpastra.com\/docs\/site-layout-overview\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:1;s:4:\"post\";O:15:\"Wpil_Model_Post\":5:{s:2:\"id\";s:5:\"24306\";s:5:\"title\";s:43:\"Full Width \/ Contained \u2013 Container Layout\";s:4:\"type\";s:4:\"post\";s:7:\"content\";s:2145:\"<!-- wp:paragraph -->\n<p>As explained in the <a href=\"https:\/\/wpastra.com\/docs\/container-overview\/\">Container Overview<\/a> article, typically a website can have two containers viz: <strong>Primary Container<\/strong> and <strong>Secondary Container<\/strong>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Primary Container is where the main content appears, whereas Secondary Container consists of the sidebar and various different widgets in the sidebar.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>\u201cFull Width \/ Contained\u201d layout combines the primary and secondary containers and displays in a single container in a clean format. That means content and a sidebar will display side by side in a single container. This container will display in a container width, leaving a space around the container.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can find the setting under <strong>Appearance &gt; Customize &gt; Global &gt; Container<\/strong><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":42807,\"align\":\"center\",\"linkDestination\":\"media\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/09\/ast-2-full-width-contained.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/09\/ast-2-full-width-contained.png\" alt=\"\" class=\"wp-image-42807\"\/><\/a><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>Full Width \/ Contained layout is great for websites that need a clean design without any boxes. We set this layout as default in our integrations with some plugins such as WooCommerce, LifterLMS, etc.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Full Width \/ Contained is also the recommended layout for page builders like Visual Composer; where page builder requires themes to control the width of the container.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>We provide more styling options in dedicated modules of&nbsp;<strong>Astra Pro Addon<\/strong>&nbsp;plugin. Learn more about the&nbsp;<a href=\"https:\/\/wpastra.com\/docs\/site-layout-overview\/\">Site Layout<\/a>&nbsp;module of Astra Pro Addon.<\/p>\n<!-- \/wp:paragraph -->\";s:5:\"links\";O:8:\"stdClass\":4:{s:4:\"view\";s:63:\"https:\/\/wpastra.com\/docs\/full-width-contained-container-layout\/\";s:4:\"edit\";N;s:6:\"export\";s:68:\"https:\/\/wpastra.com\/wp-admin\/post.php?area=wpil_export&post_id=24306\";s:7:\"refresh\";s:99:\"https:\/\/wpastra.com\/wp-admin\/admin.php?page=link_whisper&type=post_links_count_update&post_id=24306\";}}s:6:\"anchor\";s:11:\"Site Layout\";s:15:\"added_by_plugin\";b:0;}i:8;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:46:\"https:\/\/wpastra.com\/docs\/site-layout-overview\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:1;s:4:\"post\";O:15:\"Wpil_Model_Post\":5:{s:2:\"id\";s:5:\"24311\";s:5:\"title\";s:62:\"How to Set the Full-width\/Stretched Container Layout in Astra?\";s:4:\"type\";s:4:\"post\";s:7:\"content\";s:2018:\"<!-- wp:paragraph -->\n<p>As explained in the <a href=\"https:\/\/wpastra.com\/docs\/container-overview\/\">Container Overview<\/a> article, typically a website can have two containers viz: <strong>Primary Container<\/strong> and <strong>Secondary Container<\/strong>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Primary Container is where the main content appears, whereas Secondary Container consists of the sidebar and various different widgets in the sidebar.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>\u201cFull Width \/ Stretched\u201d layout merges the primary and secondary containers and displays in a single container. And the width of the container is stretched to the fullest. Due to the stretched width of the container, the content runs edge to edge to the width of the browser.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":42809,\"align\":\"center\",\"linkDestination\":\"media\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/09\/ast-2-full-width-stretched.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/09\/ast-2-full-width-stretched.png\" alt=\"\" class=\"wp-image-42809\"\/><\/a><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>You can find the setting under <strong>Appearance &gt; Customize &gt; Global &gt; Container<\/strong><br><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>No background color is applied in \u201cFull Width \/ Stretched\u201d layouts since the primary container occupies the entire browser.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>These layouts work best with the page builders like Beaver Builder, Elementor etc where you can set container width with page builder.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>We provide more styling options in dedicated modules of&nbsp;<strong>Astra Pro Addon<\/strong>&nbsp;plugin. Learn more about the&nbsp;<a href=\"https:\/\/wpastra.com\/docs\/site-layout-overview\/\">Site Layout<\/a>&nbsp;module of Astra Pro Addon. <\/p>\n<!-- \/wp:paragraph -->\";s:5:\"links\";O:8:\"stdClass\":4:{s:4:\"view\";s:63:\"https:\/\/wpastra.com\/docs\/full-width-stretched-container-layout\/\";s:4:\"edit\";N;s:6:\"export\";s:68:\"https:\/\/wpastra.com\/wp-admin\/post.php?area=wpil_export&post_id=24311\";s:7:\"refresh\";s:99:\"https:\/\/wpastra.com\/wp-admin\/admin.php?page=link_whisper&type=post_links_count_update&post_id=24311\";}}s:6:\"anchor\";s:11:\"Site Layout\";s:15:\"added_by_plugin\";b:0;}i:9;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:46:\"https:\/\/wpastra.com\/docs\/site-layout-overview\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:1;s:4:\"post\";O:15:\"Wpil_Model_Post\":5:{s:2:\"id\";s:5:\"25507\";s:5:\"title\";s:41:\"How to Set Background Image for the Site?\";s:4:\"type\";s:4:\"post\";s:7:\"content\";s:1682:\"<!-- wp:paragraph -->\n<p>Option to set a background image for the site is a premium feature available with <strong>Astra Pro Addon<\/strong> plugin. To use these Pro features, you need to have the <a href=\"https:\/\/wordpress.org\/themes\/astra\/\">Astra theme<\/a> along with the Astra Pro Addon installed on your website.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Background image option is available for&nbsp;<a href=\"https:\/\/wpastra.com\/docs\/padded-site-layout\/\">Padded<\/a> and&nbsp;<a href=\"https:\/\/wpastra.com\/docs\/max-width-site-layout\/\">Max Width<\/a> Site Layout. Kindly follow the steps -<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>Activate the <a href=\"https:\/\/wpastra.com\/docs\/site-layout-overview\/\">Site Layout<\/a>&nbsp;and <a href=\"https:\/\/wpastra.com\/docs\/colors-background-module\/\">Colors &amp; Background<\/a> module available&nbsp;with Astra Pro Addon plugin.<\/li><li>Set site layout to <a href=\"https:\/\/wpastra.com\/docs\/padded-site-layout\/\">Padded<\/a> or&nbsp;<a href=\"https:\/\/wpastra.com\/docs\/max-width-site-layout\/\">Max Width<\/a>.<\/li><li>Navigate to <strong>Appearance &gt; Customize &gt;&nbsp;Global &gt; Colors &gt; Base Colors<\/strong><\/li><li>You will find an option to set the background image to the site.<\/li><\/ol>\n<!-- \/wp:list -->\n\n<!-- wp:image {\"id\":25515,\"align\":\"center\",\"linkDestination\":\"custom\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/02\/astra-customizer-bg-image-options.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/02\/astra-customizer-bg-image-options.png\" alt=\"\" class=\"wp-image-25515\"\/><\/a><\/figure><\/div>\n<!-- \/wp:image -->\";s:5:\"links\";O:8:\"stdClass\":4:{s:4:\"view\";s:66:\"https:\/\/wpastra.com\/docs\/how-to-set-background-image-for-the-site\/\";s:4:\"edit\";N;s:6:\"export\";s:68:\"https:\/\/wpastra.com\/wp-admin\/post.php?area=wpil_export&post_id=25507\";s:7:\"refresh\";s:99:\"https:\/\/wpastra.com\/wp-admin\/admin.php?page=link_whisper&type=post_links_count_update&post_id=25507\";}}s:6:\"anchor\";s:11:\"Site Layout\";s:15:\"added_by_plugin\";b:0;}}"],"wpil_links_outbound_internal_count_data":["a:0:{}"],"wpil_links_outbound_external_count_data":["a:8:{i:0;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:35:\"https:\/\/wordpress.org\/themes\/astra\/\";s:4:\"host\";s:13:\"wordpress.org\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:11:\"Astra theme\";s:15:\"added_by_plugin\";b:0;}i:1;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:63:\"https:\/\/wpastra.com\/docs\/how-to-install-astra-pro-addon-plugin\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:38:\"How to Install Astra Pro Addon plugin?\";s:15:\"added_by_plugin\";b:0;}i:2;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:69:\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-site-layouts.png\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:112:\"<img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-site-layouts.png\" alt=\"\" class=\"wp-image-39728\"\/>\";s:15:\"added_by_plugin\";b:0;}i:3;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:79:\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-2-site-layout-settings.png\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:122:\"<img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-2-site-layout-settings.png\" alt=\"\" class=\"wp-image-39730\"\/>\";s:15:\"added_by_plugin\";b:0;}i:4;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:29:\"\/docs\/full-width-site-layout\/\";s:4:\"host\";s:0:\"\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:17:\"Full-Width Layout\";s:15:\"added_by_plugin\";b:0;}i:5;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:47:\"https:\/\/wpastra.com\/docs\/max-width-site-layout\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:16:\"Max Width Layout\";s:15:\"added_by_plugin\";b:0;}i:6;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:25:\"\/docs\/padded-site-layout\/\";s:4:\"host\";s:0:\"\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:13:\"Padded Layout\";s:15:\"added_by_plugin\";b:0;}i:7;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:24:\"\/docs\/fluid-site-layout\/\";s:4:\"host\";s:0:\"\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:12:\"Fluid Layout\";s:15:\"added_by_plugin\";b:0;}}"],"tap_disable_autolinker":["no"],"tap_autolink_inside_heading":["global"],"tap_autolink_random_placement":["global"],"tap_post_autolinker_limit":["0"],"wpil_sync_report3":["1"],"wpil_links_inbound_internal_count":["10"],"wpil_links_outbound_internal_count":["0"],"wpil_links_outbound_external_count":["8"],"wpil_sync_report2_time":["2019-10-18T13:43:20+00:00"],"_ppc_meta_key":["a:8:{s:20:\"ppc_key5d92f85d42273\";s:60:\"Images &amp; Names Correctly. Title &amp; Alt Tags are Given\";s:8:\"ppc_key4\";s:15:\"Formatting Done\";s:8:\"ppc_key2\";s:23:\"Featured Image Assigned\";s:8:\"ppc_key3\";s:17:\"Category Selected\";s:8:\"ppc_key5\";s:15:\"Title is Catchy\";s:8:\"ppc_key6\";s:22:\"Social Images Assigned\";s:8:\"ppc_key7\";s:8:\"Done SEO\";s:8:\"ppc_key8\";s:28:\"Spelling and Grammar Checked\";}"],"_yoast_wpseo_title":["How to Manage Site Layouts Using Astra?"],"astra_style_timestamp_css":["1573724095"],"_yoast_wpseo_estimated-reading-time-minutes":["2"],"_ht_kb_post_views_count":["58"],"_ht_kb_usefulness":["0"],"_ht_article_order_119":["24136"],"wp_last_modified_info":["January 27, 2023 @ 1:08 PM"],"wplmi_shortcode":["[lmt-post-modified-info]"],"views":["53871"],"helpful":["37"],"unhelpful":["78"],"redirects":["30"],"rank_math_primary_docs_category":["119"],"rank_math_title":["How to Manage Site Layouts Using Astra?"],"rank_math_news_sitemap_robots":["index"],"rank_math_robots":["a:1:{i:0;s:5:\"index\";}"],"rank_math_analytic_object_id":["1244"],"rank_math_seo_score":["21"],"rank_math_internal_links_processed":["1"],"_wplmi_last_modified":["2023-01-27 13:08:52"],"rank_math_og_content_image":["a:2:{s:5:\"check\";s:32:\"e7afed00a286a066a531dc569fc69015\";s:6:\"images\";a:1:{i:0;i:145042;}}"],"pfd_related_docs":[""],"_wpml_media_duplicate":["1"],"_trp_automatically_translated_slug_es_ES":["resumen-de-la-distribucion-del-sitio"],"_uag_page_assets":["a:9:{s:3:\"css\";s:2495:\".wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape-top svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape.uagb-container__shape-top .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape-bottom svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape.uagb-container__shape-bottom .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__video-wrap video{opacity: 1;}.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1200px);max-width: var(--inner-content-custom-width);width: 100%;flex-direction: column;align-items: center;justify-content: center;flex-wrap: nowrap;row-gap: 0px;column-gap: 0px;}.wp-block-uagb-container.uagb-block-debf2792{box-shadow: 0px 0px   #00000070 ;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;overflow: visible;border-color: inherit;row-gap: 0px;column-gap: 0px;}@media only screen and (max-width: 976px) {.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1024px);max-width: var(--inner-content-custom-width);width: 100%;}.wp-block-uagb-container.uagb-block-debf2792{padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;}}@media only screen and (max-width: 767px) {.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 767px);max-width: var(--inner-content-custom-width);width: 100%;flex-wrap: wrap;}.wp-block-uagb-container.uagb-block-debf2792{padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;}}\";s:2:\"js\";s:0:\"\";s:18:\"current_block_list\";a:6:{i:0;s:14:\"core\/paragraph\";i:1;s:10:\"core\/image\";i:2;s:9:\"core\/list\";i:3;s:14:\"core\/list-item\";i:4;s:14:\"uagb\/container\";i:5;s:14:\"core\/shortcode\";}s:8:\"uag_flag\";b:1;s:11:\"uag_version\";s:10:\"1777237643\";s:6:\"gfonts\";a:0:{}s:10:\"gfonts_url\";s:0:\"\";s:12:\"gfonts_files\";a:0:{}s:14:\"uag_faq_layout\";b:0;}"]},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"Anjali","author_link":"https:\/\/git-staging.wpastra.com\/es\/author\/anjalic\/"},"uagb_comment_info":0,"uagb_excerpt":"This is a premium feature available with Astra Pro Addon plugin. To use these Pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website. Quick Steps to Create Site Layout using the Site Layouts ModuleStep 1: Make sure you have the Astra Pro Addon plugin installed&hellip;","_links":{"self":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/24136"}],"collection":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/comments?post=24136"}],"version-history":[{"count":0,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/24136\/revisions"}],"wp:attachment":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/media?parent=24136"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_category?post=24136"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_tag?post=24136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}