You can use the options in this window, which you can open by selecting the "Blog: Main Page" entry on the Map and clicking on the Edit button, to define the appearance of the blog's home page, which gives a list of the latest posts that have been published and also includes a summary card for each one.
 |
| Example for an Article Card |
A post's summary card contains the following items, most of which are defined in the Contents section
| • | Description: this repeats the Caption or, if there isn't one, a truncated Content |
| • | Details: these include the category, author, date and Reading time. |
| • | Button: this links to the page containing the full post. |
Obviously, if items such as the cover, the author or the date have not been specified, this information does not appear in the summary card.
You can use the options in the Card Settings section to define layout of the summary cards. First, define the card Arrangement on the page, you can choose among:
|
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.
|
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
|
Once you defined these settings, you can move one and work on the following options:
| ▪ | Cards per row: you can specify the number of cards to be displayed on a row, from a minimum of 1 to a maximum of 6. |
| ▪ | Rows per page: to set the maximum number of rows to be displayed on the Page. |
| ▪ | Rows per page: Sets the maximum number of rows to be displayed on the Blog’s Home Page. |
| ▪ | Card height: you can specify the height (in pixels) of each card. |
| ▪ | Cards Margin: sets the pixel value of the distance that must be maintained between the cards. |
You can then use the options on the Card Style section to set the graphic style for each element of the Article Cards. According to the element selected from the relative menu, you will find different parameters:
| ▪ | Background Color: specifica il colore dello Background della Card e del Button. 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: this specifies the width, the color and the bevel angle for the corners and shadow of the borders of the card's Background and the Button. |
| ▪ | 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 this option is selected, the cover picture will fill all the available space in the card, in both width and height. If the proportions don't 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. |
| ▪ | Cover size (%): you can specify the width of the cover picture with respect to the contents, if the picture is on the left or the right, or with respect to the card's height, if the picture is positioned at the top, above or below the title. |
| ▪ | Mouseover effect: this applies a mouseover effect to the cover picture. |
| ▪ | 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: this makes the selected item visible or invisible in the summary card. This option is available for the Title, the Description and the Button. |
| ▪ | Font Type: this specifies the font, size and style of the text in the Title, Description, Details and Button. 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 of the text in the Title, Description, Details and Button. If you select the Details item, the chosen text color is also used for the line between the Description and Category, Author, Date and Reading time. |
| ▪ | 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. |
In the Blog Home Page, you can decide whether to display side bars with navigation tools and whether to separate the latest published Articles from older ones. To do this, simply use the options available in the Options section:
| ▪ | Show Side Bars: If active, the Side Bar will be displayed in the Blog's Home Page. |
| ▪ | Display: this indicates whether and how the most recent posts are to be highlighted. The following options are available: |
| • | First articles highlighted with cards: the summary cards for the most recent posts occupy the whole width of the page, whereas the earlier ones do not. |
| • | First articles highlighted with a slideshow: the cover pictures of the most recent posts are shown in a slideshow on the blog's home page and fill the entire width of the page. Each picture in the slideshow includes the title and a link to the page containing the complete post. The summary cards for the highlighted posts are also displayed. |
| ▪ | Highlighted articles: you can specify the number of most recent posts to be highlighted (the last 5, the last 10, etc.). |
| ▪ | Card height: you can specify the height (in pixels) of the highlighted summary cards (for the First articles highlighted with cards option) or of the slideshow (for the First articles highlighted with a slideshow option). |
Read the guides:
