Many website services provide a drag and drop solution for building websites, but only at Freewebsite you will find a drag and drop page type, which gives you total freedom.

On our drag and drop page you have the opportunity to place text, images and videos absolute freely and in layers, while with other services you are limited to placing items in boxes and not having the freedom to let the elements overlap, for example if want to have text on top of an image.

Our drag and drop page type is a powerful and flexible tool to build the website, and it is therefore our main page type. A page type which we look at in this article.

Drag and drop editor

 

Introduction to drag and drop

As mentioned, you have 3 types of elements available: text, image and video; in addition t the functionalities “Share on Facebook”, “Print page” and “Email a Friend”.

The text element

The element is dragged into the page by clicking the item in the toolbox, then you drag and drop with the mouse.
After the element is placed on the page you can see 5 icons in the small element menu.

Text element in drag and drop

  • Delete icon: Clicking this allows you to delete the item. You will be asked for confirmation.
  • Design bucket icon: Clicking this gives you an overlay, where you can set the background color and border on the text element.
  • Edit icon: Opens a text editor with basic editing tools and the ability to write in HTML.
  • Up Arrow: Moves the element one layer up
  • Down Arrow: Moves the element one layer down

You can edit the text freely and decide the background color and border. The text will automatically appear in a column corresponding to approx. 6 cm. width; to make the column wider or narrower, drag the element’s lower right corner.

All this allows you to create beautiful magazine-like pages with text in small and large columns.

 

Image element

This element can be dragged into the page in the same way as the text element. In the menu you will find some of the same icons as in the text element menu. It is the icons “Delete “, “up arrow” and “down arrow”.

Picture element in drag drop editor

The new icons are:

  • Upload image: Click here to replace the image with your own image.
  • Settings: Place the mouse on top of the icon for the following two options:

1. Edit frame, here you can set border of the picture element
2. Link / viewer, here you can set the image to be a link. It can be either internal and external link, or viewer (image opens in the overlay).

You can upload your own image and replace it as many times as you like. You can also drag the bottom right corner of the element to make the image smaller or larger. To maintain the image’s proportions, hold down the SHIFT key while you drag the element’s corner.

Video element (Youtube)

With the video element you see the delete icon and design icon (which also applies to background and border) and you see the up and down arrows.
Also there is a small Youtube icon that you can click to insert the code that you get from Youtube.

Once you have found the Youtube video, click ‘share’ and then select ‘embed’ and copy the code that appears.
Paste it in the text field on your drag and drop page and save. Now it will display your selected video on the page.

Video element

Our free drag and drop editor covers the basic needs for building an attractive and professional website. If you think this is exciting, you can look forward to our drag and drop Pro, where you will be able to place a contact form, newsletter form, slideshow, music player and Google Maps elements – and much more will come.