Html5 based customizable template components

The graphical user interface is useful to manipulate the web template, but when you customize the detail of the design, you have to edit Html code, and it is comfortable way to do it.

The first parts to customize design is header and footer of the website. It creates a mood of entire website. Simple and beautiful design will help to make opportunities to get inbound links.

Edit Html code

If you are web designer or IT engineer, it is very easy to customize Html code. When you customize the web design of the CMS, the most difficult task is to find where to edit.

But component based CMS template engine makes it easy.

Find components from page template

At first, open the top part of template. It is easy to find which template is used, because each page on the CMS has field to select template.

The Content Management System supports GUI editor, and it can show the structure of the template graphically.

Top part of template

Click the "Open and Edit" button on the template component which you want to edit, then Html Component editor is opened with new window.

If the component is located inside the div layer, which is called Container Part, click the button on the container. Then the structure is shown and you can select the Html Component and open it.

Edit the default codes

The template component is small, and partially divided from other template code, therefore it is very easy to change the html code.

Html5 and server program component

And the StyleSheet, Javascript code and Images are bundled on this page, by clicking the tab for each resource, you can edit or upload them.

Know which variable is available

The html code uses macro to embed variables generated by the server side program.

If you wanted to know which variable is available, then by running the debugger after setting a breakpoint, you can watch what variables are available in the Html code of this component.

debugger shows variables

By this function, you do not have to find the page of manual written about template customization.

Check the design

After you customized the design, you have to preview it. This component based CMS can check the component's design before release it as entire web template. It makes debugging design easy.

Preview component's design

You can debug the Html design by the component it self. By clicking preview button of the Html5 component, new pop up windows appears, and show the component's design.

Following picture is example of preview of Header part.

Preview Header parts

The component based web template engine is useful to manage the design. Each component can totally be managed, you can concentrate on the design of partial component.

Apply the design

When you debugging the design, the latest version's status is draft. Therefore when you finish that, you have to click the apply button to do it.

After the template parts is updated and applied, the status of web pages using the templates, which contain updated component, become dirty, then the pages are republished automatically.

Distribute and backup the design

You can export the Html5 component with zip archive file, and import it. And the top part is also exportable.

Therefore you can distribute these design by using import and export functions. Please take a look at Import and Export Web Design, next.


Go to Top