Zen Grid Framework v4 (ZGF4) based themes feature a simple and easy to use user interface. There are a lot of features under the hood and at your fingertips, but the ZGF4 interface keeps things organised with helpful hints, headings and menus to make sure you stay on the path.
The ZGF4 interface aims to both site builders and developers, to make a control panel that is both feature rich and not visually overwhelming. Zen Grid Framework 4 themes have a number of options that aim to improve your user experience regardless of your skill level and experience.
Basic Mode
Basic mode is aimed at users who are happy to use the default advanced settings in the template and make simple changes to layout, theme selector, fonts etc. When basic mode is enabled the advanced options are hidden from view making the interface more focussed and easier to navigate.
Basic and advanced mode are toggled on specific panels with a Hide Advanced / Show Advanced toggle button. The button toggles the setting for all panels and the basic / advanced state is saved when the user saves their settings.
Users can click on the Advanced setting toggle while editing the template settings in order to hide or display.
Example of layout settings with advanced options enabled.
Advanced Mode
Advanced mode displays all of the features available in the template making it possible to change almost any aspect of the theme.
The settings panel holds most of the advanced features and will allow you to make the most out of the powerful optimisation tools we have added to ZGF4 themes.
Hiding descriptions and information
In addition to the above advanced / basic toggle we have also added the option to hide the descriptive / information elements all together. This mode is aimed at the power user who has already understood what specific features do and are comfortable operating the template without the added benefit of the descriptions.
To hide the template descriptions go to the settings panel and toggle the Hide Template description on.
This is an example of the css page with the information enabled.
Settings with information disabled
And as you can see from the following screenshot disabling the information significantly tightens up the display.
