Astroid Framework
HomeDownloadReport an IssueVideo Tutorials
English
English
  • What is Astroid
  • Get Started
    • Introduction
    • Technical Requirements
    • Installation
    • Layout Manager for Dummies
    • Creating a basic Astroid Template
  • Astroid Pro
    • Using the License Key
    • Dynamic Content
  • Basic Settings
    • Preloader
    • Favicon
    • Back to Top
    • Wide Vs Box Layout
    • Smooth Scroll
    • Color Mode
    • Container Background Mode
    • Bootstrap Settings
  • Header
    • Header
      • Transparent Header
      • Site Menu Method
    • Logo Options
    • Sticky Header
    • Off-Canvas menu
      • Customize the Offcanvas icons
    • Animation
  • Color
    • Body Color
    • Header Color
    • Sticky Header Color
    • Main Menu Color
    • Dropdown Menu Color
    • Off-Canvas Colors
  • Layout Settings
    • Section Settings
    • Row Settings
    • Element Settings
    • Column Settings
    • Layout Configuration on devices
    • Sub Layouts
  • Astroid Widgets
    • Divider Widget
    • Navigation Widget
    • Icons Widget
    • Button Widget
    • Heading Widget
    • Text Widget
    • Image Widget
    • Slideshow Widget
    • Image Group Widget
    • Testimonials Widget
    • Articles Widget
    • Accordion Widget
    • Grid Widget
    • Form Builder Widget
    • Map Widget
    • List Widget
    • Video Widget
    • Video Button Widget
    • Image Carousel
    • Countdown
    • Raw HTML Widget
    • Module Position
  • Astroid Widgets Pro
    • CodePen Widget
    • Hover Motion Gallery
    • Article Listing
    • Listing Pro
    • Count Down widget
  • Image Motion Cursor
  • Typography
    • Body Typography
    • Menu Typography
    • H1-H6 Typography
    • Drop Down Menu Typography
    • Custom Typography
    • How to use local font
  • Article Blog
    • Article Layout Builder
    • Article Listing Options
    • Single Article Options
    • Blog Options for Single Article view
    • Blog Options for Articles List View
    • Open Graph
    • Custom type comment for Blogs/Articles
  • Social Profile
    • Social Profile
  • Custom Code
    • Tracking Code
    • Before </head>
    • Before </body>
    • Custom Css
    • Custom JS
  • Miscellaneous
    • Lazy Load Images
    • Coming Soon
    • Error Page
    • Copyright
    • Contact Information
    • Minify JS/CSS/HTML
  • Theming
    • Theming
  • Menu Item Settings
    • Blog Options
    • Banner Options
    • Open Graph Options
    • How to manage the Blog Options for Articles List View
  • Mega Menu
    • Mega Menu
  • MORE
    • Preset Profiles
    • Astroid Layout Module
    • Astroid Captcha
  • Developers
    • Get Started
    • Build or Override a Widget
Powered by GitBook

© Astroid Framework 2025.

On this page
  • How to create an Article's layout
  • How to use Article Layout?
  • How to use Widget in Article Layout?
  • Some great Examples of Article Layout.

Was this helpful?

Export as PDF
  1. Article Blog

Article Layout Builder

PreviousHow to use local fontNextArticle Listing Options

Last updated 2 months ago

Was this helpful?

This is a special function only available on Astroid Framework. It is a function that allows Admins to define the display layout for detailed articles of Joomla Content.

How to create an Article's layout

To create sub-layouts, go to:

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

  2. Article/Blog >> Article Layout Builder

  3. Click "New Layout"

How to use Article Layout?

To use Article Layout.

  1. Go to Administrator >> Content >> Categories >> Edit a category

  2. Switch to Single Blog Options

  3. Select a Layout > Select a template & select an article-layout

  4. Save category.

Go to Front-end >> Your Joomla Blog >> Click on the article in the category you edited to view detail. And you can see how it works.

How to use Widget in Article Layout?

As you know, Astroid has a rich Widget system that allows you to create unique styles for your website without any coding knowledge. What’s great is that you can use this Widget system on Article Layout as well. So let’s find out how you can use Widgets to build your articles.

Create and set default values

Like Layout Builder to create Widget in Article Layout you follow these steps.

  1. In layout builder >> Click "Add Element" >> Choose one of available widgets

  2. In the modal you can set default values of Widget. These values can be override on each article.

Override values in the article

You have finished building the layout for your article. The next step is to change the Widget data for each of your articles. If you use the default value, you do not need to change anything in the article. The system will display the default value as you have set in the Article Layout Builder. But if you need to change the widget data in each article to ensure uniqueness and uniqueness. It is very easy, just follow the steps below.

  1. Go to Administrator >> Content >> Articles >> Edit or Create an article

  2. Find Widgets Tab, All widgets will be listed here

  3. Click to edit a Widget. Now you can override the default values of Widget on the modal.

Some great Examples of Article Layout.

An example for Tour Travel:

An example for Photography:

https://demo.astroidframe.work/article-layouts/tours-example
https://demo.astroidframe.work/article-layouts/photography-example
Click "New Layout" to start
You can click Add Section to build your manual layout or Click "Load Default Settings" to load default setting.
Add Section >> Add Element you can build your article layout with article and widget blocks
To save time. Click to "Load Default Settings". I got default setting from Astroid.
Edit your layout and save it
You can see your layout here
Select your layout and save category
Select a Widget and configure the default values