Body Layout Settings

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.

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