The latest update to the CodeDesign Builder has introduced a fresh, streamlined interface designed for a smoother and more intuitive website-building experience. The revamped builder now offers an expanded full-screen canvas, pop-up editors, and enhanced design tools, enabling faster, more flexible customization directly on the canvas. Here’s a breakdown of what’s new and how you can use these features to speed up your workflow.

When starting a new project from one of our templates, you’ll notice the first big update: a full-screen canvas view. This immersive workspace allows you to focus on your design without needing to toggle through settings menus, offering a comprehensive view of your page. This streamlined layout makes it easy to preview and adjust your website’s look in real time.

For more complex customization, toggle on Advanced Mode from the header. This mode opens up additional options, including layout settings, layers, an extensive elements library, and a full component library in the sidebar. Switching between the standard and advanced interfaces is as simple as clicking the toggle, so you can easily adjust your workflow to suit your project’s needs.

In this update, all text, image, and element editors now open as movable pop-up boxes. To edit text, for example, simply double-click on the desired section, and the text editor will pop up. After making adjustments, you can click outside the pop-up to close it instantly. This flexible approach to editing allows for quick tweaks without needing to open separate menu sections.

The new resize handler tool lets you adjust an element’s size, padding, and height directly within the builder. Move elements smoothly with the addition of arrow buttons—simply select the element, then use these buttons to position it up or down within the layout, providing precise control over spacing.

Styling elements like buttons has also become easier. When selecting a button, you’ll find options to change its color and styling directly from the pop-up editor. This reduces the need for navigating between additional menus, allowing you to quickly experiment with and apply new looks.

Double-clicking on any image opens a dedicated pop-up where you can upload images from your device or select options from Unsplash. This intuitive image editor is designed for quick access, so you can update images without needing to leave your workspace.

The newly introduced ‘Add’ button simplifies expanding your design. To add a new section or component, simply select an existing section, then click on the 'Add button' located above or below the resize handler. From there, you can add a specific element or browse the pre-built component library for templates. Once you select a template, it’s instantly added to your design, saving time on building each element individually.

The updated CodeDesign Builder is designed to enhance both efficiency and creativity, offering easy access to editing tools, layout adjustments, and advanced options in an intuitive, user-friendly interface. If you have questions about any of the new features, feel free to reach out through our support chat or join discussions in the CodeDesign community forum. Dive into these new features and experience a better way to build with CodeDesign.