Powered by DitDat

Tutorial: Changing The Page Layout

In this tutorial you'll learn how to change the layout of a page.

Understanding Page Layout

  1. Go to the home page of your DitDat web site and make sure you're logged in.
  2. Click on the "Page Layout" menu item in the yellow Builder Bar at the top of the page.
  3. A number of yellow rectangles packed with information will appear on your screen. These are labeled "Section 1", "Section 2", etc. Each one shows the width of the section, the number of columns, the minimum height. Each one has a light brown rectangular strip running along its background showing the width of each of the columns in the section.
  4. Click on the "Page Layout" menu item again.
  5. All the page layout information will disappear. 
The Page Layout tools allow you to change your page layout. You can do any of the following:
  • Add a new section
  • Change the width or number of columns or minimum height of any section.
  • Adjust the widths of any of the columns.
  • Edit the properties of any section.
  • Add widgets to any section. 
  • Move sections up or down on the page.
  • Delete any section.
In this tutorial, we'll do all of these things on a test page. That will let you play around without changing any of your existing pages.
Adding a Test Page to Your Site
  1. Go to the home page of your site.
  2. Click on the "Create New Page" menu item in the yellow Builder Bar at the top of the page.
  3. A "Create New Page" dialog will appear.
  4. Set the Title of the new page to be "Test".
  5. Click on the "Save" button to close the dialog.
Your web browser will open up to a new page named "Test". It has been created with your standard "Blank Page" template. It should have a header, a menubar, and a main body with a text widget and an email signup box. At the bottom of the page there should be a footer widget. 

Now we are going to look at the structure of your test page.
  1. Click on the "Page Layout" menu item in the yellow Builder Bar at the top of the page.
  2. Four yellow "Section Boxes" will appear, each at the top of a section. Your page is divided into a stack of sections. Sections are always arranged vertically. You can't have two sections side by side. But each section can be divided up into multiple columns.
  3. Section 1 has one column and contains your Menubar Widget and your Header Widget. 
  4. Section 2 has two columns. In the left column, there is a mostly empty Text Widget. In there right column, you'll see an Email Signup Widget. 
  5. Section 3 has one column and contains the Footer Widget. 
Next, we're going to add a new section and play with it.
Adding a Section to a Page
  1. Look at the yellow Section Box for Section 2. On the right side, you'll see three icons: a "plus sign", a Pencil Icon, and a red X.
  2. Click on the "plus sign" icon.
  3. A new empty "Section 2" should appear. The previous "Section 2" has shifted down and is now "Section 3".
  4. Edit the width of Section 2 to be 700. 
  5. The width of Section 2 now changes to be 700 pixels, still centered in the screen.
  6. Edit the number of Columns to be 3.
  7. The two columns now become three, each the same width -- about 233 pixels.
  8. In the light brown strip, you'll see the width of each column displayed. At the boundaries between columns there's a small divider. 
  9. Grab the divider with the mouse and slide it left to make the column 150 pixels wide.
  10. In the same way, make the right column 100 pixels wide.
You now have a new, narrower section in your page. Next we're going to add widgets to this section and learn something valuable.
Adding Widgets to a Section
  1. Click on the "Add Widget" menu item in the yellow Builder Bar at the top of the page.
  2. A set of widgets will appear.
  3. Select the "Photo Album" widget and drag it down into the left column of Section 2.
  4. Click the Pencil Icon on the Photo Album to bring up the Photo Album Dialog.
  5. Click on the "Add Photo" button and select a photo to upload to the Photo Album.
  6. Click on the "Save" button to close the dialog.
  7. Repeat the above steps 1 through 6 twice more, adding a "Photo Album" with the exact same picture to the middle column and right column of Section 3.
  8. You should now see three Photo Albums laid out side by side, each with a different size. This is an important point. The Photo Album resizes itself to take up all the horizontal room in its column. It resizes itself vertically to keep the proportions right.
  9. Resize the right column now to be 200 pixels wide.
  10. The Photo Albums in the middle and right columns resize themselves to still fill up their columns.
  11. Add a Text Widget to the left column below the Photo Album in that column. 
You now have four sections on your page: 
  • A header section
  • The new section you added
  • The main section containing a large text widget and an email signup box
  • The footer section
Next you are going to move sections around on the page.
Moving Sections
  1. Use the mouse to grab Section 3 and drag it up above Section 2. This can sometimes be tricky, because you have to grab the Section Box in an empty area, but if you experiment, you'll find it.
  2. See what happens when you move the lowest section of the page up above one of the other sections. Are you surprised? 
  3. Try moving the header section down to the second position. Were you expecting that?
Deleting Sections
  1. Click the red X in any of the Section Boxes on your test page to make it go away. 
Always remember that deleting anything is a permanent operation. If we must, we can roll your web site back to an earlier version, but that will cost you something.

If you delete something, it's usually a pretty quick operation to add in a new section or widget and rebuild what you deleted. The only hard things to replace are the text you might have had in a widget. So we always recommend that you create text for your pages in a word processor or text processor and save that to a file before you paste it into your pages.
Cleaning Up
In this tuturial, you've had a bit of fun playing around with sections on a test page. Now it's time to clean up.
  1. Click the "Page Layout" menu item in the yellow Builder Bar at the top of the page. 
  2. The yellow Section Boxes should go away, showing you just the contents of the page.
  3. Delete this test page by clicking on the "Delete Page" menu item in the Builder Bar.
  4. A dialog will appear to ask if you really want to delete the page. 
  5. Click on the button to delete the page.
  6. Your browser will take you to your home page.
This is the end of this tutorial. You now know most of what you need to know about laying out pages on your DitDat site.

Need More Help?

To keep our prices dirt cheap, DitDat is a self-service tool.

If you need help, look here:

  1. The FAQ Page (Frequently Asked Questions).
  2. Email the other people in your cohort.
  3. The Newbie Forum. 
  4. Ask a question at the next DitDat online seminar.
  5. DitDat Customer Support. (This will cost something! This is how we keep your basic prices low.)