Editing Texts
This chapter will teach you how to design the texts on your website.
- You can edit text directly in the preview. This practical new function is presented in this chapter.
- After that, you will learn about various options for designing your text in an appealing manner and for insertig dynamic elements. For example, you can change the type face with HTML and CSS, insert images and links, or insert personalized data using wildcards.
Editing Texts Directly in the Preview
The texts which the panelists see originate from various sources. Page names and texts of function modules, for example, are defined in the website editor on the respective page. Error messages and wildcards, however, are managed in dedicated menus.
The more familiar you are with EFS Panel, the fewer problems you will have finding the right place and editing the desired text directly at the source. However, you can edit most of the text directly in the preview:
- The following types of text can be edited: Wildcards, messages, texts from page modules and page titles. Texts which are not part of the CMS, such as news or forum posts, cannot be edited directly. They are managed in dedicated menus.
- Templates can be edited as well.
- The direct editing feature is only available for users logged into the admin area.
- As usual, the changes are made in the preview, not in the publicly accessible version of the page. You have to publish them explicitly.
- This feature is protected by the ACL right “panel_online_editing”. Write rights are required.
Working Directly in the Preview
To work directly in the preview, please proceed as follows:
- In the preview drop-down list, select “Direct editing”. The preview is opened in a new window.
- Open the page you wish to edit.
- Switch to editing mode by clicking on the Edit button in the header section of the preview window.
Move your mouse pointer over the text elements. A green frame will indicate a text element that can be edited. Click on the desired text element.
The editing window will open.
– The title will indicate the source of the text. In this case, the source is a page module.
– Change the text as desired.Save your changes. Check the result before publishing the changed version of the page via the website editor.
Formatting Text with HTML and CSS
The formatting of text elements – font, font size, color etc. – is defined by the page module’s template in combination with the panel’s CSS classes. This gives you efficient, centralized control over the layout properties of the entire panel. Details such as line breaks or formatting of individual words, on the other hand, can be directly defined with HTML and CSS in the text input fields.
The following tables give an overview of the most important HTML tags.
Information
You should use this manual formatting option with care. Cross-panel formatting with the help of templates and CSS files increases uniform appearance and reduces the maintenance effort in case of changes.
The most important HTML tags:
| Tag | Meaning |
|---|---|
| <h[1-6]>Text</h[1-6]> | Header |
| <p>Text</p> | Paragraph |
| <br> or <br /> | Line break |
| <hr> | Dividing line |
<ul> | List with bullet points |
<ol> | Numbered list |
<table border="thickness"> | Table with one row and two columns. Instead of “thickness”, you should give the desired border thickness in pixel. |
| <a href="URL”>link name</a> | Clickable link. Instead of “link name” , you should enter in the text that should appear as a clickable link. |
HTML tags for formatting text components:
| Tag | Meaning |
|---|---|
| <b>Text</b> | Bold |
| <i>Text</i> | Italics |
HTML entities for German umlauts:
| Tag | Meaning |
|---|---|
| ä / Ä | ä / Ä |
| ö / Ö | ö / Ö |
| ü / Ü | ü / Ü |
Information
A detailed introduction to HTML and CSS can be found, for example, at http://selfhtml.org.
Uploading and Managing Images
Images and other media files for the website are managed with a panel-specific version of the EFS media library:
- The library is located in the menu Website → Asset library (until EFS 10.3: Media library).
- From EFS 10.4, the files are separated as follows:
- Website assets: website-specific files.
- Panel assets: files which can be used on all websites.
- QuestBack assets: read-only assets provided by QuestBack, sorted by website themes.
- You can use not only images, but SVG graphics, flash and video formats as e.g. RealVideo or Quicktime. To access a detailed list of the permitted file types, open the Upload file dialog and click on the Question mark icon.
- The maximum file size is installation-specific. If you exceed the threshold value, a note will be displayed.
Inserting Links
Panel CMS contains different types of links.
- External links: Refer to a page outside the respective panel language version, usually an external domain. They are inserted in modules or templates using normal HTML tags. See the following section “1. External links”.
- Internal links: Refer to a page that is part of the respective panel language version. Internal links are also inserted using HTML tags; however, the so-called page identifier is inserted instead of the full URL. See the section “2. Internal links” for instructions.
- Short URLs: It is possible to display URLs shortened with a Smarty modifier, which are widely used on Twitter or in smartphone communication. Instructions can be found in section 3 “Optimized short URLs for Twitter”.
Information
The menu of the website is dynamically generated in EFS Panel, depending on the page configuation (the fields “Parent page”, “Position”, “Access control”, “Show in navigation” in particular). Manual maintenance of menu links is therefore not required.
1. External Links
Links to other domains (e.g. http://www.domain.com) can be inserted into modules or templates in a “normal” way, i.e. with the HTML tag <a href=http://www.domain.com>Linkname</a>.
Example: Inserting a link to your company homepage
The contact address entered on the “About us” page contains the company homepage URL http://www.example.com. However, it is not a clickable link. You can create a clickable link by amending the <a href=“URL“>Linkname</a> tag.
- Enter the following into the “www” line:
WWW: <a href=http://www.example.com>http://www.example.com /> - Confirm by clicking on Save.
- Click on Preview working version. The following figure shows the results of your work. Test whether the new link functions properly. If you are satisfied, click on Publish page to apply the change to the publicly accessible panel page.
2. Internal links
You can create internal links – i.e. links that refer from a panel page to another page of the same language version – using wildcards. Wildcards are based on the page identifier. They always follow the same pattern:
{$links.pageidentifier}
Information
Please note: If a panel page’s page identifier is changed, the internal links referring to this page must be manually updated. If an incorrect wildcard is accidentally placed or a change not updated with the result that an internal link refers to a nonexisting page, visitors will remain on the existing page.
Example
You want to insert a back link on the “About us” page that allows panelists to return to the “Home” page.
- First, in the website editor, determine the page identifier of the “Home” page for the desired language version. This is also named “home”.
- Assemble the wildcard: {$links.home}
- To create a clickable link, insert the <a href=“URL”>Linkname</a> HTML tag in the desired place in the content module of the “About us” page. Replace the URL with the {$links.home} wildcard:
<a href="{$links.home}">back to home</a>
- Click on Save.
- Check the result in the working version. You can then publish the page.