The Blog: Main page window

Step 3 - Map >

The Blog: Main page window

Previous pageReturn to chapter overviewNext page

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.

Click to expand/collapse
Example for an Article Card

A post's summary card contains the following items, most of which are defined in the Contents section

Background
Cover
Title
Description: this repeats the Caption or, if there isn't one, a truncated Content
Details: these include the category, author and date
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. The first thing to do is indicate the display type, choosing from:

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

 

Once you have indicated the display type, you can then work on these 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: 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.

The Card Style can also be defined using the following options:

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.
Cover margin / Content margin: you can set the space (in pixels) between the cover picture / the contents (title and description) and the card's

When you have defined these parameters, you can work on the graphics of the various items in the summary cards. When you select one, in the Elements section, the available options are shown:

Visible: this makes the selected item visible or invisible in the summary card. It is not available for the Background or Cover.
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 and Date.
Background Color: this specifies the color of the card's Background and the Button.
Border: this specifies the width, the color and the bevel angle for the corners of the borders of the card's Background and the Button.
Shadow: this applies a shadow to the card's Background, indicating the color, position, diffusion and size.
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.
Mouseover effect: this applies a mouseover effect to the cover picture.
Show Category / Show Author / Show Date: if these options are selected, the post's category, author and publication date are displayed in the card. These details are given in the Post Setting | Contents window.
Margins: this sets the size (in pixels) of the margin between the text and border of the Button.

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:
No highlighted articles
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:

-

How to define the layout of the Blog Home Page