Joomla Articles (PRO)

Joomla Articles element allows you to display Articles from a Joomla Category in a Blog style. You can select the category, how many Articles to show and many other settings, allowing you to create a Category Blog like page easily. Element available on Quix Pro only.

To use this element, please follow this steps:

  1. After adding a Section and Column, click the Plus icon to open the available elements.
  2. Click Joomla Articles and it will be added to your page and its settings window will automatically open so you can start configuring it.

On it's Settings pop-up you will find four tabs, General, Options, Styles and Advanced. On each tab you will find the different options available to modify and customize the element.

General Tab

  • Articles Options - General settings for Joomla Articles.
    • Select Category - Here you can select the category from which you want to display articles on your page.
    • Child Category Articles - Enable this option if you want to display articles from child categories. If set to No, only articles from the parent category will show.
    • No of Articles - Set the number of articles you want to display.
    • Featured Articles - Here you can select how the categories Featured Articles are displayed. You can choose Show (featured articles will be shown), Hide (featured articles will not be shown) or Only Featured (only featured articles will be shown).
    • Article Ordering - Set how the displayed are ordered. You can choose Latest (articles will be shown according to the publishing date), Popular (articles will be ordered according to the views they have), Ordering (the articles will be shown according to the order they have on the Article manager) or Title (articles will be ordered alphabetically).
    • Ordering Direction - Here you can choose whether the order of the Articles will be Ascending or Descending (will change order from A-Z to Z-A, or from most recent to the oldest article).
  • Layout - Set the layout you want the articles to be displayed in.
    • Layout - You can choose between List, Group, Decks or Columns.

Options Tab

  • Visual Options - Here you can select what information will be shown on the articles.
    • Link Title - Enable if you want the title to link to the article.
    • Show Image - Enable to show the Intro image set on the article.
    • Image Size - If Show Image is enabled, you will be able to set the size for the image here.
    • Show introtext - Enable this option to show Intro Text for the articles.
    • Character Limit - If Show Introtext is enabled, you will be able to limit how many characters are shown.
    • Readmore Button - Enable this option to show a Read More button.
    • Readmore Style - You can select the type of Buton you want to display from the available options, this will display it using predefined styles. You can customize this more with the options available on the Styles tab.
    • Readmore Size - Set the size for the Read More button.
    • Readmore Text - Set the text to display on the Read More button, you can customize it or use this option to translate the text.
    • Button Icon - Enable this option to display an icon on the button.
    • Icon - Here you can select an Icon to show on your button next to the text. Click on the field and the icon manager will open.
    • Size - After selecting the icon, the option to set the size will appear.
    • Color - After selecting the icon, you will be able to set the color of the icon.
    • Icon Placement - Select whether the icon should be at the left or right side of the text.
    • Show Date - Enable this option to show the article's publishing date.
    • Date Format - Set the format for the date.
    • Show Meta Icons - Enabling this option will show icons next to the meta information.
    • Show Category Name - Enable this option to show the article's category.
    • Show Author - Enable this option to show the article's author.

Styles Tab

