If you want to fetch the blog posts from your website and show them beautifully in a grid or list view then the Qubely Post Grid block is the perfect option. It allows you to choose your desired viewing style with advanced settings right from the block settings.

Style

There are a total number of five Post Layout design that you can choose from. Each of them differs and offers a unique approach to showcasing your blog posts.

Post Design

After you have chosen your desired Post Layout design you can select a Post design. Currently, there are four types of design to choose from Default, Card, Stacked, Overlay. Once you select the design you can configure

Content Align: Select in which alignment the content will show. There are options such as top, middle, and bottom.

Content Padding: To set the Padding of the content, you can use the Padding function. The scale can be calibrated between 1 to 100. You can apply the same value to all the corners by choosing the global option whereas selecting the Custom option will let you set a different value for each corner. Also, it’s a responsive feature that means you can apply different values for different device types.

Background: If you would like to show a specific color to the background to the content of the team member details section you have the option to do that from here. You can choose 

• Color: Selecting this will only set a solid color for your image overlay. From the Fill Color option, you can choose from a wide range of colors.
• Gradient Type – Linear: A linear gradient applies the gradient by an axis. It’s a linear line. The effect is applied with a Gradient Angel, which defines the starting point. And two colors applied at two ends. Color 1 starts at the defined angle point and Color 2 starts after the Color 1 endpoint.
• Clear: Lets you reset the existing gradient effect. You can use it to start over. 

Border: Set a border around your content. Predefined borders include Solid, Dotted, Dashed and Double.

Corner: This slider lets you configure the corner radius of each post grid blocks. There is a global option to set every corner with the same value or you can select each individual corner with a separate value.

Padding: To set the Padding of the icon list, you can use the Padding function. You can apply the same value to all the corners by choosing the global option whereas selecting the Custom option will let you set a different value for each corner. Also, it’s a responsive feature that means you can apply different values for different device types.

Box-Shadow: You can apply shadow to the background using this feature. Enabling the feature will present you with the following options:

• Color: Lets you choose the color of the shadow.
• X: Lets you define the length of the shadow of X-axis.
• Y: Lets you define the length of the shadow of Y-axis.
• Blur: Lets you control the blurriness of the shadow.
• Spread: Lets you control how far the shadow will spread.
• Inset: Enable this feature if you want the shadows to be drawn inside the border, above the background, but below content.

Query

This section of the configuration options gives you the settings to set what category/tag of blogs you want to fetch in your Post Grid blocks. You will find

Post Type: Here you can select what type you want to show. This block supports custom post types.

Taxonomy: There are two types of taxonomy you can fetch from. Fetch using the tags or the category of a blog.

• Categories: Select the category of the blogs you want to fetch from the dropdown menu.
• Tags: From the dropdown menu select the tags of blogs you would like to show at the Post Grid.

Note: You can choose multiple categories, tags and select them.

Number of Items: From the slider select the number of posts you want to show in the Post Grid block.

Order By: This dropdown menu gives you the option to select what attribute will be used to set the order of the posts. You can select the order by Date, Title, Random, Menu Order.

Order: Select whether the order should be ascending and descending.

Pagination

Pagination is ordering of the multiple pages typically found in the end section. With the Post Grid Block, you get builtin pagination settings.

Pagination allows you to enable/disable the page number below the block section. Which can make navigation easier for your visitors.

Once you collapse the Pagination settings you will find the following settings.

• Enable/Disable Pagination: Enable or disable pagination as per your requirement.
• Alignment: Set the alignment of the pagination text. You can choose from left, middle, and right alignment.
• Typography: Select what typography you would like to use from these settings. 
  • Font Size: Define the size of the font. It is a responsive function, therefore, the size of the font can be customized according to the device type.
  • Font Family: Choose your desired font to use from the list. Qubely has a collection of 900 fonts including the defaults that come with Gutenberg. 
  • Weight: Set the font-weight. Normally the font-weight is the thickness of a font.
  • Advanced Typography: If you click on the gear icon on the Advanced Typography you will be presented with advanced configuration options to set custom typography.
  • Line Height: It’s the difference between lines, adjust it the way you want to.
  • Letter Spacing: It controls the space in between letters, defines the gap the way you want to.
  • Text Transform: Lets you apply your preferred capitalization format to the text.
