{"id":62,"date":"2025-01-07T12:06:31","date_gmt":"2025-01-07T12:06:31","guid":{"rendered":"https:\/\/documentation.iqonic.design\/streamit\/?p=62"},"modified":"2025-02-03T06:25:34","modified_gmt":"2025-02-03T06:25:34","slug":"body-layout-settings","status":"publish","type":"post","link":"https:\/\/documentation.iqonic.design\/streamit\/2025\/01\/07\/body-layout-settings\/","title":{"rendered":"Body Layout Settings"},"content":{"rendered":"
\n

The Body Layout Settings allow you to control the overall layout, container width, background appearance, page spacing, and the visibility of the “Back to Top” button for your WordPress site. These settings are essential for customizing the design and responsiveness of your website.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
    \n
  1. Accessing Body Layout Settings:<\/strong>\n
      \n
    • Log in to your WordPress Admin Panel.<\/li>\n\n\n\n
    • Navigate to WordPress <\/strong>> Streamit Options > Body Layout Settings<\/strong> <\/li>\n\n\n\n
    • This section provides multiple customization options for the site\u2019s container and body layout design.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
    • Container Width:<\/strong> The Container Width<\/strong> setting lets you adjust the width of your site’s body container.\n
        \n
      • Options Available:<\/strong>\n
          \n
        • Adjust the container width using a numerical input field.<\/li>\n\n\n\n
        • Choose the unit for measurement:\n
            \n
          • % (Percentage)<\/strong> \u2013 Sets the container width as a percentage of the viewport.<\/li>\n\n\n\n
          • px (Pixels)<\/strong> \u2013 Sets a fixed pixel value for the container width.<\/li>\n\n\n\n
          • em<\/strong> \u2013 Adjusts the container width based on the font size of the element.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n
          • How to Adjust:<\/strong>\n
              \n
            • Enter a numerical value in the Container Width field.<\/li>\n\n\n\n
            • Select the desired unit (%, px, em) from the dropdown.<\/li>\n\n\n\n
            • Click Save Changes<\/strong> to apply the adjustments.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n
            • Body Background:<\/strong> The Body Background<\/strong> setting allows you to customize the background of your website.\n
                \n
              • Background Options:<\/strong>\n
                  \n
                • Default:<\/strong> No customizations; uses the theme\u2019s default background.<\/li>\n\n\n\n
                • Color:<\/strong> Apply a solid color background.\n
                    \n
                  • If Color<\/strong> is selected, a Background Color Picker<\/strong> will appear where you can choose a custom color for the site background.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                  • Image:<\/strong> Apply a background image.\n
                      \n
                    • If Image<\/strong> is selected, an Upload Image<\/strong> button will appear for selecting or uploading a background image.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                    • How to Configure:<\/strong>\n
                        \n
                      • Select the preferred background type (Default, Color, Image<\/strong>).<\/li>\n\n\n\n
                      • If choosing Color<\/strong>, click the color picker and select a background color.<\/li>\n\n\n\n
                      • If choosing Image<\/strong>, upload or select an image from the media library.<\/li>\n\n\n\n
                      • Click Save Changes<\/strong> to apply the updates.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                      • Page Spacing:<\/strong> The Page Spacing<\/strong> setting allows you to control the spacing above and below your site\u2019s pages.\n
                          \n
                        • Options Available:<\/strong>\n
                            \n
                          • Default:<\/strong> Uses the theme\u2019s standard spacing values.<\/li>\n\n\n\n
                          • Custom:<\/strong> Enables manual control for top and bottom spacing.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                          • If Custom is Selected:<\/strong>\n
                              \n
                            • You can specify custom top and bottom spacing for different devices:\n
                                \n
                              • Top \/ Bottom Spacing (Desktop):<\/strong> Adjust the space above and below pages for desktop devices.<\/li>\n\n\n\n
                              • Top \/ Bottom Spacing for Tablets:<\/strong> Adjust the space above and below pages for tablets.<\/li>\n\n\n\n
                              • Top \/ Bottom Spacing for Mobile:<\/strong> Adjust the space above and below pages for mobile devices.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                              • Measurement Options for Page Spacing:<\/strong>\n
                                  \n
                                • Input numerical values for spacing.<\/li>\n\n\n\n
                                • Choose the unit: %, px, em.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                                • How to Configure:<\/strong>\n
                                    \n
                                  • Select Default<\/strong> or Custom<\/strong> for Page Spacing.<\/li>\n\n\n\n
                                  • If Custom<\/strong> is chosen, adjust the Top\/Bottom spacing values for each device type.<\/li>\n\n\n\n
                                  • Select the appropriate unit for measurement (%, px, em).<\/li>\n\n\n\n
                                  • Click Save Changes<\/strong> to apply the adjustments.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                                  • Display Back to Top Button:<\/strong> The Back to Top Button<\/strong> adds a clickable button on all pages, allowing users to scroll back to the top of the page easily.\n
                                      \n
                                    • How to Enable:<\/strong>\n
                                        \n
                                      • Toggle the Display Back to Top Button<\/strong> switch to yes<\/strong>.<\/li>\n\n\n\n
                                      • Click Save Changes<\/strong> to activate the button across your site.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                                      • Saving Changes:<\/strong> After customizing the settings:\n
                                          \n
                                        • Review all configured options.<\/li>\n\n\n\n
                                        • Click the Save Changes<\/strong> button to apply your updates.<\/li>\n\n\n\n
                                        • Clear your site cache if necessary to see the applied changes on the frontend.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/div>","protected":false},"excerpt":{"rendered":"

                                          The Body Layout Settings allow you to control the overall layout, container width, background appearance, page spacing, and the visibility of the “Back to Top” button for your WordPress site. These settings are essential for customizing the design and responsiveness of your website.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":60,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-62","post","type-post","status-publish","format-standard","hentry","category-streamit"],"featured_image_src":null,"author_info":{"display_name":"Iqonic Design","author_link":"https:\/\/documentation.iqonic.design\/streamit\/author\/dwd3f32kd2r2rf23wf4df\/"},"children":[],"_links":{"self":[{"href":"https:\/\/documentation.iqonic.design\/streamit\/wp-json\/wp\/v2\/posts\/62","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/documentation.iqonic.design\/streamit\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/documentation.iqonic.design\/streamit\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/streamit\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/streamit\/wp-json\/wp\/v2\/comments?post=62"}],"version-history":[{"count":4,"href":"https:\/\/documentation.iqonic.design\/streamit\/wp-json\/wp\/v2\/posts\/62\/revisions"}],"predecessor-version":[{"id":757,"href":"https:\/\/documentation.iqonic.design\/streamit\/wp-json\/wp\/v2\/posts\/62\/revisions\/757"}],"up":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/streamit\/wp-json\/wp\/v2\/posts\/60"}],"wp:attachment":[{"href":"https:\/\/documentation.iqonic.design\/streamit\/wp-json\/wp\/v2\/media?parent=62"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/streamit\/wp-json\/wp\/v2\/categories?post=62"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/streamit\/wp-json\/wp\/v2\/tags?post=62"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}