Hello, Help translate Astroid in your local language!

Astroid Layout Manager

Astroid Layout Manager

Astroid's layout manager is a powerful & effective utility that lets you create flexible layouts within the drag n drop builder.

Further sections on:

  • Drag N Drop Builder
  • Unlimited Module Positions
  • Manage Colours at the section & column level
  • 4 Type of Elements
  • Responsive Controls
  • Backgroud options with Video and more

Drag N Drop Builder

The drag n drop builder lets you easily manage and control every aspect of your website. You have the ability to move sections around by simply holding the sections and moving them into the desired position. The section are listed vertically and you can add a section title if you like for easier visual management within the layout manager. Under each section are rows.

Rows in itself are listed vertically inside the sections and act more like a section itself but are listed as part of one HTML element on the front-end.

Each row can further be divided into columns with width, the total of which must be 12 (this is a bootstrap thing).

Each column will can further have multiple elements in it. An element can be a component, message, banner or a module (more on the elements down below).

Drag N Drop Builder.
Unlimited Module Positions

Unlimited Module Positions

Using the layout manager gives you another huge possibility that is the ability to have unlimited module positions. Gone are the days where your module positions are hardcoded in the PHP code of your template and you have to modify the xml and php in order to have newer module position. Starting Joomla 2.5 you are able to create new module positions just by typing the position name and hitting return/enter in the module manager.

Ability to Manage Colours at (almost) every level

With Astroid, you don’t have to know CSS to change colors for your content. You have the ability to change colors at the section and column level. In astroid, we follow the KISS Policy (i.e. Keep it simple stupid), so by default don’t have to select colors at every level it’s only when you want to change the colors, you get the option to choose them. For the sake of simplicity the color choices are limited to text color, link color & link hover color. You can select colors at section level and each individual column level as well.

Ability to Manage Colours
Element Types

Element Types

As you create your website layout using the Layout Builder, the last piece of the puzzle is adding the element. That’s where content lives and without elements your sections, rows and columns are of no use.

There are 4 types of elements in Astroid
  • Component (core, non-repeatable)
    The component element renders the core component on your page. I.e. If you are using a single article layout, the component element would render the actual content of the article including the title
  • Messages (core, non-repeatable)
    Messages display the core Joomla notifications. It’s the kind of messages a user sees after registering or doing a password reset or similar actions that need to display a message to the user
  • Banner (Astroid only, non-repeatable)
    Banner is an Astroid based element that lets you create a banner (with background image and color), along with a heading and subheading for the page. The banners can be managed at a menu item level and each menu item can have a separate banner
  • Modules (core, repeatable)
    Module element let’s you select module positions and publish them within the layout manager. You can then publish modules to these positions using Joomla module manager

Responsive Controls

The responsive controls give you 2 major functions.
  1. Ability to select and publish desired sections, columns or elements in on specific device sizes only
  2. Ability to control the size of the column or element on a specific device size
Let’s take an example of each one of these.

Let’s say you have a section which you designed but would like only to have it display on desktop and then you created another section, which you only want to be visible for mobile users.

This is where the responsive settings come in. Under the section settings, the Responsive settings tab lets you do just tab. You can toggle the visible for the particular section for the specific device type.

Responsive Controls
Desktop and Mobile
Also you are not only limited to desktop and mobile
  • Extra Large Device = Big Screens, any screen that’s wider than xxx pixels or xx inches
  • Large Devices = These are your average desktops, anything wider than xx pixels
  • Medium devices = these would be 13 to 15 inch macbooks or the ipad in landscape mode
  • Small Devices = Phone in Landscape mode
  • eXtra small devices = Phones in Portrait Mode

Let’s take another example of where you have 2 columns with 50% width in a section but when it comes up mobile phone, you want each of them to take 100% width, since mobiles are not that wide, this would be a wiser move.

Well, this is where the second set of responsive options come in. On the column level under Extra small, you can change the column size to 12 (100%) for both the columns and this will make sure both the columns take 100% width on mobile devices.

Background Options

The background options are available at section, row and element level. Background options level you select a background color, image, video & gradient.

You must already be familiar with color, image and video so let me elaborate a bit onto Gradient.

Gradient lets you create nice looking gradients in right in the backend. A combination of 2 colors and with an option to select 2 types of gradients.

Background Options