Astroid Framework is develop with simplicity and ease of use in mind. Astroid lets you manage every aspect of your Joomla website without writing a single line of code. Its intuitive interface helps you build performant and responsive websites the easy way.

Astroid is also a powerful modern framework for designers & advanced developers alike. Designers can appreciate its incredible flexibility to build exactly what is in their minds without compromises. For developers, it ensures extremely fast and robust Joomla-based websites and templates based on the latest web technologies standard.

Available in multiple languages, Astroid is proud of its lean modern code built entirely around the core power of Joomla. No re-inventing the wheel like other bulky frameworks bypassing Joomla's fantastic abilities and forcing users to adopt their awkward proprietary systems.

Astroid gives you total integration and even enhances all Joomla capabilities making this CMS a Winner of the most prestigious Awards year after year over WordPress and other well-known CMS.

See the “CMS Critic” Awards Page (worldwide recognized most trusted CMS Industry resource, News and reviews channel since 2008)

The Launch!

Astroid Framework v1.0 was born in 2018 and built by JoomDev, a long-time well-known Joomla team of talented developers. In 2021 they decided to release this beautifully crafted framework to Open Source (Like Joomla). Their last release was v2.5.4 (32 releases in all).

Templaza, another well-known Joomla & WordPress team of developers, works with Joomdev to develop Astroid and bases their own Joomla templates on the Astroid framework. When release to Open Source, Templaza decided to carry the torch to the future.

In 2023, Templaza (and the growing community) released more than 20 new versions, enhancing this already great Framework and doing so regularly.

• Templaza Releases on Github • Templaza Astroid Templates

Many international Devs, like Joomlaplate in Germany, and other great coders worldwide and numerous contributors are now participating in this great project and also producing Astroid Templates. e.g. Joomlaplates Astroid Templates

You are welcome to participate.

If you are a coder, a developer, a user or simply have suggestions, don't hesitate! Visit Us on: Github Discord YouTube

To know more about what all Astroid has to offer read the documentation

Requirements:

• Joomla: 4.4+

• PHP: 8.1+

• Mysql: 8.0+ or Maria DB 10.4+

PHP Specifications:

• max_execution_time = 300

• max_input_time = 300

• max_input_vars = 2000

• memory_limit = 512M

• post_max_size = 10M

• upload_max_filesize = 10M

Browser Support

• Chrome 64+

• Firefox 58+

• Edge 14+

• Safari 10+

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)

Astroid is a powerful modern framework tailored for designers and developers or simply assists you in building your first website. Its intuitive interface helps you create fully responsive, fast & robust Joomla-based websites and templates. Astroid uses the last mainstream web technologies and fully integrates and enhances the core abilities of Joomla.

Features

• Built for Joomla 4, Joomla 5 & Beyond!

• Build Fast Loading Websites

• Structure 100% Responsive with Advanced per Devices User Controls

• Bootstrap 5 Compatible, Sass Ready, Custom CSS & SCSS files if needed

• Ergonomic Drag & Drop Layout Builder with Total Design Flexibility

• Flexible Logo and Header Options (Retina Logo, “Sticky” Menu, Layout Controls...)

• Font Awesome 6 (External or Local Load)

• Social Icons, Phone & Share

• Accessible Design & Text Directions RTL/LTR Ready

• Sections & Elements Animations plus Extensive Background Controls

• Advanced Menus Options (Pages Banners, Icons, Subtitles, Badges...)

• Off-Canvas Sections & Powerful “Mega Menu” Options

• Advanced Typography Controls for External (Google...) or Self-Hosted Fonts

• Advanced Blog Options (Author Info, Related Articles, Read Time, Social Share, Comments...)

• Custom Article Type options (Videos, Gallery, Audio, Review, Quote & Articles Badges...)

• Unlimited Integration of Custom Code & files (Javascript,, CSS, Tracking Code...)

• Custom Profiles & Themes with Import/Export Settings

• Lazy Loading & JS & CSS Code Optimization

• Open Graph

• Total integration of Joomla Child Templates Ability

• Ajax Admin & Light & Dark Colors Themes with Visitors Switch

• Enhanced User Experience. Build the Design in Your Head, Easily.

• Refactored Codebase, Better Every Versions

• Available in multiple languages

• Powerful Widget System

• And More ...

• Only Enable What You Need & Ask Us for New Features!

Getting Started

Got 2 minutes? Check out a video overview of our product:

Guides: Jump right in

Follow our handy guides to get started on the basics as quickly as possible:

Basic Settings

Learn the fundamentals of Astroid Framework to get a deeper understanding of the main features:

About Article Blog

About Header

About Miscellaneous

About Theme Color

About Layout Settings

Learn More About Menu Item Settings

Something About Typography

Custom Code

How To Set Up A Mega Menu

Social Profile Settings

Theming

More

Want to create your own template using Astroid Framework? Or wondering how & where, to begin after installing Astroid on your Joomla? Enough of scratching your head now, below are the basic steps listed for creating your own template using the “Amazing” Astroid Framework:

• Go ahead and install the Astroid package(both Framework & Template) on your Joomla.

• After installation, go to Extensions > Templates > Templates. Click & Open Astroid_template_zero Details.

• On the Template Customize page, click on Copy Template button & Name the copied template as per choice(eg. tz_xxxx) & then click on copy template button.

• Now under template Styles you will see your newly created template on Astroid framework. Set this template as Default.

• After creating your own template, Delete the Astroid_template_zero from Style & Uninstall the Astroid Template_zero file from your Joomla.

• Start working on your newly created template with the different options provided by the Astroid Framework and style your astroid-based template as you like.

Astroid is simple and easy to install, though it also has 4 different files to choose from as per requirements. Please follow these easy steps to get started with this amazing framework:

1. Download the extension install file (.zip) >

2. Log into your Joomla administrator

3. In the menu, choose: Extensions >> Manage >> Install

4. Choose the tab: Upload Package File

5. Click on the Choose File button and select the extension zip

6. Click on Upload & Install. And you now have the framework installed!

Starting astroid 2.2.3, you can select either an image or any animation from the animations library or can even choose from FontAwesome’s animation library as a preloader type. The image option lets you display either your logo or any other image (gif animations and such), while the page is being loaded. When you select the Image as the preloader type, it gives you options to customize the display of the image as per your need: 1. Background Repeat: You can select the appropriate value from the dropdown for Background Repeat. 2. Select a Background Size: You can select the appropriate value from the dropdown for Background Size. 3. Select a Background Position: You can select the appropriate value from the dropdown for Background Position. When you select Font Awesome as preloader type then you have the following options to customize it:

• Preloader Animation: Choose the animation of the preloader from the FontAwesome library.

• Preloader Color: Set the color of the preloader icon.

• Preloader Background Color: Select the background color of the preloader icon which is displayed as the site loads.

• Preloader size: Set the size of the preloader in pixels by sliding over the indicator.

When you select Animation as preloader type, it gives you options to customize:

• Preloader Animation: Choose the animation of the preloader from the given list.

• Preloader Color: Set the color of the preloader icon.

• Preloader Background Color: Select the background color of the preloader icon which is displayed as the site loads.

• Preloader Size: Set the size of the preloader in pixels by sliding over the indicator.

You can easily select the icon from your media gallery that will become the favicon for your site.

1. Back To Top: Choose whether you want to enable/disable the icon.

2. Icon: Choose the icon for your back-to-top button.

3. Icon Size: Set the size of the icon in pixels by sliding over the indicator.

4. Icon Color: Set the icon color for the button.

5. Icon Background Color: Set the background color of the icon.

6. Icon Shape: Select an icon shape either Circle, Round or Square.

7. Back To Top Button on Mobile: Choose whether you want to enable/disable the icon on mobile devices.

Astroid offers you an option to display your website with a wide or box layout. You can find the option by goin to Template options > Basic > Page Settings > Here you see Site Layout option to choose between wide or boxed layout.

Boxed layout options:

1. Background Image: Choose the background image for the site.

2. Background Repeat: Choose whether you want to repeat the background image or not from the different options available: Inherit, Repeat All, Repeat Horizontally, Repeat Vertically or No repeat.

3. Background Size: Adjust the size of the background image selected from the option provided: Cover, Contain and Inherit.

4. Background Position: Adjust the position of the image where you want it to be displayed from the options: Inherit, Left Top, Left Center, Left Bottom, Right Top, Right Center, Right Bottom, Center Top, Center Center, Center Bottom.

5. Background Attachment: You can choose whether the image will move with the page scroll or not using: Scroll, Fixed or Inherit.

Wide Layout

When the wide layout is enabled, you can set the container width.

Enabling the smooth scroll option will help the site to load necessary js so that users can have a better experience on the site.

You can also adjust the scroll speed.

