The Section block enables you to design dynamic and responsive layouts with ease. This block allows you to create visually appealing sections within your site, effortlessly configure them to suit any screen size and adapt to different content types. Whether you’re building a homepage, a landing page, or an informational hub, the Section block offers the flexibility and functionality you need.
How to Add and Configure the Section Block
Log in as an Admin, click on your profile picture, and select the Administration tab.
Navigate to the Design Studio, select Collections and Spaces, and create a new space or select an existing space that you would like to add sections to.
Hover over a container block and click on the ➕ to add a block. Find and select the Section block.
Select the layout of your choice:
1 column
1:1 (two evenly sized columns)
1:2 (two columns, 1 small and the other medium-sized)
2:1 (two columns, 1 medium and the other small-sized)
3 columns (three evenly sized columns)
4 columns (four evenly sized columns)
Adjust the gap size between each column inside each section (optional)
Adjust the horizontal and/or vertical padding inside each section (optional)
Adjust the horizontal and/or vertical margin inside each section (optional)
Adjust the responsive settings for each section:
Reverse - Reverse the order of the columns on smaller screens
Hide - on mobile, tablet, and/or desktop
Restrict max width - Restrict the maximum width of the section on larger screens.
An example of how this is best used is if you want a full-width hero banner at the top of the page but do not want the rest of the page to be full-width,
Note: Padding allows you to adjust the spacing within an element, impacting the internal structure, while margin is used to adjust between surrounding elements.
Once you have configured the Section settings, expand the column(s) and begin adding additional blocks to stylize the space's design. To add blocks, either click on the ➕ when hovering over a column, or click on the + Add block inside the column in the preview screen.
Click Save changes.
Key Features
1. Responsive Design
Automatically adjusts to fit various screen sizes, ensuring a consistent user experience across devices (desktop, tablet, and mobile).
Hide sections/columns based on the screen size.
2. Flexible Layouts
Choose from multiple predefined layouts or create custom ones to match your design vision.
Easily divide your section into columns, rows, or grids to organize content in a way that best fits your needs.
3. Content Versatility
Supports different content types, including text, images, videos, buttons, and embedded content.
Mix and match content types within a single section to create rich, engaging experiences.
4. Intuitive Configuration
Customize the size, padding, and margins to fine-tune the appearance of each section.
Select one of the sections in the preview window to add blocks to the selected section.
The Section Block on Bettermode is a versatile and user-friendly tool that empowers you to create beautiful, responsive layouts quickly and easily. By following the steps outlined in this article, you can take full advantage of this feature to enhance your site pages and deliver a superior user experience.