Once you are familiar with the Astroid Layout and how that works, your first step would be add modules and others items and start creating your website’s layout.
Starting afresh Astroid layout provides you 4 main elements: Banner, Module Positions, Messages & Component Area.
#1 Adding BANNER element in Astroid Layout:
Typically on any website the banner is added always on top either below the header or below a top bar section or so. The banner section is thus an important part of the layout especially when you wish to highlight a specific part of the website.
To add Banner element, click on Add Section button > click on the plus icon > select element popup opens where you can choose the Banner element.
Considering that Astroid includes the Banner element with its set of options designed keeping in mind what all modifications can be made on the banner. It can be added only once anywhere in the layout.
The element can be modified within 3 different tabs: General, Design & Responsive Settings tabs.
#2 Adding MESSAGES element in Astroid Layout:
Another important part in a website is a place to show any message, such a form submission message or any notice. For that Astroid provides you a special Messages element that will help with just that.
To add Messages element, click on Add Section button > click on the plus icon > select element popup opens where you can choose the Message element.
This element has been added in the layout to ease your work of not writing extra code just to display these messages on the website. The element has option specifically suitable to modify it in 3 different tabs: General, Design & Responsive Settings tabs. It can be added only once within the layout.
#3 Adding MODULE POSITIONS in Astroid Layout:
A very important part of any website is its modules. You can add any number of modules within the site anywhere in its layout. Adding this in the layout gives you the possibility of designing where and how you would like to see a particular module on the website.
To add Module Positions element, click on Add Section button > click on the plus icon > select element popup opens where you can choose the Module Positions element.
This element will help you display your pre-designed Joomla Modules simply by selecting from the dropdown module list. It can be added multiple times within the layout. its modification options are all there under 3 different tabs: General, Design & Responsive Settings tabs.
#4 Adding COMPONENT AREA in the Astroid Layout:
Another very important part in a website is it’s component area where it displays the Joomla components like any page builder, a shop component or any 3 party extension. This element can again be placed only once anywhere in the site layout.
To add Component Area element in the layout, click on Add Section button > click on the plus icon > select element popup opens where you can choose the Component Area element.
This element is designed keeping in mind the basic structure of any website that needs only one component area to display different components on different pages. This element also has some of it’s element specific options all mentioned under the 3 tabs: General, Design & Responsive Settings tabs.
This way using these Astroid elements you can design your website’s layout very easily and smoothly. To know more about what is there under each of these element’s settings popup, read this article.