Other languages: 
This quick reference for TYPO3 v4 is meant to accompany the TYPO3 videos for Editors. Minor deviations might result from the different targets, since the videos follow a didactical approach, while the quick reference describes efficient ways of individual steps. The quick reference and videos usually show only one of the many possibilities TYPO3 offers.
If you want to follow along with the below mentioned steps, please, make sure that [Extended view] is activated. The icons and help texts may possibly differ partly from those in your system, depending on the TYPO3 version, configuration of the interface, and context.
You find the entire quick reference on one page, which enables you to search for terms by [Ctrl]+[F]. If you would like to use the quick reference offline, please, download the PDF file.
B A S I C S
Log in
Type URL of your domain in the browser >> add '/typo3' >> press [Enter] >> enter your [Username] and [Password] >> click [Log In] (cookies and popups need to be allowed)
Video: Basic Concepts
| 
|
Access to records
Click module Web:  [Page]
Video: Basic Concepts | 
|
Display a page's records or select a page for editing
Module Web - [Page]: if the right page is not visible in the page tree, click  in front of the web site name and/or page names >> click on page name
Videos: Basic Concepts, Icons and Clicks
| 
|
Display a page's context menu with various functions
Module Web - [Page]: click  in front of the page name in the page tree
Video: Icons and Clicks | 
|
Display a content element's context menu with various functions Module Web - [Page]: click on page name in the page tree >> click  in front of the content element in the right frame Video: Icons and Clicks | 
|
Display a content element's editing form Module Web - [Page]: click on page name in the page tree >> click on name of the content element in the right frame Video: Icons and Clicks | 
|
Display a context menu in the Rich Text Editor of the editing form Module Web - [Page]: click on page name in the page tree >> click on content element name >> open tab [Text] >> place cursor at right position or mark a text passage >> click with right mouse button Video: Icons and Clicks | 
|
Display help texts Module Web - [Page]: hold cursor over icons until help text appears or click  for a detailed help text Video: Icons and Clicks | 
|
Save input in between
Module Web - [Page]: click on page name in the page tree >> click on record name in the right frame>> edit record >> click  [Save document] in the upper bar of the form
Video: Icons and Clicks | 
|
Save input and view it in the frontend
Module Web - [Page]: click on page name in the page tree >> click on record name in the right frame >> edit record >> click  [Save document and view page] in the upper bar of the form
Video: Icons and Clicks | 
|
Save input and create a new element
Module Web - [Page]: click on page name in the page tree >> click on record name in the right frame >> edit record >> click  [Save document and create a new one] in the upper bar of the form
Video: Icons and Clicks | 
|
Save input and close the form
Module Web - [Page]: click on page name in the page tree >> click on record name in the right frame >> edit record >> click  [Save and close document] in the upper bar of the form Video: Icons and Clicks | 
|
Close a form without saving the input
Module Web - [Page]: click on page name in the page tree >> click on record name in the right frame >> optionally edit record >> click  [Close document] in the upper bar of the form
Video: Icons and Clicks | 
|
Delete a record (during editing)
Module Web - [Page]: click on page name in the page tree >> click on record name in the right frame >> optionally edit record >> click  [Delete] in the upper bar of the form >> click [OK], if confirmation prompt appears
Video: Icons and Clicks | 
|
Log out
Click [Logout] in the upper bar
Video: Basic Concepts | 
|
P A G E S
Display a page
Module Web - [Page]: click in front of the page name in the page tree >> click  [Show] in the context menu
Video: Handling Pages
| 
|
Create a new page and fill in page properties
Module Web - [Page]: click in front of the page name in the page tree >> click  [New] in the context menu >> choose [Page (inside)] or [Page (after)] >> fill in fields (at least [Pagetitle]) >> finish with [Save an close document]
Video: Handling Pages | 
|
Copy a page
Module Web - [Page]: click in front of the page name in the page tree >> click  [Copy] in the context menu
Video: Handling Pages | 
|
Cut a page
Module Web - [Page]: click in front of the page name in the page tree >> click  [Cut] in the context menu
Video: Handling Pages | 
|
Paste a page
Module Web - [Page]: click in front of the page name in the page tree >> click  [Paste into] or  [Paste after] in the context menu
Video: Handling Pages | 
|
Unhide a page
Module Web - [Page]: click in front of the page name in the page tree >> click  [Unhide] in the context menu
Video: Handling Pages | 
|
Hide a page
Module Web - [Page]: click in front of the page name in the page tree >> click  [Hide] in the context menu
Video: Handling Pages | 
|
Edit page properties
Module Web - [Page]: click in front of the page name in the page tree >> click  [Edit page properties] in the context menu >> fill in fields or change input >> finish with [Save and close document]
Videos: Handling Pages, complementary: Page Properties
| 
|
Delete a page
Module Web - [Page]: click in front of the page name in the page tree >> click  [Delete] in the context menu >> click [OK], if confirmation prompt appears
Video: Handling Pages | 
|
C O N T E N T S
Create a new content element
Module Web -  [List]: click on page name in the page tree >> click [Create new record] in the upper bar of the right frame >> choose [Pagecontent] >> fill in fields (e.g. [Header] and [Text]) >> complete with [Save and close document]
Video: 4 Minutes Introduction, complementary: General Aspects of Content Elements
| 
|
Create the content element type 'Text w/ image' for inserting images
Module Web - [List]: click on page name in the page tree >> click [Create new record after this record] of the respective content element in the right frame >> choose  'Text w/Image' within [Type] >> click [OK], if confirmation prompt appears >> tab: [Media] click  [Browse for files] next to [Images] >> click [Browse] to upload new images, if necessary >> choose image(s) in the folder tree >> optionally fill in fields from [Position] to [Title Text] >> finish with [Save and close document]
Videos: Images via Content Element, complementary: Including Files (Element Browser) | 
|
Create the content element type 'Filelinks'
Module Web - [List]: click on page name in the page tree >> click [Create new record after this record] of the respective content element in the right frame >> choose  'Filelinks' within [Type] >> click [OK], if confirmation prompt appears >> tab: [Filelinks] click [Browse for files] next to [Files] >> choose files in the folder tree >> optionally fill in further fields >> finish with [Save and close document]
Video: Types of Content Elements | 
|
Create the content element type 'Insert records'
Module Web - [List]: click on page name in the page tree >> click [Create new record after this record] of the respective content element in the right frame >> choose  'Insert records' within [Type] >> click [OK], if confirmation prompt appears >> tab: [Insert Records] click [Browse for records] next to [Items] >> choose page in the page tree >> choose pagecontent >> finish with [Save and close document]
Video: Types of Content Elements
| 
|
Create the content element type 'HTML'
Module Web - [List]: click on page name in the page tree >>click [Create new record after this record] of the respective content element in the right frame >> choose  'HTML' within [Type] >> click [OK], if confirmation prompt appears >> tab: [HTML] add source code >> finish with [Save and close document]
Video: Types of Content Elements | 
|
Create the content element type 'Form'
Module Web - [List]: click on page name in the page tree >> click [Create new record after this record] of the respective content element in the right frame >> choose  'Form' within [Type] >> click [OK], if confirmation prompt appears >> fill in fields (e.g. [Header]) >> save input with [Save document] >> tab: [Form] click  [Forms wizard] next to [Configuration] >> create form fields as desired >> finish with [Save and close document]
Video: Creating Forms - available soon | 
|
Edit a content element
Module Web - [Page]: click on page name in the page tree >> choose [Columns] in the upper left corner of the right frame >> click [Edit] at the right content element >> edit fields >> finish with [Save and close document]
Video: Page Module | 
|
Unhide a content element
Module Web - [Page]: click on page name in the page tree >> choose [Columns] in the upper left corner of the right frame >> enable [Show hidden content elements] if necessary >> click [Un-hide] of the content element
Video: Page Module | 
|
Hide a content element
Module Web - [Page]: click on page name in the page tree >> choose [Columns] in the upper left corner of the right frame >> click [Hide] of the content element >> enable [Show hidden content elements] if necessary
Video: Page Module | 
|
Move a content element within a page
Module Web - [Page]: click on page name in the page tree >> choose [Columns] in the upper left corner of the right frame>> click  [Move record up] or  [Move record down] of the content element
Video: Page Module | 
|
Move a content element to another page
Module Web - [Page]: click on page name in the page tree >> choose [Columns] in the upper left corner of the right frame >> click in front of the content element >> click [Cut] in the context menu >> click on target page name in the page tree >> click in front of the target content element in the right frame >> choose [Paste after]
Video: Page Module | 
|
Delete a content element
Module Web - [Page]: click on page name in the page tree >> choose [Columns] in the upper left corner of the right frame >> click [Delete] of the content element >> click [OK], if confirmation prompt appears
Video: Page Module | 
|
R I C H T E X T E D I T O R ( R T E )
Format paragraphs of the text
Module Web - [List]: click on page name in the page tree >> click [Edit record] in the right frame >> tab [Text]: place cursor in the paragraph you want to reformat >> choose [Type of block] or [Block style] >> save input with [Save document]
Video: General Aspects of the Rich Text Editor (RTE) | 
|
Format individual characters
Module Web - [List]: click on page name in the page tree >> click [Edit record] in the right frame >> tab [Text]: mark the characters you want to reformat >> choose [Text style] >> save input with [Save document]
Video: General Aspects of the Rich Text Editor (RTE) | 
|
Create bulleted lists
Module Web - [List]: click on page name in the page tree >> click [Edit record] in the right frame >> tab [Text]: mark respective text >> click  [Bulleted list] >> optionally mark individual for rows for additional indention >> click  [Increase indent] >> save input with [Save document] Video: Buttons of the Rich Text Editor (RTE) | 
|
Use spell-checker
Module Web - [List]: click on page name in the page tree >> click [Edit record] in the right frame >> tab [Text]: click  [Spell-check] >> edit misspelled words with [Replace], [Replace all], [Ignore] or [Ignore all] considering the suggestions made >> complete with [OK] >> save input with [Save document]
Video: Buttons of the Rich Text Editor (RTE) | 
|
Insert a link to an internal page
Module Web - [Page]: click on page name in the page tree >> click [Edit] in the right frame >> tab [Text]: mark respective word >> click  [Insert web link] >> tab [Page]: optionally fill in fields >> click target page in the page tree >> save input with [Save document]
Video: Setting Links in the Rich Text Editor (RTE) | 
|
Insert a link to a file
Module Web - [Page]: click on page name in the page tree >> click [Edit] in the right frame >> tab [Text]: mark respective word >> click [Insert web link] >> tab [File]: optionally fill in fields >> click target file in the folder tree >> save input with [Save document]
Video: Setting Links in the Rich Text Editor (RTE) | 
|
Insert a link to an external site
Module Web - [Page]: click on page name in the page tree >> click [Edit] in the right frame >> tab [Text]: mark respective word >> click [Insert web link] >> tab [External URL]: type url >> optionally fill in further fields >> click [Set Link] >> save input with [Save document]
Video: Setting Links in the Rich Text Editor (RTE) | 
|
Insert a link to an email address
Module Web - [Page]: click on page name in the page tree >> click [Edit] in the right frame >> tab [Text]: mark respective word >> click [Insert web link] >> tab [Email]: type email address >> optionally fill in further fields >> click [Set Link] >> save input with [Save document]
Video: Setting Links in the Rich Text Editor (RTE) | 
|
Include images as 'Magic Image'
Module Web - [List]: click on page name in the page tree >> click [Edit record] in the right frame >> tab [Text]: place cursor in respective text passage >> click  [Insert/modify image] >> tab [New Magic Image]: click on folder name in the folder tree >> click image name >> optionally click image with right mouse pointer and choose [Image properties] in the context menu >> fill in fields as desired >> save input with [Save document]
Video: Images in the Rich Text Editor (RTE) - Part 1 | 
|
Include images as 'Plain Image'
Module Web - [List]: click on page name in the page tree >> click [Edit record] in the right frame >> tab [Text]: put mouse pointer to respective text passage >> click [Insert/modify image] >> tab [New Plain Image]: click on folder name in the folder tree >> click on name of the web-suitable image >> optionally click on image with right mouse pointer and choose [Image properties] in the context menu >> fill in fields as desired >> save input with [Save document]
Video: Images in the Rich Text Editor (RTE) - Part 2 | 
|
Include images via 'Drag 'n' Drop'
Module Web - [List]: click on page name in the page tree >> click [Edit record] in the right frame >> tab [Text]: put mouse pointer to respective text passage >> click [Insert/modify image] >> tab [Drag & Drop]: click on folder name in the folder tree >> click image and drag it by holding the left mouse button to the target text passage >> close popup window (Element Browser) >> save input with [Save document]
Video: Images in the Rich Text Editor (RTE) - Part 2 | 
|
Insert tables
Module Web - [List]: click on page name in the page tree >> click [Edit record] in the right frame >> tab [Text]: place cursor in respective text passage >> click  [Insert table] >> optionally fill in fields (e.g. [Rows] and [Cols]) >> click [OK] >> fill in cells >> optionally click  [Row properties] to choose e.g. table header >> save input with [Save document]
Video: Tables in the Rich Text Editor (RTE) | 
|
F R O N T E N D - E D I T I N G
Activate frontend editing
Module Web - [List]: click in front of the page name in the page tree >> click [Show] in the context menu >> if necessary, click tab or window of the browser where the frontend view of the page opens with editing buttons (editing buttons can be seen only as long as logged in with the related domain in the backend)
Video: Editing Content Directly (Frontend Editing) | 
|
Edit a header in the frontend Module Web - [List]: click in front of the page name in the page tree >> click [Show] in the context menu >> frontend: click  [Edit header] >> change text >> click [Save and close document] to automatically update the display Video: Editing Content Directly (Frontend Editing)
| 
|
Edit text in the frontend Module Web - [List]: click in front of the page name in the page tree >> click [Show] in the context menu >> frontend: click [Edit bodytext] >> edit text >> click [Save and close document] to automatically update the display Video: Editing Content Directly (Frontend Editing)
| 
|
Edit an entire content element in the frontend
Module Web - [List]: click in front of the page name in the page tree >> click [Show] in the context menu >> frontend: click  [Edit record] >> edit fields as desired >> click [Save and close document] to automatically update the display Video: Editing Content Directly (Frontend Editing)
| 
|
Move a content element in the frontend
Module Web - [List]: click in front of the page name in the page tree >> click [Show] in the context menu >> frontend: click [Move up] or [Move down] Video: Editing Content Directly (Frontend Editing) | 
|
Create a new content element in the frontend
Module Web - [List]: click in front of the page name in the page tree >> click [Show] in the context menu >> frontend: click  [New record after] >> fill in fields as desired >> click [Save and close document] to automatically update the display
Video: Editing Content Directly (Frontend Editing) | 
|
Hide a content element in the frontend
Module Web - [List]: click in front of the page name in the page tree >> click [Show] in the context menu >> frontend: click  [Hide] >> click [OK], if confirmation prompt appears (record will only be editable in the backend)
Video: Editing Content Directly (Frontend Editing)
| 
|
Delete a content element in the frontend
Module Web - [List]: click in front of the page name in the page tree >> click [Show] in the context menu >> frontend: click  [Delete] >> click [OK], if confirmation prompt appears
Video: Editing Content Directly (Frontend Editing) | 
|
F I L E S
Access to files
Module File -  [Filelist]: click in front of the folder name in the folder tree, if necessary >> click folder name >> optionally activate [Display thumbnails] in the right frame
Video: Managing Files (File List) | 
|
Move files
Module File - [Filelist]: click folder name in the folder tree >> click  (or other file icon) in front of the file name in the right frame >> click [Cut] in the context menu >> click  in front of the target folder in the folder tree >> click [Paste into] in the context menu
Video: Managing Files (File List) | 
|
Rename files
Module File - [Filelist]: click folder name in the folder tree >> click (or other file icon) in front of the file name in the right frame >> click  [Rename] in the context menu >> change file name >> click [Rename]
Video: Managing Files (File List) | 
|
Upload files for the web site
Module File - [Filelist]: click folder name in the folder tree >> click  [Upload files] in the upper bar of the right frame >> click [Browse...] and select images or other files from local computer >> click [Upload files]
Video: Managing Files (File List) | 
|
Quick Reference: Copyright 2008-2009 Silke Arend
Published under Open Content License: http://www.opencontent.org/opl.shtml