• Scroll Easing: Choose a scroll animation from the drop-down list.

• Prevent Smooth Scroll: to prevent smooth scroll on specific elements, you can add specific class or element id into the box, separate them with commas.

Enable Color Mode in Astroid Plugin

Please go to System > Manage > Plugins > Search Astroid plugin > Enable the color mode.

Enable Color Mode in template options

Go to Template styles > open your style> Template Options > Basic > Page Settings > Enable the color mode

• Color mode: Enable the color mode feature.

• Color Mode Default: Choose Light or Dark that will be the default mode ( or it will be inherited as the default color mode of the framework).

• Module position: Select a module position in which you want to display the color mode element.

• Feature load position: Choose after or before the module.

Color Transformation

Color transform is a feature that allows you to change the color from light to dark or vice versa.

Adjust the color modes

After enabling the color mode, you should go to the Color section and set up the color for the body, header, main menu, sticky menu, off-canvas menu, drop-down menu, mobile menu, and footer in both light and dark modes.

If you do not adjust the color between light and dark modes, you will not see changes when changing the color mode in the front end.

Edit the color for each section manually

You can change the background color and customize the color for each section in the layout by editing a section > Design tab > Turning on the background color > editing the color of both light and dark modes

Turning on the Custom code, you'll be able to change the text color, link color and link hover color.

Container Background Mode

There are options for you to set the background for the full page content: background image, background video or a default color.

Default background

If you choose Inherit, the container will inherit the default background color.

Background Image

• Background Color: Set a favorite custom color code for the background.

• Background Image: Choose an image for the background fro the media library or add a URL to the field.

• Background Repeat: Sets if/how a background image will be repeated.

• Select a Background Size: Specify the size of a background-image.

• Select a Background Attachment: Sets whether a background image scrolls with the rest of the page, or is fixed.

• Select a Background Position: Sets the starting position of a background image.

• Overlay Color: Add an Overlay Color or Image Pattern on Image Background.

Container's background video

Select a video from the media library or enter a video's URL into the field.

A sticky header is something that sticks to the top of the page while the scroll is scrolling down or decides to go back up.

Sticky Header: Choose whether you want to display the Sticky header or not. If yes then the following options will be visible:

There are 2 different ways you can show the sticky header.

1. Sticky Menu Mode: Here we have 3 modes:

   • Left: The logo and the menu items are positioned to the left and the header block is to the right.

   • Right: Here the logo is to the left, the menu items and header block are to the right

   • Center: Here the logo is to the left, menu items are in the center and the header block is on the right

2. Header Block 1: Choose what you want to display in the header blocks from the given options in the dropdown:

   • Blank: Leave the space blank

   • Module Position: Publish a module whose position you can choose in the next option Block Position 1

   • Custom HTML: You can also publish custom HTML in the header block, simply writing your code in the next option Block 1 Custom HTML

1. Enable Badge on Sticky Header: Turn on this option if you wish to have the menu's badges displayed on the sticky header.

2. Sticky Header Logo:

   This option allows you to choose a different logo image for the sticky header (i.e. if you want to upload a smaller logo so the sticky header doesn’t take a lot of space)

3. Sticky Header on Desktop

   Choose how you want the sticky to be Sticky or Sticky on Scroll up in desktop view.

4. Sticky Header on Tablets

   Choose how you want the sticky to be Static, Sticky or Sticky on Scroll up in the tablet view of your site.

5. Sticky Header on Mobile

   Choose how you want the sticky to be Static, Sticky or Sticky on Scroll up in the mobile view of your site.

Logo Type: Choose the logo type for your site that is either Text, Image or None.

If you choose a Text logo then you have the following options:

1. Logo Text: Enter the text for the logo.

2. Tag Line: Enter the tagline text for your text logo.

3. Logo Link: Choose the type of link you wish to add to the logo text either Default or a Custom link.

4. Logo text typography: if you want to customize the logo text, choose the custom option and adjust the typography.

5. Tagline typography: choose the custom option and you'll be able to adjust the typography of the tagline according to your needs.

If you choose an Image logo then you have the following options:

1. Default Logo: Choose the logo image for your site.

2. Default Logo (Dark Mode): Choose a logo for the dark mode.

3. Mobile Logo: You can also customize the logo of your site in mobile view by choosing a different logo image here.

4. Mobile Logo (Dark Mode): Choose a logo image for the dark mode.

5. Logo Link: Choose the type of link you wish to add to the logo text either Default or a Custom link.

header-transparent position-absolute

Add the following CSS in your astroid custom css section (doc).

.astroid-header-section { background: transparent; z-index: 9999; border-bottom: 1px solid rgba(255, 255, 255, 0.26); }

Make sure your header doesn’t have any background color selected in the backend section level or the colors section and change that color to transparent as well.

That’s it. This should do it. You may add the class pb-2 (padding-bottom 2 (range is between 1 – 5)) to create additional padding towards the bottom between the header and the section below.

You now can customize that off-canvas icon using these simple overridable steps:

1. Copy the files from this folder(JOOMLA_ROOT/libraries/astroid/framework/frontend/offcanvas) to this folder(JOOMLA_ROOT/templates/YOUR_TEMPLATE/html/frontend/offcanvas).

2. Make the changes in the copied files.

3. And it’s done, the changes made in those files with be reflected on your frontend just make sure to clear the cache as well.

1. Header Element: Enable or disable elements in the header

2. Module Position: Provide a position where you want to display the header in the front end.

3. Header Modes: There are 3 main header modes: Horizontal Menu, Stacked Menu, and Sidebar Menu.

I. Horizontal Menu Mode

a) Horizontal Menu Mode: Here you have 3 different modes:

• Left: The logo and the menu items are positioned to the left and the header block is to the right

• Center: Here the logo is to the left, menu items are in the center and the header block is on the right

• Right: Here the logo is to the left, the menu items and header block are to the right

b) Header Block 1 / Header Block 2: Choose what you want to display in the header blocks from the given options in the dropdown that is:

• Blank: Leave a blank space

• Module Position: Publish a module whose position you can choose in the next option Block Position 1

• Custom HTML: You can also publish a custom HTML in the header block, simply writing your code in the next option Block 1 Custom HTML

II. Stacked Menu Mode

a) Stacked Menu Mode: Here you have 5 different modes:

• Center Balance: The logo is in the center, and header positions 1 and 2 are placed side along the logo on the left and the right. The menu is right under the logo

• Stacked Center: The logo, menu items, and header block are all aligned together vertically one on top of the other. You can again choose the content for the header block in the next option:

• Stacked Separated: Here the logo and two header blocks are in the center.

• Stacked Divided: Here the logo is to the left, menu items are in the center, and the header block is on the right

• Stacked Divided Logo Left: The logo is on the left of the first column, header positions 1 and 2 are placed on the first row, and the menu is on the second row of the other column.

b) Odd number menu item position

When you select Stacked Separated it displays an extra option of Odd number menu item position to select where you want to display the extra menu item: Select where you want to place the extra menu item in case of Odd number of menu items.

c) Header Block 1– Here you have 3 different options:

• Blank: Leave a blank space.

• Module Position: Publish a module whose position you can choose from the dropdown Block Position 1.

• Custom HTML: You can also publish a custom HTML in the header block, simply writing your code in the next option Block 1 Custom HTML.

d) Header Block 2: Here you have 3 different options:

• Blank: Leave a blank space.

• Module Position: Publish a module whose position you can choose from the dropdown Block Position 2.

• Custom HTML: You can also publish a custom HTML in the header block, simply writing your code in the next option Block 2 Custom HTML.

III. Sidebar Menu mode

a) Sidebar Menu Modes

Here you have 3 different modes:

• Sidebar Left: The logo, menu items, module 1 and module 2 are all positioned to the left.

• Sidebar Right: The logo, menu items, module 1 and module 2 are all positioned to the right.

• Sidebar with third module: You can choose the position of the sidebar (Left or Right) and add a third module to the menu.

b) Header Block 1: Here you have 3 different options:

• Blank: Leave a blank space

• Module Position: Publish a module whose position you can choose from the dropdown Block Position 1

• Custom HTML: You can also publish a custom HTML in the header block, simply writing your code in the next option Block 1 Custom HTML

4. Site Menu Method: Choose the menu display method. You can now choose to display the Astroid Menu directly as Default or through a Module Position.

5. Site Menu: If you have more than one main menu created then you can choose which menu you want to show on your main site from the dropdown list.

6. Start Level: The level to start rendering the menu at. Setting the start and end levels to the same level will only display that single level.

7. End Level: You can even set up to which level you want to show the sub-menu items. By default, it is set to “ALL” which means all the sub-menu items will be visible.

