Kubio – the kickstart

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

Map block

This Gutenberg block allows you to integrate your website with Google maps. 

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

When you select the map block, you will see a toolbar showing up on top of it, with several basic editing options. In a previous chapter, we explained the common editing options for all blocks. 

In the case of the map block, here are the ones that apply: positioning, duplicate, insert before, insert after, group, and remove block.

map block basic edits

Map block: customizations within the block editing panel 

The moment you select any block, an editing panel will open up on the right-hand side. It always has three options: content, style, and advanced. The possibilities inside vary from block to block. In the case of the map block, styling is not an option. So, let’s see what customizations can be done inside “Content” and “Advanced”.

Content
Map block content edits

At the “Content” level you can:

  • Select an address.
  • Choose a zoom level for the map.
  • Apply a certain height to the map.
  • Type your API key.
Advanced
Advanced map block edits

At this level, you can make edits to the block map both in the normal and hover state. The same customization options are available for both states.

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 the map 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.