The Styles Tab will help you style the Joomla Articles element. You will find five different options, Common, Title, Meta, Content and Button, each with its particular settings.

  • Common - This settings will apply to the articles being displayed.
    • Text Alignment - Select the alignment of the content, you can choose between Left, Center, Right and Justified.
    • Margin - This margin settings allow you set the margins for article so you can control the spacing between them.
    • Padding - Use this setting to increase the space between the article's content and its container.
    • Background Color - Here you can select the color for the article's background.
    • Normal/Hover - Swtiching between the Normal and Hover options, you will be able to configure different backgrounds for each state.
    • Border Type - Use this setting to define the type of border you want for the Button, there are five options: None, Solid, Double, Dotted and Dashed.
    • Border Width - You can configure the width of the border.
    • Color - Select the color of the border.
    • Border Radius - Use this option to set the radius of the Article's corners to give them a rounded look.
    • Box Shadow - Using a shadow on the articles can give an extra touch to your design. You will be able to configure the Color, Horizontal and Vertical offsets, Blur, Spread and the Position of the shadow for the articles.
  • Title - Styling options for the titles.
    • Text Color - Set the color for the title.
    • Text Hover Color - Set the color for the title when hovered.
    • Margin - This setting will allow you to set space between the title and the content around it.
    • Font - You will be able to select the font you want to use from thousands of available Google Fonts.
    • Weight - You will be able to set the weight for the font. After choosing a font, the available values will get updated. The higher the number, the bolder the font will be.
    • Size - You can easily set the size for the font by dragging the selector left/right, or you can directly input the value you want on the number field.
    • Transform - You can easily transform how the text is shown, you have four options, None (displays the text as it is), Uppercase (changes all letters in the text to uppercase), Lowercase (changes all letters in the text to lowercase), Capitalize (changes the first letter of each word to uppercase).
    • Style - You can select the font style between the three options available, Normal, Italic or Oblique.
    • Decoration - You can decorate the font selecting one of the four available options, None, Overline, LineThrough and Underline.
    • Line Height - You will be able to set the line height of the text, a higher number will mean more space between each line.
    • Letter Spacing - You will be able to set the letter spacing in each word, a higher number will mean more space between each letter.
    • Text Shadow - You will be able to add a shadow behind your text, this is specially useful when the text gets lost with the background, it can also give a nice 3D effect.
  • Meta - Style options for the meta information.
    • Text Color - Set the color for the meta texts.
    • Icon Color - Set the color for the meta icons.
    • Icon Size - Set the size of the meta icons.
    • Spacing - This controls the space bewtten each meta data, increasing it will increase the space between them.
    • Margin - This setting will allow you to set space between the meta data and the content around it.
    • Font - You will be able to select the font you want to use from thousands of available Google Fonts.
    • Weight - You will be able to set the weight for the font. After choosing a font, the available values will get updated. The higher the number, the bolder the font will be.
    • Size - You can easily set the size for the font by dragging the selector left/right, or you can directly input the value you want on the number field.
    • Transform - You can easily transform how the text is shown, you have four options, None (displays the text as it is), Uppercase (changes all letters in the text to uppercase), Lowercase (changes all letters in the text to lowercase), Capitalize (changes the first letter of each word to uppercase).
    • Style - You can select the font style between the three options available, Normal, Italic or Oblique.
    • Decoration - You can decorate the font selecting one of the four available options, None, Overline, LineThrough and Underline.
    • Line Height - You will be able to set the line height of the text, a higher number will mean more space between each line.
    • Letter Spacing - You will be able to set the letter spacing in each word, a higher number will mean more space between each letter.
    • Text Shadow - You will be able to add a shadow behind your text, this is specially useful when the text gets lost with the background, it can also give a nice 3D effect.
  • Content - Style settings for the Intro Text.
    • Text Color - Set the color for the Intro Text.
    • Margin - This setting will allow you to set space between the intro text and the content around it.
    • Font - You will be able to select the font you want to use from thousands of available Google Fonts.
    • Weight - You will be able to set the weight for the font. After choosing a font, the available values will get updated. The higher the number, the bolder the font will be.
    • Size - You can easily set the size for the font by dragging the selector left/right, or you can directly input the value you want on the number field.
    • Transform - You can easily transform how the text is shown, you have four options, None (displays the text as it is), Uppercase (changes all letters in the text to uppercase), Lowercase (changes all letters in the text to lowercase), Capitalize (changes the first letter of each word to uppercase).
    • Style - You can select the font style between the three options available, Normal, Italic or Oblique.
    • Decoration - You can decorate the font selecting one of the four available options, None, Overline, LineThrough and Underline.
    • Line Height - You will be able to set the line height of the text, a higher number will mean more space between each line.
    • Letter Spacing - You will be able to set the letter spacing in each word, a higher number will mean more space between each letter.
    • Text Shadow - You will be able to add a shadow behind your text, this is specially useful when the text gets lost with the background, it can also give a nice 3D effect.
  • Button - Style settings for the Read More button.
    • Button Color - Set the color for the Read More text.
    • Text Hover Color - Set the color for the Read More text when hovered.
    • Icon Hover Color - Set the color for the icon when hovered.
    • Icon Spacing - Set the distance bewteen the icon and the Read More text.
    • Normal/Hover - Swtiching between the Normal and Hover options, you will be able to configure different backgrounds for each state.
    • Border Type - Use this setting to define the type of border you want for the Button, there are five options: None, Solid, Double, Dotted and Dashed.
    • Border Width - You can configure the width of the border.
    • Color - You can use this setting to increase the space between the border of the button and the text, making the button bigger.
    • Border Radius - Use this option to set the radius of the button's corners to give them a rounded look.
    • Box Shadow - Using a shadow on the button can give an extra touch to your design. You will be able to configure the Color, Horizontal and Vertical offsets, Blur, Spread and the Position of the shadow for the Read More buttons.
    • Padding - You can use this setting to increase the space between the border of the button and the text, making the button bigger.
    • Font - You will be able to select the font you want to use from thousands of available Google Fonts.
    • Weight - You will be able to set the weight for the font. After choosing a font, the available values will get updated. The higher the number, the bolder the font will be.
    • Size - You can easily set the size for the font by dragging the selector left/right, or you can directly input the value you want on the number field.
    • Transform - You can easily transform how the text is shown, you have four options, None (displays the text as it is), Uppercase (changes all letters in the text to uppercase), Lowercase (changes all letters in the text to lowercase), Capitalize (changes the first letter of each word to uppercase).
    • Style - You can select the font style between the three options available, Normal, Italic or Oblique.
    • Decoration - You can decorate the font selecting one of the four available options, None, Overline, LineThrough and Underline.
    • Line Height - You will be able to set the line height of the text, a higher number will mean more space between each line.
    • Letter Spacing - You will be able to set the letter spacing in each word, a higher number will mean more space between each letter.
    • Text Shadow - You will be able to add a shadow behind your text, this is specially useful when the text gets lost with the background, it can also give a nice 3D effect.
    • Normal/Hover - Swtiching between the Normal and Hover options, you will be able to configure different backgrounds for each state.
    • Background Type - Here you can select is you want a solid background or a gradient background.
    • Color - Here you can select the color for the background. If a gradient background is selected on the Background Type, a second color picker will appear.
    • Gradient Type - If a gradient background is selected on the Background Type, you will be able to select if the gradient should be Linear or Radial.
    • Gradient Direction - If a gradient background is selected on the Background Type, you will be able to set the gradient direction.
    • Start Position - If a gradient background is selected on the Background Type, you will be able to set the gradient starting position.
    • End Position - If a gradient background is selected on the Background Type, you will be able to set the gradient ending position.

