{"id":6058,"date":"2024-04-14T19:35:08","date_gmt":"2024-04-14T11:35:08","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6058"},"modified":"2024-04-14T19:35:08","modified_gmt":"2024-04-14T11:35:08","slug":"box","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/box\/","title":{"rendered":"Box"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p id=\"\">The <strong id=\"\">box<\/strong> block is effective for maintaining your content neatly arranged towards the center of the screen. It\u2019s commonly utilized alongside a segment block. You can incorporate a box from the <strong id=\"\">Insert panel<\/strong> &gt; <strong id=\"\">Structure<\/strong> segment.<\/p>\n<p id=\"\">In this session, we will discuss:<\/p>\n<ol id=\"\">\n<li id=\"\">Structure of a box<\/li>\n<li id=\"\">How to utilize boxes, segments, and section blocks<\/li>\n<\/ol>\n<h2 id=\"\">Structure of a box<\/h2>\n<p id=\"\">A <strong id=\"\">box<\/strong> is a section block with predefined styles. It features a maximum width of 940 pixels on bigger screens to center your content with respect to the browser window. On smaller gadgets (such as phones and tablets), boxes stretch across the entire screen width.<\/p>\n<p id=\"\">You can modify the maximum width of a box to enable it to still adapt to the viewport size but only expand up to the set maximum width.<\/p>\n<h2 id=\"\">How to utilize boxes, segments, and section blocks<\/h2>\n<p id=\"\">In web design, boxes are frequently positioned inside section blocks. A section, by default, occupies the entire width. You can place a box within the section to keep elements neatly grouped towards the center. Subsequently, you can utilize segment blocks inside boxes to arrange elements through layout, spacing, dimensions, and placement.<\/p>\n<h6 id=\"\"><strong id=\"\">Expert tip: <\/strong>A section is a section block that spans the full width and contains a predefined \u201cSection\u201d HTML5 tag. A box is a section block with a preset maximum width.<\/h6>\n<p id=\"\">Discover more about constructing web layouts.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use containers to keep your content legible and centered.","protected":false},"author":2,"featured_media":6059,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[290],"tags":[],"class_list":{"0":"post-6058","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-elements","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6058","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=6058"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6058\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6059"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6058"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6058"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}