Regional University Computing Center Kaiserslautern-Landau

Interaction

Typo3 offers two user interfaces, one for viewing and one for editing.

[Translate to englisch:] Frontend

The frontend interface, represents the view of a web page that visitors get displayed on the Internet when they call the web address.

Example element of the front-end interface of the RHRK website.
Example element of the front-end interface of the RHRK website.

Backend

The backend interface is the back of a website and not everyone has access to it, because this is where the content is created and edited.

Die Backend-Oberfläche, stellt quasi die Rückseite einer Webseite dar und nicht jeder hat Zugriff darauf, denn dort werden unter anderem die Inhalte angelegt und bearbeitet.

 

Example element from the Typo3 backend: The figure shows an example of a backend interface.
Example element from Typo3 backend: backend interface

Switch

If you want to switch from the backend to the frontend, click on the icon provided for this purpose (in the editing area at the top left). The frontend view will open in a new tab and you will see what content is already on your page. You can now jump back and forth between the two tabs and load the changes you made in the backend into the frontend.

 

Example element from the Typo3 backend: division into the four different areas. The top row of the figure represents the header. Below it there are 3 blocks. The left block takes about one fifth of the screen area and is titled Module Bar. The middle block takes up about two-fifths and is labeled Page Tree/File Tree. The largest block in the right part of the figure is described as Edit Bar.
Example element from the Typo3 backend: division into the four different areas.

Appearance Typo3 backend

Header bar: The header bar provides an overview of bookmarks, history, instructions, and search, plus you can log out by clicking on your name.

Module bar: This is where you switch between different modules (views). In the course of this training you will get to know the modules, "Page", "List" and "File list".

Page tree: In the page tree, all pages are displayed that are located on your installation. Here you can add, delete, rename and copy pages, among other things.

Edit Bar: Here you can create new content or edit existing content.

You are in the self-study and want to go to the training start page, then click on TYPO3 in the self-study for beginners part 1.

 

You are currently in the self-training, then click Introduction to Typo3 Backend to continue with it.