Overview of the template layouts

for the TYPO3 news system

Design note

All news layouts have been designed for 100% page width and should be used as such, i.e. without a surrounding container.

Individual views are also acceptable in 66% wide columns of a container. See description.

If you use news layouts with a page width of less than 100%, the display quality will most likely be limited.

Be sure to check the mobile display of the page! This is more important than the desktop view, which you will probably see most often during editing.

Layouts for news overviews

(as of 2025)

Standard list view

Map description
  • Three-column display in map form with
    • picture
    • date
    • Teaser text
    • Link to detailed view
  • Further news can be selected via the page numbers below the cards. (Pagination)
  • Designed for 100% page width
Usage

Well suited as a news overview for organizational units with a manageable volume of news. The three cards should be sufficient to display the latest news. Page visitors often only use the pagination when they are looking for a specific topic. Important news on page 2 or 3 is unlikely to be noticed by visitors surfing past.

Example of standard list view

List view without images

Map description
  • Three-column display in card form with
    • date
    • Teaser text
    • Link to detailed view
  • Further news can be selected via the page numbers below the cards. (Pagination)
  • Designed for 100% page width
Usage

Well suited as a news overview,

  • which requires less space,
  • for which a selection of images seems unnecessary and
  • with a low volume of news (max. 3 really current news items visible at first glance)
Example list view without images

List only images (60%-100% width)

Map description
  • Three-column display in map form with
    • picture
    • Link to detailed view
  • Further news can be selected via the page numbers below the maps. (Pagination)

Editors must ensure that the same page ratio is always maintained for images used.

Usage

Originally designed for our architecture, which announced events with specially designed, poster-like images.

For this news view, all relevant information must be visible in the image itself. Attention accessibility: Every bit of text on the image must be included in the alternative text.

Future of the view

Due to infrequent use and the challenge of accessibility, this view may be discontinued.


3 teaser pyramid (100% width)

Description

The 3 teaser pyramid layout displays three current news items in cards, with the image to the left of the date, title and teaser text. The first news item is displayed in 100% page width and is very large. The 2nd and 3rd news items are displayed below and next to each other.

Below the 3-teaser pyramid, a button links to a complete news list.

Use

Well suited as a news entry on a homepage. While the most prominent news items are displayed directly, the button below leads the site visitor to a complete news overview.

This layout requires expressive images and meaningful teaser texts, but these must not be too long.

Example 3 teaser pyramid (100% width)

3 teaser cards


3 teaser events (100% width)

Example of 3 teaser events (100% width)
No events are planned at the moment.

List with maps monthly view (100% width)


List of events (66%-100% width)


Classic list with image (66%-100% width)


Teaser with title (without image)


Layouts for detailed views

(as of 2025)

Detail page Standard

Example detail page Standard

Do you know how to contact the people responsible for editing a Typo3 site?

Office employee at the computer. Man in the foreground, woman in the background.
Office employee at the computer

At the bottom of each page you will find a link to the responsible editorial office and the corresponding e-mail address. This allows you to contact them directly.

This entry is required due to legal regulations on accessibility. If a site visitor encounters a barrier, they can contact the responsible editorial team directly via the e-mail link. A reply must be sent within 30 days.

If "N.N." or the "TYPO3 team" appears here, the responsible department has not been notified. In this case, please let us know where entries are still missing. We will then contact the editors known to us and complete the entry.

If you would like to adapt this entry for your pages, you can fill out the form for reporting editorial responsibility.

Office employee at the computer. Man in the foreground, woman in the background.
Office employee at the computer

Event detail page

Example event detail page

Typo3 for beginners part 1 (Jan 26)

Course 1 covers basic TYPO3 topics, including the structure of the frontend and backend, creating pages and content elements, creating content, links, handling files, metadata, creating news records and accessibility.
TYPO3 Logo
TYPO3 Logo

Dear (prospective) web editors,
we are pleased to be able to offer the online training series TYPO3 for beginners 1-3 again in winter semester 25/26.

This will teach you the basics of handling and working with the TYPO3 website content management system.

The training courses are closely coordinated. We therefore recommend that you register for all three (ideally consecutive) parts of the course.

Training 1 covers the following topics, among others:
- What is TYPO3?
- Structure of TYPO3: frontend and backend
- Typical structure of a page tree
- Creating page (structures) and content elements
- Creating initial content using content elements text and media
- Links
- Containers
- Getting started with the file list: Uploading files to the server
- Metadata
- Creating news records
- Accessibility

 

You can register for the training course as usual in our training portal. There you will also find further information on the individual events.

 

We look forward to your participation!

Best regards
Your web team

additional informations
Lecturer: David Brown
Details

Press release detail page

Example press release detail page
Press release

Continuous improvements to the RPTU template

04. August 2025

We are continuously working on optimizing the RPTU template for TYPO3 websites - what improvements does the current update bring?

Illustration Update server
a Computer Keyboard Highlighting the Importance of Software Updates for Optimal Performance and Security

The RPTU template for TYPO3 websites was created during an intensive development phase. Since then, we have been working continuously - in parallel with our day-to-day business - on its optimization. The focus has been on corrections, accessibility improvements and technical modernization.

With today's update, we have implemented the following changes, among others:

  • Improved keyboard navigation: the page header and main menu are now correctly accessible via the tab key and can be visibly focused.
  • Teaser optimization: In the 25% and 50% teasers, the less meaningful "Read more" link has been removed. Instead, the title of the teaser is now linked. We will adapt the detailed views of the news accordingly at a later date.
  • Semantic labeling of menus: Content elements of the type "Menu" are now labeled as navigation.
  • Lightbox display improved: The lightbox now displays the correct number of images and a more reader-friendly description text.

Even if we do not publish a separate news item for every update, we are constantly working in the background to further develop the template both technically and in terms of content.