Kubio – the kickstart

Find out how you can use Kubio for designing the website you envision.

Posts list block

This block basically allows you to show some of your blog posts on a page. You can drag the posts list block to the section you want on your page, or add the block from any “+” sign on your canvas.

When you select this Gutenberg block, you will see a toolbar showing up on top of it, with several basic editing options. In the previous chapter, we explained the common editing options for all blocks. In the case of the posts list block, here are the ones that apply: positioning, duplicate, insert before, insert after, group, and remove block.

posts list block basic edits

Posts list block: customizations within the block editing panel

The moment you select any block, a block editing panel will open up on the right-hand side. It always has three options: content, style, and advanced. 

For sections, columns, and some block exceptions, you’ll see “Layout” instead of “Content”. This block is such an exception, together with the row block. 

posts list layout

At the “Layout” you can:

  • Select how many columns you need per row.
  • Choose how big you want the gap to look between the posts inside the section/row. You can assign no gap, small, medium, and large gaps across horizontal and vertical spacing, horizontal and vertical inner spacing.
  •  Set up the column vertical position.
posts list block styling options

Inside “Style” you can customize:

  • Background color.
  • Background type.

At this level, you can make edits to the posts list block, in both the normal and hover states. The same customizations can be made across both states.

Posts list advanced block edits

Now, let’s take them one by one:

  • Background. Here you can make adjustments to background color and type.
  • Spacing. Here you can set up the margins and paddings for your block.
  • Border and shadows. Here you can add borders with a different color, radius and thickness to your block. Also, you can add box shadows. You have full control over the position, blur, spread and color of the box shadow.
  • Typography. You can set up a different font family, font size, and weight for the text. You can add decorations to text, set up capitalization, and adjust line height and letter spacing. When you select the “default” option you’ll be taken to the General Settings, where you can change defaults (color scheme, typography, etc.).
  • Transform. At this level you can get creative with the perspective your block across the X, Y, and/or Z axes.
  • Responsive. Here you can decide whether the block will show or not on desktop, tablet or mobile.
  • Miscellaneous.