Zum Inhalt springen

TYPO3 for editors

Easy to understand: our free video course shows in detail all the steps involved in creating and maintaining content in TYPO3 versions 9 and 10.

Introduction

With these videos you will learn how to maintain and edit the content of your TYPO3 website. We use TYPO3 version 9 LTS. The instructions can also be used for TYPO3 version 10.4. The operation is practically identical for both versions.

For older TYPO3 versions, the video course is available at the following links:
Version 8.7Version 7.6,Version 6.2 and Version 6.0 and 4.7

Please note: a "standard" installation is used as far as possible in the videos. However, as TYPO3 can be configured very flexibly, it is possible that not all or other input fields than those shown in the videos are available in your TYPO3 website.

Important basic terms from the TYPO3 world

At the start of this video course, you will first learn a few important basic terms that you always have to deal with when working with TYPO3. You will learn what backend and frontend mean and what tasks administrators, integrators, editors and developers have.

The most important basic terms (text instructions)

First, we'll explain the basics of TYPO3. What is TYPO3 and what terms should you know when working with TYPO3?

TYPO3 is a so-called CMS. CMS in turn stands for content management system and this in turn is software for maintaining the content of a website.

This means that you can use TYPO3 like any other program, such as an e-mail program or a word processor. Of course, you then have to log in with your access data. You can then maintain the content of your website, write texts and upload images without having to worry about the programming or the technology behind it.

TYPO3 is a so-called Open Source CMS. Open source means open source, i.e. the TYPO3 programming code is publicly available and can be used and modified by anyone. The special thing about open source: there are no license fees for use.

TYPO3 is free, you can simply download and install it. Costs may be incurred if you commission someone to implement a website with TYPO3 or to maintain the system.

TYPO3 basics

The backend is the administration interface of TYPO3. This is the area where you log in with your access data. This is where you can maintain the content of the website. You can write texts, upload images, create pages and much more.

The frontend, on the other hand, is the actual website that can be accessed by the public. When a visitor types your domain into their web browser, they land on the frontend of the website.

Roles in TYPO3: Everyone who works with TYPO3 has a certain role. In general, there are backend users, i.e. people who have access to the administration interface. These backend users are each assigned to a group. This would be the administrator, for example, who manages and configures the entire system. They can create other users or user groups, assign them rights and much more. This is the highest instance when it comes to maintaining the TYPO3 system.

Another role is the integrator (often the same person as the administrator). The integrator implements a website with TYPO3. A fresh TYPO3 installation is initially an empty system without content. Without pages, without design, i.e. without a frontend. The integrator is the person who creates a functioning, dynamic website from this empty TYPO3. He can, for example, install extensions, which are small modules that extend the functional scope of TYPO3.

The editor is also a backend user, but with limited rights. They cannot configure the system or install extensions. The editor is responsible for managing the content of the site. He (or she) writes texts, creates pages, uploads images or videos and integrates them into the pages. The work of an editor is the topic of this video series.

Then there is the developer, a programmer who works on the TYPO3 system and improves it. They also create extensions for TYPO3, which are additional modules that extend the range of functions.

When working with TYPO3, the editor also works with media files. These are images,videos, audio or PDF files. In TYPO3, media can be imported in many formats directly, without conversion. For images, the file formats JPEG, PNG, GIF, SVG, AI (Adobe Illustrator) and even the old BMP format are supported.

Videos can also be used directly in various formats. MP4 is the most common format, but there are also OGG and WEBM. Videos from YouTube or Vimeo can also be integrated directly into a page. This saves storage space on your own server and offers the visitor the best result on the respective end device (cell phone, computer, tablet).

Audio files can be integrated using the MP3 format. MP3 is widely used and delivers small files with good quality. A small player, i.e. a playback area, is then displayed on the website with which the audio file can be listened to directly on the website. Podcasts are an application example.

Login to the TYPO3 backend

Before you can edit the contents of the website, you must log in to the TYPO3 backend with your access data.

Login to the TYPO3 backend (text instructions)

To access the TYPO3 backend, add a slash and the word 'typo3' to the domain name (e.g. www.name-der-domain.de) in the address line of the browser (i.e. www. name-der-domain.de/typo3). After accessing the address, you will now be taken to the TYPO3 login screen. On the login screen, the logo, colors and background image may differ and can be customized.

Here you log in with your user name and password, which are case-sensitive. After logging in, you will be taken to the TYPO3 backend view.

If an error message appears when logging in, you should first check the access data and contact the site administrator if necessary.

Overview of the backend

Overview of the backend (text instructions)

In this video, we take a look at the different areas in the backend. We will talk about the individual areas in more detail in the course of this video course, but for now let's get a rough overview.

Immediately after logging in, we land on this page here. At the top left we see the TYPO3 version used, at the time of recording version 9.5.8. In the main window we see an overview of TYPO3 with explanations of the individual modules.

