Now display the article created in Joomla easily using the Joomla Article element in JD Builder. This element displays only the listing view of the articles with 3 different layouts such as Grid, List & List Alternative.
All the options related to element styling are under the main General tab.
In the Basic tab we have the following options:
- Admin Label- Add a custom label to the element to clearly identify it in the page back-end layout.
- Category- Choose the categories of whose articles you would like to show using the element. These are the same categories created in Joomla for the articles.
- Include Sub Category- If there are any sub categories of the parent category then toggle to include their articles as well.
- Article Count- Set a limit to the number of articles that will be displayed by the element.
- Featured Articles- If there are any featured articles then include them to the list/show only the featured articles of that category.
- Article Ordering- Set the ordering of the articles, sort them as per Title, Hits, Created Date, Random or Article Order as listed in Joomla.
- Ordering Direction- You can even set the articles ordering direction either ascending or descending.
Then we have the Layout tab that has these given options:
- Layout- Set the layout of the element Grid view, List view or List Alternative View.
- Columns- If Grid view is selected then choose the number of columns between 1-6.
- Show Thumbnail- Choose whether to show the articles thumbnail or not.
- Show Intro Text- Choose to show/hide the Intro text in the layout.
- Intro Character Limit- If you enable the show the intro text then set its characters limit. Maximum limit is 1000
Next we have the Meta tab to style the articles meta data content like date, author name & others. It has the following options:
- Meta Data- Select the meta content for the articles like hits, author name, the dates like created, published & others.
- Date Format- Choose in which format your created, published, modified dates will be seen. To see the list of formats available click on the Help icon next the field label.
- Show Meta Icons- Choose to show the icons along with the meta content added.
- Meta Styling Options- If you choose to display the meta content then style the icons & content here.
Add the common setting like the read more & view more buttons for the articles under Common Settings tab, that has following options:
- Read More Button Text- Add the article’s read more text here.
- Apply Link On- Choose where to apply the link on title, thumbnail or both.
- View More Button Text- Add the list’s read more/view more text here.
- View More Link- Choose where to redirect the view more link. If you choose None then the button won’t be displayed.
Style all the articles title under Title Styling tab, that has these options:
- HTML Tag- Set the articles title tag here.
- Title Colors- Set the title’s color & on hover(if link is applied).
- Typography- Set the title’s typography here.
- Margin- Add title margin with respect to other content around it.
Style the intro content under Content Styling tab, that has these options:
- Color- Set the intro text’s color.
- Typography- Set the content’s typography here.
- Margin- Add the content margin with respect to other content around it.
If you have added any read more text then style the button under Read More Styling tab, that has these options:
- Button Type- Choose the type for the Read more button.
- Button Size- Set the size of the button small, medium or large.
- Alignment- Set the alignment of the button.
- Button Animation- Set the button animation when on hover.
- Button Icon Styling options- If you have added an icon along with the button then style the icon accordingly using the options given.
- Button Styling options- Style the button & its text under button styling options.
- Button Hover Styling options- You can even style the button when on hover under Hover Styling options.
- Button Border Styling options- Add & Style the button’s border along with setting a box shadow to it under Button border styling options.
If you have added any link on the view more button then style the button under View More Styling tab that has these options:
- Button Type- Choose the type for the View more button.
- Button Size- Set the size of the button small, medium or large.
- Alignment- Set the alignment of the button.
- Button Animation- Set the button animation when on hover.
- Button Icon Styling options- If you have added an icon along with the button then style the icon accordingly using the options given.
- Button Styling options- Style the View more button & its text under button styling options.
- Button Hover Styling options- You can even style the button when on hover under Hover Styling options.
- Button Border Styling options- Add & Style the button’s border along with setting a box shadow to it under Button border styling options.