Widgets are where the rubber meets the road— or, rather, where dynamic Web content meets static Web pages.

Wait— we already said that! Expanding on our descriptions in The Basics, the ability to creatively use widgets is key to making great LiveWhale-powered websites. Now let’s get into the details.

Get to know the widget editor.

The widget editor is your key to making and using the twenty-odd types of widgets that ship with LiveWhale. Here are the main types and what they produce:

• Blurbs— list blurbs
• Breadcrumb— breadcrumb navigation
• Events— list events
• Facebook— list Facebook posts, photos, etc.
• Feeds— list items from one or more feeds
• File— display the contents of a specified file
• Files— list files
• Forms— list forms
• Inline Form— display a specific form
• Galleries— list galleries
• Inline Gallery— display a specific gallery
• Images— list (display) images matching criteria
• Navigation— display a specific navigation
• News— list news stories
• Pages— list pages
• Places— show items on a map
• Profiles— list profiles
• Save and Share— show icons for sharing content
• Stream— list items aggregated from other widgets
• Tags— list tags (as a cloud)
• Twitter— list Tweets

Widget Editor Tools

Once you select a widget type, each widget’s specific criteria— called arguments— are presented on the left. Setting these arguments is what defines what items LiveWhale will collect, how it will organize them, and finally, present them.

On the right is a live preview along with the actual widget code, should you want or need it. While the preview has obvious use, the code remains so that you can see the widget structure— see Under the Hood below— and copy/paste arguments, which can be useful to customize a more generic saved widget for a specific use.

Under the Hood

If you take a look at a widget, they are a lot like HTML when you see them in their native state.

<widget type="galleries_inline">
  <arg id="id">1</arg>
  <arg id="type">mini</arg>
</widget>

The above example is one you’re likely to see when clicking “Get Code” on a gallery. It is a widget tag with “arg” or argument tags inside of it. The arguments refine the criteria of the widget to produce the near infinitesimal possibilities for widget output.

Tweak Until Perfect

If all this seems a bit complicated, rest assured that the best thing you can do is use the widget editor preview to its fullest.

Once you’ve spent a little time tweaking a widget to do your bidding, you’ll be able to create them quickly. And, if you hit a stumbling block— remember that we have great training and support.