Widgets

Design and Layout > Widgets/Layout


Note the floating palette of widgets. You can actually drag that around, which is pretty useful as your page gets longer and you want to find a new widget for the bottom of the page. On the floating palette, just click and hold on the grey bar that says “Widgets” and it will move where you want it.

We start you off with a few samples: Multipurpose, Google Gadget and Twitter. All of these have sample content that you can delete by removing the widget, or opening it up and substituting your own content.

Click on the floating palette of widgets to see lots more choices, divided into three categories: General, My Community and Social.

To drag a widget into place, find any widget in the palette and drag it to any empty box labeled “Drag a widget here” or just drag it above or below any existing widget.

Moving a widget already in place is easy. Here’s the technique: on the widget, click and hold above the black bar (in the shaded, horizontal space).

Drag that widget above the black bar of any other widget. Or, of course, into any empty box labeled “Drag a widget here.” Release the “hold” on your mouse, and it should settle into place.

The widgets in “My Community” just start working when you drag them in place – that’s because they automatically compile up-to-the-minute activity about the what’s happening with users on your site: leaving comments, joining, signing on, etc.

All other widgets require that once dragged into place, you open them up to do stuff. In fact, they won’t look like they do anything at all until you open them.

To open a widget, on the widget’s drag and drop bar, click once on the wrench icon:

A pop up window then opens with instructions.

You should try a ton of widgets. If you decide you don’t like a widget, you can always delete it by clicking on the X in the Drag and Drop bar.

General Widgets: the Multipurpose Widget, is one of the most versatile – e.g. you can use it to insert text about your website and make it bold or ital. Or create a bulleted list. And, you can use it to put a large photo above your blog (click on the camera icon above the text body in the pop up), or a video from an outside site such as YouTube (click on the film strip, at the far right, above the text body, in the pop up).

Not every image or video fits everywhere. A giant photo won’t fit in the skinny first column. It won’t hurt to try, though, and even if it seems like something doesn’t fit because it extends over the next column in the widget/layout mode, try clicking “Home” on your Admin Bar (the far upper left of your site) to see what it will look like when the site is live.

e.g. This extra large photo looks too big in layout mode but looks great when you go Home.

Viewed in layout mode:

Viewed from Home:

Also in General is the Google Gadget widget. There are thousands of Google Gadgets to explore to add interesting features to your site, such as flash games, news headlines and photo streams. Drag a Google Gadgets widget on your site. You’ll see a link to the Google Gadgets site. Search the site for something you might like and you’ll be given “HTML code” you can copy and past back on your website.

Here’s a Google Gadget from the Wall Street Journal; the HTML code is at the bottom:

You can also embed HTML code from any source, from Flickr to You Tube to Facebook. Be aware, though, that if you embed lots of flash elements on every page, it will slow down the page load times of your site.

Drag the widget labeled “HTML embed code” on to the site. Now, check that the site you’re embedding code from is listed as a “Safe Source” by clicking on that link in the widget. You’ll be taken to the Embed Code section of Features Permissions – and you’ll need to click the Safe Source link there, too.

We already list several well-known websites (You Tube, Flickr, Facebook, Google, etc.) that have embed code. You can add your own to the list – just be careful that you trust the source.

Now let’s look at how you can turn on and off basic features of your site, such as blogging, and how you can give other people permission to contribute to and edit your site.