• Normal/Active/Hover: Configuration options for defining attributes for the normal/active/hover state of the pagination section. You can set the text color, background color, and fill color.
  • Text Color: Select any color from the wide color palette. Click on the clear button to undo any applied color.
  • Background: If you would like to show a specific color to the background to the content of the pagination section you have the option to do that from here. You can choose
    • Color: Selecting this will only set a solid color for your image overlay. From the Fill Color option, you can choose from a wide range of colors.
    • Gradient Type – Linear: A linear gradient applies the gradient by an axis. It’s a linear line. The effect is applied with a Gradient Angel, which defines the starting point. And two colors applied at two ends. Color 1 starts at the defined angle point and Color 2 starts after the Color 1 endpoint.
    • Clear: Lets you reset the existing gradient effect. You can use it to start over.
  • Border: Set a border around your content. Predefined borders include Solid, Dotted, Dashed, and Double.
  • Box-Shadow: You can apply shadow to the background using this feature. Enabling the feature will present you with the following options:
    • Color: Lets you choose the color of the shadow.
    • X: Lets you define the length of the shadow of X-axis.
    • Y: Lets you define the length of the shadow of Y-axis.
    • Blur: Lets you control the blurriness of the shadow.
    • Spread: Lets you control how far the shadow will spread.
    • Inset: Enable this feature if you want the shadows to be drawn inside the border, above the background, but below content.

• Radius: Use the slider to set the radius of the pagination section. You can set a global value or even use the custom option to set different radius values to different sections separately.
• Padding: Use the slider to set the padding values for the pagination section. You can set a global value or even use the custom option to set different radius values to different sections separately.
• Margin: Use the slider to set the margin values of the pagination section. You can set a global value or even use the custom option to set different radius values to different sections separately.

Image Settings

These settings let you set the advanced settings for the images of the fetched blogs. You can

Show Featured Image: Enable this toggle button to show the featured image of the fetched blog posts.

Fixed Image Height: Set if the image height using a slider. If you enable it you can set the image height using a slider. It is responsive so you can set the image height according to the device type.

Image size: You can select the image size of the fetched blog posts in the Qubely Post Grid blocks. Set the size as full, thumbnail, medium, medium large, large, Qubely landscape, Qubely portrait, Qubely thumbnail, post thumbnail.

Image Corner: Set the corner radius of the blog image using this slider. You can use the global settings or set corner radius for each corner separately. It is a responsive feature so you can set different radius values for each type of device.

Content

This tab will let you change the settings related to your post grid’s content.

Show Title: Enable this toggle to show the post title.

Show Excerpt: Enable this toggle to show an excerpt of the posts.

Excerpt Limit: Choose the size of the excerpt to show. The units are in a number of units.

Title Below Meta: Pick the position of the meta-data whether you want to put it on the top or bottom.

Show Date: Show the date in the meta-data information.

Show Comment: Show the number of comments in the meta-data information.

Show Author: Show the post author’s name in the meta-data information.

Category

There are three different settings you can choose to show the category of the fetched posts.

None: Select this if you want to show no category of the posts in the Qubely Post Grid blocks.

Default: This sets the category viewing as it is. You can set the

• Typography: Select what typography you would like to use from these settings. 
  • Font Size: Define the size of the font. It is a responsive function, therefore, the size of the font can be customized according to the device type.
  • Font Family: Choose your desired font to use from the list. Qubely has a collection of 900 fonts including the defaults that come with Gutenberg. 
  • Weight: Set the font-weight. Normally the font-weight is the thickness of a font.
  • Advanced Typography: If you click on the gear icon on the Advanced Typography you will be presented with advanced configuration options to set custom typography.
    • Line Height: It’s the difference between lines, adjust it the way you want to.
    • Letter Spacing: It controls the space in between letters, defines the gap the way you want to.
    • Text Transform: Lets you apply your preferred capitalization format to the text.