Advanced Tab

As it's name says, here you can find the Advanced settings for the element. You can choose to edit them or leave them the way they are depending on your needs.

  • Element Style - Here you will find the settings for Margin, Padding and Z-Index values of the element.
    • Margin - Margins allow you to add space around the element, outside of its container.
    • Padding - Paddings allow you to add space around the element, inside of its container.
    • Z-Index - When two items overlap, the Z-Index value control which one appears on top of the other. An element with a Z-Index of 0 will appear behind an element with a Z-Index of 1.
  • Background - Here you will be able to configure the Background for the element.
    • Normal/Hover - Swtiching between the Normal and Hover options, you will be able to configure different backgrounds for each state.
    • Background Type - Here you can select if you want a solid background or a gradient background.
    • Color - Here you can select the color for the background. If a gradient background is selected on the Background Type, a second color picker will appear.
    • Gradient Type - If a gradient background is selected on the Background Type, you will be able to select if the gradient should be Linear or Radial.
    • Gradient Direction - If a gradient background is selected on the Background Type, you will be able to set the gradient direction.
    • Start Position - If a gradient background is selected on the Background Type, you will be able to set the gradient starting position.
    • End Position - If a gradient background is selected on the Background Type, you will be able to set the gradient ending position.
    • Image - If you would like to use an image instead of a color for the background, you can click here to open the Media Manager and select the image you want to use.
  • Border & Box Shadow - You wil be able to configure Borders and Shadows for the element.
    • Normal/Hover - Swtiching between the Normal and Hover options, you will be able to configure different borders and shadows for each state.
    • Border Type - Use this setting to define the type of border you want for the element, there are five options: None, Solid, Double, Dotted and Dashed.
    • Border Width - If a Border Type other than None is selected, this option will appear so you can configure the width of the border line for the element.
    • Border Radius - Use this option to set the radius of the corners to give them a rounded look.
    • Box Shadow - Using a shadow on your element can give an extra touch to your design. You will be able to configure the Color, Horizontal and Vertical offsets, Blur, Spread and the Position of the shadow.
  • Animation - If you want to give your element movement, here is the place to do it.
    • Entrance Animation - Select the animation you want from the options avaliable on the dropdown.
    • Animation Repeat - You can enable this option if you want the animation to repeat everytime the element is visible on the screen. The default value is No, which only plays the animation the first time the element is viewed.
    • Animation Delay - You can set a delay from the moment the element is on the screen to the moment the animation starts. Specially useful if you want to create a cascading effect.
  • Custom CSS (PRO Only) - If you require a bit more customization, you can add your custom CSS here.
    • CSS Code - You can write your own CSS code here that will affect the element. No style tags required.
  • Identifier - Here you can find and customize the unique information for the element.
    • CSS ID - The unique identifier assigned to the element. You can change it, specially to make it easier to work with anchor links, but it always has to be unique to avoid issues.
    • CSS Class - If you would like to write CSS code on an external CSS file to customize the element, you can add an specific CSS Class to identify it so the changes are only applied to the element with the class.
    • Access Control - You will find all the User Groups you have configured on Joomla here. This option will allow you to configure who can view and interact with the access and with what permissions to the page.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us