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 4 Post Layout design that you can choose from. Each of them differs and offers a unique approach to showcasing your blog posts.

Blog 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 Position: This option is available only for the 4th layout. Set the position of the content in your Post Carousel. Choose from three positions such as Top, Middle, and Bottom.

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.

Overlay Height: This option is available only for the 4th layout. Use the slider to set the content height for the content inside the Post Carousel. Use the slider or set the height number manually.

Overlay Corner: This option is available only for the 4th layout. Control the corner radius of the Post Carousel blocks. You can also set each corner radius separately.

Normal/Hover: This option is available only for the 4th layout. Configuration options for defining attributes for the normal state of the arrow. Please note the same configuration options can be set for when a user hovers over the arrow. You can set the color, background color and fill color.

• Fill 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.

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.

Carousel Settings

This section of the block settings gives you the option to overall general settings of the Qubely Image Carousel. From here you can

Show Arrow Navigation: Enabling this feature will show an arrow to both ends of the Image Carousel. The user will be able to interact with the carousel with the arrow buttons if you enable them. Disabling this option will hide the arrow keys.

Show Dot Navigation: This toggle button lets you enable/disable the dot navigation option at the bottom of the Image Carousel. The dot navigation shows the user which Image page they are currently viewing.

Draggable: You can let your users drag to the Image they want to view by enabling this toggle button. After enabling they will be able to click and drag to the Image both on forward and backward in the Image carousel.

Autoplay: This toggle button controls the autoplay feature for the Image Carousel. Enabling it will collapse the advanced autoplay feature.

• Speed: Select the autoplay speed according to the millisecond. Use the slider to set the speed or manually set the speed.
• Interval: Set the interval in milliseconds using the slider or manually.

Arrow Settings

Configure the arrow style and its settings from this section.

Arrow Style: There two types of navigation arrow styles you can choose from.

Vertical Position: Set the vertical position of the arrow keys with the slider.

Shape Size: Select the size of the arrow box size from here.

Arrow Size: Set the arrow size inside the box from here.

Note: Vertical Position, Shape Size, and Arrow Size all of these are responsive features so they can set according to different device types.

Normal/Hover: Configuration options for defining attributes for the normal state of the arrow. Please note the same configuration options can be set for when a user hovers over the arrow. You can set the color, background color and fill color.

• Arrow 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 
  • Fill 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 Radius: 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.

Post 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 it.

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.

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 the attributes that 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.

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.

Title Settings

You can enable and set the typography to three sections of the Post Carousel blocks. Title, meta, and excerpt. After enabling any of them you will find the following configuration options.

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.

Advanced 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 formate to the text.

Content Settings

Define the configuration options for the content inside the Post Carousel blocks from here. You will find the following options.

Text align: Set the alignment of the texts of the content from the predefined options. You can set the alignment as left, middle, and right.

Show Title: Enable this if you want the title of the posts to show up in your Qubely Post Carousel block.

Show Excerpt: Shows the excerpt text of the fetched posts in the Post Carousel. Enable or disable as per your requirement.

Excerpt Limit: Set the excerpt word limit using the slider or manually set the limit.

Title Below Meta: You can enable this to show the title of a post to show under the meta tag.

Show Date: Enable this if you want to show the date of a post in the Qubely Post Carousel.

Show Comment: Some of your posts might have comments. If you would like to show them in the Post Carousel you can enable this.
Show Author: Enable this toggle button to show the author’s name in the posts inside the Post Carousel.

Category Settings

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.

Note: You can control the from which direction the animation will start such as from the center, right, left, up or down. Also, control how many times the animation will repeat. You can also select the duration and the starting delay of the animation which are considered in milliseconds.

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.