Sections are the main building blocks of any layout. Everything that you see at frontend directly or indirectly exists inside a section.
In astroid layout manager the first thing you do is Add a Section by choosing the grid from the Grid layout manager (if you choose a Custom grid then its sum should always be equal to 12).
After adding the section you see certain options(icons) like Section name, Move section, Edit section, Duplicate, Delete, add new Row & add new Section.
If you click on Edit Section icon, a popup opens that has 3 different tabs General Settings, Design Settings & Responsive Settings. With these settings you can customize your sections easily.
Under General Settings tab the options are as follows:
- Section Title- Write the section title.
- Custom Class- Write the class name used for writing custom CSS or JS.
- Custom ID- Give a custom ID to override the auto generated ID.
- Section Layout- Choose the layout for the section from Container, Container Fluid, Container with No gutters, Container fluid with not gutters, Without Container or a Custom layout.
- Layout Custom Class- If you choose a Custom layout then write the custom class name.
Under Design Settings tab the options are as follows:
- Animation- Choose an animation for the section. You can also set the Animation Delay time in the next step.
- Background Type- Select the background type for your section from None, Color, Image, Video or even add a Gradient.
- Custom Colors- Choose whether you want to enable or disable the custom colors for the section. If you enable it then you have the option to set Text Color, Link Color & Link Hover Color of the section’s content.
Under Responsive Settings tab the only option is of:
- Device Visibility- Choose your preference of hiding or showing the section on different screens like Hide on Extra Small Devices, Hide on Small Devices, Hide on Medium Devices, Hide on Large Devices or Hide on Extra Large Devices.