All page names need to be in English.
en da  de  fr  it  ja  km  nl  ru  zh

TYPO3 Tutorial for Editors

From TYPO3Wiki
Jump to: navigation, search

notice - Note

This manual was formerly named "typo3_tut", then "doc_tut_editors" and has now been renamed to "TYPO3 Tutorial for Editors".
Extension detail information
tutorial: This basic tutorial for editors explains how to add or change content on an existing website in TYPO3. It provides the most basic step-by-step instructions to get the job done.
documentation state stable document state list
licence OCL
usergroups list of usergroups forEditors, forBeginners
author(s) editors: Eikaa, Psychomieze, Mark Howells-Mead

reviewer and publisher: Psychomieze

TER category forEditors, forBeginners, tutorial

<< Back to Extension manuals page


Next tutorial: Basic TYPO3 Tutorial for Editors Part 2: Tipps & tricks

notice - Note

Some of the screenshots on this page are currently outdated. Please bear with us while we find the time to replace the older images with newer versions!


Let’s begin. Ensure that JavaScript and Cookies are enabled in your browser.

To login to TYPO3, enter the URL of your website followed by “/typo3/” into the address bar of your browser. For example:

You will see the following:

Login screen.jpg

To log in:

  • Enter your user name in the username field [1]
  • Enter your password in the password field [2]
  • Click the [Log In] button or press [Enter].

If the login details you have entered are correct and your user account is activated, you will enter what is known as the TYPO3 backend. (What visitors to your website see is referred to as the frontend.)

Help within TYPO3

Before we take a closer look at TYPO3, I would like to again stress that this Tutorial covers only the fundamental topics. TYPO3 provides a number of online help features within the backend.

  • A short description is displayed by hovering the mouse pointer over a button or function.
  • You will often see a question mark beside an element. Questionmark.jpg Hovering the mouse pointer over the question mark will display help related to that element.
  • You can find detailed explanations of features in the module Manual within the Help section of the menu.

Overview of the TYPO3 backend

You are now in the area of the website known as the backend. Typically, all changes to the content are made here. Although it is possible to make changes on pages directly using a technology called frontend editing, this advanced ability is not covered within this tutorial.

The backend is divided into three columns (see Figure 2). The first one [1] is the menu, which is used to select the task you want to perform. According to the access rights assigned to your user account, you may see more or fewer of the functions in the screenshots shown here.

The second [2] column contains the page-tree, which represents the hierarchy of the pages of the website.

The third column [3] is the work area.

The fourth area [4] is called the “document header”. Here you will find, for example, the name of the user that is logged in (you!) and the logout button. Use the Logout button to leave the TYPO3 Backend. At your next login TYPO3 will remember things like your position in the page tree, and return you to where you were when you last logged out.

Backend cols en.jpg

Figure 2

By selecting "Page" in the first column, you will see a screen similar to Figure 2.

The menu column

The menu has categories containing several modules. The categories and modules available to you depend on how the system administrator has setup your account and which access rights you have been provided with. You can hide and show the list of modules within each category by using the little arrow next to the name of the module.

In Figure 2 you can see the categories Web, File, User tools, Admin tools and Help, each containing a list of available modules specific to that category. For example, the Web category contains modules like Page, View, List and Info.

The most used category is Web and its module Page. The Page module allows you to create and edit pages, manage alternative language versions of the pages, and view or interact with the content elements placed on each page.

The View module shows a preview of how the current page – selected in the Page Tree – will look in the frontend.

The List module provides low-level access to database-records appearing on a page.

The File category contains modules which allow you to access and manage files on your server. For example, images, PDFs or other types of downloadable file.

The User tools and Admin tools are more advanced administrative functions, which are currently not covered by this tutorial.

All modules are explained within documentation available within the About modules module in the help category.

The page tree column

In the page tree you will see different icons, as presented in Figure 3.


Figure 3

  1. This is the root page of the website. (It can also be the home page of the website in some instances.) Some complex TYPO3 installations can contain more than one website: in such cases, each root page contains a separate website. This page is currently selected, so its background is highlighted.
  2. This page is a shortcut. That means that if you visit this page in the frontend, you will be redirected to a different page, which has been specified in the page properties.
  3. This is a standard page.
  4. This page is deactivated and therefore not visible in the frontend. It has Hide Page enabled in the page properties.
  5. This is a menu separator. This can be inserted in order to visually split up long menus in order to improve legibility.
  6. This page is hidden. It has Hide in Menu enabled in the page properties. That means that although the page is active and can be accessed by visitors to the website, it will not be listed in any menus or sitemaps in the frontend.
  7. The mouse is hovering over this page in the page tree, so the background is highlighted.
  8. This is a mount point. This will create a separate entry in a menu which, when selected in the frontend, will show the content from another page.
  9. This is an external link, which will appear in the menu and link directly to the selected page or URL.
  10. This is a custom page type, which has been added by a non-standard extension.
  11. This is a page to which only specified frontend users have access.
  12. This is a folder. (Also known as a sysfolder.) Folders are used to group or store all kinds of content items: for example news articles, newsletters and guest book entries.
  13. This is a trash folder. You can move other pages to this folder before deleting them permanently, in case you're not sure whether they will be needed again or not.

