Interspire Product Knowledge Base

Would you like to...

Print this page Print this page

Email this page Email this page

Post a comment Post a comment

Subscribe me

Add to favorites Add to favorites

Remove Highlighting Remove Highlighting

Edit this Article

Export to PDF

User Opinions (2 votes)

100% thumbs up 0% thumbs down

How would you rate this answer?



Thank you for rating this answer.

Design Mode

Design mode is a special system that allows for easy editing of templates and text from your web site in a visual manner using drag-and-drop and point-and-click, without knowing HTML or PHP.

Contents
  1. Enabling Design Mode
  2. Editing Text
  3. Moving Panels
  4. Editing Files
Enabling Design Mode
To enable design mode, go to the 'Templates' page in your control panel, then the 'Design Mode' tab. Click the checkbox and then click save.


Enabling Design Mode

Once design mode has been enabled, click on 'View Your Website' and your website will load up in design mode. Only you will have access and see the design mode features. All other visitors to the website will see it as per normal.

While in design mode, you will have a toolbar that you can drag around. In order to perform any of the actions below, you need to enable design mode on the page by clicking the 'Enable' button on the toolbar. It is enabled when the button turns blue with a border. If you want to follow any of the links on the page, click the Enable button again to disable design mode, and then click on the link.

Editing Text
Any text that's pulled from the language pack and is displayed on the front end can be edited when design mode is enabled. To edit any text that is from the language pack, simply click on it and it will change to a form field. Change the text to what you want then click save. It will be updated and saved straight away without a page load. You may find not all text is editable. If this is the case, it will be because the text is not from the language pack, but may be part of something else, such as a category, article or site settings.


Editing Text with Design Mode is enabled

Moving Panels
When Design Mode is enabled you can click and drag a panel to another part of the page. This is useful for changing the order of menus or article lists. Only certain panels can be moved. When you click and hold a panel you can move it to a location above or below another panel by dropping it on the respective sides of those panels. When you are dragging a panel, all other panels will highlight showing where you can drop your panel.

Once you have finished moving the panels to the locations that you want, you will need to click the 'Save' button on your toolbar, or press cancel to reload the page without your changes.


Saving a page in design mode

Editing Files
When Design Mode is enabled, you can right-click anywhere on the page to edit the area your mouse is over. If you want to edit a specific panel, right-click on it and select "Edit Panel...". From the right-click menu you can also select to edit the Layout file for the entire page or the stylesheet. Once an option is selected a new editor window will open up and you will be able to modify and save the panel file. From that editor you can also navigate to any other file and edit them.


Using the editor to edit a file.

In the image above you will notice the menu at the top and file selection tool on the left. In the center/right is the editor box. The default editor is a syntax highlighting textbox that allows you to more easily see and understand the HTML/CSS being displayed. If you would prefer a traditional textarea you can click the 'Toggle Editor' button at the top of the page to change the editor mode. Other options include Save, Cancel, Close & Update and Recent Files. Close & Update will save your current file, close the editor window and reload the page you launched the editor from. The Recent Files option keeps track of the last 8 files you've had open. This is handy for swapping between files when editing your templates.

In the top right you will see a section 'Files used by this Template:'. This section lists any snippets or panels that are used within the file you are currently editing. This is useful for quick editing. Underneath that is the full template file list. The first in the list is the stylesheets, and highlighted in blue are the stylesheets currently active on your website. The file you are currently editing will be highlighted in yellow.

Related Articles

No related articles were found.

Attachments

No attachments were found.

Powered by Interspire Knowledge Manager - World's #1 Best Selling FAQ and Knowledge Base Software