• Category Color: Set the category color of the text for the normal state. You can also set the color you want while hovering above the category text.
• Corner: Set the radius value for the corners. You can set each side separately or set value for each side separately. It is also a responsive feature so you can set the corner values according to the device type.

Badge: With these settings show a category/tag badge right inside the blog image. There are customization options too. You can set

• Badge Position: Set where the badge will show on the image. You can select the left top, right top, left bottom, right bottom. 
• Typography: Select what typography you would like to use from these settings. 
  • Font Size: Define the size of the font. It is a responsive function, therefore, the size of the font can be customized according to the device type.
  • Font Family: Choose your desired font to use from the list. Qubely has a collection of 900 fonts including the defaults that come with Gutenberg. 
  • Weight: Set the font-weight. Normally the font-weight is the thickness of a font.
  • Advanced Typography: If you click on the gear icon on the Advanced Typography you will be presented with advanced configuration options to set custom typography.
    • Line Height: It’s the difference between lines, adjust it the way you want to.
    • Letter Spacing: It controls the space in between letters, defines the gap the way you want to.
    • Text Transform: Lets you apply your preferred capitalization format to the text.
• Category Color & Background: Set the category color and the background color of the badge for the normal state. You can also set the color you want while hovering above the badge text.
• Corner: Set the radius value for the corners. You can set each side separately or set value for each side separately. It is also a responsive feature so you can set the corner values according to the device type.
• Padding: You can select the exact padding for the badge. You can choose a global setting or set each side padding separately. It is a responsive feature so you can set different padding for different devices.

Read More Link

Once you fetch all the blog posts in the Post Grid block you need to redirect the users to their separate blog post page. To do that you can enable a read more button at the end of each post grid.

Choosing a button style: You can choose from two types of button layout style. Fill button style or outline button style.

Button Text: Set the text of the button. Different types of text respond differently with your customers/readers so it is a great option for customization.

Typography: Select what typography you would like to use from these settings. 

• Font Size: Define the size of the font. It is a responsive function, therefore, the size of the font can be customized according to the device type.
• Font Family: Choose your desired font to use from the list. Qubely has a collection of 900 fonts including the defaults that come with Gutenberg. 
• Weight: Set the font-weight. Normally the font-weight is the thickness of a font.
• Advanced Typography: If you click on the gear icon on the Advanced Typography you will be presented with advanced configuration options to set custom typography.
  • Line Height: It’s the difference between lines, adjust it the way you want to.
  • Letter Spacing: It controls the space in between letters, defines the gap the way you want to.
  • Text Transform: Lets you apply your preferred capitalization format to the text.

Button Size: Set the size of the button. You are free to choose from a preset small, medium and large size or select a custom size.

Border: Set a border around your content. Predefined borders include Solid, Dotted, Dashed and Double. There is also a clear button if you don’t want to apply a border.

Corner: This slider lets you configure the corner radius of each post grid blocks. There is a global option to set every corner with the same value or you can select each individual corner with a separate value.

Box-Shadow: You can apply shadow to the image using this feature. You can apply shadow for both Normal and Hover states. Enabling the feature will present you with the following options:

• Color: Lets you choose the color of the shadow.
• X: Lets you define the length of the shadow of X-axis.
• Y: Lets you define the length of the shadow of Y-axis.
• Blur: Lets you control the blurriness of the shadow.
• Spread: Lets you control how far the shadow will spread.

Normal: Configuration options for defining attributes for the normal state of the button. You can set the text color, background color and fill color.

• Text Color: Select any color from the wide color palette. Click on the clear button to undo any applied color.
• Fill: Selecting this option will fill the background specific to the text of the icon with a color. You are free to choose the color of the background from the Design section of the block settings.
• Background: If you would like to show a specific color to the background to the content of the team member details section you have the option to do that from here. You can choose 
  • Color: Selecting this will only set a solid color for your image overlay. From the Fill Color option, you can choose from a wide range of colors.
  • Gradient Type – Linear: A linear gradient applies the gradient by an axis. It’s a linear line. The effect is applied with a Gradient Angel, which defines the starting point. And two colors applied at two ends. Color 1 starts at the defined angle point and Color 2 starts after the Color 1 endpoint.
  • Clear: Lets you reset the existing gradient effect. You can use it to start over.

