{"id":24311,"date":"2018-02-23T00:00:00","date_gmt":"2018-02-22T18:30:00","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/?post_type=docs&#038;p=24311"},"modified":"2023-01-27T12:49:25","modified_gmt":"2023-01-27T07:19:25","slug":"full-width-stretched-container-layout","status":"publish","type":"docs","link":"https:\/\/git-staging.wpastra.com\/es\/docs\/full-width-stretched-container-layout\/","title":{"rendered":"\u00bfC\u00f3mo establecer el dise\u00f1o de contenedor de ancho completo\/extendido en Astra?"},"content":{"rendered":"<p>Como se explica en el <a href=\"https:\/\/git-staging.wpastra.com\/es\/docs\/container-overview\/\">Resumen de contenedores<\/a> art\u00edculo, normalmente un sitio web puede tener dos contenedores viz: <strong>Contenedor primario<\/strong> y <strong>Contenedor secundario<\/strong>.<\/p>\n\n\n\n<p>El Contenedor primario es donde aparece el contenido principal, mientras que el Contenedor secundario consiste en la barra lateral y varios widgets diferentes en la barra lateral.<\/p>\n\n\n\n<p>La maquetaci\u00f3n \"Ancho completo \/ Estirado\" fusiona los contenedores primario y secundario y los muestra en un \u00fanico contenedor. Y la anchura del contenedor se estira al m\u00e1ximo. Debido a la anchura estirada del contenedor, el contenido se extiende de borde a borde hasta la anchura del navegador.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/01\/fullwidth-layout.gif\"><img fetchpriority=\"high\" decoding=\"async\" width=\"600\" height=\"281\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/01\/fullwidth-layout.gif\" alt=\"\" class=\"wp-image-145039\"\/><\/a><\/figure>\n\n\n\n<p>Encontrar\u00e1 la configuraci\u00f3n en <strong>Apariencia &gt; Personalizar &gt; Global &gt; Contenedor<\/strong><\/p>\n\n\n\n<p>No se aplica ning\u00fan color de fondo en los dise\u00f1os \"Ancho completo \/ Estirado\", ya que el contenedor primario ocupa todo el navegador.<\/p>\n\n\n\n<p>Estos dise\u00f1os funcionan mejor con los constructores de p\u00e1gina como Beaver Builder, Elementor etc donde se puede establecer el ancho del contenedor con el constructor de p\u00e1gina.<\/p>\n\n\n\n<p>Ofrecemos m\u00e1s opciones de estilo en m\u00f3dulos espec\u00edficos de&nbsp;<strong>Complemento Astra Pro<\/strong>&nbsp;plugin. M\u00e1s informaci\u00f3n sobre&nbsp;<a href=\"https:\/\/git-staging.wpastra.com\/es\/docs\/site-layout-overview\/\">Disposici\u00f3n del sitio<\/a>&nbsp;m\u00f3dulo de Astra Pro Addon. <\/p>","protected":false},"excerpt":{"rendered":"<p>Como se explica en el art\u00edculo Visi\u00f3n general de los contenedores, normalmente un sitio web puede tener dos contenedores, a saber: Contenedor Primario y Contenedor Secundario. El Contenedor Primario es donde aparece el contenido principal, mientras que el Contenedor Secundario consiste en la barra lateral y varios widgets diferentes en la barra lateral. El dise\u00f1o \"Full Width \/ Stretched\" fusiona los contenedores primario y secundario y muestra [...]<\/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":[1595],"docs_tag":[],"class_list":{"0":"post-24311","1":"docs","2":"type-docs","3":"status-publish","5":"docs_category-global"},"spectra_custom_meta":{"_yoast_wpseo_primary_docs_category":["1595"],"_wp_old_slug":[""],"_wp_page_template":["default"],"wpil_sync_report3":["1"],"wpil_links_inbound_internal_count":["1"],"wpil_links_inbound_internal_count_data":["a:1:{i:0;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:63:\"https:\/\/wpastra.com\/docs\/full-width-stretched-container-layout\/\";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:\"25950\";s:5:\"title\";s:29:\"How to Add Background Images?\";s:4:\"type\";s:4:\"post\";s:7:\"content\";s:4565:\"<!-- wp:paragraph -->\n<p>Astra version&nbsp;1.3.0 and above provides a feature to add&nbsp;background images to various sections of the site.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:video {\"id\":43650,\"align\":\"center\"} -->\n<figure class=\"wp-block-video aligncenter\"><video autoplay loop muted src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/09\/ast-2-add-background-image.mp4\"><\/video><\/figure>\n<!-- \/wp:video -->\n\n<!-- wp:paragraph -->\n<p>You can enhance the design of the Body, Header, Content, Sidebar, and&nbsp; Footer of your website with this option. In addition to previous background color option now you can see background image option as well.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4><strong>Where can I find the option?<\/strong><\/h4>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>From your WordPress dashboard navigate to <strong>Appearance &gt; Customize<\/strong> and&nbsp;under various areas, you will find a new setting to upload background images<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:separator -->\n<hr class=\"wp-block-separator\"\/>\n<!-- \/wp:separator -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4><strong>Where can I add a background&nbsp;image to Astra theme?<\/strong><\/h4>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>With Astra theme, you get an option to add a&nbsp; background image to following areas-<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li><strong>Body<\/strong>\u00a0<a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/09\/ast-2-body-bg-settings.png\">(?)<\/a><\/li><li><strong>Footer Widgets<\/strong>\u00a0<a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/09\/ast-2-footer-widget-bg-settings.png\">(?)<\/a><\/li><li><strong>Footer Bar\u00a0<\/strong><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/09\/ast-2-footer-bar-bg-image-setting.png\">(?)<\/a><\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:separator -->\n<hr class=\"wp-block-separator\"\/>\n<!-- \/wp:separator -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4><strong>Background&nbsp;image for Astra Pro Modules<\/strong><\/h4>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>In addition to&nbsp;Body,&nbsp;Footer Widgets,&nbsp;Footer Bar section, you get an option&nbsp;for following modules of Astra Pro -<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li><strong>Primary Header\u00a0<\/strong><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/09\/ast-2-primary-header-bg-settings.png\">(?)<\/a><\/li><li><strong>Above Header\u00a0<\/strong><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/09\/ast-2-above-header-bg-settings.png\">(?)<\/a><\/li><li><strong>Below Header\u00a0<\/strong><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/09\/ast-2-below-header-bg-settinga.png\">(?)<\/a><\/li><li><strong>Content\u00a0<\/strong><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/09\/ast-2-content-bg-settings.png\">(?)<\/a><\/li><li><strong>Sidebar\u00a0<\/strong><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/09\/ast-2-shop-sidebar-bg-settings.png\">(?)<\/a><br><strong>Note<\/strong>: Background option might be visible only if you have\u00a0<a href=\"https:\/\/wpastra.com\/docs\/colors-background-module\/\">Colors &amp; Background module\u00a0<\/a>enabled from Astra Pro.<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:separator -->\n<hr class=\"wp-block-separator\"\/>\n<!-- \/wp:separator -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4><strong>Options for Background Image<\/strong><\/h4>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Background image option allows you to choose an image from media library or you can upload a new file. After uploading the image, click on More Settings option. Now you can set following&nbsp; CSS properties for the image -<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>Repeat<\/li><li>Background Image Position<\/li><li>Background Size<\/li><li>Background Attachment<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>You can adjust the background color overlay with&nbsp;color picker. A nice transparent layer of color above image will enhance the background image design.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:separator -->\n<hr class=\"wp-block-separator\"\/>\n<!-- \/wp:separator -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4>&nbsp;<strong>Important Notes:<\/strong><\/h4>\n<!-- \/wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>After adding a background image, make sure to adjust the opacity of background color with color picker.<\/li><li>Background applied to the body will not be visible for <a href=\"https:\/\/wpastra.com\/docs\/full-width-stretched-container-layout\/\">Full Width\/ Stretched - Container Layout<\/a> as in this layout width of the container is stretched to the fullest.<\/li><\/ol>\n<!-- \/wp:list -->\";s:5:\"links\";O:8:\"stdClass\":4:{s:4:\"view\";s:82:\"https:\/\/wpastra.com\/docs\/how-to-add-background-images-to-various-sections-on-site\/\";s:4:\"edit\";N;s:6:\"export\";s:68:\"https:\/\/wpastra.com\/wp-admin\/post.php?area=wpil_export&post_id=25950\";s:7:\"refresh\";s:99:\"https:\/\/wpastra.com\/wp-admin\/admin.php?page=link_whisper&type=post_links_count_update&post_id=25950\";}}s:6:\"anchor\";s:40:\"Full Width\/ Stretched - Container Layout\";s:15:\"added_by_plugin\";b:0;}}"],"wpil_links_outbound_internal_count":["0"],"wpil_links_outbound_internal_count_data":["a:0:{}"],"wpil_links_outbound_external_count":["3"],"wpil_links_outbound_external_count_data":["a:3:{i:0;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:44:\"https:\/\/wpastra.com\/docs\/container-overview\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:18:\"Container Overview\";s:15:\"added_by_plugin\";b:0;}i:1;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:77:\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/09\/ast-2-full-width-stretched.png\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:120:\"<img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/09\/ast-2-full-width-stretched.png\" alt=\"\" class=\"wp-image-42809\"\/>\";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:0;s:4:\"post\";N;s:6:\"anchor\";s:11:\"Site Layout\";s:15:\"added_by_plugin\";b:0;}}"],"wpil_sync_report2_time":["2019-10-18T07:42:40+00:00"],"_edit_lock":["1674803967: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":["60"],"tap_disable_autolinker":["no"],"tap_autolink_inside_heading":["global"],"tap_autolink_random_placement":["global"],"tap_post_autolinker_limit":["0"],"_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 Set the Full-width\/Stretched Container Layout in Astra?"],"_yoast_wpseo_estimated-reading-time-minutes":["1"],"_ht_kb_post_views_count":["12"],"_ht_kb_usefulness":["0"],"_ht_article_order_1595":["24311"],"wp_last_modified_info":["January 27, 2023 @ 12:49 PM"],"wplmi_shortcode":["[lmt-post-modified-info]"],"views":["14394"],"helpful":["11"],"unhelpful":["23"],"redirects":["10"],"rank_math_primary_docs_category":["1595"],"rank_math_title":["How to Set the Full-width\/Stretched Container Layout in Astra?"],"rank_math_news_sitemap_robots":["index"],"rank_math_robots":["a:1:{i:0;s:5:\"index\";}"],"rank_math_analytic_object_id":["1236"],"rank_math_internal_links_processed":["1"],"rank_math_seo_score":["14"],"_wplmi_last_modified":["2023-01-27 12:49:25"],"rank_math_og_content_image":["a:2:{s:5:\"check\";s:32:\"ac5a986e0a7efedb55cfff5ad44dfc2c\";s:6:\"images\";a:1:{i:0;i:145039;}}"],"pfd_related_docs":[""],"_wpml_media_duplicate":["1"],"_trp_automatically_translated_slug_es_ES":["diseno-de-contenedor-estirado-a-todo-lo-ancho"],"_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:4:{i:0;s:14:\"core\/paragraph\";i:1;s:10:\"core\/image\";i:2;s:14:\"uagb\/container\";i:3;s:14:\"core\/shortcode\";}s:8:\"uag_flag\";b:1;s:11:\"uag_version\";s:10:\"1776526092\";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":"As explained in the Container Overview article, typically a website can have two containers viz: Primary Container and Secondary Container. Primary Container is where the main content appears, whereas Secondary Container consists of the sidebar and various different widgets in the sidebar. \u201cFull Width \/ Stretched\u201d layout merges the primary and secondary containers and displays&hellip;","_links":{"self":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/24311"}],"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=24311"}],"version-history":[{"count":0,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/24311\/revisions"}],"wp:attachment":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/media?parent=24311"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_category?post=24311"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_tag?post=24311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}