A content element is a unit in the backend of a TYPO3 page that contains content of a certain type and/or renders content in a certain way in the frontend. Content elements can be created, edited and customized in the Page and List modules. TYPO3 offers a wide range of content element types that cover almost every case in page creation and page management. How to create pages in the TYPO3 backend and how to handle the page tree as well as how to customize the page properties or what different TYPO3 page types can be used for, we will introduce you in further tutorials of our digital TYPO3 manual.

The TYPO3 content elements are divided into different groups or types. Each type contains several content elements. We have created a page for each group with instructions on how to use each of the included content elements. Below, you can see all TYPO3 content element groups at a glance.

In the tutorial on this page, we would like to introduce you to the common content properties of the different TYPO3 content elements, which can be found in the edit mode of each content element. These are the area above a content element and several tabs of the same structure.

  • Typical page content: Header Only, Text & Media (in the context of this TYPO3 content element the tutorials for the Rich Text Editor (RTE) and the Image Editor are particularly important and interesting), File Links
  • Menu: Abstracts, Categorized content, Categorized pages, Pages, Subpages, Recently updated Pages, Related pages, Section index, Section index of subpages from selected pages, Sitemap, Sitemap of selected pages
  • Special elements: Plain HTML, Divider, Insert records
  • Form elements: Form, Indexed search
  • Plugins: General Plugin, Comments, Google Sitemap, Job Application Form, Job List, Job Teaser, Twitter Stream, Pages/Content Elements in Tabs, Cookie-Opt-In, Cookie List, Teaser List, Multidimension Teaser, Vimeo, YouTube
  • Mask elements: Testimonial, Highlight Box, FAQ / Accordion, Feature Comparison, Popup, Card, Google Maps, Downloads, Image Gallery, Products, Slider, Static Map, Simple Tab Element
  • News: News Overview, Latest News, News by Category/Tag, List News by Author
  • Account: Account Overview, Edit Account, Edit Account (Only personal fields), Edit Account (Only login fields), Reset Password, Login, Register, Confirm Email Address
  • MegaMenu: List of Pages, Pages +1, 2 or 3 Level SubTree
  • Grid elements: One Column, Two, Three, Four Columns, Accordion, Box, Area

Area above a Content Element

In edit mode/the element properties, several buttons appear above the content area, which you cannot see in the page view.

Buttons on the left side

Close Close the content element without saving it (for example, if you have accidentally deleted something).
Save Changes are saved, but you remain in edit mode of the content element.
Save and close

Saves the changes and you return to the content area of the page.

View A preview page is opened in a new browser tab where the content element can be seen on the page in the frontend.
New Create a new element of the same type to be inserted in the page below the original content.
Delete The content element is deleted.

Buttons on the right side

Open the content element in the editing mode in a new window.

Bookmark the page where the content item is located or copy the backend link to the page.

Read useful information about the current view and/or elements.

Properties of Content Elements

Various tabs are available when creating or editing a content element in the TYPO3 backend. The available tabs vary from content element to content element. Some tabs are found in almost all content elements and contain the same options. An exception is the first tab of all content elements:

Tab General

Every TYPO3 content element has the tab General. The topmost area of the general tab is the same in each content element. This is where the fields Type and Column are located. You do not normally need to adjust these.

  • Type: If you want to convert an element into another content element, do so in the drop-down menu of this selection field.
    • It is possible, however, that fields or tabs are missing in the converted element and are therefore not transferred.
  • Column: If the content element must be moved to another column (for example, from the content to the footer), you can select the corresponding area under Column.

All further options in the general tab are described in the individual documentations for the content elements.

Type independent Tabs

Appearance

In the tab Appearance the layout of a TYPO3 content element can be changed. The settings shown in the image for layout, frames, spacing and links are set automatically when a new content element is created. In most cases you can use the default settings.

In individual cases, however, it may be useful to adjust the settings for spacing and frames on the Appearance tab.

Language

Just as for entire TYPO3 pages, you can control the visibility of individual content elements in terms of language and translation. The settings in the image correspond to the default settings. If you have not yet translated your page or the content element, it will be output in the default language with these settings when a user wants your TYPO3 page displayed in another language. When an element is translated, the translation is displayed normally. Several options are available if you want to proceed differently with a particular element:

  • + enforce The rendering is enforced if a translation is available. Even if the element is disabled in the default language.
  • + only if translated Setting is only available for translated languages: The element is active on the website, if it's translated in the current language.
  • + or in Fallback Setting is only available for translated languages: The element is active on the website, if it's translated in the current language or in one of the fallback languages.
  • Active/ Inactive The element is active/inactive on the website.

Access

In the Access tab, the general visibility of a content element can be determined. When editing and creating TYPO3 pages, the access can also be defined for the whole page, which can be customized in the page properties. Just as elements can be enabled and disabled in the content area, it is also possible to make this setting in the edit mode of an element. When the slider under visibility of content element is set to green, the page is activated and in the front end.

In addition, you can set a publish and expiration date, and if you click in one of the two fields for this, you will also find that you can even set the time. If only the time of publication is set, the TYPO3 element will be visible on the website from then on and will remain visible. If only the expiration date is set, the item will appear immediately on the page (assuming it's enabled) and will remain visible until the time you set.

With user group access rights, you determine which users should or should not be shown content. For example, people who are already logged in should not see the login window. To set the access rights, proceed as follows:

  1. Under the column Usergroup Access Rights, choose the group that should see/not see the content under Available Items.
    • You can also search for the group using the search field: Enter a term, you will now only see the groups that contain this term.
  2. Click on the selected group. It is now located in the left column Selected Items.
  3. Save your changes.

Screenshot: Tab Access

If you have clicked on an item by mistake, select it by clicking on it in the left column and then click on the recycle bin icon. The group is then no longer in the selection.

Categories

Individual elements can be tagged with categories, as well as pages. To do so, you have to check the corresponding categories in this tab. Similar to our documentation overview page, where it is possible to filter pages, page contents can also be filtered.

Categories can be added and edited in the list module. They can be important for different plugins or menu elements. On the other hand, category pages are a tool to divide TYPO3 news pages into different topics.

Notes

The Notes tab has no effect on the frontend view of a TYPO3 page. This function is used, for example, when a website is managed by several people. Editors can leave notes if a particular content element needs to be dealt with separately - for instance if it should not be changed or urgently updated.

A note then appears clearly above the tabs of a content element in edit mode. You can also see the note in the content area below the content element.

Grid elements

The tab Grid Elements is displayed for all content elements in edit mode (except Mask Elements). Grid elements are also a type of TYPO3 content elements. They are filled with other content elements. This tab is only relevant for content elements in a grid element. The position of such a content element within the grid can be determined under Grid Container Columns.

Outside of edit mode, you can move content elements in a grid element just like any other content element using cut & paste or drag & drop.

Screenshot: Tab Grid elements

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.