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
  • What is the Article widget?
  • How to add an Article widget
  • I. Articles General Settings
  • II. Design Settings
  • III. Responsive Settings
  • IV. Widget's Menu Assignment

Was this helpful?

Export as PDF
  1. Astroid Widgets

Articles Widget

PreviousTestimonials WidgetNextAccordion Widget

Last updated 2 months ago

Was this helpful?

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.

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.

Select the widget from the widget panel.
Article widget's general options
Grid Options
Card Options
Article title options
Article info block options
Article content options
Article slider options
Article read more options
Design setting
Spacing options
Element's custom css.
Responsive settings
Menu assignment
Assign the widget to specific pages