Drag and Drop

NetzBuilder supports drag and drop for your web elements inside the canvas editor. With your mouse, you can select entire blocks or individual components and drop them directly on a page. You can also rearrange and move elements on an existing page. Learning this feature is essential to gain skills while building content on your pages and it’s a powerful tool to be more productive.

Don’t worry if you don’t know the difference yet between blocks or components. This will be explained in further chapters. To keep it simple for now, let us learn how to drag and drop first.

We start with a blank canvas. The canvas is where we visually edit our web pages. Let’s first try inserting a full header into our new page. Several HTML elements comprise a header, so we have it organized under a full block of code called Headers.

A block is a full composite of premade code that includes a container, a grid and some HTML elements inside. You can learn more about this in further chapters. Let us call this a Header section which is what most websites have on the top of their pages.

Go to the menu and select BLOCKS > Headers

We can now drag and drop any header to the canvas. First, we position our mouse cursor over the desired header. Let’s pick this beautiful header with a background picture of some mountains.

1. Left click on the element to select it. Keep your left button pressed down and don’t release it. This activates the drag function. Still with the left button clicked on the element start slowly moving the cursor towards the canvas.

You should see a 3-line green box that indicates that you have an element selected while doing this.

2. Move your cursor (always with the left button pressed down) anywhere you want on the canvas editor. The canvas automatically displays a gray dotted line in any valid place you can insert the element as shown in the following picture.

3. Now with the box inside the dotted lines, release your left mouse button.

That’s it! Pretty simple right?

To resume, left click to select an item, hold your button pressed down. Drag it to the canvas and release it on the desired position. Don’t worry if you don’t get this right initially because even if you insert something in the wrong place, you can still move it afterwards to the correct position.

Now let’s try the same procedure but on the canvas editor with an individual element inside our recently inserted header. Let us move the Learn More button above the paragraph text. Left click on the Learn More button and while keeping the button pressed move the cursor above the text. As you keep moving the element, you will see a blue line. This line shows you visually where the element appears once you release it. Since we want to put it above the text paragraph, the blue line should look like the following image:

You will also notice a red border with a title around while dragging the item. This indicates the container on which we are currently working which is called a DIV. To drop the element, release your left mouse button. That’s it! If you don’t like the position of the element, you can move it back with the same procedure. Keep in mind that you can only drag and drop elements inside the canvas editor to a valid DIV container block. This is very easy to recognize because any valid section is marked with a red dot line called DIV and the position where you can drop an item with a blue line.