This chapter will help you familiarize yourself with EFS Panel’s Content Management System.

• You will be taking a look at the standard panel from the perspective of an interested visitor and that of a panelist who has logged in.
• In the admin area you will get an overview of the existing websites and language versions and familiarize yourself with the Website Editor.
• You will create a new panel page.
• References to detailed descriptions in later chapters of the manual give you an insight into the versatility and power of the CMS.

The Panel Website From a Participant’s Perspective

What Do Interested Visitors See?

The online panel platform can usually be accessed at http://www.your-domain.com

• On the start page, visitors are welcomed and introduced to the panel.
• Interested visitors can view further information, e.g. on the panel’s operator or the rules of participation, using a menu, a navigation bar or links.
• Visitors wishing to participate in the panel can open a registration form and register.
• Visitors already registered as panelists can log in.

What Do Logged-in Panelists See?

After login, panelists can access the password-protected internal panel area.

• Panelists are greeted by name on the personal homepage. This page usually contains a list of surveys the respective panelists are able to participate in.
• The panelists can access restricted information, such as news or survey evaluations.
• The panelists can view their personal data (e.g. address data, account balance).
• They can take action themselves, e.g. change their own registration data, redeem bonuses or invite friends.

Editing the Panel Website

Finding Your Way Around the EFS Panel Admin Area

The EFS Panel’s admin area is protected by personalized login. This can usually be accessed at http://www.your-domain.com/www/

After logging in, you will see the start page of the admin area which provides an overview of the panel and the projects in progress:

The navigation bar in the upper section of the screen contains links to the various modules. The Content Management System (CMS) and further functions for editing the panel website(s) are located in the Website module.

Websites and Language Versions

Open the Website menu. This takes you to the website overview. Here you can see all the websites and the corresponding language versions:

• A language version is a group of pages and functions that form a complete, selfcontained external panel view in a single language.
• A website is a group of language versions that together form an independent online platform - i.e. a panel which has been translated into several languages.
• A website may comprise any number of language versions. Although the page structure of these language versions is identical, each version has its own set of templates. When selecting modules and configuring processes, such as registration, for example, there is significant room for language-specific variations. What’s more, not only can you take the entire website offline for maintenance purposes, you can also do the same to individual language versions.
• In addition, the languages of different websites also have different page structures.

Participants across websites and language versions of an EFS Panel installation are managed with the help of the same EFS Panel administration.

A default standard panel only contains one website (“Panel Website”) with one language version (“English”).

The Website Editor

Panel pages are edited in the Website editor. To open the website editor, click on the name of the desired language version in the overview. Alternatively, you can open the Website editor menu and select the desired website and language version via the dropdown list in the head section.

The structure of the website editor

The Website editor comprises the following three elements:

1. Language version info: This field provides basic information on the language version. Use the drop-down list to switch between website language versions. Ensure that the version you want to edit is selected. This is automatically the case when you open the editor from the website overview by clicking on the desired language version.
2. Left-hand dialog: Depending on the selected tab, this dialog contains the basic settings or the page, template or include structure of the current language version.
3. Right-hand dialog: This dialog contains the actual editing dialog of the selected page, template or include.

Tree view

The tree view displays the page structure of the language version currently opened and the various tools available for editing.

• Settings: In this dialog, you configure the properties of the language version.
• Pages: This tab contains the panel pages. The tree view displays the page structure:

  • The panel navigation bar lists the menu items according to the order of the pages in the tree view, e.g. Home – Registration – How it works – News

  • Pages located at the sublevel in the tree view are also displayed at the sublevel in the external navigation, e.g. How it works → FAQ
    
    

• Templates: Templates control how various data from modules and the panel database are processed and displayed on panel pages.

• Includes: Files that are incorporated e.g. in main template. These include, for example, the CSS file, which is largely responsible for the layout of a website.

Adding a New Panel Page

In your community panel, the panelists have their own personal blogs. As these blogs are crucial for your research, you want to provide information for potential panelists and encourage them to ask questions via a dedicated form. Assume you want to create a new panel page that will allow prospective panelists to request information material. The new page is to be entitled “Blogging”. It is to be accessible to visitors and panelists and located in the navigation bar in the submenu of “How it works”. It should contain two elements: A section with explanations of what you can do on the page, and a form for requesting information.

Creating a New Panel Page

1. Open the Pages tab and then klick on the + Page button.
   
   

