Page Designer Modules

  1. Home
  2. Support
  3. Page Designer Modules
  4. Blog Module with the Website Page Designer

Blog Module with the Website Page Designer

Engage your visitors by displaying your blog entries on your website. Create a Blog module with the page designer to organize and display posts. They can be displayed in normal columns or you can take advantage of the numerous design possibilities to create combinations featuring sidebar modules.

Go to the page designer, and add a new module by clicking on the gray plus sign. Choose the blog module from the list. If you prefer to find the module automatically, it’s also possible to type it in the search bar on top.

Define contents

The contents tab is where you will be able to customize what will appear on the module.

Content

Here you can define the following:

  • Posts number: type how many posts you want to display.
  • Include categories: choose which categories you wish to include in the feed.
  • Meta date format: define the format for the post’s date.
  • Content: select whether you want to display an excerpt text or the entire content.
  • Offset number: pick how many posts, if any, you want to offset by. This will make this defined number of recent post will not be shown.

Elements

You can enable the following options:

  • Show featured image: it will turn the thumbnails on.
  • Show Read More button: to make this button appear after the excerpts.
  • Show author: display the author’s name.
  • Show date: make the date of the post appear below the title.
  • Show categories: show the post categories below the title.
  • Show comment count: show the number of comments below the title.
  • Show pagination: enable numbered pagination for the module.

Link

If you want that the module opens a new URL when someone clicks on it, paste that link here and decide if the link will open in the same window or tab.

Background

Add a background color, gradient, image or video to your module.

Admin label

You can modify the module’s label for easier identification.

Customize the design

Modify the design of the blog module using these options.

Layout

Select the grid or fullwidth option for showing the posts.

 

Overlay

Select here the zoom icon color, the hover overlay color and the hover icon of your choice.

Text

Control how your text is displayed in terms of orientation, color (dark or light), and text shadow.

Image

Define the color tone for your image.

Title Text

Define the title heading level, font, color, alignment, line height, and other settings for the title.

Body Text

You can also adjust the font settings for the body text.

Meta Text

You can also adjust the font settings for the meta text.

Pagination Text

Customize the font settings for the pagination text.

Sizing

Adjust the width of the module.

Spacing

Customize margins and padding sizes.

Border

Define the border’s corner, style, color and width for your module.

Box Shadow

Here you can enable box shadow.

Filters

Adjust the hue of the module as a whole.

Animation

Give an animation style to the module, like fading or sliding when it appears.

Advanced settings

Using this tab you are able to insert CSS code, select device visibility, and manage transitions. Check this guide to know more about how to use these settings.

Use Case

Let’s see how our posts look using a grid format.

For the content we are choosing the following options:

Posts Number: 3

Include Categories: All categories

Content: Show excerpt

Show Featured Image: NO

Show Read More Button: YES

Show Author: NO

Show Date: YES

Show Categories: YES

Show Comment Count: NO

Show Pagination: NO

Background Color: #99c9dd

For the design:

Layout: grid

Title Text Font Weight: bold

Title Text Color: #000000

Title Text Size: 22px

Meta Text Color: #ffffff

Meta Text Size: 12px

And it looks like this!

 

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?