Interacting with the elements in the page tree

  • Clicking on the arrow next to the page expands or contracts the relevant subsection of the directory tree.
  • If you created a page and it doesn't appear in the page tree, you can update the page tree view by clicking on the green reload icon at the top of the column. ReloadPagetree.jpg
  • Clicking on the icon or on the page name has a different result. Clicking on the icon will show a small menu with a list of available options, while clicking on the name of the page will load the page in the work area.
  • Double-clicking on the page name will allow you to quickly and directly edit the page name. Press Enter on your keyboard to save the change.

Working with content

We will now discuss the work area of the page module, where most of the work is usually done. Don't be scared by the many icons and buttons, as they are somewhat redundant. Use the mouse to point and not click (just hover) on any icon to see a little help text appear. At first we'll discuss working with content, later we'll discuss how to work with pages.

Figure 5 shows the work area of the page module after clicking on the name of a page in the page tree. You can see three content elements in the normal column.


Figure 5

The first and the third one are of the type text [1 and 3], the second one is of the type text with image [2]. We'll learn more about different content types later on, let's first see what the buttons are about:


Figure 6

  1. This icon represents the content element as a whole. Each content type has a different icon. Clicking on it pops up a menu with content element specific options.
  2. Clicking on the pen lets us edit this element.
  3. To create a new content element (also called a record) after an existing content element or at the beginning of a column use one of these icons, or
  4. This icon that lets you create a new content element and choose where you want to put it.
  5. If you have more than one element in a column, you can move them around using these arrows.
  6. To hide or unhide an element use the light bulb. Notice how the third element's main icon also shows that it is hidden, just like the page icons do.
  7. To see hidden elements at all, you must check this option
  8. Finally, to remove an element as a whole you use the garbage can

In version 4.2 the general options are a bit shuffled around as you can see in figure 7, but still have the same meaning as above:


Figure 7

Creating Content

Once you have clicked to create a new content element, you will see a page with various content types available for selection (Figure 8). Note that the content type selections available to you are dependent on the features you have installed in your TYPO3 system.


Figure 7

In this image you can then select [1] which type of content you want to have and then [2] where on the page it should appear (use the small grey arrow). The second option is only visible if you haven't already specified where you want to have it. In other words, to see position selections, you must use the new content icon at the top of the page (Item 4, Figure 6).

Editing Content

The work area for editing content is actually the same as for creating it. I will now describe the different parts of it when working with a text w/ image content element, because it covers both the text and the images content elements.


Figure 8

The top area contains the header [1 in Figure 8] of the element, as well as the type [2], which you can change. Be aware that changing a text w/ image element to a text element will cause it to lose all pictures.

To save changes you made to the element use the floppy disk icon [3]. If you want to see the changes in the frontend use the floppy disk with the magnifying glass, it will save the changes and pop up a window displaying the page you're working on. Disable pop-up-blockers for this site!

The [5] fifth icon will save the changes and go back to the regular work area of the page module.

The [6] sixth icon will go back to the regular work area of the page module without saving the changes.

The trash can [7] will delete the current content element.

The last icon with a small arrow [8] will undo the last change made to this content element.

The Rich Text Editor

The editor is pretty much self explanatory, you have probably worked with similar word processing software before. Depending on how the site was set up, the buttons available to you will vary. Here's an example:


Figure 9

Common Rich Text Editor (RTE) formatting options include:

  1. bold and italic writing
  2. super and sub script
  3. numbered and unordered lists
  4. indent the paragraph
  5. insert special character
  6. if text is selected, this option lets you create a hyperlink, see below
  7. insert a table
  8. search and replace
  9. show HTML source, only helpful if you know html
  10. remove unwanted formating, for example if you copy and paste from MS Word or from another website
  11. undo / redo
  12. toggle borders (for tables, as is the whole row)

Creating a Link


Figure 10

Once you have selected a word or more in the rich text editor and clicked on the Link icon, you have the following options:

  1. Link to a page within the site, just click on the name
  2. Link to a file from the filelist, more about files later on
  3. Link to another website, just enter the websites address (URL) into the appropriate field and set link
  4. Link to an email-address, just enter in the right field and set link

If you have selected an existing link, you can remove it with the leftmost option, Remove Link.

Working with Images

Most times you work with images either in the “text with image” or the “images only” content element, these cases are covered here. For working with images it can be helpful to activate the option Show secondary options at the bottom of the page with the editform.


Figure 11

  1. A list of images currently visible on the page
  2. select an image on the left and change the order with these arrows
  3. select an image on the left and remove from the list
  4. to add an image from the filelist' on the server, use this folder button
  5. to directly upload an image for use in this content element only use this field
  6. place the images relative to the text
  7. set a specific width and / or height for all images in this element
  8. to turn the images into a link
  9. to make the fullscreen size of an image available
  10. set image quality
  11. if you want to have a caption for an image put it in here, for multiple images put each caption in one line

You will also see a text area for Alternative Text:, it is generally a good idea to write a couple of words describing each picture in one line each. This is especially important for accessibility requirements (for example, Section 508 compliance in the US).

