Skip to main content
All CollectionsGetting Started with CodeDesign
Introducing the 'Add' Button on CodeDesign Builder
Introducing the 'Add' Button on CodeDesign Builder
Updated over a week ago

The new 'Add' button in CodeDesign.ai is a powerful feature designed to enhance your website-building experience by simplifying the process of adding new elements or sections. Whether you’re a beginner or an experienced designer, this tool makes layout customization faster and more intuitive.

If you prefer a visual walkthrough, we’ve also created a detailed video guide that demonstrates how to use the 'Add' button step-by-step.


Key Features of the 'Add' Button

The 'Add' button offers several benefits to streamline your design process:

  • Quick Insertion: Add elements or sections with just a few clicks, directly where you need them on the canvas.

  • Flexible Positioning: You can place elements either inside an existing section or between sections, depending on your design needs.

  • User-Friendly: The button automatically appears above or below the resize handler when you select a section, making it easy to know where to add content.

  • Access to Pre-built Templates: Quickly insert pre-designed templates from the CodeDesign.ai library for more complex sections, saving time and effort.


How the 'Add' Button Works

The 'Add' button appears when you hover over a section in your design, offering two main options for inserting content:

  1. Add Inside a Section:
    Use the 'Add' button located above the resize handler to insert an element directly inside the selected section. This option is perfect for adding buttons, text blocks, images, or other components within a specific section.

  2. Add Below a Section:
    Use the 'Add' button located below the resize handler to insert a new element or section below the selected section. This feature makes it easy to add content without disrupting your layout.


Adding Templates and Elements

When you click the 'Add' button, you’ll have two options:

  • Add Element: Select from a variety of individual components, such as buttons, images, and text blocks, to insert into your design.

  • Add Template: Browse through a collection of pre-built templates from the CodeDesign.ai library to quickly integrate full sections, such as galleries, testimonials, or metrics.


Example Use Cases

Here are a few common scenarios where the 'Add' button can make your design process smoother:

  • Inserting New Sections: Easily place a new section, such as a testimonial or contact form, between two existing sections without affecting your current layout.

  • Adding Elements Inside a Section: Quickly insert components like call-to-action buttons or images into an existing section to enhance functionality.


Streamline Your Design Process

The 'Add' button is an essential tool for anyone using CodeDesign.ai, allowing for faster and more efficient website design. Whether you’re inserting elements within sections or adding new sections to enhance your site, this feature makes customization easy and intuitive.


Need Help?

If you have any questions or need further assistance, don’t hesitate to reach out to our support team or visit the CodeDesign.ai community forum!

Did this answer your question?