You are not logged in - Login | Register
Noticed something wrong? Please report it!

Dragpad Tutorial

Creating a site

In order to create a site, first click the create link.

Choose a name for your new site and click the create button. If your chosen site name has been taken then you will be prompted to choose a different name.

Adding pages to your site

To add a new page to your site, first visit the details page of the site and then click the add link.

Choose a name for your new site page and click the add button. If a site page already exists with that name under the site you are trying to add the page to then you will be prompted to choose a different name.

Change page settings

It is possible to edit certain settings for each of your site pages.

Rename provides a form for you to rename a page. If the name you choose has already been taken by another site page under the site you are currently viewing then you will be prompted to enter a different site page name.

Delete permanantly deletes the site page and all of its data.

Copy creates a new page containing all the data of the previous page.

Toggle fried page/baked page allows you to choose the method that Dragpad uses to serve your pages to the public. A fried page's data is retrieved from our databases when requested, meaning it will be the most up-to-date version of the page possible. A baked page is served from our server's storage, meaning it will not have to be put together when requested and so may load faster than a fried page.

Lock page allows you to toggle whether a page is locked from being edited or not.

Toggle default page allows you to choose which page is the first to be displayed when someone visits your site.

Editing a page

In order to edit a page, click the edit link.

Choosing a preset layout

Dragpad provides a number of preset layouts which you can manipulate to create a layout that suits you.

Layouts are presented in cells. Layouts containing 1-6 cells are available.

Once a layout has been chosen it's properties can be changed in the main area of the editor. In order to choose a layout, simply click it's link.

You will lose your previous layout if you opt to change it.

Load a layout from another page

If you have previously created a layout for another page in your site then you can load it to the current page that is being edited. In order to load a layout, simply click the page name.

You will lose your previous layout if you opt to change it.

Setting the dimensions of your layout

Once you have selected a layout you can easily change the size of each cell. Simply move your mouse to the edge of the cell that you want to resize and click-and-drag the cell to the desired size.

The dimensions of a cell can also be changed in the menu options. Click the link in the menu for the cell that you wish to change.

Then provide new values for the dimensions of the cell. Dimensions can be given in percentages or pixels.

Configuring your layout

The appearence of each cell in your layout can be changed. Click the link for the cell that corresponds to the one you want to edit in the menu.

A number of options are now available to edit the appearence of a cell.

Padding options indicate how much space there should be between the cell edge in question and any blocks within the cell. These values should be given in pixels.

Border provides options for you to set the border of the cell.

Dragging blocks

Content elements reside under the Elements menu.

Once you have selected the type of Element you wish to add to a cell from the menu, a number of blocks will be displayed.

To add one of these blocks to a cell, click-and-drag the block to a cell.

A yellow placeholder will appear when the cell is ready to receive the block that is being dragged.

Uploading files

The Dragpad editor allows you to upload files to the site that you are editing. To access this feature, click Site files under the View menu.

This menu displays the files that have been previously uploaded to your site along with an option to upload a new file. Click the Upload button to upload a new file.

Choose a file from your computer.

Once the file has been uploaded (you will receive a notification in the status bar when this occurs it will appear in the files list.

Adding a slideshow

In order to add a Flickr slideshow to your page, first click the Media link under the Elements menu.

Drag the Flickr slideshow block to a cell and drop it.

Enter the Flickr username of the user whos photos you wish to display in the slideshow and press the Edit button.

Adding a Youtube video

In order to add a Youtube video to your page, first click the Media link under the Elements menu.

Drag the Video block to a cell and drop it.

To display a Youtube video on your page you must first obtain the video's ID. This can be retrieved from the URL of the video. In this example, the ID of the video is ZThquH5t0ow.

Once you have entered the Youtube video ID, click the Edit button. The video will then be loaded to the block you first dragged to a cell.

Editing a block

When you place your mouse over a block that is already in a cell, a number of options become available to you. From left to right:

Edit the block allows you to edit the content of the block in question.

Configure the block allows you to change the appearence and HTML of the block.

Copy the block creates a copy of the block and appends it to the current cell.

Move the block allows you to move the block to a different cell. Click-and-drag this link to move the block around.

Delete permamantly deletes this block. Use this option wisely.

Configuring a block's appearence

If you choose to configure a block's options you will be presented with this menu.

This menu allows you to edit the block's dimensions, padding, background and border options.

Editing a block's HTML

The configure option also allows you to edit the raw HTML contained within a block, allowing for further customisation for more advanced users.

Saving a page

Once you are happy with the changes made to your page, click the Save link under the file menu. Pages are also automatically saved every 2 minutes.

Viewing the public version of a page

To view the public version of your page, click the pages name in the bottom bar. You will then be taken to your page.

Provide feedback | Report a bug | API | Tutorial | Terms of Use | Privacy Policy
© Edward Kelly Dragpad 2009
Get firefox