Widgets hold your content. You have different widgets for different types of content; for example, you have an Image widget for images, a Text widget for text, and a Heading widget for headings. Learn to add, use, and get more widgets.
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
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:
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.
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:
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.
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.
When you added your widget, you may have noticed various zones. Every page has a:
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.
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:
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.
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.
Creating multiple columns is a good introduction to how laying out a page works.
Here are the steps:
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:
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.
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.