View Exmaple Website and CMS demo

After installed CMS, let's explorer the demo website which is initially installed. You can understand what this CMS can do by viewing them.

Default Web page

After installed Content Management System, default demo website is in the database. You can explorer the web by accessing following url.

  • http://[your domain]/

Default CMS Top page

This demo site is created with responsive web design. Therefore by narrowing the web browser's width, you can watch the view of smartphone and mobile.

Administration Console

By accessing following url, login form of the administration console appears.

  • http://[your domain]/admin/

Login CMS Console

Then in put "admin" into both id and password, then the top page of administration console appears.

CMS Administration Console

From this top page of the administration console, you can access various function to manage CMS.

Content Management

In order to manage contents on the website, click "Articles and Pages" button on the administration top page.

Article and Pages button

Then following page appears.

Content Management Page

By using this page, you can manage and write page contents.

Edit Page Article with WYSIWYG editor

In order to edit the article, you have to select article to edit, and open it with WYSIWYG editor. The left page is structured document tree. Then select any page to edit by double click.

Document Tree

Then following WYSIWYG editor is shown on the right pane.

WYSIWYG editor

By using this editor, you can edit the contents of the page.

Embedded parts on WYSIWYG editor

On the editor, embedded part is available. Following part is an example of embedded part for anchor index.

Anchor index module

This parts is to generate index of the page's header automatically. After publishing this page into html, and view it on the browser, following html part appears.

Generated anchor index

For more example, partial sitemap is very useful embedded component on WYSIWYG editor.

Partial sitemap module

It shows list of specified url's page hierarchy.

Select the root of list

By setting root url for the list, and depth of the children, it generates url list automatically.

View and Edit Html source code

The WYSIWYG editor has Source Code mode. By clicking Edit html icon icon on the menu of the editor, following view appears.

WYSIWYG editor's html source code mode

On this editor, by clicking "Format Html" button, the editor automatically format html code. And after edit it, click the "Apply to Editor" button. Then the edited code is applied to the design.

This function is used when you add structured data and scheme into the html code.

Detail of page setting

The page editor has section to set the detail attribute about the page. By pushing the Detail button, the pane is shown above the WYSIWYG editor.

Detail of the page setting

On this page you can do following operations.

  • Set title, subtitle, short title, and description
  • Select template for this page
  • If necessary, set smartphone page's setting and template
  • Set created, updated time
  • Set page type

About more detail, please take a look at Write Page Contents on CMS.

Meta tags for SEO and SNS setting

By clicking the "Additional Code" tab on the WYSIWYG editor, following pane appears.

Additional html header input

On this pane's input, you can write meta tags which are located in the header section of the generated Html.

This function is used for following aim.

  • Set canonical attribute to this page
  • Set robot metatag to this page
  • Overwrite SNS meta tag like twitter card and open graphic

If there is meta tag with same name in the page template, the template engine automatically detect that, and replace it into this setting.

Set Keyword Tag to the article

Click the "Tags" tab on the editor, following pane appears.

Keyword Group Tag

On this pane, you can edit the keyword group tags managed in tag section.

A page has multiple keyword tags and the weight. These tags are used on generating recommend links. By using them, you can generate effective internal links automatically.

Keyword Tags

The keyword tag groups are managed as a tree of tags.

Keyword Group Tags

By using this tags, we can arrange articles on the website efficiently, and build effective internal links naturally.

Recommend links

The recommended links are generated by Keyword Tags Group function.

recommend links

This links are point to the header section which has anchor name. Therefore you can set internal links suitable for the topics of the page.

Blog bread list

The bread list is effective web parts to show the page hierarchy of the website.

Blog bread list

The bread list of the blog articles are calculated from the Keyword Tag Group.

Template Management

This CMS has Component based template engine. You can create a Html5 based component, and arrange them on the GUI editor.

GUI based design

The Content Management System's template engine has GUI editor. You can edit the layout of the template with it.

GUI template layout

There are two types of template editors which are graphically manipulate the template layout.

Top Template

The Top Templates are top level layer of the template. The content page can specify them as the template of the page.

In order to actually view the editor page, click the "Top Templates" on the top of administration console.

CMS Console Menu

About more detail, please take a look at Edit Layout of the Template.

Container Template

The container template is used to implement 2 column layout. By adding Style Sheet section for mobile device, you can make web templates for responsive web design.

The default templates are adopted the responsive web design. Therefore by learning the default setting as example, you can freely create templates with responsive web design.

In order to actually view the editor page of it, click the "Container Templates" on the top of administration console.

About more detail, please take a look at Container Template's Design.

Edit Html5 Component with editor

The template engine has Html5, Style Sheet, Javascript and server side program editor.

Html5 Component editor

By using this editor,  you can customize and create template components.

If you want to customize the design, edit Html and Style Sheet. And want to customize the program, edit the program and debug it by the web based debugger.

Execute Debugger

This Content Management System has enough functions to customize the design and server program on the web browser.

More about it, please take a look at Customize Html5 Components.

Go to Top