Kubio – the kickstart

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

Shortcode block

With this Gutenberg block you can add shortcodes to web pages. Simply put, a shortcode is a tiny piece of code, inside brackets like [this] , that has a certain function on a website. For example, you might use certain WordPress plugins that allow you to insert tables, forms, or fancy galleries via shortcodes. You will design the table / form / gallery inside the plugin. When done with the design, you’ll see a unique code  that just needs to be pasted inside the shortcode block,

 You can drag the WordPress shortcode block to the section you want on your page, or add the block from any “+” sign on your canvas.

Shortcode basic edits

When you select the shortcode block, you will see a toolbar showing up on top of it, with several basic editing options that are common to most of the Kubio blocks: positioning, duplicate, insert before, insert after, group, and remove block.

shortcode basic edits

Shortcode 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. The options here differ from block to block. In the shortcode case, at the content level, you can paste your code. You can also paste it directly in the shortcode block on the canvas. Also, the only styling options available lay under “Advanced”.

Advanced
shortcode Gutenberg block advanced edits

At this level you can make edits to the shortcode block, both in the normal and hover state. In both states you can customize:

  • Background. Here you can make adjustments to background color and type.
  • Spacing. Here you can set up the margins and paddings for the shortcode 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.
  • Responsive. Here you can decide whether the block will show or not on desktop, tablet or mobile.
  • Miscellaneous. At this level you can set up the z-index of your block (vertically order the elements that overlap), set up if the element overflows or not (displaying the content of the block flowing out of its container into the surrounding area), add HTML anchors and CSS classes.