2. Enter the following data:
   
   – Page identifier: The page identifier is used to uniquely identify the page within the system, regardless of language settings. It is particularly used in the browser address bar and for internal links. Therefore it should not contain any blank spaces or special characters. Enter: “blogging”.
   – Parent page: You want to locate the page at the top level of navigation. Therefore select the following folder: “Pages → How it works”.
   – Position: In the submenu of “How it works”, you want to place the page “at the beginning”.
   – Internal page name: Name of the page in the tree structure. If you are editing a website with several language versions, you can choose a different name in each version. Enter: “Blogging”.
   – Main template: This is the main template that defines the overall page structure. Select “main_default”.
   – Positioning template: The template allows you to change the default position of content elements. This is not necessary for new sample pages.
   – HTML title: Title used in the browser, the navigation and in breadcrumb. Enter: “Blogging”.
   – Access control: You do not wish to restrict access, all interested visitors and panelists are to have access. Therefore select “Public”. Show in navigation: You want the new page to always be visible in the navigation bar. Therefore select “Always”.
   – Meta keywords: In this field, you can enter keywords someone using a search engine would expect to find the page under. This field is optional so leave the sample page empty.
   – URL Alias (previously: “Page name for URL”): Optionally definable page name that may be used to create a search engine friendly URL in the current language version. Leave this field blank.

3. Confirm by clicking on Save.

4. The page is created and the tree view is updated. You are taken to the Page modules tab in the editing dialog for the new page.

5. Select the preview mode Offline version to display the new page.

Adding Content and Functional Elements

In a next step, add content and functional elements to the page. The structure we want to create is simple: In the upper section you want to explain to the visitors what they can use the form in the lower section for. To do so, use the “Headline + text” module. You can create an information request form using the “Contact form” module in the lower section.

1. On the Page modules tab, click on the + Page module button.
2. Enter the following:
   
   – Type: You can choose from various modules in the drop-down list. Select “Content module: Heading + text”.
   – Reference name for template: This name allows you to trigger the module from a positioning template, something which is, however, not necessary in the example. Keep the text which is automatically preset as it is: “module_blogging_1”.
   – Page module title: This is the internal title of the module. For this example enter: “Blogging introduction”.
   – Module template: Data output is controlled by means of a module-specific template. Select the “cont_headline_text” template, which belongs to this content module.
   – In the “Position” field, choose the default setting “at the beginning”.
   
   

3. Click on Save.

4. The options for the “Content module: Heading + text” module will be displayed. Fill in the following details:
   
   – Headline: This headline is displayed as the section title on the panel page. Enter: “Blogging”.
   – Text: This field contains the actual text. Enter a sample text.
   
   

   Information

   You can use HTLM fomatting in the text fields, for example to highlight a word in bold or italics. Use the <br> or <br /> tags to create line breaks. In fields marked with “Smarty code”, you can use Smarty.

5. Confirm by clicking on Save.

6. Select the preview mode Offline version to preview the changes.

7. The next step is to create the contact form section. Open the Page modules tab again.

8. Click on + Page module.

9. Enter the following:
   
   – Type: “Function module: Contact form”.
   – Reference name for template: “module_blogging_2”.
   – Page module title: “Blogging questions”.
   – Module template: “func_contact_form”.
   – Position: “after Blogging_introduction”.
   
   

10. Confirm by clicking on Save.

11. The options for the “Function module: Contact form” module will be displayed. Fill in the following details:
    
    

    – Mail sender: The e-mail address from which the contact mail is to be sent. You can either use a fixed e-mail address. Please make sure that the mail account actually exists on a correctly configured mail server: otherwise the e-mails may be erroneously classified as spam. Alternatively, use the wildcard #u_email# to insert the e-mail address of the panelist resp. the e-mail entered into the contact form.
    – Message upon successful change: This message appears once the contact mail was successfully sent. Enter: “Thank you. You will receive an answer as soon as possible.”
    
    

12. Specify a topic users can request information on. This includes the address of the person responsible for providing feedback on the topic. In the example these are “General information” and “info-panel@example.com”.
13. Confirm by clicking on Save.
14. Additionally, add the topic “Bonus points for blogging” and a corresponding address.
15. Again, confirm by clicking on Save.
16. Select the preview mode Offline version to preview the finished page.

Publishing the Panel Page

The new page is not yet accessible to the public: Up to now you have been working with a so-called working version. This is clearly indicated by the status icon in the tree view:

• Grey status icon: The page has not been published
• Green status icon: The page has been published and is up-to-date.
• Blue status icon: The page is live (online), however the internal working version has been changed in the meantime.

1. Click on Publish page to place the “Blogging” page online.
2. Click on the Preview online version tab or open the panel website directly to preview the changes in live operation.

Panel Site Structure

This chapter shows you how to create panel pages with the help of modules and templates.

• First of all, this chapter explains how content and functions, located in a panel page’s content area, are put together with the help of modules.
• It also explains how the general structure of panel pages is created through the interaction of different templates.

Panel Pages’ Content Area

A panel page’s content area is the part that contains the actual page content: Information texts, forms, functions. This area differs from page to page, whereas other parts, such as header and menu, remain largely consistent.

