Everything on a page is a widget. When you want to add text, you add a Text widget. When you want to add an image, you add an Image widget. When you want to add a video from YouTube, you add a YouTube widget.

To see the widgets that come with your site

• Open a page, and then in the upper-right, click  Widgets.

Your Widgets drawer is located on every page and element. To add a widget to a page, just drag the widget onto the page.

This is your Widgets drawer where all your widgets are located. Some widgets are grouped into categories. Uncategorized widgets are listed alphabetically. Instead of scrolling, you can also search for widgets once you know their name.

At the top of the Widgets drawer, you’ll see Blocks. These are basically prearranged groups of widgets. You’ll also see Snippets, which are arrangements of widgets that you’ve saved to use again later. For more about blocks and snippets, check out blocks & snippets.

To add a widget to your page:

• Drag it from the Widgets drawer onto the page.

When adding a widget, you’ll see various borders, indicating exactly where you’re inserting the widget. You’ll learn more about creating columns and rows later (create columns and rows).

You’ll also see various zones. You’ll learn about zones later (page zones), but in general, drag widgets to the This page zone.

To add a widget to a page, just drag it onto the page.

Once you’ve added a widget, you can configure it: add text and images or adjust settings.

Right after you add the widget, you’ll see a gray box representing the widget.

So to see the widget’s settings:

• Click it, and you’ll see the Settings on the right.

To configure a widget's Settings, after inserting a widget, click the gray box.

You don’t need to save after changing a setting. And if you’re entering text, just click outside the textbox to see your changes on the page.

When adjusting a widget’s Settings, you don’t need to save—just click outside of the box.

Adding text and images right to the widget works for simple designs, but the SiteStudio also lets you store content separately. Then you can import that content into widgets.

This way you can delete pages without deleting the content, use the same content in multiple places, and create dynamic pages. Read more about creating content sets in the separate content from design course.

Instead of adding text directly into a widget, import content from a separate content set. Read more about creating content sets in the separate content from design course.

When you added your widget, you may have noticed various zones. Every page has a:

• Header zone
• Menu zone
• This Page zone
• Footer zone

The same Header, Footer, and Menu are on every page. So if you add a widget to the Header zone on one page, you’ll see that widget on every page. For example, you might add an Image widget to the Header with your company logo.

Each page has a Header, Menu, This page, and Footer zone. To add widgets to only one page, drag them into the This page zone. Widgets you add to the other zones appear on every page.

The Header, Menu, and Footer are examples of Page Elements. You use them for situations where you want to create and edit something in one place, but then use it on several pages. Learn about editing and creating your own page elements in the course on page elements.

To add a widget to just the page you’re on:

• Drag it to the This Page zone.

To see how a page is structured, at the top of the page, click the Page Structure button , which places borders and labels around each component on a page. These borders also appear once you start dragging a widget onto a page.

Click Page Structure to see borders around each element (widget and zone) on the page.

Once you start dragging widgets onto a page, you might have some questions about how to achieve more complicated layouts such as adding multiple columns or adding rows with different numbers of columns.

Depending on what layout you're trying to achieve, there are a few different techniques you can use.

• Multiple columns
• Complex layouts (using the Container widget)

Multiple columns

Creating multiple columns is a good introduction to how laying out a page works.

Here are the steps:

1. To create the first column, drag a widget (e.g., Heading widget) onto the page.

2. Now to create the second column, drag another widget to the left or right of the first widget—instead of above or below. You’ll see a tooltip with Column when you’ve positioned the widget correctly.

3. To resize a column, just drag the inside edge left or right: when you hover over the inside of one of the widgets, the tooltip Resize will appear, indicating that you can resize the column.

4. To add more columns, continue to add additional widgets. Because Moboom utilizes Bootstrap, the page will support up to 12 columns. For more information on the Bootstrap grid layout, see Bootstrap's documentation.

Here's a live example how rows and columns work. If you know HTML, inspect it for more information.

Complex layouts (using the Container widget)

Creating complex layouts, such as the following example, is simple with the Container widget. The Container widget is located under the Layout section of the widget toolbar.

Tip   If you’re familiar with HTML, think of the Container in much the same way as an HTML div.

The Container is just a box. You can drag widgets into the Container, and you can apply styles to it.

You can, however, create a variety of layouts without the Container widget, and so you only need to use the Container widget if you want to create more complex layouts—like this four-widget example.

To set up this four-widget layout:

1. First create two columns (described in multiple columns).
2. Next place a Container widget below column 2. When dragging the widget into place, make sure that Insert line is located under only column 2 and not under both 1 and 2.

3. Now drag two widgets right into the Container, placing the widgets side-by-side—creating two columns.

So using the Container widget, you can create complex layouts just by dragging and dropping.

While your site comes with a good variety of basic widgets, if you want something specialized, check out the Market. The Market has a variety of widgets created by Moboom and other developers.

There are a couple ways you can add widgets from the Market.

First, if you know a widget’s name or a keyword, search for the widget right from your Widgets drawer. Type in the name, and you’ll see the widget below under Get more widgets.

If the widget isn’t free, you can try it out for as long as you like. Pay only once you publish the page.

To find new widgets, search for them right from your Widgets drawer. You can drag them onto a page and try them out for free. Pay only if you decide to publish the page with the widget.

You can also go right to the widget’s page in the Market and add it to your account. After you add a widget in the Market, you’ll see it in your Widgets drawer.