8. Header Breakpoint: Choose a breakpoint so the header will collapse when the width is less than the selected breakpoint parameter. The lg is set as default breakpoint to suit most of the cases.

9. Mobile Menu: You also choose which menu you want to show on the mobile view of your site if you have 2 or more menus created.

10. Dropdown Trigger: Choose the action to view the dropdown menu or the mega menu that is either on Hover or Click.

11. Dropdown Arrow: Choose whether you want to show the dropdown arrow or not.

You can configure which Bootstrap JS Libraries will be loaded by default.

Go to Administrator >> Template Options >> Basic >> Bootstrap Settings

Create an offcanvas module

1. Go to Extensions > Modules > New. Create a New module of the type Menu.

2. Add the module title and select the menu that you would like to display via this module.

3. You can select a base menu item that’ll always be active, but if you choose the default value that is Current then the active menu item will be highlighted at all times.

4. Set the Start and End level of the off-canvas menu module.

5. You can also choose whether you want to show the sub-menu items or not.

6. After settings, all the required fields set the module position to offcanvas.

7. Set the module status as Published.

8. Lastly, confirm the module assignment under the Menu Assignment tab where all the modules will be published and you are done.

Astroid's backend has all the other options to style the off-canvas menu module. But this option will only be visible if you have the Header element enabled, and currently, it is only available for Horizontal and stacked Header modes.

Enable the offcanvas menu

Off-Canvas menu: Choose whether you want to display the off-canvas menu or not. If yes then the following options will be visible:

1. Toggle Visibility: Choose on which devices will the off-canvas menu be visible that is on All devices, Only on extra small devices, Up to Small devices, Up to medium devices, Up to Large devices or only on extra large devices. By default, it's set to All devices.

2. Panel Width: Set the size of the off-canvas menu either in px or em or rem.

3. Off-Canvas Animation: Select how you want the off-canvas menu to open which is either Slide on Top, Push or Reveal animations.

4. Off-Canvas Direction: You can choose between Left and Right for the position from where you want to open the Off-Canvas menu.

1. Background Color Allows you to set the default Background color for the body for the whole site.

2. Heading color Set the color of heading titles in the body section.

3. Text Color Set the Text color of the Body Content.

4. Link Color Set the color of the link in the Body Content.

5. Link Hover Color Set the color for hovered links; links hover when the mouse moves over them.

6. Meta Text Color Set the color for meta text on the body section.

This section allows you to adjust the color of the sticky header. When you enable the color mode, you can see color options for both light and dark modes.

1. Background Color Allows you to set the default Background color for the Dropdown menu.

2. Link Color Set the color of the link in the dropdown menu for submenu items.

3. Link Active Color Set the color for the active links; links become active once you click on them.

4. Link Hover Color Set the color for hovered links; links hover when the mouse moves over them.

5. Hamburger Button Set the color of the burger button

6. Hamburger Active Button Set the color of the burger button when it's in active mode

1. Background Color Allows you to set the default background color for the Header section for the whole site.

2. Heading Color Set the color for Heading tags in the header section

3. Text Color Set the Text color for the Header section.

4. Logo Text Color Set the color for your text logo.

5. Logo Tag Line Color Set the color for Tag Line in your text logo.

1. Animation: You can also customize the animation of your megamenu, and drop-down menus, you can set it to None, Slide or Fade.

2. Animation Speed: Depending upon the animation you choose from the Animation option you can also set its speed. The value is set in milliseconds and its maximum value can be up to 4000ms.

3. Easing: This function specifies the speed at which an animation progresses at different points within the animation. You can choose the type of easing from the various options provided: linear, swing, EaseInQuad, EaseOutQuad, EaseInOutQuad, EaseInCubic, EaseOutCubic, EaseInOutCubic, EaseInQuart, EaseInQuart, EaseInQuart, EaseInQuint, EaseOutQuint, EaseInOutQuint, EaseInSine, EaseOutSine, EaseInOutSine, EaseInExpo, EaseOutExpo, EaseInOutExpo, EaseInCirc, EaseOutCirc, EaseInOutCirc, EaseInElastic, EaseOutElastic, EaseInOutElastic, EaseInBack, EaseOutBack, EaseInOutBack, EaseInBounce, EaseOutBounce and EaseInOutBounce.

This section provides you with options to adjust the color of the dropdown menu.

If you , you'll see options to adjust the color of both light and dark modes.

1. Background Color Allows you to set the default Background color for the Dropdown menu.

2. Link Color Set the color of the link in the dropdown menu for submenu items.

3. Hover Link Color Set the color for hovered links; links hover when the mouse moves over them.

4. Hover Background Color Set the Background color for the hovered links.

5. Active Link Color Set the color for the active links; links become active once you click on them.

6. Active Background Color Set the Background color for the active links.

Click on the pencil icon to edit an element. And you'll see 3 main tabs including General Settings, Design Settings and Responsive Settings.

General Settings

Under this tab the options are as follows:

• Module Position- Assign the module position of the element in the layout. The dropdown lists all the active module positions created in Joomla backend.

• Element Title- Customize the element name to make it easy & clear to understand in the layout manager.

• Custom Class- Write the class name used for writing custom CSS or JS.

• Custom ID- Give a custom ID to override the auto-generated ID.

Design Settings

Under this tab the options are as follows:

• Animation- Choose animation for the element. You can also set the Animation Delay time in the next step.

• Background Type- Select the background type for your element from None, Color, Image, Video or even add a Gradient.

• Custom Colors- Choose whether you want to enable or disable the custom colors for the element. If you enable it then you have the option to set Text Color, Link Color & Link Hover Color of the element’s content.

• Spacing- Add margin and padding values over the row to improve its appearance on different devices.

Responsive Settings

Under this tab the only option is:

• Device Visibility- Choose your preference of hiding or showing the section on different screens like Hide on Extra Small Devices, Hide on Small Devices, Hide on Medium Devices, Hide on Large Devices or Hide on Extra Large Devices.

This section provides you with options to adjust the color of the main menu.

If you enable the color mode, you'll see color options for both light and dark modes.

1. Link Color Set the link color for the main menu.

2. Link Active Color Set the appearance of a link while it is being activated.

3. Link Hover Color Set the link hover color for the main menu.

4. Link Active Background Set the background color of a menu item when it's clicked.

5. Link Hover Background Set the background color of a menu item when it's hovered on.

In Astroid's layout manager, the first thing you do is Add a Section by choosing the grid from the Grid layout manager (if you choose a Custom grid then its sum should always be equal to 12).

After adding the section you see certain options(icons) like Section name, Move section, Edit section, Duplicate, Delete, add new Row & add new Section.

If you click on the Edit Section icon, a popup opens that has 3 different tabs General Settings, Design Settings & Responsive Settings. With these settings you can customize your sections easily.

General Settings

Under this tab the options are as follows:

• Section Title- Write the section title.

• Custom Class- Write the class name used for writing custom CSS or JS.

• Custom ID- Give a custom ID to override the auto-generated ID.

• Section Layout- Choose the layout for the section from Container, Container Fluid, Container with No gutters, Container fluid with not gutters, Without Container or a Custom layout.

• Layout Custom Class- If you choose a Custom layout then write the custom class name.

Design Settings

Under this tab, the options are as follows:

• Animation- Choose animation for the section. You can also set the Animation Delay time in the next step.

• Background Type- Select the background type for your section from None, Color, Image, Video or even add a Gradient.

• Custom Colors- Choose whether you want to enable or disable the custom colors for the section. If you enable it then you have the option to set Text Color, Link Color & Link Hover Color of the section’s content.

• Spacing- With this you can set your section’s custom Margin & Padding in 4 different units Px, Em, Rem & % with device responsiveness.

Responsive Settings

Under this tab the only option is:

Device Visibility: Choose your preference of hiding or showing the section on different screens like Hide on Extra Small Devices, Hide on Small Devices, Hide on Medium Devices, Hide on Large Devices or Hide on Extra Large Devices.

This section provides you with options to change the color of the offcanvas menu. If you enable the color mode, you'll see options to adjust the colors of both light and dark modes.

1. Background Color Set the default Background color for the Off-Canvas Menu.

2. Text Color Set the default Background color for the Off-Canvas Menu.

3. Link Color Set the color of the link in the Off-Canvas menu for menu and Sub-menu items.

4. Active Link Color Set the color for the active links (links become active once you click on them).

5. Active Background Color Set the Background color for the active links.

6. Hamburger Icon Color Set the hamburger icon color for the offcanvas/mobile menu.

7. Active Hamburger Icon Color Set the active hamburger icon color for the offcanvas/mobile menu.

Add New Row option is provided along with the section name. Other editing options are provided to the right of each row that is Edit Grid, Duplicate Row, Edit Row & Delete Row icons.