The introduction of this chapter already took you through the practical steps of filling a panel page’s content area in the new CMS: You choose modules that provide the desired content and functions, and assemble these modules on the page.

A panel page’s content area in the standard panel:

Panel Page Structure

Browsing the panel’s external view you will discover that the content area, which is defined with the help of modules, differs from page to page, but many other panel page components remain the same:

• The border area always looks the same.
• The appearance of the navigation bar and login area changes upon login, but is the same on all external pages as well as on all internal pages.

This is technically implemented with the help of the template concept: The panel pages are broken down into logical components, each of which is generated by different files (templates). The general panel page structure is defined in the main template. In this template, the components are inserted using wildcards. The Smarty template engine only dynamically replaces the data provided by the respective templates once the pages are delivered to the viewer’s browser.

Advantages of the template concept

The most important advantage of the template concept is that implementing a change, for example to the navigation bar, requires only a one-time change to the source code of the respective template. By contrast, if you were to build the panel in such a way that each individual page (e.g. start page, “About us” page, panelists’ personal homepage) contained the entire HTML code, a change would have to be made, for example, to the navigation bar on every single page. That is a time-consuming and error-prone process.

Furthermore, this method of building pages with the help of several templates enables you to realize status dependent components. For example, the navigation bar, login area and content area may look different to visitors who have not logged in than to logged-in panelists.

Example: The structure of the “Contact us” page

In the standard panel, a normal panel page contains the following elements, each of which is defined in separate templates:

Language selection: This field is only displayed for websites with several language versions.

1. Navigation: The menus displayed in the navigation depend on whether or not the viewer is logged in.
2. Messages
3. Login: Depending on whether or not the viewer is logged in, this area contains different functions, which in turn are defined by two different templates.
4. Content area: This is filled for each individual page with the help of content and function modules. Module-specific templates define how the data provided by the modules are output. The illustration shows the content of the “About us” page.
5. Subnavigation

The main template is responsible for the general structure of the page and for inserting the various individual components into the overall context.

Planning Panel Sites

Setting up a new panel site requires extensive preparation and planning:

• You must determine which pages you need and what the page structure should look like.
• Panel sites usually have a specially designed, customized layout.
• A panel may have several websites, which in turn may have several language versions. Depending on how greatly the websites and language versions differ, this requires additional planning.

The following contains tips and suggestions for planning panel sites.

Planning Page Structure

The following considerations should help you develop a plan of the page structure.

Which website(s) and language versions are planned?

• Do you plan on creating a single website, or do you wish to set up several websites?
• For each website you must determine whether it should comprise one or several language versions.

If you plan on creating several language versions or even several websites each with more than one language version, we recommend going through the following tips individually for each website.

Which pages are required?

• Which pages should the new website have? Which pages are absolutely necessary for launching the website?
• Which pages should visitors have access to and which should be restricted to logged-in panelists only?
• Which pages are required for key processes such as recruitment and incentive management? In particular, you should check whether your panel processes require additional function pages beyond those provided in the standard panel. If, for example, you wish to support both the standard admission procedure with registration via the website and targeted recruitment with access codes, you may need a second registration page.
• If the website you are editing comprises several language versions, are certain pages only required in one language version? Please note that a website’s page structure is identical for all language versions and does not permit major deviations.

Navigation structure

• How are panelists to navigate through the website: Via menus? Via links?
• Are one or more menus required?
• Which pages are to be visible for logged-in/logged-out panelists?
• In which order should pages be displayed in the menu?
• Should the menu have a second level on which subpages are displayed? Which pages are to appear on the first and which on the second level?

Content and function of the individual pages

• Which content and functions should the new page have? Which page modules can be used to implement the desired functions? Are the existing functions sufficient or does a template need to be modified or newly created to realize a function?
• Who do you wish to grant access to a page or a certain page section: all visitors or only logged-in panelists?
• If the website you are editing comprises several language versions, should the page be configured differently in the various language versions or contain different content and functions?

Drafting a Layout

Usually, you will draft and realize your own design for your panel or commission somebody to realize it. Of course, TIVIAN also offers custom designing of the external panel view. The following suggestions are aimed at helping you or your designer implement your layout.

• Which components will a page of your panel consist of?
  • Which page components do you require on all panel pages? The menu, for example, should be on all pages. All pages should also provide for a section reserved for displaying error messages.
  • Which page components must be visible for logged-in and which for loggedout panelists? The login form, for example, is usually displayed to all loggedout panelists on all panel pages.
  • Are there any page components that are only to be inserted in a few selected pages? In the standard panel the quick poll, for example, is only displayed on the “Home” and “My home” pages.
• Are all required page components already available in the standard panel or do new templates need to be planned and created?
• Should the public area and the internal panelist area have entirely different or slightly deviant layouts?
• If you are setting up one website with several language versions or several websites, should the layout of the various websites and language versions differ?