Learn TYPO3

TYPO3 is a flexible CMS ideal for small blogs and complex multilevel online corporations.

• Last Updated: 05/08/2020
• ( 5 minutes reading )

TYPO3 Backend Overview

Introduction

The Administrative Area of TYPO3, commonly referred to as the Backend, is reputed as intuitive and user-friendly. However, as with every new and undiscovered thing, it could seem obscure and complicated. To avoid that unpleasant situation in which our customers can become overwhelmed and frustrated, we have decided to dedicate this tutorial to an introduction and overview of the backend in question.

The following lines are devoted to the task of getting your familiar and confident working your way around the TYPO3 Backend and optimizing the efficiency of your workflow.

 

Accessing the TYPO3 Backend

To access your TYPO3 Administrative Area, you have to "/typo3" after your domain name, i.e., "yourdomain.com/typo3" where "yourdomain.com" stands for your own domain name. 

Upon entering the URL address mentioned above, you are presented with the TYPO3 Admin Login page, which looks as shown in the following screenshot example.

 

Admin Login page

 

All you have to do is enter the username and password you have specified during the installation process and click on the "Login" button.

 

TYPO3 Backend Overview

At this point, you should be logged into the Admin Area Interface. As you have probably noticed, it consists of several sections and, most importantly, two navigation bars.

  • Top Bar - Holds primary your user and application settings. We will review and explain them in detail in a bit.
  • Docker - This is the grey bar beneath the top bar, which is currently empty. Depending on where in your Backend, you are located, this bar will contain different icons that allow you to perform specific actions - preview, save, close - to name a few. 
  • Module Menu - The left-hand menu, as the name suggests, consists of a list of all modules currently available in your TYPO3 application. Naturally, this is the primary way to navigate through and perform the desired tasks.

 

Admin Interface sections

 

Now we expect you to have a brief idea of the Interface and be ready to dig into more details on how to find your way around.

 

Top Bar Overview

For a start, let's take a look at the Top Bar. We are going to explain the purpose of each icon following the exact same order they appear on your end (left-to-right).

 

Top Bar Overview

 

  1. The first icon at the very left allows you to shrink and respectively, expand the Module Menu. When shrank, the Modules are presented only by icons.
  2. The second icon becomes active and clickable when you are editing your content pages or files. It allows you to collapse the Page Tree while editing content.
  3. Third, comes the TYPO3 logo, followed by your Site Name (Settings Configure Installation-Wide Options System sitename). The current version of your installation is also displayed beneath. Clicking on this icon takes you back to the Backend home from any point.
  4. The Star (Bookmarks) icon holds a list of your bookmarks. If you want to add a specific interface in your backend, you can click on it, and it will be saved. This allows you quick access to features you use often.
  5. The Lightning Bolt (Clear Cache) icon serves as a tool for clearing cache. Upon clicking on it, you are presented with two options - "Flush frontend caches", which clears the content-related cache, and "Flush all caches", which clears any cache hold by TYPO3, such as the system cache.
  6. The question mark (Help) icon contains a great deal of useful information concerning the TYPO3 CMS. You can find detailed explanations of the system as a whole and most of the Modules.
  7. The "System Information" icon contains general details of the application and your hosting server environment. Along with that, if any errors persist, they are going to be indicated beneath the details. We hope that at this point, you see the "Your TYPO3 version is up-date" message there.
  8. The User (Admin) icon is where you can customize your account details and log out of the Backend.
  9. The Search tool does not need much of an explanation. It allows you to search for pages, content elements, users, etc. within your TYPO3 application.

 

Page Tree Overview

To get to the Page Tree and have a visual idea of what we are referring to, please access the Pages module from the Module Menu.

The middle section is the Page Tree, and it represents the hierarchical structure of your website pages. "Congratulations" is the root page, which holds all child pages of one or several TYPO3 installations. Each level can be expanded by clicking on the corresponding arrow icon. Needless to say, the purpose of the Page Tree is to allow you to navigate through your website content and perform any desired changes with ease.

 

Page Tree

 

As we previously pointed, Page Tree is going to persist in several areas of your Backend, such as Lists, Forms, Templates, etc.

The section on the right side of the Page Tree is the Content Area, which is in detail explained in our How to create pages in TYPO3 tutorial.

 

This is all there is to know concerning the workaround within the TYPO3 Backend for now. We hope it is all clear, and you know how to navigate through it efficiently. Of course, this was just an overview to get you familiar with the interface, and you can find detailed instructions on how to make the most of these features in our TYPO3 tutorial series. As usual, we would like to thank you for trusting our guidance.

 

 

...
Sebahat
Content Marketing Specialist

Sebahat is a young and bright woman who has become an invaluable part of our team. She started as a Customer Care Representative, mastering that role and, along the way, growing into a tech-savvy individual who is well acquainted with every support layer of the company. Driven by her aim to improve our customers’ experience constantly, she is committed to enhancing the extraordinary support we deliver.