Working with files

TYPO3 provides the filelist module which can be used to store files on the server. The files which are stored this way are available in the link section of the rich text editor and the image section of various content elements. It is good practice not to upload the files directly in the elements, but to use the filelist as you can reuse the files you upload here instead of uploading them again and again each time they are needed.


Figure 12

  1. select the filelist module
  2. what usually is the page tree is now the file-tree, here you might see one or more folders, clicking on the folder icon pops up a menu, clicking on the name shows the folder's content in the work area
  3. the list of files, clicking on the file icon pops up a menu, clicking on the name opens the file
  4. to add files to this folder use this button
  5. to show thumbnails of images in this folder check this option

If this looks completely different on your site, your site is probably using the extension Media (DAM) (dam) to organize files.

Working with pages

You have already learned about the page-tree, now we'll see how pages are created, moved around, hidden and deleted. Here's the context menu you get when clicking on the icon of a page:


Figure 13

The first three options are commonly used functions:

Show opens the page in the View module (like your frontend view), Edit in the Page module, New will let you create new content on that page or let you create a new page.

Info is not useful for editors.

Copy will, surprise, copy the entire page to the TYPO3 clipboard, which is quite similar to the copy and paste you know from your computer's operating system.

Cut will make it possible to move the page to an entirely different place, by pasting it there. Once the page has been cut, the pop up menu of a different page will have the following two entries:

Pasteoptions.jpgPaste into will put the page inside the page you clicked on, so that it will appear as a child of that page in the page-tree.

Paste after will put it on the same level of the page-tree hierarchy.

We will neither discuss Versioning here, nor Send to review/pub.

The More options... field will pop up yet another menu, with an interesting option called Move page.


Figure 14

Let me repeat that. Clicking on the icon of a page [1] will pop up a menu, selecting More Options [2] will pop up another menu. Move page [3] lets you select in the work area where the page should be moved, by clicking on one of the grey arrows [4].

You can also move files and folders around easily via drag and drop. You can move a page by dragging it with the mouse. If you drop it at another page, you will get a popup window where you can decide if you want to copy or move the page after or inside the page where you have dropped the other one. Easy, isn't it?

The Hide option makes the page unreachable in the frontend and the Delete option deletes the page altogether.

Creating Pages

Adding a new page can be done in 2 ways.

1st way of adding a new page

Pageicon.jpgClick on any page icon in the page tree

Then from the drop down menu select new

Selectnew.jpgand press enter.

Now you will see this screen below in the 'work area' to the column right.


Figure 16

Clicking on Page (inside)

will bring up immediately the New record page information.

Clicking on Click here for wizard!


Clicking on Page (after)

will also bring up the New record screen above.

2nd way of adding a new page

Click on any name of a page in the page tree

and the screen below will open in the work area to the right:


Figure 17

Next click on the [New Page] button


and you will see the ‘New record’ screen.

Now all you have to do is to select where you want to add the page in the directory tree of your website. If you place it someplace by mistake you can always move it later with the move page option (it is available when selecting the edit option).

Once you have decided where to place your new page, click on the little grey file folder with the arrow pointing to it and your page will be inserted at this point.


Figure 18

Once you have created a page, the top part of the page view provides options as shown in Figure 19.


Figure 19

  1. Edit page properties gets you a work area with some page specific options, such as Hide/Unhide, and you can enter a Navigation title so that the page has a different title in the menu than on the page.
  2. These Options are easier to reach if you want to Move pages around. As you can see, a lot of times you can achieve the same things by different means.
  3. To create a New page, use this button, or the one from the context menu. By default, the new page is hidden, so that you can create the content of the page before making it publicly available. Don't forget to Save the new page by using the floppy disk icons!

Adding Multiple Pages at Once

If you want to add more than one page at a time you can use the multiple page wizard. Multipagewizard.png

  • First select the page where your new pages will be placed in.
  • Then from the Web menu select Functions and you will get the screen as shown.
  • Now fill in the names of your new pages. Only filled in fields will create a page.
  • If you place a checkmark in the box "Place new pages after existing subpages" they will be added below the current pages. If you leave it blank the new pages will be placed before the current pages.
  • Once you are done click the "Create" Pages button.

Multiple languages

If your site is available in multiple languages, you want to have different translations available of the same page. Here's what you need to do:

In the top part of the Page module, you have a drop-down box, where you select the Languages option, as seen in Figure 20.


Figure 20 If you want to make a new translation of an existing page you will find a button Make new translation of this page: [1] with a drop-down menu of the available languages (see Figure 21). Choose the one you want, then enter the new translation of the pages name in the Pagetitle and save.


Figure 21

You can now copy the content of the page in the old language to the new language [2]. This is quite useful if you have images you would like to see in the new language version of the page.

You can also create an entirely new version of the page.

If this two column mode is a little confusing, you can go back to the old view of the work area by selecting Columns in the dropdown menu, where you previously selected Languages.

Note that you can now switch between the different translations of the page with another drop-down menu below the one you just used, as you can see in Figure 22.


Figure 22