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

Was this helpful?

Export as PDF
  1. Get Started

Layout Manager for Dummies

The layout manager in Astroid is one of the core engines that drives Astroid and it can be cumbersome at times with so many options. We will use this tutorial to simplify it and go through all the available options. In the above image, you can see different colors and numbers representing settings for different areas in the Layout Manager.

  1. Hold the icon to move the section up or down in the layout manager.

  2. Edit the section-level settings.

  3. Duplicate the section.

  4. Delete the section.

  5. Add a new section adjacent to the current.

  6. Restructure the number of columns in the current section.

  7. Edit the column-level settings. (Number 7 is for column-level settings)

  8. Edit the element settings.

  9. Duplicate the element.

  10. Delete the element.

  11. Add a new element inside the current column.

  12. Add a new row below the current row.

  13. Duplicate the row.

  14. Edit row Settings.

Astroid is structured in the following way:

- Sections (You can have unlimited sections)

--Rows (Inside each section, you can have unlimited rows, rows stand vertically inside a section.)

---Columns (Inside each row, you can have a maximum of 12 columns, this is based on the standard bootstrap Grid system, Columns are horizontal containers.)

----Elements (Inside each column you can have unlimited elements, elements stand vertically inside the column.)

Animations, Custom Background options & Responsive settings are available for sections, columns and elements.

You can move elements within the columns. You can move columns within the section. You can move sections within the layout.

  1. Section level settings Custom classes, ID and layout overrides Custom colors

  2. Row Level Settings Custom classes & ID

  3. Column level settings Custom classes & ID Custom colors

  4. Element level settings Custom classes, ID (module position (for module position element only)).

4 types of elements

  1. Component (Core Joomla, non-repeatable)

  2. Messages (Core Joomla, non-repeatable)

  3. Banner (Astroid Feature, non-repeatable)

  4. Module(s) (Core Joomla, repeatable)

PreviousInstallationNextCreating a basic Astroid Template

Last updated 2 years ago

Was this helpful?