Artisteer 4 Gui, Automated CMS Web Designer Theme Generator (how-to Video)

Video Script

In this video we I’m going to discuss the Artisteer 4 Graphical User Interface (GUI).

For those who don’t know what Artisteer is, its simply a WYSIWYG design tool for creating content management system (CMS) templates for WordPress, Blogger, Drupal, Joomla and HTML.

The Artisteer interface consists of the File Menu, the Quick Access Toolbar,  the Ribbon, the Preview area, and the Pages and Posts Panel.

File Menu contains project options, (New, Open, Save and Save As), template options (Export, Import Preview in Browser), plug-in development options, Activation settings, and About Artisteer dialog. You can also adjust the GUI settings in Preferences or exit Artisteer.

The Quick Access Toolbar contains the Open, Save, Undo, Redo and Export options. This is a customizable toolbar which you can use to create one-click shortcuts to frequently used commands, and quickly perform the most common tasks.

To add a new item, right click on the desired command button in the Ribbon bar and select “Add to Quick Access Toolbar” option.To remove an existing item, right click on the item in the Quick Access Toolbar, and select “Remove from Quick Access Toolbar”.

The Ribbon, contains all the designer tools. The Ribbon bar is divided into tabs, and the tabs contain options for designing the whole template (Home, Edit, Colors and Fonts, Layout, etc.) or its parts (Background, Sheet, Header, Menu, Content, Blocks, Vertical Menu, Controls, Footer) and so on.

The Preview Area. lets you see and edit your design using Preview Highlights.

The Pages/Posts Panel is a part of the preview area. It displays your website structure. You can also add, delete, edit or rename pages and posts here.

Additional options can be displayed in Panel or Window mode. With Panel mode you don’t have to continually select the ribbon bar to open a dialog to change options.

For example selecting the sheet tab, followed by this really tiny expand icon, will display the Sheet Options Panel. Clicking on the preview area header will display the Header Options Panel. Clicking on various aspects of the template will display the options panels for those area. Clicking on the window mode icon will display a floating pop-up options window. Clicking the Panel Mode button will as you would expect restore the panel mode.

The Pages and Posts panel, located on the left side of the preview window, is your site map. It shows you all of the pages and posts that have been created in your project. You can manage your pages and posts using the context-menu. Simply, right-click on a page and post in the folder to see the associated context menus.

• New Page, New Child Page, New Blog Post, Edit, Rename (F2), Delete, Use as Blog Page, Hide Article Title, Properties.

You can hide the Pages and Post Panel by clicking on the icon in the upper right corner.

If we select the page properties general tab, we can define the attributes of for the page. Some of these are very important to search engine optimization (SEO) so should not be neglected.

In the General section we have the Name URL and the Title. The Name URL is the name of the web page. This is used to identify the page on your website.

The Title is the HTML reference to your page. This is the title of your page as it appears in the browser’s tabs or in your favorites list when the page is bookmarked.

• Note this is different from the title that appears in the website map (Pages/Posts Panel). The title in the website map is used in your horizontal and vertical menu (if you have not changed the menu source).

By default, the menu sources for both horizontal and vertical menu are the pages you create in Artisteer. The captions are from the page titles in the site map.

In all of the built-in CMS templates, you can change the source for both in the backend. You cannot edit the menu items directly in Artisteer (unless you enable the Include Content Option).

If the menu source is pages’, typically the Home item links to the frontpage of your site. You don’t create or edit this in Artisteer. By convention, the first item in the menu is the Home item. You can define the caption for this. You can optionally decide to omit the option entirely which means you can’t navigate to the frontpage from the menu.

Both menus have pages’ as the default menu source but typically the vertical menu has a different set of navigation links.

You can always choose to change the menus entirely by creating custom menus in the backend. The important thing is that you create the style’ for the menu in Artisteer and the content in the backend.

Okay, lets have a look at the Page Tags.

For the description, give a short description of the created page, about 150 characters. Your description becomes part of the HTML meta tag description code for this page.

• <meta name=”description” content=”Your Page Description” />

The Keywords entered here become part of the HTML meta tag keywords code for this page.

• <meta name=”keywords” content=”keywords” />

If you want to include any additional meta tags use the  Custom Meta Tags, text box.

• <meta name= “author” content= “Philip King” />
• <meta name= “website” content=”http://kingsolutions.org.uk” />

Okay, lets move on to the Show in Menu properties.

In the Show in Menu properties there is a Horizontal and Vertical menu check box.

In either case, check the box to have the page displayed in the relevant menu.

You can also select what pages to display in the Menus using the Pages in Menu buttons to bring up a site map where you can select the pages.

Now lets discuss the Export and Publish Menu.

Templates and websites created in Artisteer can be either exported or published. When you export a CMS or website template a local copy is first saved on your computer,

When you export your design, Artisteer generates a theme template on your local machine ready for uploading to your website. You can use Artisteer as an FTP client to move files to your server or a separate FTP client.

When you publish a CMS template or a website template it is uploaded to host server, such as Blogger.com or Artisteer.net.

I’m not sure if that makes sense at this stage, but we’ll discuss FTP in more detail in another video.