Managing Sidebars in your ‘Website or Blog’ Project

We’ll explain how to create them, how to manage them, and what to do with them once you’ve added them to your template.

If you’re designing your website for a specific CMS, like WordPress, or Joomla, please refer to one of the "Installing and using…" links on our wiki page for more information about using the Vertical Menu, widgets, and modules with your CMS:

Docs & FAQ

Please note this article is based on the standard edition of Artisteer, version If you’re using a different edition, or version, the features, menus, and dialogs described in this article may not be available.

What’s a Sidebar?

When you create a new Artisteer template, you need to decide on the column layout. In Artisteer, you can create a 1, 2, or 3 column layout.


The sidebar(s) are the columns on either side of your Content Area column. With a 1 column layout, there is no sidebar.

What you put in Sidebars are interactive features that make your web pages more accessible. These are called Blocks. For example, a Vertical Menu is a special type of block that allows your viewers to jump to other pages of your site. Blocks normally appear in the Sidebar, but as we’ll show you later, you can also place them in the main Content Area column.

Creating a Style for the Sidebar

After you determine the number of columns for your pages, you may want to consider how you want your Sidebar to look.

sidebar styled

Adding a style to the Sidebar, lets you add a background Fill color, Transparency (Fill→Transparency), and a Glare. Without a style, the Sidebar has the same background as the Sheet.

You can also individually control the styling for each Block in the Sidebar, whether the Sidebar has a style or not.


Blocks contain several other containers and style elements you can control individually, such as the Block Header, Block Background, Block Content, Borders, Fill color, Transparency, etc

Blocks all share the same style, except the Vertical Menu which is styled separately (Vertical Menu tab).

Add a New Content Block

content block

Notice that when you choose a position for the Block, it doesn’t have to be in the Sidebar; it could also be added to the Content Area column.

When you select a Block with the cursor, a rectangle appears on top of the Block to show you where you can add content.

second block

The icons in the upper-right corner are for 1) randomly selecting a design for the Block, 2) deleting the Block, or 3) changing the position of the Block.

You can edit the Block Header directly, and you can edit the Block contents very much like you can edit the content in the Content Area. Notice though, when you click on the content area within a Block, the options change slightly on the Edit tab.

edit tab

The Content tab is grayed out because these options only apply to the content within the Content Area of your page (i.e. not one of your Sidebar columns). But, there are quite a few different types of objects you can add to a Block, like Hyperlinks, Buttons, Images, and Video. Any object you insert into the block, except for text, is interactive (i.e. you can associate a link). For instance, if you have thumbnail images, or pictures representing your important pages, instead of a dull list of hyperlinks along the sidebar, you could insert a list of images or icons instead. Also, like the Content Area on your page, you can add custom code to the content of a block (Edit→HTML Source).

Styling the Block Content

You can style the Content that you add to a Block (e.g. text, links, lists etc.) using the Blocks→Block Content options.

edit tab

The styling for the content in a Block is separate from the styling you define for your Content Area (see Content tab), but only for these settings

Everything else can be styled with the Content tab. For example, if you want to use an H1 heading in your block you can use the same H1 style you created with the Content tab. Or, you can also override the style with the Edit tab. If you don’t like the default font size for H1, select the text and change the font size (Edit→Heading1→Font Size).

Buttons are styled with the Button tab.

Using Widgets in the Sidebar

When you create a new ‘Website or Blog’ project, you may notice that the default sidebar has a Vertical Menu and a Content Block.

sidebar widgets

You can modify the Content Block but you can’t modify the Vertical Menu. You may also notice that this is not unique to the Vertical Menu. You may find sometimes there are some blocks you can edit directly and some blocks you can’t. This is because a ‘Website or Blog’ type project is also for making websites that you can host on, versus some other website hosting service. is a free hosting service but it’s not just for HTML websites. Since it’s WordPress based, it has a number of features you can use to turn your website into an interactive blog. One of those features is called a ‘widget’. Widgets can look often look like custom blocks, but you can’t edit them directly. A widget is a pre-defined code feature you can use to make your pages more interactive. Most CMS hosts, like WordPress, and Joomla, support widgets, although the widget names, types and terminology varies.

Except for the Vertical Menu, a widget doesn’t work automatically unless there is some code on the hosting service to support it (e.g. a CMS like This is why you shouldn’t add a widget to an HTML website. It won’t work. You can’t edit the content, and you’ll just end up with a widget and some sample content (e.g. links) that doesn’t do anything.

Add a New Widget for an Website

add new widget

Adding a new widget to the sidebar is the same as adding a Block except you choose from one of the built-in widget types. The styling you define for the Block, using the Blocks tab, also applies to any widgets.

On the desktop there are five different types of built-in widgets you can add to your sidebar: Categories, Search, Vertical Menu, Archives, and Blogroll. But, there are many more widgets available on

available widgets

You cannot edit the content of a widget on the desktop but you can add/edit the content on After you publish your website, the sample content in your Artisteer project is replaced by the content you added in

edit widget content

The Categories widget was added on the desktop before publishing. After publishing the website, the specific categories were then added on, and then the Search Engines widget was also added as a custom menu. After re-publishing the project, now the categories (‘dog’, ‘cat’) appear under the Categories widget, and the Search Engines widget appears in the Sidebar. You can’t edit either of these widgets directly on the desktop but you can change their position and appearance. Also, notice how the Search Engine widget now appears in the Widgets menu. Any time you include an widget to your website, it gets automatically added to the widget list in your project.

Vertical Menu for HTML Websites

Like the Horizontal Menu, A Vertical Menu can be used to navigate the pages of your website. For an HTML website, the menu source is always the pages of your site.

edit widget content

You can change the pages that appear in the Vertical Menu by clicking on the Pages icon (right-corner of the Vertical Menu title), and selecting/unselecting pages from the dialog box.

You can’t change the Vertical Menu directly in Artisteer. That is, you can change the appearance of the menu with the Vertical Menu tab but you can’t edit the links, or change the item text.

Vertical Menu on

If you’re hosting your website on, the Vertical Menu is handled in the same way as in WordPress. The source for the menu is one of three types:

In, use the Menus tab on the ribbon bar (Home→Menus):


Enter a name for your menu, and then define the items for your menu with the Custom Links dialog. Here we just created two simple links to redirect viewers to Google and Yahoo. When you’re done, make sure you save your menu.

Under Theme Locations on the Menus page, you may notice that there are two options: Primary Menu, and Secondary Menu. Primary refers to the Horizontal Menu on your page, and Secondary refers to the Vertical Menu. Normally, when you assign your custom menu to one of these types, your menu becomes the source for one of these menus. For example, if you create a custom menu and then assign it to the secondary menu, then your custom menu becomes the source for the Vertical Menu. But, if you find that this doesn’t work for you, there is another way:

Go to the Widgets page in


The Vertical Menu is by default assigned to the Primary Widget Area. For an explanation of the Widgets page, please refer to the manual. You can also find a nice layout of the widget areas.

If the Vertical Menu does not appear in the Primary Widget Area, drag&drop the menu from the list of widgets. Enter a title for the menu, as you want it to appear on your page, then ‘custom menu’, and select the custom menu you just created, and then ‘Save’.

custom menu

Now your vertical menu appears like this:

custom vmenu