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.