Manual: Page Editor

1. Launching & closing the page editor

	In the following items, the page editor can be launched using the «Customize Page» or «Edit Page» button, which in most cases is located in the upper left corner of the «Content» tab of the item: Course Folder Group Content Page Wiki Test & Question Pool Test (within a question) Portfolio & Portfolio Template
	In the Glossary, Learning module and Blog launching the page editor works differently and is described separately in the respective manuals.
	To stop editing a page and leave the page editor, click «Finish Editing». If you don't see a «Finish Editing» button, click on the «Tools» menu to expand it.

2. Insert & format page elements

Text

	On the page, click on «+».
	Select «Insert Text».
	Type your text in the outlined text field.
	On the left side you have several predefined formatting options. For customized formatting options you have to create your own stylesheet (see 4. Customize Style). Paragraph (valid for an entire outlined paragraph)  Character Lists Links If you do not see the formatting options, click on «Tools» in the upper left corner.
	Click «Finish Text Editing» to save your text.
	To edit a section of text later on, click on the paragraph.

Image/Media

	On the page, click on «+».
	Select «Insert Image/Media».
	Select your image source: Click «Select File», choose your image and click «Insert». If you have an internet link address, select «From URL», enter the address and click «Insert». If your image is stored in a media pool on ILIAS, select «Select from Media Pool» and click «Select Pool». Select your media pool, then select the image and click on «Insert».
	To change the image settings, click on the image and select your preferences for the following aspects: Style Class Alignment Show Fullscreen Caption (is displayed directly below the image) Text Representation (short and concise image description for accessibility)
	«Save» your settings.
	To adjust the size of the image or full screen display, click on the image and on «Advanced Settings».
	In the «Insert Media Object» set the display size of the image on the page; in the «Full Screen» section set the full screen size. Under «Size» select one of the two options:: «Original Resource Size / No Size Declaration»: The image size adjusts to the available space on the page. «Fixed Size»: Enter the preferred display size for the image. To give your image your desired maximum size while keeping it responsive, you can enter a «Fixed Size» and additionally select the «Resize Image File» option. After you have saved your changes, switch back to «Original Resource Size». Alternatively, you can resize the image before uploading it to ILIAS.
	«Save» your settings.
	Click on «Page», to return to the page.

Section

	On the page, click on «+».
	Select «Insert Section».
	Open the menu below «Style Class» and select a predefined section. For customized sections you have to create your own stylesheet (see 4. Customize Style).
	If necessary, configure further settings for the section. Link: To link the section, enter the URL or select an ILIAS target object. Activation Start: If you want the section to be visible starting at a certain point in time, you can define this point here.  Activation End: If you want the section to be hidden starting at a certain point in time, you can define this point here.
	Click «Insert».
	To insert content into the section, click «+» inside the section and select the page element or drag and drop existing elements into the section.
	To edit a section later on, click on the section.

Accordion

	On the page, click on «+».
	Select «Insert Accordion».
	Select an accordion type and its settings. Vertical Accordion: Panels open from top to bottom and close from bottom to top. Horizontal Accordion: Panels open from left to right and close from right to left. Carousel: Panels rotate horizontally.
	Select the number of panels. Panels can also be added or removed later.
	Click «Save».
	Give each of the panels a title.
	Click «Save».
	Click on «Page», to return to the page.
	To insert content into the panels of an accordion, click «+» inside the panel and select the page element or drag and drop existing elements into the panel.
	To edit an accordion later on, click on the accordion.

Column Layout

	On the page, click on «+».
	Select «Insert Column Layout».
	Select a predefined layout or create your own.
	Click «Insert».
	To insert content into a column, click «+» inside the column and select the page element or drag and drop existing elements into the column.
	To edit a column layout later on, click on the accordion. A table opens. To add a column, click on «Add Column». To delete a column, select the column and click «Delete». In the table, each row corresponds to a column. So, for example, to delete column 2, select the second row. To change the width of a column, select the desired width from the drop-down menu. Note that you have to set the column width for each screen size. Usually, the set width of a column should be the same for all screen sizes; the only exception is that Small should always remain set to 12/12 (see example on the right).
	Click «Save».
	Click on «Page», to return to the page.