An important note: the view always adapts to the user's rights. It may be that your TYPO3 backend looks a little different from what we see here. The rights for the users can be configured in great detail. The view also depends on the extensions that are installed in TYPO3. Extensions are modules or plugins that extend the functionality of TYPO3, some of which also have their own menu items in the left-hand column.

In this example, we see the News menu item, which comes from a TYPO3 extension called News, which can be used to manage the latest news. This entry is not available in a standard TYPO3 installation, as it is an additional function.

The page you usually land on after logging in (this is also adjustable) can be called up at any time by clicking on the question mark at the top and then selecting "About TYPO3".

The website has four areas: a bar at the top, with a button on the far left that can be used to hide the menu on the left. By default, the menu with icons and description is active. But if you are working on a tablet and have little space available or on a notebook with a small screen, it is helpful to simply collapse the menu to have more space.

This button next to it is used to switch the page tree on and off. It can be temporarily hidden to create more space on the desktop.

At the top left you will find the name of the website, which is now TYPO3 9 LTS sample project. If you are not working with our sample template, you will see something else here. . We also see the version number here, in the example TYPO3 9.5.8.

There are some icons at the top right, where you can set bookmarks, for example. You can use bookmarks to save pages or content that you often need to edit and access them directly later.

You can clear the so-called front-end cache via the lightning bolt symbol. There is a separate video on this in this course. Another button in our sample template is the so-called action, which can be set up by the administrator. These are special commands to create a new news article, as shown here. Normally, this would require several clicks in the backend. With an action, this can be achieved with one click.

In the bar at the top you can see the current user name and the so-called avatar. This is a neutral image by default, but you can also replace it with a photo. If you click on the user name, a menu appears. You can log out of the backend or call up the user settings. There is a separate video for the settings.

At the top right there is a search function for the backend, here you can search for pages or content, more on this in a separate video.

The menu area is located on the left-hand side. Here there are so-called modules in which you can work in TYPO3. For example, if you go to the page module (where you can edit pages and content), the display changes and the page tree appears. If you select a page by clicking on it, you will see the contents of the page and you can edit them.

The File list menu item allows you to manage, upload, delete and move files or create folders. There is also a separate video for this.

Different page types

As a rule, a website consists of several individual pages on which the content can be presented. There are different page types in TYPO3, which also have different tasks.

Working with the page tree

The entire structure of the website is organized via the page tree. New pages can be created, moved, copied or deleted here. There are also some useful functions that make it easier to manage larger websites.

The page properties

Every page that is created within the TYPO3 website has certain "properties". For example, the title of the page can be changed here, as can the layout or whether a page is only published at a certain time.

Using a "standard page", you will get to know the most important properties of a page.

The page properties - Social Media

In the "Social Media" section of the page properties, you can enter information for Facebook and Twitter to optimize the title, description and image used. This has an effect when visitors share the page via these platforms.

In the background, so-called meta tags for Open Graph (Facebook) or TwitterCards are created, which are evaluated by the platforms.

The page properties - SEO

In the "SEO" section of the page properties, the page title can be optimized for search engines and you can control whether the individual page should be included in the search engine index at all.

URL segments and redirects

TYPO3 9 can now generate readable, search engine-friendly URLs out of the box, i.e. without additional extensions. As a rule, editors do not have to worry about this at all. If required, however, these so-called URL segments can be edited and adapted.

Another new feature is a backend module for configuring redirects. This is useful if, for example, the URL of a page changes, but you want to redirect visitors who call up the outdated URL to the new URL.

Manage and organize files - overview

Files that you want to use on your website (e.g. images) must first be uploaded to the system. The "File list" module is used to manage all types of required files in a folder structure.

Upload files, create new files

There are several methods of uploading files to the TYPO3 system. In addition, certain file types can even be created and edited directly within TYPO3.

Create, move and copy directories

From the outset, you should make sure that files are organized in a sensible folder structure. Otherwise you could quickly lose track of things.

In the "File list" module, you can easily organize folders in different hierarchies, and folders can also be moved or copied along with their contents.

Edit multiple files

If you want to move or copy several elements, i.e. files or folders, this is very easy with the extended clipboards in TYPO3. These support the so-called "multiple selection mode".

Working with the Rich Text Editor (RTE)

The so-called Rich Text Editor is the most important tool for publishing texts on a website. This RTE behaves in a very similar way to normal word processing programs. Texts can be formatted, links to other pages can be set and much more.

In this video we show some of the basic functions of the editor.

General input fields in content elements

Most content elements have some input fields or setting options in common. Using the "Text" content element as an example, let's take a look at these general fields.

Content element "Text and images"

This content element can be used to display any number of images in the frontend. A heading and body text can optionally be added.

Content element "Images only"

Images can also be displayed with this content element. However, unlike the "Text and images" content element, no continuous text can be displayed here.

