Layers
Classes
Variables
Popup Builder
Visibility Conditions
Media Manager
API Integrations
Figma to Kirki
Custom Code
Review and Publish
Layers
Classes
Variables
Popup Builder
Visibility Conditions
Media Manager
API Integrations
Figma to Kirki
Custom Code
Review and Publish

The Island

Kirki’s Island is the toolbar at the bottom of the canvas. 

It gives you quick access to the tools you need to build a page from scratch: the Select tool, the Hand tool, the Element menu, a Light & Dark Mode Toggle, and Comments. 

Use it together with the Design tab on the Right Panel to quickly build your pages.

How to Select Elements on the Canvas

Use the Select tool to select elements on the canvas. Click the Select icon on the Island to activate it. 

With Select active, you can:

  • Click an element to select it.
  • Click and drag an element to move it.
  • Click and drag an element’s canvas handles to resize it or adjust its padding, margin, and radius.
  • Click an element, then customize it using the options in the Right Panel.

How to Pan Around the Canvas

Use the Hand tool to pan Kirki’s Infinite Canvas. Click the Hand icon on the Island to activate it. 

With Hand active, you can click and drag anywhere to pan around the infinite canvas without selecting or moving elements.

💡 Tip: Press and hold the space bar to activate the Hand tool temporarily, without switching off Select.

Learn more about Infinite Canvas.

How to Add Elements to My Page

You can quickly add elements to your page using the Island’s Elements menu:

  1. Click the plus (+) icon on the Island to open the Elements menu. This is where commonly used elements live together. 
  1. Click or drag the element you need on the canvas to place it.

To add other elements, go to the Insert Panel and find them under Base Elements.

How to Add a Frame

To add a frame, from the Island:

  1. Click the plus (+) icon to open the Elements menu.
  1. Select Frame.
  1. Then click or draw on the canvas.

A Frame is a basic Div Block used to group content together. You can use it to organize sections of your page, like a Header, Hero, or Footer.

Learn more about Div Blocks.

How to Add Text

To add text, from the Island:

  1. Click the plus (+) icon to open the Elements menu.
  1. Select Text.
  1. Click or drag it to the canvas.

Text is used to add paragraphs and other copy anywhere on your page.

Learn more about Text & Typography.

How to Add a Heading

To add a heading, from the Island:

  1. Click the plus (+) icon to open the Elements menu.
  1. Select Heading.
  1. Click or drag it to the canvas.

A Heading is used to add heading text to your page. While any text element can be turned into a heading from the Settings tab in the Right Panel, using the Heading element from the Island is just a quicker, more direct way to do it.

Learn more about Headings.

How to Add an Image

To add an image, from the Island:

  1. Click the plus (+) icon to open the Elements menu.
  1. Select Image.
  1. Click or drag it to the canvas.

Use an Image element to place static visuals on your page. Select it, then choose a photo, illustration, or graphic from the media library, or upload your own, from its Settings in the Right Panel. Then, use the Design tab to adjust sizing, fit, and styling.

Learn more about Images.

How to Add a Video

To add a video, from the Island:

  1. Click the plus (+) icon to open the Elements menu.
  1. Select Video.
  1. Click or drag it to the canvas.

Use a Video element to place video content on your page. Select it, then choose a video from the media library, or upload your own from its Settings in the Right Panel. Then, use the Design tab to adjust sizing, fit, and styling. 

Learn more about Videos.

How to Add an Icon

To add an icon, from the Island:

  1. Click the plus (+) icon to open the Elements menu.
  1. Select Icon.
  1. Click or drag it to the canvas.

Use an Icon element to place an SVG icon on your page. Select it, then pick your icon type and icon from the Icon Library. Then, use the Design tab to adjust sizing, fit, and styling.

Learn more about Icons.

How to Switch Between Light and Dark Mode

  • To switch the builder to dark mode: Click the moon icon on the Island.
  • To switch the builder to light mode: Click the sun icon on the Island.

The light and dark mode only changes how the editor looks while you work – it doesn’t affect your published site’s design. 

Switching to dark mode can help reduce eye strain in low-light settings, while light mode can be easier on the eyes in brighter environments.

How to Comment on the Canvas

To leave or view comments on the canvas, click the Comment icon on the Island to open the Comments panel. From here, you can:

  • Comment on the canvas
  • View existing comments on the canvas
  • View full comment threads and reply to them on the canvas
  • Search comments from the Comments Panel
  • And more

Learn more about Comments.

Was this page helpful?

Our website uses cookies to improve your browsing experience on our website. By continuing to use this website, you agree to their use. For details, please check our Privacy Policy.