The appearance of the content area differs depending on the module and the selected position in the navigation area or the page tree. To edit the contents of a page, editors will usually work in the page module.

You already know that the structure of the content in the frontend is similar to that in the backend. Therefore, the content area looks different on each page, since different content and content elements are used. The following section describes the functions that you can find in the content area of the page module.

Add Content Element

Via the + Content button

On the left above and below each content element there is a button for creating a new page content.

  1. Click on the + Content button for adding a new content element at the position where you want to insert the new content.
  2. Select the content element you need.
  3. The mask with the content properties appears. You can insert your content immediately.
  4. Save your changes
TYPO3 Add Content

Via Drag & Drop

On the left above the content area there is a + button.

  1. Click on the + button.
  2. A menu with all available content elements appears. Select a content element.
    • You will still see the menu even if you scroll down in the content area. 
  3. Click on the required content element with the left mouse button and move it to the selected position while holding down the button.
    • You can recognize an available position by the orange coloring. As soon as the position appears green, you can release the left mouse button.
  4. You have now added a new content element and can now edit it.
TYPO3 Backend Add Content Element

Edit Content Element

To edit a TYPO3 content element, simply click on the pencil icon located in the upper right corner of each content element. Depending on the type of content element, you can change a text, add an image or control the availability of the element in the element properties.

TYPO3 Inhaltselement bearbeiten ausblenden löschen

Hide or delete content element

With the switch in the upper right corner of a content element, a content can be shown or hidden manually. This can be very useful if you don't want information to be immediately available to the public. This allows you to prepare your content and show or hide it as needed.

Should an element have become obsolete, it can be deleted by clicking on the recycle bin icon.

If you click on it by mistake, it is no problem - TYPO3 will ask you again if you really want to delete an element. If you deleted an element by mistake, follow the instructions for undoing actions.

Copy content elements/create references

TYPO3 Content Element Menu

Before you copy or reference an element, the difference between the two options must be explained briefly: With a copy you duplicate a content element in such a way that another individual content element is generated. Original and copy can be edited independently of each other. With a link you can only adjust the original element but not the references. The contents of the link always correspond to the original element. All changes are immediately visible in the links.

A copy is created, for example, if a similarly structured element is required. A reference can be useful if the same content is repeated on many pages, such as CTAs.

In the upper left corner of each content element there is a small icon (the icon of the content element in use) that can be used to open a menu with various options.

  1. Expand the context menu of the content element.
  2. Choose the Copy option.
  3. Another symbol for inserting the copy now appears at the left above and below each content element. Click on the symbol at the selected position.
  4. A window appears with the options Paste Copy and Paste Reference. Choose an option.
  5. You have now inserted a copy/reference of a content element.
TYPO3 Paste Copy Reference

You can easily copy content on one page and then paste copies and references on another page.

Just change the page in the page tree after copying.

TYPO3 Paste Copy Paste Reference

Move Content Element

The two methods described below are more or less suitable for moving elements, depending on the size of a page. The Drag & Drop variant is the faster one if a content element and its destination are close together. Moving using the Cut option is more practical if the content element is more than 2-4 other content elements away from the target.

If the content element is to be moved to another page, only the variant using the context menu works.

Using the context menu

  1. Expand the context menu by clicking on the symbol of the content element.
  2. Choose the option Cut.
  3. Another symbol for inserting the cut element now appears on the left above and below each content element.
  4. Click on the symbol at the selected position. It can also be located on another page in the page tree.
  5. Click on Move in the selection that appears.

Via Drag & Drop

  1. Click in the upper gray area of a content element and hold it with the left mouse button.
  2. While holding down the button, move the content element to the new position.
    • You can recognize an available position by the orange coloring. As soon as the position appears green, you can release the left mouse button.
TYPO3 Backend Move Content Element

Would you like to know more?

All information about the available editions can be found on the webpage for our TYPO3 Website-Base. You have the possibility to get a Website at a Fixed Price or you decide for a Website as a Service package, with which no further costs for hosting or security and function updates will come up to you.

Website at a Fixed Price
Website as a Service