Interactive Image

	On the page, click on «+».
	Select «Insert Interactive Image».
	Click «Select File», choose your image and click «Save». Make sure that the image is already sized correctly for display in the interactive image. The image size cannot be adjusted afterward.
	Click «Save».
	In the «Trigger» tab, select a trigger shape and click «Add». Rectangle: First, select the upper left corner and then the lower right corner of the desired trigger area. Circle: First, mark the center and then the radius of the desired trigger area. Polygon: First, mark the start point and then the necessary number of corner points of the desired trigger area. Marker: The marker is added in the upper left corner of the image. The position can then be adjusted via «Edit Marker Position».
	Give your trigger a «Title».
	Click «Save».

	Go to the «Overlay Images» tab.
	Click «Add Images».
	Click «Datei auswählen» and select the image for the overlay. Make sure that the image is already sized correctly for display in the interactive image. The image size cannot be adjusted afterward.
	Click «Upload».
	Go back to the «Triggers» tab.
	Select your image from the «Image» drop-down menu in the «Overlay Image» column.
	Click «Save».
	To adjust the position of the overlay, click «Edit Overlay Position».
	Move the overlay to the desired location.
	Click «Save» above the image.

	Go to the  «Content Popups». tab.
	Click «Add Popup».
	Give your popup a «Title».
	Click «Save Titles».
	Go back to the «Triggers» tab.
	Select your popup from the «Title» drop-down menu in the «Content Popup» column. The title is not displayed in the popup.
	Click «Save».
	To adjust the position of the popup, click «Edit Popup Position».
	Move the popup to the desired location.
	Click «Save» above the image.
	Click on «Page», to return to the page.
	To insert content into a popup, click «+» inside the popup and select the page element or drag and drop existing elements into the popup.

Item Group

	On the page, click on «+».
	Select «Insert Item Group».
	Select the «Item Group» option under «Resources» and select the «Item Group» you want to integrate from the drop-down menu.
	Click «Save».

The «Item Group» is now integrated in the layout. It can now no longer be sorted via manual sorting in the course, but has to be placed in the desired position here in the layout.

Interactive Video

	On the page, click on «+».
	Select «Insert InteractiveVideo Reference».
	Click «Select» and choose the «Interactive Video» you want from the tree structure.
	Click «Select».
	Choose how you want the video to appear on the page. Display Link: A link to the video will be displayed, either as text only or as text and button. Show Video: The video is displayed directly on the page, either with or without a comment section (video only).
	Click «Save».

Opencast Video

	On the page, click on «+».
	Select «Insert Opencast Video».
	Click on the video you want to integrate to select it.
	If necessary, you can adjust the maximum size of the video and set it to fit the size of the screen (responsive).
	Click «Save».

3. Copy, delete & deactivate content

	In the page editor, click «Selecting and Deleting».
	Select the page elements you want to delete.
	Select the appropriate action: Cut: Cuts the selected page elements. To paste them elsewhere, click «+» and select «Paste» at the top. Copy: Copies the selected page elements. To paste them elsewhere, click «+» and select «Paste» at the top. Delete: Deletes the selected page elements. De-/activate: Deactivates or reactivates the selected page elements. Deactivated elements are not visible on the page. In edit mode, they can be identified by a red frame. Assign Characteristics: Allows you to change the paragraph of text and style class of sections.

4. Set up & use a customized style

Set up a style sheet

	Open the actions menu and select «Style».
	Click «Create Individual Style».
	Select option 1: «Create new Style».
	Give your style a «Title».
	Click «Save».
	In the «Style Classes» tab, you can edit or create various formats: Text (Block): Paragraph formats for text elements Text (Character): Character formats for text elements (these appear in the page editor under «Character» «A v») Section: Style class for sections
	In the «Images» tab, you can upload images you want to include in style classes for sections.
	Click «Back», to return to the page.
	To edit the style sheet later on, open the actions menu, select «Style» and click «Edit Style».

Apply style to subordinate objects

	Activate the «Re-use» option.
	Click «Save».
	Navigate to the style settings of the subordinate object.
	Select the style of the parent container from the drop-down menu.
	Click «Save».

Wiederholen Sie den Prozess ggf. für alle vorhandenen Unterobjekte, die Sie mit dem alten Style designed haben.

5. View editing history and restore version

	Open the actions menu and select «History».
	If you know exactly which version you want to revert to, you can click  «Rollback» for the corresponding version in the «Action» column.
	If you are not sure which version you want to restore, click on the «Date» for the version you suspect.
	You will see a preview of this version. Using «Previous Revision» and «Next Revision» you can click through the versions step by step until you find the right one. Once you found the right version, click «Rollback».
	Click «Confirm».

6. Copy page design and content to other environments

	In the previous course, open the page editor and click «Selecting and Deleting».
	Click «Select All».
	Click «Copy».
	Go to the new course. Click «Customize Page». Click «+» and select «Paste» at the very top.

	In the previous course, launch the page editor. Open the actions menu and select «Style».
	Click «Edit Style».
	Go to the «Settings» tab.
	Click «Export». A zip file will be downloaded. The zip file must not be unzipped, and the title of the file must not be changed.
	In the new course, launch the page editor. Open the actions menu and select «Style».
	Click «Create Individual Style».
	Select option 2: «Import Style».
	Click «Select File» and select the zip file you downloaded earlier.
	Click «Import».

	In the new course, go to the «Content» tab.
	Click «Manage».
	Click «Adopt Content».
	From the tree structure, select the previous course you want to transfer content from.
	Click «Continue».
	Select «Copy all».
	Click «Copy Course».

7. Design examples