When you click on Edit Row icon, a popup opens that has 3 different tabs General Settings, Design Settings & Responsive Settings. With these settings, you can customize your row easily.

General Settings

Under this tab, the options are as follows:

• Custom Class- Write the class name used for writing custom CSS or JS.

• Custom ID- Give a custom ID to override the auto-generated ID.

Design Settings

Under this tab the options are as follows:

• Animation- Choose animation for the section. You can also set the Animation Delay time in the next step.

• Background Type- Select the background type for your section from None, Color, Image, Video or even add a Gradient.

• Custom Colors- Enabling this you can add custom colors to any text or link within the row.

• Spacing- Add margin and padding values over the row to improve its appearance on different devices.

Responsive Settings

,Under this tab the only option is:

• Device Visibility- Choose your preference of hiding or showing the section on different screens like Hide on Extra Small Devices, Hide on Small Devices, Hide on Medium Devices, Hide on Large Devices or Hide on Extra Large Devices.

Column has just 1 Edit Column icon that is used for customizing. Choose the grid or the number of columns from the Edit grid option.

When you click on Edit Column icon, a popup opens that has 3 different tabs General Settings, Design Settings & Responsive Settings. With these settings you can customize your column easily.

General Settings

Under tab this the options are as follows:

• Column Title- Give the column a name of your choice

• Custom Class- Write the class name used for writing custom CSS or JS.

• Custom ID- Give a custom ID to override the auto-generated ID.

Design Settings

Under this tab the options are as follows:

• Animation- Choose animation for the section. You can also set the Animation Delay time in the next step.

• Background Type- Select the background type for your section from None, Color, Image, Video or even add a Gradient.

• Custom Colors- Choose whether you want to enable or disable the custom colors for the section. If you enable it then you have the option to set Text Color, Link Color & Link Hover Color of the section’s content.

• Spacing- Add margin and padding values over the row to improve its appearance on different devices.

Responsive Settings

Under this tab the only option is:

• Device Visibility- Here you can set the breakpoints of the columns on different devices.

Since Astroid version 3.0, you're able to manage layouts on different devices including Extra Extra Large, Extra Large, Large, Medium, Tablet, and Mobile Phone.

The navigation widget is a simple, independent menu widget. Menu items with inserted links are managed by this widget.

How to add a Navigation widget

You need to create a new section, choose a grid layout and click adding a new element. By adding a new element, you will see a popup including all the widgets available.

Simply choose the Navigation from the Widget list, then it'll be added to the layout's section where you want to add a Navigation widget.

The Navigation Widget contains 4 main settings tabs:

• General Settings

• Design Settings

• Responsive Settings

• Menu Assignment

I. Navigation General Settings

When you click on the edit icon of the Navigation element, the widget inline editor will open up from where you can access the addon settings and customize it to fit your needs.

1. Add a new navigation item

Click on "Add Item" to create a new navigation item.

You will see options below to configure each navigation item.

• Title: Rename your menu item from this field.

• Link: Add a link to the navigation menu.

• Show title: Enable or disable the link's title.

• Active: Enable this option to make a navigation link active.

• Icon: Choose this option if you want to set an Icon in your Navigation menu items.

• Link Target: You can choose a type of link target (Default, New window, Parent frame, Full body of the window).

• Rel attribute: Add rel attribute for navigation links.

2. Miscellaneous Options

• List style: Choose a style for the navigation menus. The widget supports 2 styles: Navigation and List.

• Alignment: Set the alignment of navigation menu items.

• You can also configure typography settings for the widget's texts to fit your preference including font family, alt font family, font weight, font size, letter spacing, line height, text-transform, and font style.

3. Color Options & Background Color Options

• Color Options: Change the color and hover color of the navigation menu texts.

• Background Color Options: Change the background color and hover the background color of the navigation menus.

4. Spacing Options

With the spacing options, you can set custom Margin and padding of the navigation element in 4 different units Px, Em, Rem, pt and % with device responsiveness.

II. Design Settings

• Element Visibility: Choose to set the element to be visible on "Current and all linked pages", or on "Current menu items only".

• Animation: Choose an animation for the widget.

• Max Width: Set the Max Width for the widget.

• Text Alignment: Set the alignment of the text of the widget.

• Background Type: Select the background type for the widget from None, Color, Image, Video or even add a Gradient.

• Custom Color: Choose whether you want to enable or disable the custom colors for the widget. If you enable it then you have the option to set Text Color, Link Color & Link Hover Color of the element’s content.

Spacing

Add margin and padding values over the row to improve its appearance on different devices.

Custom css

Here in the design settings, you can add custom CSS to customize the design of the element.

III. Responsive Settings

Device Visibility: Choose your preference for hiding or showing the section on different screens like:

• Hide on Extra Small Devices

• Hide on Small Devices

• Hide on Medium Devices

• Hide on Large Devices

• Hide on Extra Large Devices

IV. Widget's Menu Assignment

Since Astroid framework 3.0.12, the menu assignment feature has been introduced, which is applied to widgets available in Astroid's widget library.

You can choose between On all pages, No pages, Only on the pages selected from the List.

• On all pages: the widget will be visible on all pages of your website

• No pages: the widget will be invisible on all pages

• Only on the pages selected: "Menu Selection" will show with all the menu items on. You can assign the widget by selecting the menu links that you want the widget associated with on what pages the widget appears.

Origin of the idea

When you have a template with many different styles. Sometimes you will encounter annoying problems with editing sections such as the footer of the layout on those styles. Repeating the same work on many styles will make us annoyed. That is why Sub-Layouts were born to solve this problem.

Basically, Sub-Layout has the same role as Joomla's Module. It was created to help admins reuse a layout section in many different Template Styles without having to repeat the work of creating same layouts.

How to create a Sub-Layout

To create sub-layouts, go to:

1. Administrator >> Templates: Styles >> Edit your Astroid template >> Template Options

2. Layout >> Sub Layouts

3. Click "New Layout"

How to use Sub-Layout

To use Sub-Layout. Switch to Layout > Layout.

How to edit a Sub-layout

If you want to edit your sublayout. Go back to Layout >> Sub Layouts >> Click to title to edit layout

Summary

Basically, Sub-Layout has the same role as Joomla's Module. It was created to help admins reuse a layout section in many different Template Styles without having to repeat the work of creating layouts on that style.

The Divider Widget allows you to add styled lines that divide your content horizontally or vertically.

How to add a Divider widget

You can add a Divider to your layout builder by simply adding a new element in the layout and selecting the Divider widget from the Astroid library.

Simply choose the Divider widget from the Widget list, then it'll be added to the layout's section where you want to add a Divider widget.

The Divider widget consists of 4 main setting tabs:

• General Settings

• Design Settings

• Responsive Settings

• Menu Assignment

I. General Settings

• Element Title: Enter the element title

• Width: Control the width of the divider as a percentage from 0 to 100 percent.

• Type: Choose a type of divider (Horizontal or Vertical)

• Style: Choose between many classic and patterned styles, such as solid, curly, wavy, tribal patterns, arrows, pluses, and more.

• Color: Choose the color of the divider. In case you enable the color mode, you'll be able to adjust the divider's color for both dark and light modes.

• Margin: Set an optimum distance from the top, right, bottom and left of the element.

• Custom Class: Custom Class can be used for writing custom CSS or JS.

• Custom ID: Give a custom ID to override the auto-generated ID

II. Design Settings

• Element Visibility: Choose to set the element to be visible on "Current and all linked pages", or on "Current menu items only".

• Animation: Choose an animation for the widget.

• Max Width: Set the Max Width for the widget.

• Text Alignment: Set the alignment of the text of the widget.

• Background Type: Select the background type for the widget from None, Color, Image, Video or even add a Gradient.

• Custom Color: Choose whether you want to enable or disable the custom colors for the widget. If you enable it then you have the option to set Text Color, Link Color & Link Hover Color of the element’s content.

Spacing

Add margin and padding values over the row to improve its appearance on different devices.

Custom css

Here in the design settings, you can add custom CSS to customize the design of the element.

III. Responsive Settings

Device Visibility: Choose your preference for hiding or showing the section on different screens like:

• Hide on Extra Small Devices: Enable to hide the widget on mobile phones.

• Hide on Small Devices: Enable to hide the widget on tablets.

• Hide on Medium Devices: Enable to hide the widget on laptops.

• Hide on Large Devices: Enable to hide the widget on desktops.

• Hide on Extra Large Devices: Enable to hide the widget on extra-large screens.

IV. Widget's Menu Assignment

Menu Assignment is created to assign the widget to pages on your website. You can choose between On all pages, No pages, Only on the pages selected from the list.

• On all pages: the widget will be visible on all pages of your website

• No pages: the widget will be invisible on all pages

