{"id":24757,"date":"2018-02-26T00:00:00","date_gmt":"2018-02-25T18:30:00","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/?post_type=docs&#038;p=24757"},"modified":"2022-12-09T09:24:44","modified_gmt":"2022-12-09T03:54:44","slug":"sidebar-free","status":"publish","type":"docs","link":"https:\/\/git-staging.wpastra.com\/es\/docs\/sidebar-free\/","title":{"rendered":"\u00bfC\u00f3mo gestionar las barras laterales en el tema gratuito Astra?"},"content":{"rendered":"<p>Con Astra tienes tres opciones de barra lateral: barra lateral derecha, barra lateral izquierda y una opci\u00f3n que desactiva la barra lateral. Puedes gestionar las barras laterales de dos maneras.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/git-staging.wpastra.com\/es\/docs\/sidebar-free\/#manage-sidebar-globally-in-the-customizer\">Globalmente para el sitio desde el Personalizador<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/git-staging.wpastra.com\/es\/docs\/sidebar-free\/#managing-sidebar-for-particular-pages-or-posts\">En determinadas p\u00e1ginas y entradas<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"has-background\" style=\"background-color:#cae3f3\"><strong>Pasos r\u00e1pidos para gestionar las barras laterales de su sitio web<\/strong><br><strong>Paso 1:<\/strong> Busque las Opciones de la barra lateral en el personalizador [ <em>Apariencia &gt; Personalizar &gt; Barra lateral<\/em> ] para editar globalmente las Opciones de la barra lateral.<br><strong>Segundo paso:<\/strong> O administrar las opciones de la barra lateral en determinadas p\u00e1ginas y mensajes de la <a href=\"https:\/\/git-staging.wpastra.com\/es\/docs\/page-meta-settings\/\">Metaajustes<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Gesti\u00f3n global de la barra lateral en el personalizador<\/h3>\n\n\n\n<p><strong>Primer paso<\/strong> - Encontrar\u00e1 los ajustes en <strong>Apariencia &gt; Personalizar &gt; Barra lateral<\/strong>;<\/p>\n\n\n\n<p><strong>Paso 2<\/strong> - Para que su barra lateral sea visible, deber\u00e1 establecer el Dise\u00f1o predeterminado en Barra lateral derecha o izquierda;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/12\/left-sidebar.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"481\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/12\/left-sidebar-1024x481.png\" alt=\"\" class=\"wp-image-141993\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/12\/left-sidebar-1024x481.png 1024w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/12\/left-sidebar-300x141.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/12\/left-sidebar-768x360.png 768w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/12\/left-sidebar-1536x721.png 1536w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/12\/left-sidebar.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Puede establecer una barra lateral para todo el sitio en el Dise\u00f1o predeterminado. <\/p>\n\n\n\n<p>Para desactivar la barra lateral en cualquiera de estas ubicaciones, seleccione la opci\u00f3n \"<strong>Sin barra lateral<\/strong>\".<\/p>\n\n\n\n<p><strong>Paso 3<\/strong> - Una vez configurada al menos una de las barras laterales (izquierda\/derecha), puede ajustar el ancho de la barra lateral. Puede establecer el porcentaje del \u00e1rea de contenido que ocupar\u00e1 la barra lateral:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/12\/sidebar-width.png\"><img decoding=\"async\" width=\"1024\" height=\"481\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/12\/sidebar-width-1024x481.png\" alt=\"\" class=\"wp-image-141994\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/12\/sidebar-width-1024x481.png 1024w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/12\/sidebar-width-300x141.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/12\/sidebar-width-768x360.png 768w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/12\/sidebar-width-1536x721.png 1536w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/12\/sidebar-width.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Paso 4 - Por \u00faltimo, vaya a Dashboard &gt; Appearance &gt; Widgets para a\u00f1adir elementos a su barra lateral. <br><br>Ya est\u00e1. Tu barra lateral ya est\u00e1 lista. <\/p>\n\n\n\n<div class=\"wp-block-uagb-inline-notice uagb-inline_notice__align-left uagb-block-390313c0 uagb-inline_notice__outer-wrap\"><h4 class=\"uagb-notice-title\">Nota<\/h4><div class=\"uagb-notice-text\"><p>Si has seguido los pasos mencionados y sigues sin ver la barra lateral, comprueba tus barras laterales. Es posible que no hayas a\u00f1adido ning\u00fan widget a tu barra lateral. Puedes configurar esto en el Personalizador navegando a <em>Personalizar &gt; Widgets<\/em>.<br><br>Tambi\u00e9n puede consultar las preguntas m\u00e1s frecuentes al final de este art\u00edculo.<\/p><\/div><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Opciones adicionales para la barra lateral<\/h3>\n\n\n\n<p>Con Astra Pro, puedes activar los complementos para plugins integrados como WooCommerce, LifterLMS, LearnDash, etc. Estos complementos pueden activarse en Apariencia &gt; Opciones de Astra &gt; M\u00f3dulos Astra Pro. Como resultado, ver\u00e1s opciones adicionales para gestionar las barras laterales dedicadas en tu Personalizador:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/12\/Astra-Pro-Sidebar.png\"><img decoding=\"async\" width=\"1024\" height=\"481\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/12\/Astra-Pro-Sidebar-1024x481.png\" alt=\"\" class=\"wp-image-141996\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/12\/Astra-Pro-Sidebar-1024x481.png 1024w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/12\/Astra-Pro-Sidebar-300x141.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/12\/Astra-Pro-Sidebar-768x360.png 768w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/12\/Astra-Pro-Sidebar-1536x721.png 1536w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2022\/12\/Astra-Pro-Sidebar.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Gesti\u00f3n de la barra lateral para determinadas p\u00e1ginas o entradas<\/h3>\n\n\n\n<p>Astra tambi\u00e9n permite gestionar las barras laterales de una p\u00e1gina o entrada concreta a trav\u00e9s de la funci\u00f3n <a href=\"https:\/\/git-staging.wpastra.com\/es\/docs\/page-meta-settings\/\">meta ajustes<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Preguntas frecuentes<\/h2>\n\n\n<div class=\"wp-block-uagb-faq uagb-faq__outer-wrap uagb-block-4cc6958d uagb-faq-icon-row uagb-faq-layout-accordion uagb-faq-expand-first-false uagb-faq-inactive-other-true uagb-faq__wrap uagb-buttons-layout-wrap uagb-faq-equal-height\" data-faqtoggle=\"true\" role=\"tablist\"><div class=\"wp-block-uagb-faq-child uagb-faq-child__outer-wrap uagb-faq-item uagb-block-825ac50a\" role=\"tab\" tabindex=\"0\"><div class=\"uagb-faq-questions-button uagb-faq-questions\">\t\t\t<span class=\"uagb-icon uagb-faq-icon-wrap\">\n\t\t\t\t\t\t\t\t<svg xmlns=\"https:\/\/www.w3.org\/2000\/svg\" viewbox= \"0 0 448 512\"><path d=\"M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z\"><\/path><\/svg>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t<span class=\"uagb-icon-active uagb-faq-icon-wrap\">\n\t\t\t\t\t\t\t\t<svg xmlns=\"https:\/\/www.w3.org\/2000\/svg\" viewbox= \"0 0 448 512\"><path d=\"M400 288h-352c-17.69 0-32-14.32-32-32.01s14.31-31.99 32-31.99h352c17.69 0 32 14.3 32 31.99S417.7 288 400 288z\"><\/path><\/svg>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t<span class=\"uagb-question\">\u00bfC\u00f3mo puedo crear\/gestionar mis barras laterales?<\/span><\/div><div class=\"uagb-faq-content\"><p>Una vez activada la barra lateral, es posible que desee a\u00f1adir o eliminar algunos widgets, establecer un orden diferente o modificar algunos ajustes. <br><br>You can do this in the Customizer by navigating to Customize &gt; Widgets. Also, this can be accessed from your backend too by navigating to Dashboard &gt; Appearance &gt; Widgets. Here, you will be able to organize your sidebar and other widget areas. <br><br>Una vez que navegue hasta el panel de widgets, ver\u00e1 todas las barras laterales existentes. Ahora, debe expandir la barra lateral que desee y a\u00f1adirle widgets. Adem\u00e1s, cada widget tiene su propia configuraci\u00f3n que le permite hacer ajustes adicionales.<\/p><\/div><\/div><div class=\"wp-block-uagb-faq-child uagb-faq-child__outer-wrap uagb-faq-item uagb-block-31f0545f\" role=\"tab\" tabindex=\"0\"><div class=\"uagb-faq-questions-button uagb-faq-questions\">\t\t\t<span class=\"uagb-icon uagb-faq-icon-wrap\">\n\t\t\t\t\t\t\t\t<svg xmlns=\"https:\/\/www.w3.org\/2000\/svg\" viewbox= \"0 0 448 512\"><path d=\"M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z\"><\/path><\/svg>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t<span class=\"uagb-icon-active uagb-faq-icon-wrap\">\n\t\t\t\t\t\t\t\t<svg xmlns=\"https:\/\/www.w3.org\/2000\/svg\" viewbox= \"0 0 448 512\"><path d=\"M400 288h-352c-17.69 0-32-14.32-32-32.01s14.31-31.99 32-31.99h352c17.69 0 32 14.3 32 31.99S417.7 288 400 288z\"><\/path><\/svg>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t<span class=\"uagb-question\">\u00bfEs compatible el tema Astra con el editor de widgets por bloques (WordPress 5.8)?<\/span><\/div><div class=\"uagb-faq-content\"><p>Desde la versi\u00f3n 5.8 de WordPress, puedes utilizar bloques en tus \u00e1reas de widgets junto con widgets heredados. El tema Astra es totalmente compatible con WordPress 5.8 y con el editor de widgets basado en bloques desde la versi\u00f3n 3.6.5. <br><br>Ten en cuenta que algunos de los ajustes del widget Astra Header and Footer (fuente, color) han sido obsoletos para mejorar la compatibilidad - si necesitas estas opciones, puedes encontrar m\u00e1s detalles habilit\u00e1ndolas en <a href=\"https:\/\/git-staging.wpastra.com\/es\/docs\/enable-astra-widget-design-options\/\" target=\"_blank\" rel=\"noreferrer noopener\">este art\u00edculo<\/a>.<\/p><\/div><\/div><\/div>\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Con Astra tienes tres opciones de barra lateral: barra lateral derecha, barra lateral izquierda y una opci\u00f3n que desactiva la barra lateral. Puede gestionar las barras laterales de dos maneras. Pasos r\u00e1pidos para administrar las barras laterales en su sitio webPaso 1: Busque las opciones de barra lateral en el personalizador [ Apariencia &gt; Personalizar &gt; Barra lateral ] para editar las opciones de barra lateral [...].<\/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":[138],"docs_tag":[],"class_list":{"0":"post-24757","1":"docs","2":"type-docs","3":"status-publish","5":"docs_category-sidebar"},"spectra_custom_meta":{"_wp_old_slug":["sidebar|sidebar","sidebar|sidebar"],"_yoast_wpseo_primary_docs_category":["138"],"_wp_page_template":["default"],"wpil_links_inbound_internal_count_data":["a:2:{i:0;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:38:\"https:\/\/wpastra.com\/docs\/sidebar-free\/\";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:\"24757\";s:5:\"title\";s:43:\"How to Manage Sidebars in Free Astra Theme?\";s:4:\"type\";s:4:\"post\";s:7:\"content\";s:3170:\"<!-- wp:paragraph -->\n<p>With Astra you get three Sidebar options; viz. the right sidebar, left sidebar and an option that disables the sidebar. You can manage Sidebars in two ways.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li><a href=\"https:\/\/wpastra.com\/docs\/sidebar-free\/#manage-sidebar-globally-in-the-customizer\">Globally for the site from Customizer<\/a><\/li><li><a href=\"https:\/\/wpastra.com\/docs\/sidebar-free\/#managing-sidebar-for-particular-pages-or-posts\">On particular Pages and Posts<\/a><\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph {\"customBackgroundColor\":\"#cae3f3\"} -->\n<p style=\"background-color:#cae3f3\" class=\"has-background\"><strong>Quick Steps on How to Manage Sidebars on Your Website<\/strong><br><strong>Step 1:<\/strong> Find the Sidebar Options under the customizer [ <em>Appearance &gt; Customize &gt; Sidebar<\/em> ] to edit Sidebar Options globally.<br><strong>Step 2:<\/strong> Or manage the Sidebar Options on particular Pages and Posts from the <a href=\"https:\/\/wpastra.com\/docs\/meta-settings-free\/\">Meta Settings<\/a>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Manage Sidebar globally in the customizer<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>You can find settings under <strong>Appearance &gt; Customize &gt; Sidebar<\/strong><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":39576,\"linkDestination\":\"media\"} -->\n<figure class=\"wp-block-image\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-sidebar-1.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-sidebar-1.png\" alt=\"\" class=\"wp-image-39576\"\/><\/a><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>You can set a sidebar for the entire site with the Default Layout option. You can set a sidebar for particular Pages, Blog Posts, Blog Post Archives as well.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>When one of the sidebars (left\/right) is set, you can adjust its width.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":39577,\"linkDestination\":\"media\"} -->\n<figure class=\"wp-block-image\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-sidebar-width.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-sidebar-width.png\" alt=\"\" class=\"wp-image-39577\"\/><\/a><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Note:<\/strong> When you activate the addons for integrated plugins like WooCommerce, LifetLMS etc. you can see related option to manage sidebars<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":24763,\"align\":\"center\",\"linkDestination\":\"media\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/02\/sidebar-lifter-woo.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/02\/sidebar-lifter-woo.png\" alt=\"\" class=\"wp-image-24763\"\/><\/a><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Managing sidebar for particular pages or posts<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Astra also allows you to manage sidebars for a particular page or post through the <a href=\"https:\/\/wpastra.com\/docs\/meta-settings-free\/\">meta settings<\/a>.<\/p>\n<!-- \/wp:paragraph -->\";s:5:\"links\";O:8:\"stdClass\":4:{s:4:\"view\";s:38:\"https:\/\/wpastra.com\/docs\/sidebar-free\/\";s:4:\"edit\";N;s:6:\"export\";s:68:\"https:\/\/wpastra.com\/wp-admin\/post.php?area=wpil_export&post_id=24757\";s:7:\"refresh\";s:99:\"https:\/\/wpastra.com\/wp-admin\/admin.php?page=link_whisper&type=post_links_count_update&post_id=24757\";}}s:6:\"anchor\";s:37:\"Globally for the site from Customizer\";s:15:\"added_by_plugin\";b:0;}i:1;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:38:\"https:\/\/wpastra.com\/docs\/sidebar-free\/\";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:\"25523\";s:5:\"title\";s:52:\"How to Display Woocommerce Sidebar on Top on Mobile?\";s:4:\"type\";s:4:\"post\";s:7:\"content\";s:3493:\"<!-- wp:paragraph -->\n<p>When you enable&nbsp;<a href=\"https:\/\/wpastra.com\/docs\/sidebar-free\/\">WooCommerce sidebar&nbsp;<\/a>on a shop, cart, checkout page and\/or single product page, the sidebar is displayed in a&nbsp;secondary container.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>What is a secondary container?<\/strong><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Basically, a&nbsp;container is where the main content and information appears. In general, omit the header and footer part of the website and what remains is the container. 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>On mobile devices, the primary container stacks on a secondary container. So, the secondary container is displayed below the primary container.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you wish to display the sidebar above the primary container on mobile, you would need to use custom CSS code. Necessary&nbsp;CSS code is mentioned below for both sidebars.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>For Left Sidebar-<\/strong><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:preformatted -->\n<pre class=\"wp-block-preformatted\">@media (max-width: 768px){\n  .ast-left-sidebar #content&gt;.ast-container{\n      -webkit-flex-wrap: wrap;\n      -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n      -webkit-box-orient: horizontal;\n      -webkit-box-direction: normal;\n      -webkit-flex-direction: row;\n      -moz-box-orient: horizontal;\n      -moz-box-direction: normal;\n      -ms-flex-direction: row;\n      flex-direction: row;\n  }\n}\n\n<\/pre>\n<!-- \/wp:preformatted -->\n\n<!-- wp:paragraph -->\n<p><strong>For Right Sidebar-<\/strong><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:preformatted -->\n<pre class=\"wp-block-preformatted\">@media (max-width: 768px){\n    .ast-right-sidebar #content&gt;.ast-container{\n        -js-display: flex;\n        display: -webkit-box;\n        display: -webkit-flex;\n        display: -moz-box;\n        display: -ms-flexbox;\n        display: flex;\n        -webkit-flex-wrap: wrap;\n        -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n    }\n    .ast-right-sidebar #content&gt;.ast-container&gt;#primary {\n        order: 2;\n    }\n    .ast-right-sidebar #content&gt;.ast-container&gt;#secondary {\n        order: 1;\n    }\n}\n<\/pre>\n<!-- \/wp:preformatted -->\n\n<!-- wp:paragraph -->\n<p><strong>Where can I put this custom CSS code?<\/strong><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can insert this CSS in two ways-<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>In Customizer: From WordPress backend navigate to Appearance &gt; Customize &gt;&nbsp;Additional CSS&nbsp; and add code the custom CSS area. (Recommended) <strong>OR<\/strong><\/li><li>Through child theme's style.css: Edit the <a href=\"https:\/\/wpastra.com\/docs\/add-custom-php-code\/#3.-in-child-theme\">child theme's&nbsp;style.css<\/a> and add a required CSS.<\/li><\/ol>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p><strong>Other useful links-<\/strong><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li><a href=\"https:\/\/wpastra.com\/docs\/install-astra-child-theme\/\">How to Install Astra Child Theme?<\/a><\/li><li><a href=\"https:\/\/wpastra.com\/docs\/add-custom-php-code\/#3.-in-child-theme\">How to edit style.css in a child theme?&nbsp;<\/a><\/li><\/ol>\n<!-- \/wp:list -->\";s:5:\"links\";O:8:\"stdClass\":4:{s:4:\"view\";s:77:\"https:\/\/wpastra.com\/docs\/how-to-display-woocommerce-sidebar-on-top-on-mobile\/\";s:4:\"edit\";N;s:6:\"export\";s:68:\"https:\/\/wpastra.com\/wp-admin\/post.php?area=wpil_export&post_id=25523\";s:7:\"refresh\";s:99:\"https:\/\/wpastra.com\/wp-admin\/admin.php?page=link_whisper&type=post_links_count_update&post_id=25523\";}}s:6:\"anchor\";s:25:\"WooCommerce sidebar&nbsp;\";s:15:\"added_by_plugin\";b:0;}}"],"wpil_links_outbound_internal_count_data":["a:0:{}"],"wpil_links_outbound_external_count_data":["a:7:{i:0;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:80:\"https:\/\/wpastra.com\/docs\/sidebar-free\/#manage-sidebar-globally-in-the-customizer\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:37:\"Globally for the site from Customizer\";s:15:\"added_by_plugin\";b:0;}i:1;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:85:\"https:\/\/wpastra.com\/docs\/sidebar-free\/#managing-sidebar-for-particular-pages-or-posts\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:29:\"On particular Pages and Posts\";s:15:\"added_by_plugin\";b:0;}i:2;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:44:\"https:\/\/wpastra.com\/docs\/meta-settings-free\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:13:\"Meta Settings\";s:15:\"added_by_plugin\";b:0;}i:3;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:66:\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-sidebar-1.png\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:109:\"<img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-sidebar-1.png\" alt=\"\" class=\"wp-image-39576\"\/>\";s:15:\"added_by_plugin\";b:0;}i:4;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:70:\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-sidebar-width.png\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:113:\"<img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-sidebar-width.png\" alt=\"\" class=\"wp-image-39577\"\/>\";s:15:\"added_by_plugin\";b:0;}i:5;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:69:\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/02\/sidebar-lifter-woo.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\/2018\/02\/sidebar-lifter-woo.png\" alt=\"\" class=\"wp-image-24763\"\/>\";s:15:\"added_by_plugin\";b:0;}i:6;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:44:\"https:\/\/wpastra.com\/docs\/meta-settings-free\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:13:\"meta settings\";s:15:\"added_by_plugin\";b:0;}}"],"_edit_lock":["1670562653:89"],"_edit_last":["89"],"onesignal_meta_box_present":["1"],"onesignal_send_notification":[""],"tap_disable_autolinker":["no"],"tap_autolink_inside_heading":["global"],"tap_autolink_random_placement":["global"],"tap_post_autolinker_limit":["0"],"site-sidebar-layout":["default"],"site-content-layout":["default"],"theme-transparent-header-meta":["default"],"_yoast_wpseo_content_score":["90"],"wpil_sync_report3":["1"],"wpil_links_inbound_internal_count":["2"],"wpil_links_outbound_internal_count":["0"],"wpil_links_outbound_external_count":["7"],"wpil_sync_report2_time":["2019-10-18T06:23:40+00:00"],"_yoast_wpseo_title":["How to Manage Sidebars in Free Astra Theme?"],"wp_last_modified_info":["December 9, 2022 @ 9:24 AM"],"wplmi_shortcode":["[lmt-post-modified-info]"],"_yoast_wpseo_estimated-reading-time-minutes":["3"],"_ht_kb_post_views_count":["29"],"_ht_kb_usefulness":["0"],"_ht_article_order_138":["24757"],"views":["32774","32774"],"helpful":["33"],"unhelpful":["83"],"redirects":["48"],"_yoast_wpseo_focuskw":["Manage Sidebars"],"_yoast_wpseo_linkdex":["65"],"rank_math_primary_docs_category":["138"],"rank_math_title":["How to Manage Sidebars in Free Astra Theme?"],"rank_math_focus_keyword":["Manage Sidebars"],"rank_math_news_sitemap_robots":["index"],"rank_math_robots":["a:1:{i:0;s:5:\"index\";}"],"rank_math_analytic_object_id":["1222"],"rank_math_internal_links_processed":["1"],"_wplmi_last_modified":["2022-12-09 09:24:44"],"rank_math_seo_score":["69"],"pfd_related_docs":[""],"rank_math_og_content_image":["a:2:{s:5:\"check\";s:32:\"80221e6a5e48f6de5479aed7879254ef\";s:6:\"images\";a:1:{i:0;i:141993;}}"],"_wpml_media_duplicate":["1"],"_trp_automatically_translated_slug_es_ES":["barra-lateral-libre"],"_uag_page_assets":["a:9:{s:3:\"css\";s:8569:\" .uagb-block-390313c0.wp-block-uagb-inline-notice .uagb-notice-title{padding-left: 15px;padding-right: 15px;padding-top: 15px;padding-bottom: 15px;} .uagb-block-390313c0 .uagb-notice-text{padding-left: 15px;padding-right: 15px;padding-top: 15px;padding-bottom: 15px;border: 2px solid #FFD54F;border-bottom-left-radius: 3px;border-bottom-right-radius: 3px;} .uagb-block-390313c0.uagb-dismissable button[type=\"button\"] svg{width: 16px;height: 16px;top: 15px;} .uagb-block-390313c0.uagb-dismissable > svg{width: 16px;height: 16px;top: 15px;} .uagb-block-390313c0.uagb-inline_notice__align-left button[type=\"button\"] svg{right: 15px;} .uagb-block-390313c0.uagb-inline_notice__align-left svg{right: 15px;} .uagb-block-390313c0.uagb-inline_notice__align-center button[type=\"button\"] svg{right: 15px;} .uagb-block-390313c0.uagb-inline_notice__align-center svg{right: 15px;} .uagb-block-390313c0 .uagb-notice-title{background-color: #FFD54F;border-top-right-radius: 3px;border-top-left-radius: 3px;} .uagb-block-390313c0.uagb-inline_notice__align-right button[type=\"button\"] svg{left: 15px;}.uagb-block-4cc6958d .uagb-icon svg{width: 12px;height: 12px;font-size: 12px;fill: #313131;}.uagb-block-4cc6958d .uagb-icon-active svg{width: 12px;height: 12px;font-size: 12px;fill: #656565;}.uagb-block-4cc6958d .uagb-faq-child__outer-wrap{margin-bottom: 10px;}.uagb-block-4cc6958d .uagb-faq-item{background-color: #FFFFFF;border-top-width: 1px;border-left-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-top-left-radius: 2px;border-top-right-radius: 2px;border-bottom-left-radius: 2px;border-bottom-right-radius: 2px;border-color: #D2D2D2;border-style: solid;}.uagb-block-4cc6958d .uagb-faq-item .uagb-question{color: #313131;}.uagb-block-4cc6958d .uagb-faq-item.uagb-faq-item-active .uagb-question{color: #656565;}.uagb-block-4cc6958d .uagb-faq-item:hover .uagb-question{color: #656565;}.uagb-block-4cc6958d .uagb-faq-questions-button{padding-top: 10px;padding-bottom: 10px;padding-right: 10px;padding-left: 10px;}.uagb-block-4cc6958d .uagb-faq-content{padding-top: 10px;padding-bottom: 10px;padding-right: 10px;padding-left: 10px;}.uagb-block-4cc6958d .uagb-faq-content span{margin-top: 10px;margin-bottom: 10px;margin-right: 10px;margin-left: 10px;}.uagb-block-4cc6958d.uagb-faq-icon-row .uagb-faq-item .uagb-faq-icon-wrap{margin-right: 10px;}.uagb-block-4cc6958d.uagb-faq-icon-row-reverse .uagb-faq-item .uagb-faq-icon-wrap{margin-left: 10px;}.uagb-block-4cc6958d .uagb-faq-item:hover .uagb-icon svg{fill: #656565;}.uagb-block-4cc6958d .uagb-faq-item .uagb-faq-questions-button.uagb-faq-questions{flex-direction: row;}.uagb-block-4cc6958d .uagb-faq-item .uagb-faq-content{color: #313131;}.uagb-block-4cc6958d .wp-block-uagb-faq-child.uagb-faq-child__outer-wrap .uagb-faq-content {display: none;}@media only screen and (max-width: 976px) { .uagb-block-390313c0 .uagb-notice-text{padding-left: 15px;padding-right: 15px;padding-top: 15px;padding-bottom: 15px;} .uagb-block-390313c0 .uagb-notice-title{padding-left: 15px;padding-right: 15px;padding-top: 15px;padding-bottom: 15px;} .uagb-block-390313c0.uagb-dismissable button[type=\"button\"] svg{top: 15px;} .uagb-block-390313c0.uagb-dismissable > svg{top: 15px;} .uagb-block-390313c0.uagb-inline_notice__align-left button[type=\"button\"] svg{right: 15px;} .uagb-block-390313c0.uagb-inline_notice__align-left svg{right: 15px;} .uagb-block-390313c0.uagb-inline_notice__align-center button[type=\"button\"] svg{right: 15px;} .uagb-block-390313c0.uagb-inline_notice__align-center svg{right: 15px;} .uagb-block-390313c0.uagb-inline_notice__align-right button[type=\"button\"] svg{left: 15px;}.uagb-block-4cc6958d.uagb-faq-icon-row .uagb-faq-item .uagb-faq-icon-wrap{margin-right: 10px;}.uagb-block-4cc6958d.uagb-faq-icon-row-reverse .uagb-faq-item .uagb-faq-icon-wrap{margin-left: 10px;}.uagb-block-4cc6958d .uagb-faq-questions-button{padding-top: 10px;padding-bottom: 10px;padding-right: 10px;padding-left: 10px;}.uagb-block-4cc6958d .uagb-faq-content{padding-top: 10px;padding-bottom: 10px;padding-right: 10px;padding-left: 10px;}.uagb-block-4cc6958d .uagb-faq-content span{margin-top: 10px;margin-bottom: 10px;margin-right: 10px;margin-left: 10px;}.uagb-block-4cc6958d .uagb-icon svg{width: 12px;height: 12px;font-size: 12px;}.uagb-block-4cc6958d .uagb-icon-active svg{width: 12px;height: 12px;font-size: 12px;}.uagb-block-4cc6958d .uagb-faq-item{border-style: solid;border-color: #D2D2D2;}}@media only screen and (max-width: 767px) { .uagb-block-390313c0 .uagb-notice-text{padding-left: 15px;padding-right: 15px;padding-top: 15px;padding-bottom: 15px;} .uagb-block-390313c0 .uagb-notice-title{padding-left: 15px;padding-right: 15px;padding-top: 15px;padding-bottom: 15px;} .uagb-block-390313c0.uagb-dismissable button[type=\"button\"] svg{top: 15px;} .uagb-block-390313c0.uagb-dismissable > svg{top: 15px;} .uagb-block-390313c0.uagb-inline_notice__align-left button[type=\"button\"] svg{right: 15px;} .uagb-block-390313c0.uagb-inline_notice__align-left svg{right: 15px;} .uagb-block-390313c0.uagb-inline_notice__align-center button[type=\"button\"] svg{right: 15px;} .uagb-block-390313c0.uagb-inline_notice__align-center svg{right: 15px;} .uagb-block-390313c0.uagb-inline_notice__align-right button[type=\"button\"] svg{left: 15px;}.uagb-block-4cc6958d.uagb-faq-icon-row .uagb-faq-item .uagb-faq-icon-wrap{margin-right: 10px;}.uagb-block-4cc6958d .uagb-faq-item{border-style: solid;border-color: #D2D2D2;}.uagb-block-4cc6958d.uagb-faq-icon-row-reverse .uagb-faq-item .uagb-faq-icon-wrap{margin-left: 10px;}.uagb-block-4cc6958d .uagb-faq-questions-button{padding-top: 10px;padding-bottom: 10px;padding-right: 10px;padding-left: 10px;}.uagb-block-4cc6958d .uagb-faq-content{padding-top: 10px;padding-bottom: 10px;padding-right: 10px;padding-left: 10px;}.uagb-block-4cc6958d .uagb-faq-content span{margin-top: 10px;margin-bottom: 10px;margin-right: 10px;margin-left: 10px;}.uagb-block-4cc6958d .uagb-icon svg{width: 12px;height: 12px;font-size: 12px;}.uagb-block-4cc6958d .uagb-icon-active svg{width: 12px;height: 12px;font-size: 12px;}}.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:271:\"document.addEventListener(\"DOMContentLoaded\", function(){ window.addEventListener( 'DOMContentLoaded', function() {\n\tUAGBInlineNotice.init( {\"c_id\":null,\"cookies\":false,\"close_cookie_days\":1,\"noticeDismiss\":\"\",\"icon\":\"rectangle-xmark\"}, '.uagb-block-390313c0' );\n});\n });\";s:18:\"current_block_list\";a:11:{i:0;s:14:\"core\/paragraph\";i:1;s:9:\"core\/list\";i:2;s:14:\"core\/list-item\";i:3;s:12:\"core\/heading\";i:4;s:10:\"core\/image\";i:5;s:18:\"uagb\/inline-notice\";i:6;s:11:\"core\/spacer\";i:7;s:8:\"uagb\/faq\";i:8;s:14:\"uagb\/faq-child\";i:9;s:14:\"uagb\/container\";i:10;s:14:\"core\/shortcode\";}s:8:\"uag_flag\";b:1;s:11:\"uag_version\";s:10:\"1776992241\";s:6:\"gfonts\";a:0:{}s:10:\"gfonts_url\";s:0:\"\";s:12:\"gfonts_files\";a:0:{}s:14:\"uag_faq_layout\";b:1;}"]},"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":"With Astra you get three Sidebar options &#8211; right sidebar, left sidebar, and an option that disables the sidebar. You can manage Sidebars in two ways. Quick Steps on How to Manage Sidebars on Your WebsiteStep 1: Find the Sidebar Options under the customizer [ Appearance &gt; Customize &gt; Sidebar ] to edit Sidebar Options&hellip;","_links":{"self":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/24757"}],"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=24757"}],"version-history":[{"count":0,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/24757\/revisions"}],"wp:attachment":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/media?parent=24757"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_category?post=24757"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_tag?post=24757"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}