Div Block

Layers Panel
Variables
Symbols
Pop-up Builder
Media Manager
Figma to Kirki
API Integrations
Review and Publish
Layers Panel
Variables
Symbols
Pop-up Builder
Media Manager
Figma to Kirki
API Integrations
Review and Publish

A Div block is a versatile and powerful component that serves a wide range of purposes on a webpage. 

Common Uses

  • Group Content: Bundle multiple components together for easier management and collective styling
  • Create Dividers: Add visual separation between sections or distinct content areas
  • Create Space: Use Div blocks to introduce spacing where margins alone aren’t enough

Adding a Div Block

From the Element Island 

The fastest way to insert a Div block is directly from the Element Island, letting you stay focused on the editor without unnecessary navigation.

From the Insert Panel 

You can also add a Div block through the Insert Panel by following these simple steps:

  1. Open the Kirki editor and navigate to the Insert Panel
  2. Head over to the Elements block and find the Base Element
  3. Locate the Div block, then drag and drop it onto your editor

📝 Note: If you can’t find the Base Element, go to Main MenuView and toggle Show Base Elements.

Using the Keyboard Shortcut

To streamline your workflow even further, press the ‘F’ key – short for Frame – to let the editor know you are inserting a Div block. Draw the frame, and you’re good to go.

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.