With the options reported in this section, you can define some graphic settings for the Article Cards of the Article List Objects
The Article Cards report the following elements, all defined with the corresponding fields of the Contents section:
▪ | Description: it takes on the Caption and, if not available, a preview of the Content ; |
▪ | Details: it includes tghe Category, the Author and the date; |
▪ | Button: the active link to the Article page. |
Of course, if elements like Cover image, Author or Date are not reported, these details won't be reported on the Card.
With the options in the Card Settings section, you can define the Cards contents and arrangement. Start with the Card Arrangement on the Page, you can choose:
|
Fixed Height: Cards are arranged in a grid. Since all share the same height, the gird looks regular and compact.
|
|
Variable Height: Cards are again arranged in a grid, but the height of each Card varies according to the size of the cover image. Cards, therefore, may not completely occupy the grid cells in which they are inserted: that is why there may be some empty space left between the Cards. This solution is ideal if you want to show one Card per row, or if you want to display cards on single row divided in several columns.
|
|
Masonry: also ion this case, the Card height varies according to the size of the cover image. Still, Cards are not framed in a regular grid but aligned on multiple rows and columns without leaving spaces to compensate for the smaller size of some of them.
|
|
SlideShow: Cards have the same height and are displayed on a single row with a Slideshow reporting its navigation bullets.
|
Once you defined the Card Arrangement, you can configure the way Contents are displayed in the Card. You can choose among:
|
Cover on the left, title and contents on the right
|
|
Title and contents on the left, cover on the right
|
|
Cover at the top, title and contents at the bottom
|
|
Title and contents at the top, cover at the bottom
|
|
Cover as background
|
Now you can move on and work with the following options
▪ | Cards per row: to define the amount of Cards that can be flanked on each row, from 1 to 6. |
▪ | Rows per page: to set the maximum number of rows to be displayed on the Page. |
▪ | Card height: to define the Card height in pixels. |
▪ | Cards Margin: to define the distance between the Cards (in pixels). |
Once you defined these settings, you can move on with the options of the Card Style section to set up the graphic style of the elements of the Cards. According to the Element you select, you will find different options:
▪ | Background Color: to define the Card Background and Button color. With the Color window you can also define the opacity, therefore how transparent or opaque the chosen color should be. This is particularly useful if you choose the "Cover as background" option. In this case, in fact, contents overlap the cover image, and will result more easily readable if you place them is a box which you can set color and opacity for. |
▪ | Border: to define the thickness, color, bevel and possible shadow for borders of the Card Background and Button. |
▪ | Shadow: to apply a shadow to the Card Background by defining its color, position, diffusion and size. |
▪ | Margins: to set the distance in pixel between the Cover image or the Content and the Card borders, or between the label and the Button border. |
▪ | Fit to card: if selected, the cover picture takes up the entire area of the card, in width and height. If the proportions do not correspond, the picture is centered and cropped. If this option is not selected, the cover picture is adapted to either the width or the height of the available space. |
▪ | Mouseover effect: to be applied to the Cover image. |
▪ | Width (%)/Height: they define the space taken up by the Contents with respect to the Card. In case the Contents are positioned to the left or right of the Card, you can define the width in percent of the area dedicated to them. On the other hand, if the Contents are positioned at the top or bottom, or if the Cover is used as a background, you can set the height in pixels of the area they occupy. |
▪ | Alignment: to define if the Contents must be aligned left, center or right. |
▪ | Visible: the element can be visible or invisible. This option is available for the Title, the Description and the Button. |
▪ | Font Type: this specifies the font, size and style of the text for the Title, the Description, the Details and the Button (only if in Text mode). The menu shows the command for applying the Default Font (defined by the style of the Page Text item in the Text Style window), the list of safe fonts (those which are present on all devices and do not need to be published, and all the Google fonts and web fonts added in the Add web fonts window, which is opened by the Other font types command. |
▪ | Text Color: this specifies the color to used for the text of the Title, the Description, the Details and the Button (only if in Text mode). When selecting the Details element, the color defined for the Text is also used for the line placed between the Description and the Category, Author and Date. |
▪ | Show Category / Show Author / Show Date / Show Reading time: if these options are selected, the post's category, author, publication date and the estimated Reading time are displayed in the card. These details are given in the Post Setting | Contents window. |
▪ | Mode: to determine if the Button with the link to the Article must be added in the Card as Text or Image: in the latter case, you need to add the image you want to use. |
▪ | Position: to define if the Button is displayed on the right, center or left relative to the available space. |
Read the guides