A section widget element is used to divide a page into different sections or areas, typically to create a structured layout and improve the user experience.
Section widgets allow you to organize the content of a web page into meaningful sections that can have their own background color, font style, margins, and other visual attributes. The sections can be used to separate different elements of a page, such as headers, images, text, and buttons, and makes it easier to build the page for your mobile device.
In this article, we will learn how Section Widget works on Cleverstory and how you can use it to build your pages efficiently.
Here is how you can do it.
To use a section widget, you would typically start by selecting a section from scratch. You can then customize the section by adding or editing the content, adjusting the styles, and changing the layout as needed.
> Start by selecting a section that best fits your needs. Click on the + icon on the top left is the element palette that contains the Section widget to add to the page.
> Cleverstory has sections in three variations based on Columns: One column, Two Columns, and Three Columns. You can include different styles, colors, and elements such as images, text, and buttons in any of these sections.
> Next you can start customizing the section to match your branding and style. You can change the background color, font, padding, margins, and other attributes to create a unique look for your section.
Change Background - Once you’ve added the section(s), choose the Change background option present above the section grid. You can add a color, image, or video as a background to your section.
Manage Columns - This option allows you to Add multiple columns, and choose the respective column to add any elements within and make any design changes.
> Use the Actions option, to duplicate, delete, or move any column to the right or left direction.
> Click on the layout icon next to Manage columns and customise your columns sizing and spacing as desired.
Adding elements - To add elements to the columns, click on the + icon on the top left, which is the element palette containing the various elements you can add to the page. You can add various elements to the section, such as text, images, videos, buttons, and forms. You can also adjust the layout of the elements within the section to create the desired look.
Resize Section - Once you have added all the elements and wish to resize the columns, you can pull the pointers downwards/upwards based on your requirement.
> Alongside the layout icon, you will find the Stretch icon which allows you to choose whether to stretch your section outside the margin or keep it within. You can also stretch the section based on your need by adjusting the scroll bar.
> Once you have designed and set your sections, you can preview the section to see how it looks on different devices. This allows you to make sure that the section looks great on a desktop, tablet, and mobile devices.
Note: For the mobile version of the page, the page has to be optimized and built separately.
> Once you are satisfied with the section, you can save your changes and publish the landing page. Your section should now be displayed on your landing page.
Still got queries? Reach out to support@paperflite.com and we’ll be happy to assist you.