Astroid's layout manager is a powerful & effective utility that lets you create flexible layouts within the 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).
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.
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.
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.
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.
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.
The background options are available at section, row and element level. Background options level you select a background color, image, video & 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.