How to Add & Manage Rows in Sections Using Wireframe (Kea Builder)

In Kea Builder, wireframes are used as the foundation for structuring your web page before adding content or design. Rows play a key role within each section—they allow you to divide space using columns, enabling a responsive and organized layout.

This guide walks you through the steps to add, customize, and manage rows inside wireframe sections for a clean and functional webpage structure.

🎯 Why Use Wireframes with Rows?

  • Visually organize content before design
  • Map out responsive layouts with ease
  • Collaborate and align with team or stakeholders early in the design process
  • Reuse structure to speed up future builds

🔧 Steps to Add & Manage Rows in a Section Wireframe

  • 🟦 Step 1: Open the Wireframe Panel
    Click on “Wireframe” from the top horizontal menu. Step 1

  • 🧭 Step 2: Access Wireframe Sidebar
    The wireframe sidebar will appear on the right, allowing you to create and manage sections and rows. Step 2

  • ➕ Step 3: Add a New Row to a Section
    Inside your section:
    Click on the green ‘+’ icon to add a new row. Step 3

  • 📐 Step 4: Choose a Column Structure
    Once the row is added, a menu will appear at the top.
    Select your desired column layout (e.g., 1-column, 2-column, 3-column).
    ✅ A row with that structure will appear within the section. Step 4

  • ➕ Step 5: Add More Rows
    To add additional rows:
    Click on the green ‘+’ icon again within the green wireframe box.
    Choose a column structure just like before. Step 5

  • ⚙️ Step 6: Manage Row Settings
    Click the “Row Settings” icon to adjust spacing, alignment, background, borders, and more for that specific row. Step 6

  • 📄 Step 7: Duplicate a Row
    To replicate a row structure:
    Click on the Duplicate icon next to the row settings icon. Step 7

  • 🗑️ Step 8: Delete a Row
    Want to remove a row?
    Simply click on the Trash icon to delete it. Step 8

  • 🔁 Repeat as Needed
    You can repeat the above steps to:
    • Build multiple rows under each section
    • Define different layouts for each section
    • Create a clean and structured wireframe for your entire webpage

Wireframing with rows in Kea Builder ensures your design is intuitive, scalable, and user-friendly—all before adding a single visual element.