Articles Widget
Last updated
Last updated
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 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
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.
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.
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
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 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.
Min height: If you enable the image cover, you will see the min-height option to set the min-height of the image cover.
Height: Set the default image height.
Overlay color: Set the overlay color of the article images.
This part allows you to adjust the style of articles' titles.
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.
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.
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.
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.
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.
Add margin and padding values over the row to improve its appearance on different devices.
Here in the design settings, you can also add custom CSS to customize the design of the element.
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.
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.