• Only on the pages selected: "Menu Selection" will show with all the menu items on. You can assign the widget by selecting the menu links that you want the widget associated with on what pages the widget appears.

Using the Text widget, you can add text content to your layout builder. It is one of the most basic but essential tools in your toolkit.

How to add Text widget

Open your layout and click to add a new element. By clicking on adding a new element, you'll see a popup including all the widgets available in the library.

Simply choose the Text widget from the Widget list, then it'll be added to the layout's section where you want to add a Text widget.

The Text Widget consists of 4 main setting tabs:

• General Settings

• Design Settings

• Responsive Settings

• Menu Assignment

I. Text Widget - General Settings

Now it’s time to customize the Text element how you want. You will find the options you need by clicking to edit the text element icon on the inline editor. This will open the Text settings where you will be able to adjust the following:

1. General setting

• Heading: Enter the heading title of the text content.

• HTML Element: From here, you’ll be able to select the HTML elements you want your heading to consist of. Options include H1, H2, H3, H4, H5, and H6.

• Font Family: Choose a font family for the text heading.

• Alt Font Family: It means Alternative Font Family. Choose an alt font family in case the browser does not support the first font, it tries the next font.

• Font-weight: Set the font weight for the text heading.

2. Text - Content Options

In this part, you can input the text in the content box, and configure typography settings for the added content to fit your preference including font family, alt font family, font weight, font size, letter spacing, line height, text-transform, and font color,

II. Design Settings

• Element Visibility: Choose to set the element to be visible on "Current and all linked pages", or on "Current menu items only".

• Animation: Choose an animation for the widget.

• Max Width: Set the Max Width for the widget.

• Text Alignment: Set the alignment of the text of the widget.

• Background Type: Select the background type for the widget from None, Color, Image, Video or even add a Gradient.

• Custom Color: Choose whether you want to enable or disable the custom colors for the widget. If you enable it then you have the option to set Text Color, Link Color & Link Hover Color of the element’s content.

Spacing

Add margin and padding values over the row to improve its appearance on different devices.

Custom css

Here in the design settings, you can also add custom CSS to customize the design of the element.

III. Responsive Settings

Device Visibility: Choose your preference for hiding or showing the section on different screens like:

• Hide on Extra Small Devices

• Hide on Small Devices

• Hide on Medium Devices

• Hide on Large Devices

• Hide on Extra Large Devices

IV. Widget's Menu Assignment

Since Astroid framework 3.0.12, the menu assignment feature has been introduced, which is applied to widgets available in Astroid's widget library.

You can choose between On all pages, No pages, Only on the pages selected from the List.

• On all pages: the widget will be visible on all pages of your website

• No pages: the widget will be invisible on all pages

• Only on the pages selected: "Menu Selection" will show with all the menu items on. You can assign the widget by selecting the menu links that you want the widget associated with on what pages the widget appears.

Images play a vital role in web design, so you will most likely use the Image Widget a lot while designing your website. Let’s go over all of the settings you can control for this widget.

How to add an Image widget

You need to create a new section, choose a grid layout and click adding a new element. By adding a new element, you will see a popup including all the widgets available.

Simply choose the Image widget from the Widget list, then it'll be added to the layout's section where you want to add a Image widget.

The Image Widget consists of 4 main settings tabs:

• General Settings

• Design Settings

• Responsive Settings

• Menu Assignment

I. Image Widget - General Settings

• Element Title: Enter the element title.

• Select Image: Upload an image from your media library.

• Figure Caption: Enter a caption describing the image

• Use Link: Enable this option if you want to link the image to a page or an external source.

Widget Style

• Max Width: Define the max width of the image.

• Border Radius: Choose an option for border-radius (Rounded, Circle, Pill or none).

• Rounded Size: If you choose a rounded border, you can choose a size for the rounded border.

• Box Shadow: Choose a type of box shadow from the dropdown.

• Hover Effect: Click the dropdown to choose a Hover effect.

• Hover Transition: Click the dropdown to choose a Hover transition.

• Custom Class: Custom Class can be used for writing custom CSS or JS.

• Custom ID: Give a custom ID to override the auto-generated ID.

II. Design Settings

• Element Visibility: Choose to set the element to be visible on "Current and all linked pages", or on "Current menu items only".

• Animation: Choose an animation for the widget.

• Max Width: Set the Max Width for the widget.

• Text Alignment: Set the alignment of the text of the widget.

• Background Type: Select the background type for the widget from None, Color, Image, Video or even add a Gradient.

• Custom Color: Choose whether you want to enable or disable the custom colors for the widget. If you enable it then you have the option to set Text Color, Link Color & Link Hover Color of the element’s content.

Spacing

Add margin and padding values over the row to improve its appearance on different devices.

Custom css

Here in the design settings, you can also add custom CSS to customize the design of the element.

III. Responsive Settings

Device Visibility: Choose your preference for hiding or showing the section on different screens like:

• Hide on Extra Small Devices

• Hide on Small Devices

• Hide on Medium Devices

• Hide on Large Devices

• Hide on Extra Large Devices

IV. Widget's Menu Assignment

Since Astroid framework 3.0.12, the menu assignment feature has been introduced, which is applied to widgets available in Astroid's widget library.

You can choose between On all pages, No pages, Only on the pages selected from the List.

• On all pages: the widget will be visible on all pages of your website

• No pages: the widget will be invisible on all pages

• Only on the pages selected: "Menu Selection" will show with all the menu items on. You can assign the widget by selecting the menu links that you want the widget associated with on what pages the widget appears.

Headings are an essential part of any webpage. They help divide chunks of text, give structure and help increase readability.

How to add a Heading widget

You need to create a new section, choose a grid layout, and click adding a new element. By adding a new element, you will see a popup including all the widgets available.

Simply choose the Heading widget from the Widget panel, then it'll be added to the layout's section where you want to add a Heading widget.

The Heading Widget contains 4 main settings tabs:

• General Settings

• Design Settings

• Responsive Settings

• Menu Assignment

I. Heading Widget - General Settings

When you click on the edit icon of the Heading element, the widget inline editor will open up from where you can access the addon settings and customize it to fit your needs.

1. General options

• Element Title: Enter the title of the heading element.

• Use link: Enable this option in case you would like to link the heading title with a link.

• Link: Add a link to the heading.

• Add Icon: Enable this option to add an icon to the heading.

• Icon: Choose an icon from the icon panel.

• Color: Adjust the color of the heading in both light and dark mode.

2. Widget Styles

In this part, you can configure typography settings for the heading to fit your preference including font family, alt font family, font weight, font size, letter spacing, line height, text-transform, and font style.

II. Design Settings

• Element Visibility: Choose to set the element to be visible on "Current and all linked pages", or on "Current menu items only".

• Animation: Choose an animation for the widget from the drop-down list.

• Max Width: Set the Max Width for the widget.

• Text Alignment: Set the alignment of the text of the widget.

• Text Alignment Breakpoint: Choose a breakpoint at which the text alignment will change.

• Background Type: Select the background type for the widget from None, Color, Image, Video or even add a Gradient.

• Custom Color: Choose whether you want to enable or disable the custom colors for the widget. If you enable it then you have the option to set Text Color, Link Color & Link Hover Color of the element’s content.

Spacing

Add margin and padding values over the row to improve its appearance on different devices.

Custom css

Here in the design settings, you can also add custom CSS to customize the design of the element.

III. Responsive Settings

Device Visibility: Choose your preference for hiding or showing the section on different screens like:

• Hide on Extra Small Devices

• Hide on Small Devices

• Hide on Medium Devices

• Hide on Large Devices

• Hide on Extra Large Devices

IV. Widget's Menu Assignment

Since Astroid framework 3.0.12, the menu assignment feature has been introduced, which is applied to widgets available in Astroid's widget library.

You can choose between On all pages, No pages, Only on the pages selected from the List.

• On all pages: the widget will be visible on all pages of your website

• No pages: the widget will be invisible on all pages

• Only on the pages selected: "Menu Selection" will show with all the menu items on. You can assign the widget by selecting the menu links that you want the widget associated with on what pages the widget appears.

Buttons on the web are there to act. A well-designed, good-looking button is always crucial in any web design. Buttons hold the key to page redirection, interaction, and data flow on web pages.

How to add a Button widget

You need to create a new section, choose a grid layout and click adding a new element. By adding a new element, you will see a popup including all the widgets available.

Simply choose the Button widget from the widget list, then it'll be added to the layout's section where you want to add a Button widget.

The Button Widget contains 4 main settings tabs:

• General Settings

• Design Settings

• Responsive Settings

• Menu Assignment

I. Button Widget - General Settings

1. Add New Button Items

The widget inline editor will open up when you click on the Button element in the layout. You can access the widget settings and customize the button to fit your needs.

