Skip to main content

Layout Manager for Dummies

The layout manager in Moon framework is one of the core engines 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 screenshot below, you can see different colors and numbers representing settings for different areas in the Layout Manager.

moon-layout-guide.png

  1. Edit the section-level settings.
  2. Duplicate the section.
  3. Delete the section.
  4. Load a section from Sub-layouts
  5. Save a section to the library
  6. Add a new row to the current section
  7. Add a new section adjacent to the current.
  8. Add a new element to the current column
  9. Restructure the number of columns in the current section.
  10. Hold the icon to move the section up or down in the layout manager.
  11. Hold the icon to move the column
  12. Click on the icon to edit the column settings
  13. Hold the icon to move the row
  14. Select a grid layout for the row
  15. Edit the row settings
  16. Delete the row
  17. Enable or disable the element
  18. Edit the element settings.
  19. Duplicate the element.
  20. Delete the element.

Moon 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 rows and columns within the section.

You can move sections within the layout.