Image Editor (Image Cropping)

The image editor integrated in TYPO3 can be used to change the section of an image. Of course, this does not change the original image, but creates a copy of the image with the selected section.

In this way, you can also use a single image with different sections several times on the website.

Content element "Text and media"

The "Text and media" content element is very similar to the "Text and images" content element. However, not only images can be used here, but also audio and video files.

Content element "Heading"

The "Heading" content element can be used to output a heading. No more, no less.

Content element "File links"

This content element can be used to offer files for download in the frontend. These can be all types of files.

Content element "File links" - Use file collections

The "File links" content element is particularly interesting in combination with file collections. It can be used to automatically generate lists of files that are located in a specific folder or assigned to a specific category, for example.

Content element "Insert data records"

Content elements that are to be used multiple times on a website do not have to be created multiple times. With the "Insert data records" content element, these content elements can be reused as links as often as required.

Huge advantage: if you change the original element, all links are automatically updated.

Content element "Table"

If you want to display data in tabular form on the website, this content element could be helpful. Particularly practical: CSV files can also be used via copy & paste. These in turn can be exported from an Excel spreadsheet, for example.

Content elements for menus

If you want to create a classic sitemap or a kind of table of contents for a single page (similar to Wikipedia), then you should take a closer look at the various menu content elements.

HTML" content element

This content element can be used to integrate any HTML code into the website. However, as you should have at least some knowledge of HTML and this content element can also be a potential security risk, it is deactivated in many installations.

Content element "Enumeration"

This can be used to create unsorted or numbered lists. However, as the text in these lists cannot be formatted or linked and nested lists are also not possible, this content element is not used very often. Lists can be created more conveniently using the RTE in a normal text content element.

Content element "Separator"

This element can be used to output a horizontal line. This can also be used to visually break up or divide longer texts.

Edit, move, copy content elements

Existing content elements can of course be edited in a variety of ways. We take a look at a few of them in this video.

Move or copy individual content elements to other pages

Move, copy or delete several content elements at the same time

Of course, several elements can be moved, copied or even deleted at the same time. Because TYPO3 has more than just an internal clipboard.

Publish elements time-controlled

Content elements and pages can be published or deactivated at certain times.

Tips for search engine optimization

As an editor, you should consider a few important points when creating content in order to make it easier for search engines to index the content and thus ensure a better positioning of the website in the search results.

Functions of the list module

The "List" backend module can be used to display all data records saved on a page in the form of a list. However, many tasks can also be carried out much more easily in this display.

Series/stack processing of elements

TYPO3 offers a useful tool via the list module to make changes to several elements at the same time.

Restore deleted items from the paper basket

Almost nothing that you delete in TYPO3 is really deleted immediately. Data records such as pages or content elements can also be quickly restored with the help of the "recycle bin".

Undoing changes

TYPO3 logs all changes that are made to the content of the website. With the help of the "change history", these changes can also be undone at any time.

What is the frontend cache?

To improve the speed of the website, TYPO3 works with a kind of cache for the generated pages. In the following video, we show you when you may need to empty this cache manually.

Settings in the user account

Each user can customize certain settings for themselves, for example, where they land in the backend directly after logging in or in which language the backend should be displayed, and much more.

Replace files

Files can be replaced by new versions. The special thing about this is that the new version is automatically used in all content elements in which this file is used.

Use categories

All data records and files can be categorized. For example, menus can be created that only display pages that belong to a certain category.

What are extensions and plugins?

Sooner or later you stumble across the terms "extensions" or "plugins" when dealing with TYPO3. In this video, we try to explain what they actually mean.

Front-end access for logged-in users only

Pages or even individual content elements can only be displayed to visitors to the website after they have logged in to the front end of the website with a user name and password.

What are backend users and backend user groups?

As an editor, you usually work with limited rights to the TYPO3 system. This means that you see far fewer modules and have fewer options than the administrator, for example.

These access rights are controlled via so-called backend user groups. In this video, we take a look at what this is and how different authorizations can affect you.

The video is for information purposes only, as an editor you cannot normally change the configuration yourself.

Search in the backend

Pages, content or even files can be found very quickly in the backend using various search functions.

Multilingual websites part 1: Translating pages

In order to translate pages and content into other languages on multilingual websites (or to localize the data records), several steps are necessary. First, a translation must be created for a page.

Multilingual websites part 2: Translating content

Once a page has been prepared for translation in the first step, the content of the page can be translated in the second step.

Multilingual websites part 3: Translation view in the list module

Using the list module, you can quickly see which pages of the installation have already been translated and which are still missing.

Multilingual websites Part 4: Translating file metadata

Not only pages and content can be translated, but also the metadata of files, for example the alternative text for images, can be maintained in multiple languages.

This page contains automatically translated content.

Updated: 17.07.2024