In the general setting tab, click on "Add Item" button to add a new button item. Then start configuring each item.

• Button title: The button title is the name of the button.

• Link: Insert the URL you want to link to the button.

• Icon: Choose an icon for each button

• Styles: Choose a button style from the drop-down list.

• Outline Style: Enable to create a line that is drawn around the button element, outside the borders, to make the element "stand out".

• Button size: Choose a button size.

2. Button Widget Styles

• Enable Button Group: Enable this option if you'd like to group a series of buttons on a single line with the button group.

• Button size: Choose an option for the button size

• Styles: Choose a button style for buttons such as: Primary, secondary, success, danger, warning, info, light, dark, link, and text.

• Border Radius: Choose an option for the border-radius of buttons.

• Gutter: Select a padding between your buttons.

II. Design Settings

• Element Visibility: Choose to set the element to be visible on "Current and all linked pages", or on "Current menu items only".

• Animation: Choose an animation for the widget from the drop-down list.

• Max Width: Set the Max Width for the widget.

• Text Alignment: Set the alignment of the text of the widget.

• Text Alignment Breakpoint: Choose a breakpoint at which the text alignment will change.

• Background Type: Select the background type for the widget from None, Color, Image, Video or even add a Gradient.

• Custom Color: Choose whether you want to enable or disable the custom colors for the widget. If you enable it then you have the option to set Text Color, Link Color & Link Hover Color of the element’s content.

Spacing

Add margin and padding values over the row to improve its appearance on different devices.

Custom css

Here in the design settings, you can add custom CSS to customize the design of the element.

III. Responsive Settings

Device Visibility: Choose your preference for hiding or showing the section on different screens like:

• Hide on Extra Small Devices: Hide the widget on mobile phones.

• Hide on Small Devices: Hide the widget on tablets.

• Hide on Medium Devices: Hide the widget on laptops.

• Hide on Large Devices: Hide the widget on desktop.

• Hide on Extra Large Devices: Hide the widget on large screens.

IV. Widget's Menu Assignment

Since Astroid framework 3.0.12, the menu assignment feature has been introduced, which is applied to widgets available in Astroid's widget library.

You can choose between On all pages, No pages, Only on the pages selected from the List.

• On all pages: the widget will be visible on all pages of your website

• No pages: the widget will be invisible on all pages

• Only on the pages selected: "Menu Selection" will show with all the menu items on. You can assign the widget by selecting the menu links that you want the widget associated with on what pages the widget appears.

The Slideshow widget allows you to create and customize slide presentations or carousels directly within your WordPress website.

With this widget, you can easily showcase images, content, or any other media in a list of slides. It’s a popular feature for creating sliders, testimonials, product showcases, and more.

I. How to add a slideshow widget to the layout builder

You can add a slideshow widget to your layout builder by simply adding a new element in the layout and selecting the widget from the Astroid library.

Simply choose the Slideshow widget from the Widget list, then it'll be added to the layout's section where you want to add the widget.

II. Slideshow widget Settings

The Slideshow widget comes with 4 main settings tabs:

• General Settings

• Design Settings

• Responsive Settings

• Menu Assignment

1. General Settings

1.1 Add slideshow items

From the General Settings tab, you can click on Add Item button to add new slideshow items.

• Select image: Upload an image or select an image from your media library.

• Title: Input a title for the slide

• Meta: Add a meta description for the slide

• Description: Input the description for the slide

• Link: Add a link to a call-to-action button on the slide

• Link Text: Add the link text for the call-to-action button

• Link target: Choose a type of link target from the drop-down list of options

1.2. Slideshow Options

• Min height: Set the min-height of the slide images

• Effect type: Choose an effect type from the list.

• Autoplay: Enable this option to activate the autoplay feature.

• Interval: Set the interval time.

• Show Control: Enable this option to show the control

• Show indicator: Enable this option to show the slide indicator.

• Border radius: Select an option for the border-radius.

• Box Shadow: Choose a shadow type.

• Hover box shadow: Choose an option for hover box shadow.

1.3 Slideshow's Overlay Options

• Max-Width: Choose an option for the overlay's max-width

• Overlay Position: Select a position for the overlay

• Overlay Text Color: Set the color of the text on the overlay

• Overlay Color: Set the overlay color on both light and dark mode

• Overlay Padding: Choose an option for the overlay's padding

1.4 Slideshow's Title Options

In the Title options, you will see a bunch of options to configure the title of the slideshow including HTML element, font styles (font family, alt font family, font weight, font size, letter spacing, line height, font color, text transform, font style).

You can also adjust the margin-top, right, bottom, and left of the slideshow titles.

1.5 Slideshow's Meta Options

In the Meta options, you also see the same options as the Title options to configure the meta text on the slideshow including HTML element, font styles (font family, alt font family, font weight, font size, letter spacing, line height, font color, text transform, font style).

You can also adjust the margin-top, right, bottom, and left of the meta.

1.6 Slideshow's Content Options

In this part, you can configure style options for the content of the slideshow.

1.7 Slideshow's Readmore Options

In this part, you can see options related to Read more (Call-to-action button) on the slideshow.

• Style: Choose a style from the list for the button.

• Outline Style: Enable the option to outline an element, outside the border.

• Styles: Choose an option for the button size.

• Border radius: Set the border radius of the read more button.

2. Design Settings

• Element Visibility: Choose to set the element to be visible on "Current and all linked pages", or on "Current menu items only".

• Animation: Choose an animation for the widget.

• Max Width: Set the Max Width for the widget.

• Text Alignment: Set the alignment of the text of the widget.

• Background Type: Select the background type for the widget from None, Color, Image, Video or even add a Gradient.

• Custom Color: Choose whether you want to enable or disable the custom colors for the widget. If you enable it then you have the option to set Text Color, Link Color & Link Hover Color of the element’s content.

Spacing

Add margin and padding values over the row to improve its appearance on different devices.

Custom css

Here in the design settings, you can also add custom CSS to customize the design of the element.

3. Responsive Settings

Device Visibility: Choose your preference for hiding or showing the section on different screens like:

• Hide on Extra Small Devices

• Hide on Small Devices

• Hide on Medium Devices

• Hide on Large Devices

• Hide on Extra Large Devices

4. Widget's Menu Assignment

Since Astroid framework 3.0.12, the menu assignment feature has been introduced, which is applied to widgets available in Astroid's widget library.

You can choose between On all pages, No pages, Only on the pages selected from the List.

• On all pages: the widget will be visible on all pages of your website

• No pages: the widget will be invisible on all pages

• Only on the pages selected: "Menu Selection" will show with all the menu items on. You can assign the widget by selecting the menu links that you want the widget associated with on what pages the widget appears.

Grid is a stunning widget that allows you to add several photos and display them in a grid layout. You can easily customize the number of columns on devices.

How to add a Grid widget

You need to create a new section, choose a grid layout and click adding a new element. By adding a new element, you will see a popup including all the widgets available.

Simply choose the Grid widget from the Widget panel, and then it'll be added to the layout section where you want to add the widget.

The Grid widget consists of 4 main settings tabs:

• General Settings

• Design Settings

• Responsive Settings

• Menu Assignment

I. Grid's General Settings

1. General Options

In the general section, you can click "Add Item" to add a new grid item.

• Media type: Choose a media type between "Icon" or "Image".

• Select image: Select an image from the library.

• Title: Enter a title for the grid item.

• Meta: Input the meta info if you need it.

• Description: Input the description of the grid item.

• Link: Enter a link for the item.

Grid background options

You can enable the background image option for each grid item.

• Background image: Upload or select an image from the media library.

• Background repeat: Sets how background images are repeated horizontally and vertically, or no repeat.

• Background size: Choose the size of the background image.

• Background attachment: specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page).

• Background position: sets the initial position for each background image.

2. Grid Options

In this part, you can configure grid options on different devices. Switch between device icons to configure settings. Use Masonry: Enable this option, so you can present a grid gallery in a masonry style.

3. Card Options

This section allows you to configure the article card style.

• Card style: Choose a card style from the drop-down list

• Card size: choose a card size from the drop-down list

• Card border-radius: choose an option defining the radius of the testimonial card's corners

• Media position: Choose a position on which the articles' media will be displayed.

• Enable grid match: Enable this option to help grid items to match perfectly.

• Text color mode: Choose a color mode for the article's text.

4. Icon Options

This section contains options for icons of grid items if you set them up above.

5. Grid's Image Options

Here below you can find options to configure the image of each grid item.

• Choose layout: Choose an image layout that suits your needs.

• Image full-width: Enable the option if you want the image to display full width.

• Enable image cover: Enable or disable the image cover

• Border radius: Choose a type of border

• Hover effect: Choose a hover effect from the dropdown list.

