Compatibility:

WebSite X5 Evo and Pro

On the Blog main page, as well as in the gallery created through the Article List Object, articles are presented through cards. The purpose of these cards, automatically generated by WebSite X5, is to attract visitors' attention and invite them to read the full articles.


In this guide, we will therefore see when they are used, how they are generated, and how you can intervene to customize their composition and graphic style.


What are Article Cards

A card is simply a box that summarizes some basic information about an article and, in most cases, provides a button to go to the page with the complete article. They are equivalent to a business card, and the Blog's Home Page can contain many of them.


 

They serve to briefly introduce articles to users, allowing them to start forming an idea of what might interest them and then decide which content to read.


When they are created

Article cards are automatically created by the software when using:

  • The Blog, as mentioned, the Blog's Home Page presents a summary of articles, and each article is displayed through a card.
  • The Article List Object, useful for presenting only a selected group of articles from those intended for the Blog on a page of the site.

In all these cases, the identified articles are shown through specific cards.


How They Are composed

The cards are composed of the following elements:

  • Background: A colored or transparent background to which a border can be applied.
  • Cover: The image set as the article’s cover.
  • Contents: The textual part of the card, which includes all the following elements
    • Title
    • Description
    • Details
    • "Read" button


You can, of course, intervene on the composition of the cards and decide that one or more of these elements are not included:

  • Open the settings window (you can do this by selecting the inserted Article List Object or the 'Blog: Main Page' page and clicking the Edit button) and, if necessary, go to the Settings section.
  • Use the dropdown menu in Card Style to select the element you want to modify.
  • Click to check or uncheck the Visible option to ensure that the specified element is present or not within the cards.
  • In the specific case of Details, you can decide which information to make available in the cards in a detailed manner. 


What information they contain

To create the cards, WebSite X5 primarily uses the information entered through the Article Settings window accessed when adding a new article or modifying an existing one (Step 1 - Settings > Blog > Articles).


Of course, if an information field is not specified through the Article Settings window, it will not be included in the card.


How to customize them

As mentioned, the cards are automatically created by WebSite X5 using the information entered about the articles. By default, the appearance of the cards is determined by the Template you chose for the site, but you can customize it.

  • Open the settings window (you can do this by selecting the inserted Article List Object or the 'Blog: Main Page' page and clicking the Edit button) and, if necessary, go to the Settings section.
  • Start by defining how you want the cards to be arranged within the page. Use the Layout option to choose between:
    • Fixed Height: the cards are arranged in a grid. Since all the cards have the same height, the grid appears regular and compact.
    • Variable Height: the cards are still arranged in a grid, but the height of each varies depending on the proportions of the image used as the Cover. The cards may not fully occupy the cells of the grid they are in, which can leave empty space between cards. This arrangement is particularly suitable when displaying a single card per row or when viewing in a single row divided into multiple columns.This arrangement is particularly suitable when displaying a single card per row or when viewing in a single row divided into multiple columns.
    • Masonry: here too, the height of the cards varies according to the proportions of the Cover image. The difference from the previous layout is that the cards are not confined to a regular grid but are aligned across multiple rows and columns without leaving spaces to compensate for the smaller sizes of some of them.
    • SlideShow: (available only for the Article List Object) the cards have equal height and are shown in a single row within a slideshow, complete with navigation buttons.
  • At this point, you can decide how the different elements within the cards should be arranged. Use the Contentsoption to choose between:
    • Cover on the left, title and contents on the right
    • Title and contents on the left, cover on the right
    • Cover on top, title and contents below
    • Title on top, cover and contents below
    • Cover as a background
  • In general, you can also define the number of Cards per row and the maximum number of Rows per page. If the expected number of articles exceeds this, pagination will be introduced.
  • If you want, modify the Height of the cards. Note that images of the article covers will be resized based on this parameter. For texts, if they are too long, a scrollbar will appear.
  • To refine the appearance of the page, you can also adjust the Margins between the cards.
  • Finally, you can work on the elements that make up the cards: use the menu in Card Style to select the element you want to modify. Depending on the selected element, you will have various options, such as color, font, margins, and effects.