Articles

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.

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 from the Widget panel, and then it'll be added to the layout section where you want to add the widget.

The Articles widget settings come with 4 different 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 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.
Border radius: Set the border radius of the article images
Enable image cover: Enable this option if you wish to have an image cover.
Min height: If you enable the image cover, you will see the min-height option to set the min-height of the image cover.

5. Title Options

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

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.

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

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.