Kubio – the kickstart

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

The structure of a webpage in Kubio: sections, columns and blocks

Every web page in Kubio is made up of sections that can be split into columns. In addition, you can add blocks to your sections and columns. The blocks have different scopes, from paragraphs and images to logo and social icons.

sections and columns

How to work with sections in Kubio

How to add a new website section

Now, let’s see how you can add blank sections to your design with Kubio. Just head over to the bottom of your page, and you’ll notice these two buttons:

add new section

Select “Add Blank Section” and choose the number of columns you want to have.

how many columns in a section

Now, let’s say you’re adding a structure of 3 columns to your section. You’ll end up having three rectangles with a “+” sign inside of them. Those are your columns that need some content added, meaning blocks. This means that you can add blocks by selecting the “+” sign.

section with three columns

When you click on any “+” sign on the canvas, you will open up a quick block inserter, where you can start looking for a block.

Quick block inserter


How to customize a section in the toolbar

When you select a section, on top of it, you will notice a toolbar.

section basic edits

Let’s go through the options a bit:

  • Positioning

Here you have two options:

When you select the 6 dots, you will have the option to drag and drop the section where you want;

When you choose the up and down arrows, you will move the section up and down.

  • Background. This is a shortcut to the Style options in the block editing panel on the right, where you can assign a background to your section.
section background Kubio free
  • Set the content of your section as full-width or inside a container. 
  • Add more columns from the “+” icon.
  • Options.
other options basic column editing

Inside options, there are several actions that you can take:

  1. Duplicate. This option allows you to clone the current section.
  2. Add section before. This gives you the option to insert a new section before the current section.
  3. Add section after. This gives you the option to insert a new section after the current section.
  4. Remove block. This is how you delete the section you’re currently on.


How to customize a section in the Kubio block editing panel

As previously mentioned, the moment you select your section, there’s a panel that will show up on the right-hand side of your screen. This is the Kubio editing panel.

You can notice that the title of the panel is “Section.” This means that you’re editing the right thing. If it said “Paragraph” or “Icons”, well, it would mean that you were editing the paragraph block or the icons block.

Now, there are three main editing options in this panel:

Layout

Here you can play with the arrangement of your section. For example, you can add a section title, make it overlap with the previous section, or make the entire section width instead of contained. There’s also an option for setting up top and bottom spacing. 

section layout
Style

Here you can make changes to your section’s background and dividers.

section styling
Advanced

At this level, you can make additional section edits, both in the normal state and the hovering one.

Here are the available advanced section edits for both states.

section advanced edits
  • Background. Here you can make adjustments to background color and type.
  • Dividers. Here you can customize the top or bottom divider. You can choose from several ready-made divider designs.  You have full control over the color and height of the dividers.
advanced edits section - dividers
  • Spacing. Here you can set up the margins and paddings for your section.
advanced edits - spacing
  • Border and shadows. Here you can add borders with a different color, radius and thickness to your section. Also, you can add box shadows. You have full control over the position, blur, spread and color of the box shadow.
section border and shadows
  • Typography. Here you can make changes to text, heading (from H1 to H6), link, and hover link color. You also have a shortcut to editing themes defaults.
advanced edits- typography
  • Transform. At this level you can get creative with the looks of your section. You can apply several transformations, across the X, Y, and/or Z axes, starting from center, left, right, or even a custom point.
advanced edits - transform
  • Responsive. Here you can decide whether the section will show or hide on desktop, tablet or mobile.
section responsiveness
  • Miscellaneous. 
advanced block edits - miscellaneous

At this level you can:

  1. Set up the z-index of your section. The z-index allows you to order vertically elements that overlap.
  2. Set up if the element overflows or not. This refers to displaying the content of the block flowing out of its container into the surrounding area.
  3. Add HTML anchors.
  4. Add CSS classes.

In the “Hover” state there’s an extra customization option: transition. When enabled, you can set up the duration of the transition.

Enable transition on hover



How to work with columns in Kubio

Columns are usually nested inside website sections in Kubio.

So, whenever you add a new blank section to your page by going to the canvas’ bottom and selecting “Add Blank Section”, you can select a certain number of columns for your section. 

add new section
how many columns in a section

You can always change your mind and add or remove columns to the section.

Now, let’s say you’re adding a structure of 3 columns to your section. You’ll end up having three rectangles with a “+” sign inside of them. Those are your columns that need some content added, meaning blocks. This means that you can add blocks by selecting the “+” sign—more on this topic in the next chapter.

section with three columns

How to customize columns in the block toolbar

When you select a column, on top of it, you will notice a toolbar.

column basic editing

Let’s go through the options a bit:

  • Positioning

Here you have two options:

When you select the 6 dots, you will have the option to drag and drop the column where you want;

When you choose the left and right arrows, you will move the column to left or right.

  • Add more columns from the “+” icon.
  • Options. Inside options, there are several actions that you can take:
  1. Duplicate. This option allows you to clone the current column.
  2. Add column before. This gives you the option to insert a new column before the current column.
  3. Add column after. This gives you the option to insert a new section after the current section.
  4. Remove block. This is how you delete the column you’re currently on.


How to customize a column in the Kubio block editing panel

The moment you select your column, there’s a panel that will show up on the right-hand side of your screen. This is the Kubio block editing panel.

You can notice that the title of the panel is “Column.” This means that you’re editing the right thing. If it said “Section” or “Image”, well, it would mean that you were editing the section or the image block.

Now, there are three main editing options in this panel.

Layout

Here you can adjust the column width, height, the vertical and horizontal position of the column content. 

column layout

There’s also an option for setting spacing and alignment, between columns, or inside the columns.

column spacing
Style

Here you can make changes to your column’s background and borders.

column styling
Advanced

At this level, you can make additional column edits, both in the normal state and the hovering one. Here are the available advanced column edits for both states.

advanced column edits
  • Background. Here you can make adjustments to background color and type.
background Kubio free
  • Dividers. Here you can customize the top or bottom divider. You can choose from several ready-made divider designs.  You have full control over the color and height of the dividers.
advanced edits - dividers
  • Spacing. Here you can set up the margins and paddings for your column.
advanced edits - spacing
  • Border and shadows. Here you can add borders with a different color, radius and thickness to your column. Also, you can add box shadows. You have full control over the position, blur, spread and color of the box shadow.
border and shadows for column and section
  • Typography. Here you can make changes to text, heading (from H1 to H6), link, and hover link color. You also have a shortcut to editing themes defaults.
advanced edits- typography
  • Transform. At this level you can get creative with the looks of your column. You can apply several transformations, across the X, Y, and/or Z axes, starting from center, left, right, or even a custom point.
advanced edits - transform
  • Responsive. Here you can decide whether the column will show or not on desktop, tablet or mobile.
section and column responsiveness
  • Miscellaneous. 
advanced block edits - miscellaneous

At this level you can:

  1. Set up the z-index of your column. The z-index allows you to order vertically elements that overlap.
  2. Set up if the element overflows or not. This refers to displaying the content of the block flowing out of its container into the surrounding area.
  3. Add HTML anchors.
  4. Add CSS classes.

In the “Hover” state there’s an extra customization option: transition. When enabled, you can set up the duration of the transition.