• Hover transition: Choose a hover transition available in the list.

6. Title Options

Here you can adjust the style options of the title below each grid photo.

7. Grid's Meta options

8. Grid's Content Options

In this part, you can configure style options for the content of the grid.

9. Grid's Read More Options

In this part, you can see options related to Read More (Call-to-action button) on the slideshow.

• Style: Choose a style from the list for the button.

• Outline Style: Enable the option to outline an element, outside the border.

• Button Size: Choose an option for the button size.

• Border radius: Set the border radius of the read more button.

• Button margin-top: Set the margin-top of the button.

II. Design Settings

• Element Visibility: Choose to set the element to be visible on "Current and all linked pages", or on "Current menu items only".

• Animation: Choose an animation for the widget from the drop-down list.

• Max Width: Set the Max Width for the widget.

• Text Alignment: Set the alignment of the text of the widget.

• Text Alignment Breakpoint: Choose a breakpoint at which the text alignment will change.

• Background Type: Select the background type for the widget from None, Color, Image, Video or even add a Gradient.

• Custom Color: Choose whether you want to enable or disable the custom colors for the widget. If you enable it then you have the option to set Text Color, Link Color & Link Hover Color of the element’s content.

Spacing

Add margin and padding values over the row to improve its appearance on different devices.

Custom css

Here in the design settings, you can add custom CSS to customize the element.

III. Responsive Settings

Device Visibility: Choose your preference for hiding or showing the section on different screens like:

• Hide on Extra Small Devices: Enable to hide the widget on mobile phones.

• Hide on Small Devices: Enable to hide the widget on tablets.

• Hide on Medium Devices: Enable to hide the widget on laptops.

• Hide on Large Devices: Enable to hide the widget on desktops.

• Hide on Extra Large Devices: Enable to hide the widget on extra-large screens.

IV. Widget's Menu Assignment

Since Astroid framework 3.0.12, the menu assignment feature has been introduced, which is applied to widgets available in Astroid's widget library.

You can choose between On all pages, No pages, Only on the pages selected from the List.

• On all pages: the widget will be visible on all pages of your website

• No pages: the widget will be invisible on all pages

• Only on the pages selected: "Menu Selection" will show with all the menu items on. You can assign the widget by selecting the menu links that you want the widget associated with on what pages the widget appears.

Image group is a dynamic image gallery widget that creates a group of images and present them in columns.

How to add an image group widget

You need to create a new section, choose a grid layout and click adding a new element. By adding a new element, you will see a popup including all the widgets available.

Simply choose the Image Group widget from the Widget panel, and then it'll be added to the layout section where you want to add the widget.

The Image Group widget contains 4 different settings tabs:

• General Settings

• Design Settings

• Responsive Settings

• Menu Assignment

I. Image group general settings

General Options

You can click "Add Item" to add a new image item in this general part.

• Title: Input an admin title

• Select image: Choose an image from the library

• Use link: Enable this option if you want to link the image to an external or internal source.

• Link: Input the image link URL.

Image Group's Column Options

Here are options that allow you to configure the number of image columns on different devices. (2X large screen, X large screen, Desktop, laptop, tablet, and mobile phone).

Image group's slider options

In case you wish to display images as slider, just enable the option below. You can enable autoplay, navigation and dot navigation as well.

Image Group's Widget Style

Configure other style options of the widget including border radius, box shadow, hover effect, and hover transition.

Image group's Title Options

This part provides you with an option to enable or disable the image's title. Right below you can adjust the font style options for the image title also.

II. Design Settings

• Element Visibility: Choose to set the element to be visible on "Current and all linked pages", or on "Current menu items only".

• Animation: Choose an animation for the widget.

• Max Width: Set the Max Width for the widget.

• Text Alignment: Set the alignment of the text of the widget.

• Background Type: Select the background type for the widget from None, Color, Image, Video or even add a Gradient.

• Custom Color: Choose whether you want to enable or disable the custom colors for the widget. If you enable it then you have the option to set Text Color, Link Color & Link Hover Color of the element’s content.

Spacing

Add margin and padding values over the row to improve its appearance on different devices.

Custom css

Here in the design settings, you can also add custom CSS to customize the design of the element.

III. Responsive Settings

Device Visibility: Choose your preference for hiding or showing the section on different screens like:

• Hide on Extra Small Devices

• Hide on Small Devices

• Hide on Medium Devices

• Hide on Large Devices

• Hide on Extra Large Devices

IV. Widget's Menu Assignment

Since Astroid framework 3.0.12, the menu assignment feature has been introduced, which is applied to widgets available in Astroid's widget library.

You can choose between On all pages, No pages, Only on the pages selected from the List.

• On all pages: the widget will be visible on all pages of your website

• No pages: the widget will be invisible on all pages

• Only on the pages selected: "Menu Selection" will show with all the menu items on. You can assign the widget by selecting the menu links that you want the widget associated with on what pages the widget appears.

Forms allow website owners to collect information from visitors. Visitors enter this information into the form and submit it to the website owner. These submissions can either be sent to the website database or as an email.

There are many different styles of forms from simple ones embedded in a page to multi-step forms that change according to the information submitted by the user. You can even create animated forms to draw visitors' attention.

How to add a Form Builder widget

You need to create a new section, choose a grid layout and click adding a new element. By adding a new element, you will see a popup including all the widgets available.

Simply choose the Form Builder from the Widget panel, and then it'll be added to the layout section where you want to add the widget.

The Form Builder widget consists of 4 main settings tabs:

• General Settings

• Design Settings

• Responsive Settings

• Menu Assignment

I. Form Builder - General Settings

1. General Options

2. Success & Error Message Options

In this section, you have full control over the success and error messages, allowing you to customize them as needed.

• Form Submit Success Message: Craft your personalized success message for when a form is submitted successfully. This message will be showcased to users upon successful submission.

• Form Submit Failed Message: Tailor the text for situations when a form submission fails. This customized message will only be visible when a form fails to submit correctly.

3. Redirect, Security & Policy Options

• Enable Redirect: After a successful form submission, you can redirect users to a specific link by enabling this option.

• Redirect URL: Enter the desired redirect link here.

• Enable Captcha: Enhance security by enabling Captcha. Users must solve a Captcha puzzle before submitting the form. For Google reCAPTCHA, ensure the plugin is enabled in your backend and that site keys are correctly configured.

• Captcha Type: Select the Captcha type that best suits your needs.

4. Button Options

The Button Settings comes with all the options necessary to create a fully customized button.

• Styles: You can choose a desired button style from the given list.

• Outline style: Enable this option if you want to outline the button.

• Border radius: Choose your button shape from the list using this option.

• Button Size: There are numerous options you can choose from to define your button size.

• Button margin-top: Set an optimum distance above the button.

5. Form Options

In this part, Click the “+ Add” button to instantly add new form elements.

• Choose Field Type: Select the desired field type for your form item.

• Field Label: Enter the label for your form field.

• Field Name: Assign a unique name to the field for data reference.

• Field Placeholder: Provide optional placeholder text for the field.

• Is Required Field: Indicate whether this field is mandatory for form submission.

• Column large screen: Set the number of columns that the form displays on large devices.

• Column medium screen: Set the number of columns that the form displays on medium devices.

• Column small screen: Set the number of columns that the form displays on small devices (tablets).

• Column x-small screen: Set the number of columns that the form displays on mobile phones.

II. Form Builder - Design Settings

• Element Visibility: Choose to set the element to be visible on "Current and all linked pages", or on "Current menu items only".

• Animation: Choose an animation for the widget.

• Max Width: Set the Max Width for the widget.

• Text Alignment: Set the alignment of the text of the widget.

• Background Type: Select the background type for the widget from None, Color, Image, Video or even add a Gradient.

• Custom Color: Choose whether you want to enable or disable the custom colors for the widget. If you enable it then you have the option to set Text Color, Link Color & Link Hover Color of the element’s content.

Spacing

Add margin and padding values over the row to improve its appearance on different devices.

Custom css

Here in the design settings, you can also add custom CSS to customize the design of the element.

III. Form Builder - Responsive Settings

Device Visibility: Choose your preference for hiding or showing the section on different screens like:

• Hide on Extra Small Devices: Enable to hide the widget on mobile phones.

• Hide on Small Devices: Enable to hide the widget on tablets.

• Hide on Medium Devices: Enable to hide the widget on laptops.

• Hide on Large Devices: Enable to hide the widget on desktops.

• Hide on Extra Large Devices: Enable to hide the widget on extra-large screens.

IV. Widget's Menu Assignment

Menu Assignment is created to assign the widget to pages on your website. You can choose between On all pages, No pages, Only on the pages selected from the List.

• On all pages: the widget will be visible on all pages of your website

