Astroid Framework
HomeDownloadReport an IssueVideo Tutorials
English
English
  • What is Astroid
  • Get Started
    • Introduction
    • Technical Requirements
    • Installation
    • Layout Manager for Dummies
    • Creating a basic Astroid Template
  • Astroid Pro
    • Using the License Key
    • Dynamic Content
  • Basic Settings
    • Preloader
    • Favicon
    • Back to Top
    • Wide Vs Box Layout
    • Smooth Scroll
    • Color Mode
    • Container Background Mode
    • Bootstrap Settings
  • Header
    • Header
      • Transparent Header
      • Site Menu Method
    • Logo Options
    • Sticky Header
    • Off-Canvas menu
      • Customize the Offcanvas icons
    • Animation
  • Color
    • Body Color
    • Header Color
    • Sticky Header Color
    • Main Menu Color
    • Dropdown Menu Color
    • Off-Canvas Colors
  • Layout Settings
    • Section Settings
    • Row Settings
    • Element Settings
    • Column Settings
    • Layout Configuration on devices
    • Sub Layouts
  • Astroid Widgets
    • Divider Widget
    • Navigation Widget
    • Icons Widget
    • Button Widget
    • Heading Widget
    • Text Widget
    • Image Widget
    • Slideshow Widget
    • Image Group Widget
    • Testimonials Widget
    • Articles Widget
    • Accordion Widget
    • Grid Widget
    • Form Builder Widget
    • Map Widget
    • List Widget
    • Video Widget
    • Video Button Widget
    • Image Carousel
    • Countdown
    • Raw HTML Widget
    • Module Position
  • Astroid Widgets Pro
    • CodePen Widget
    • Hover Motion Gallery
    • Article Listing
    • Listing Pro
    • Count Down widget
  • Image Motion Cursor
  • Typography
    • Body Typography
    • Menu Typography
    • H1-H6 Typography
    • Drop Down Menu Typography
    • Custom Typography
    • How to use local font
  • Article Blog
    • Article Layout Builder
    • Article Listing Options
    • Single Article Options
    • Blog Options for Single Article view
    • Blog Options for Articles List View
    • Open Graph
    • Custom type comment for Blogs/Articles
  • Social Profile
    • Social Profile
  • Custom Code
    • Tracking Code
    • Before </head>
    • Before </body>
    • Custom Css
    • Custom JS
  • Miscellaneous
    • Lazy Load Images
    • Coming Soon
    • Error Page
    • Copyright
    • Contact Information
    • Minify JS/CSS/HTML
  • Theming
    • Theming
  • Menu Item Settings
    • Blog Options
    • Banner Options
    • Open Graph Options
    • How to manage the Blog Options for Articles List View
  • Mega Menu
    • Mega Menu
  • MORE
    • Preset Profiles
    • Astroid Layout Module
    • Astroid Captcha
  • Developers
    • Get Started
    • Build or Override a Widget
Powered by GitBook

© Astroid Framework 2025.

On this page
  • General Settings
  • Design Settings
  • Responsive Settings

Was this helpful?

Export as PDF
  1. Layout Settings

Section Settings

PreviousOff-Canvas ColorsNextRow Settings

Last updated 9 months ago

Was this helpful?

In Astroid's 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 the 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.

General Settings

Under this 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.

Design Settings

Under this tab, the options are as follows:

  • Animation- Choose 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.

  • Spacing- With this you can set your section’s custom Margin & Padding in 4 different units Px, Em, Rem & % with device responsiveness.

Responsive Settings

Under this tab the only option is:

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.

Edit a section