Add New Elements to Your Website

Want to customize your site and make it truly yours? This guide will show you how to add new elements to your website using Grigora's no-code builder — whether it's a text block, image, button, form, or section layout. Perfect for beginners and pros looking to build without the hassle of code.

Accessing the Elements Library

Open the Grigora editor and look at the left panel where all your design tools are organized. Click on "Add Elements" to see the complete list of available elements you can use to build your website.

From this list, you can add any element you want to create exactly the layout and functionality you envision for your site. The comprehensive element library includes everything from basic text and images to complex forms and interactive components.

Adding Elements with Drag-and-Drop

Simple Element Addition

Let's add a container element as an example of the straightforward process. Simply drag the container from the elements list and drop it into your editor workspace where you want it positioned.

This drag-and-drop interface makes website building intuitive and immediate, allowing you to see results instantly without any coding knowledge required.

Nesting Elements for Structure

After adding the text block, you can type your content directly into it, making content creation seamless and integrated with the design process.

Using the Element Toolbar

When you select any element, you'll notice a toolbar appears above it providing essential management controls. This toolbar gives you several useful options:

Element Positioning

You can drag the element using the drag handle to reposition it anywhere on your page, giving you complete control over your layout without affecting other elements.

Parent Selection

The up arrow button lets you select the parent block of the current element. This feature is useful for selecting containers when you have nested elements, making complex layout management much easier.

Element Removal

The delete button allows you to remove any element you no longer need, keeping your workspace clean and organized as your design evolves.

Building Your Vision

This way you can drag and drop any elements you want into your editor and build your website exactly how you envision it. The system provides:

  • Mobile-responsive design that automatically adapts to all screen sizes

  • Lightning-fast performance with optimized code generation

  • Customizable spacing, layout, and design that you can adjust on the fly

  • Professional results without technical complexity

No-Code Advantages

This approach offers several key benefits:

Call-to-Action Buttons: Add conversion-focused buttons anywhere on your page

Images and Media: Insert visual content that enhances your message

Forms and Interactive Elements: Capture leads and engage visitors

Section Layouts: Create complex page structures with ease

Custom Spacing and Design: Fine-tune every aspect of your site's appearance

Efficient Website Development

Simple drag and drop with powerful toolbar controls makes website creation accessible to everyone while maintaining professional standards. This no-code approach eliminates technical barriers and allows you to focus on your content, design, and user experience rather than coding complexities.


Was this article helpful?