• No pages: the widget will be invisible on all pages

• Only on the pages selected: "Menu Selection" will show with all the menu items on. You can assign the widget by selecting the menu links that you want the widget associated with on what pages the widget appears.

What is the Testimonial widget?

The Testimonial widget lets you easily add testimonial sections to your website. You can use these sections to showcase feedback, reviews, or quotes from clients, customers, or users.

Additionally, the testimonial widget includes plenty of options to customize the appearance of the testimonial section, including the layout, style, and content, to match your website’s design and branding.

How to add a Testimonial widget

You need to create a new section, choose a grid layout and click adding a new element. By adding a new element, you will see a popup including all the widgets available.

Simply choose the Testimonials from the Widget list, then it'll be added to the layout's section where you want to add a Testimonial widget.

The Testimonials Widget consists of 4 main settings tabs:

• General Settings

• Design Settings

• Responsive Settings

• Menu Assignment

I. Testimonials General Settings

In the general settings, you will find many options for Testimonials items, Grid options, Card options, Slide options, Designation options, Name options, and Message options.

1. General

Here you can click on Add Item to add a new testimonial item.

Click "New Item" to add a new Testimonial item. You can input a name, designation, link, avatar image, message, and overlay text color.

2. Grid Options

In this part, you can adjust the number of columns of testimonials on different devices. (2X large screen, X large screen, Desktop, laptop, tablet, and mobile phone).

Use masonry: enable this option and you can effortlessly show testimonials in a masonry grid layout.

3. Card Options

This section allows you to configure the testimonials card style.

• Card style: Choose a card style from the drop-down list

• Card size: choose a card size from the drop-down list

• Card border-radius: choose an option defining the radius of the testimonial card's corners

• Enable grid match:

• Hover transition: Choose a hover transition

• Box shadow: Choose a box-shadow option

• Hover box-shadow: Choose a hover box-shadow

4. Slider Options

• Display article as a slider: Enable this option to show testimonials in the slider.

• Autoplay: Enable the option to make the slider automatically play.

• Navigation: Enable to show the navigation icons prev and next.

• Dot navigation: Enable this option to display the dot navigation.

5. Avatar Position

In this part, you can find options to configure the avatar image's position.

• Avatar position: Choose a position for the avatar

• Max width: Set the max width of the avatar

• Border options: Set the border size

• Boder style: choose an option for the border style from the list

• Border color: You can set the border color in light and dark mode

• Border radius: Set the border radius of the avatar

• Hover effect: Choose a hover effect when hovering the avatar image

• Hover transition: Choose a hover transition from the list

6. Name Options

In this part, you can see the customer's name-related options which allow you to adjust the name's style such as: font family, font weight, font size, letter spacing, line height, font color and so on.

7. Designation Options

This part allows you to adjust the style of testimonial designation.

8. Message Options

Here are options to configure the style of the testimonial messages.

II. Design Settings

• Element Visibility: Choose to set the element to be visible on "Current and all linked pages", or on "Current menu items only".

• Animation: Choose an animation for the widget from the drop-down list.

• Max Width: Set the Max Width for the widget.

• Max Width Breakpoint: Define the device width from which the element's max-width will apply.

• Block Alignment: Define the alignment in case the container exceeds the element's max-width.

• Block Alignment Breakpoint: Define the device width from which the alignment will apply.

• Text Alignment: Set the alignment of the text of the widget.

• Text Alignment Breakpoint: Choose a breakpoint at which the text alignment will change.

• Background Type: Select the background type for the widget from None, Color, Image, Video or even add a Gradient.

• Custom Color: Choose whether you want to enable or disable the custom colors for the widget. If you enable it then you have the option to set Text Color, Link Color & Link Hover Color of the element’s content.

Spacing

Add margin and padding values over the row to improve its appearance on different devices.

Custom css

Here in the design settings, you can also add custom CSS to customize the design of the element.

III. Responsive Settings

Device Visibility: Choose your preference for hiding or showing the section on different screens like:

• Hide on Extra Small Devices: Enable to hide the widget on mobile phones.

• Hide on Small Devices: Enable to hide the widget on tablets.

• Hide on Medium Devices: Enable to hide the widget on laptops.

• Hide on Large Devices: Enable to hide the widget on desktops.

• Hide on Extra Large Devices: Enable to hide the widget on extra-large screens.

IV. Widget's Menu Assignment

Since Astroid framework 3.0.12, the menu assignment feature has been introduced, which is applied to widgets available in Astroid's widget library.

You can choose between On all pages, No pages, Only on the pages selected from the List.

• On all pages: the widget will be visible on all pages of your website

• No pages: the widget will be invisible on all pages

• Only on the pages selected: "Menu Selection" will show with all the menu items on. You can assign the widget by selecting the menu links that you want the widget associated with on what pages the widget appears.

What is the Article widget?

The Article widget allows you to display a list of blog articles on your website. It automatically pulls in articles from the Joomla database and presents them in a specified layout and format.

The Article widget offers plenty of customization options allowing you to choose how your articles are displayed. You can customize the appearance of each article, including the title, featured image, and more.

How to add an Article widget

You need to create a new section, choose a grid layout and click adding a new element. By adding a new element, you will see a popup including all the widgets available.

Simply choose the Article widget from the Widget panel, and then it'll be added to the layout section where you want to add the widget.

The Articles widget consists of 4 main settings tabs:

• General Settings

• Design Settings

• Responsive Settings

• Menu Assignment

I. Articles General Settings

In the general setting tab, you will find general options, grid options, card options, image options, title options, info block options, content options, slider options and read more options. Now let's take a look at the detailed options.

1. General Options

In the general options, you can find some below options:

• Element Title: Enter a title of the element

• Select categories: Choose specific categories of the articles you'd like to display.

• Limit: Set the number of articles displayed in the section.

• Ordering: Choose an ordering option by which articles will be displayed.

2. Grid Options

3. Card Options

This section allows you to configure the article's card style.

• Card style: Choose a card style from the drop-down list

• Card size: choose a card size from the drop-down list

• Card border-radius: choose an option defining the radius of the testimonial card's corners

• Media position: Choose a position on which the articles' media will be displayed.

• Enable grid match:

• Text color mode: Choose a color mode for the article's text

4. Image Options

This part shows some options for the article images:

• Choose layout: Choose an option between Classic and Image Overlay.

• Thumbnail Only: This option allows you to display articles' thumbnails only without any other additional info.

• Border radius: Set the border radius of the article images

• Enable Image effect: Enable this option to have an effect on the article's image.

• Enable image cover: Enable this option if you wish to have an image cover.

5. Title Options

This part allows you to adjust the style of articles' titles.

6. Info Block Options

• Info items displayed before the title: Select info items that you want to display before the title.

• Info item display after the title: Select info items that you want to display after the title.

• Info item display after the intro text: Select info items that you want to display after the intro text.

7. Content Options

In this part, you can enable intro text and set the limit on intro text characters, as well as adjust other style options of the intro text.

8. Slider Options

In this slider part, you can see options to configure if you would like to display articles as a slider.

• Display article as a slider: Enable this option to show testimonials in the slider.

• Autoplay: Enable the option to make the slider automatically play.

• Navigation: Enable to show the navigation icons prev and next.

• Dot navigation: Enable this option to display the dot navigation.

9. Read More Options

Do you want to display the read more button for each article? This part is made for you.

• Show readmore: Enable or disable the read more button for the articles.

• Button Style: Choose a style for the read more button from the prebuilt list of styles.

• Outline style: Enable the outline style

• Style: Choose a style for the read more button size.

• Border radius: Set the border radius of the read more button.

II. Design Settings

• Element Visibility: Choose to set the element to be visible on "Current and all linked pages", or on "Current menu items only".

• Animation: Choose an animation for the widget.

• Max Width: Set the Max Width for the widget.

• Text Alignment: Set the alignment of the text of the widget.

• Background Type: Select the background type for the widget from None, Color, Image, Video or even add a Gradient.

• Custom Color: Choose whether you want to enable or disable the custom colors for the widget. If you enable it then you have the option to set Text Color, Link Color & Link Hover Color of the element’s content.

Spacing

Add margin and padding values over the row to improve its appearance on different devices.

Custom css

Here in the design settings, you can also add custom CSS to customize the design of the element.

III. Responsive Settings

Device Visibility: Choose your preference for hiding or showing the section on different screens like:

• Hide on Extra Small Devices: Enable to hide the widget on mobile phones.

• Hide on Small Devices: Enable to hide the widget on tablets.

• Hide on Medium Devices: Enable to hide the widget on laptops.

• Hide on Large Devices: Enable to hide the widget on desktops.

• Hide on Extra Large Devices: Enable to hide the widget on extra-large screens.