Spacing

Contol the spacing of each element of the Post Grid block. You will find options such as

Title: Select the spacing between the title and the rest of the content.

Meta: Set the spacing distance between the meta description and the rest of the content.

Excerpt: Choose the spacing for the excerpt and all else content.

Select the value using the slider or set it manually. It is also a responsive feature so you can set different spacing for different types of devices.

Typography

You can define individual typography for each of the components of the post content in Qubely Post Grid block.

Once you enable the toggle button you will find the typography configuration options.

Typography: Select what typography you would like to use from these settings. 

• Font Size: Define the size of the font. It is a responsive function, therefore, the size of the font can be customized according to the device type.
• Font Family: Choose your desired font to use from the list. Qubely has a collection of 900 fonts including the defaults that come with Gutenberg. 
• Weight: Set the font-weight. Normally the font-weight is the thickness of a font.
• Advanced Typography: If you click on the gear icon on the Advanced Typography you will be presented with advanced configuration options to set custom typography.
  • Line Height: It’s the difference between lines, adjust it the way you want to.
  • Letter Spacing: It controls the space in between letters, defines the gap the way you want to.
  • Text Transform: Lets you apply your preferred capitalization format to the text.

Colors

Just like typography, you can select the colors of each component of the content in the Qubely Post Grid block.

You can choose the color of the text in the title, title color while hovering, meta and excerpt. Choose from a wide range of colors in the color palette and apply it. You can also clear any applied color with the clear button.

Advanced

Animation

To make the block more interesting, you can add an animation effect. It is disabled by default, to enable this feature, choose an effect from the dropdown list. Once you choose your desired one, then start making modifications as you seem fit. The units are in milliseconds. Note: Duration is how long the animation will run and Dealy is the waiting time before the animation starts loading. The following effects are currently available.

• Fade: Selecting this will animate your Image block with a fading animation.
• Slide: Animate your Image block with a sliding animation.
• Bounce: If you want to animate your Image block with a bouncing animation then select this.
• Zoom: This option will animate your Image block with a Zooming animation.
• Flip: Animate your Image block with a Flipping animation using this option.
• Fold: Selecting this will animate your Image block with a sliding animation.
• Rotate: This will animate your Image block with a rotating animation.

Interaction

With the Qubely image block, you also have control over how people interact with the image that you upload. There are three options that you can control how the interaction works.

Enable Tablet: If you want to enable the interactions for Tablet Handheld product users to enable this to start showing tablet users the image interactions.

Enable Mobile: If you want to enable the interactions for Mobile Handheld product users to enable this to start showing mobile users the image interactions.

Enable Mouse Movement:  You can select the way how your interactions work with your mouse movement. There are multiple options once you enable it. You can choose the direction from Direct/Opposite, speed from a scale of 1 to 10, maximum from a scale of 5 to 75.

Live Button: This button will give you “Live experience” on how your interactions work depending on how you set it. Click on it to get an overview.

Advanced

This section lets you override the current styling of this particular block.

Enable Custom Position: If you want to set the image block to a custom position then simply enable this option. After enabling you will find the following options

• From X-axis: Select from the slider what position you want the image block to be in according to the X-axis. The range limits from -2000 to 2000.
• From Y-axis: Select from the slider what position you want the image block to be in according to the X-axis. The range limits from -2000 to 2000.

Z – Index: If any of your blocks override another, then you can set a value here, the one with the higher value will appear before the other.

Hide on Tablet/Phone: Turn it on to hide this block in your desired device. The change will appear on the frontend.

Block Row CSS: In case you need to override current block settings, you can write down your own code followed by {{QUBELY}} to override the current settings.

Additional CSS Class: You might need to name a block in order to make custom modifications in the future, this is the field where you define the name.