Zum Inhalt springen

Free TYPO3 template for TYPO3 11 LTS

Free "Best Practice" template, customizable with lots of instructions. Freely available as download or pre-installed in hosting package with support from experts.

TYPO3 Version:11 LTS

With the free TYPO3 template you can start creating content immediately, your website will be online in no time. You don't have to worry about design, templates or TypoScript code.

This is how it looks like: Live version of our TYPO3 template

The TYPO3 template is available as a free download for interested users. So you can install the template for TYPO3 CMS also at other providers. In this case you have to do without our support. Alternatively you can book our free TYPO3 Developer tariff for 3 months. There the template is already preinstalled (like in all our hosting packages) and you can start immediately.

Download the latest version of the TYPO3 template (tar.gz archive)

If you install it yourself, a backend user "typo3-admin" with the password "pattern" is preset. Change the password after installation!

TYPO3 CMS 11 LTS requires at least PHP 7.4 and MySQL 5.7 or MariaDB 10.3.

You have suggestions for our template? Just contact us at hosting(at)jweiland.net.

The template is customizable and can be extended as you like.

The template offers:

  • Responsive web design, suitable for desktop, smartphone and tablet
  • optimized for search engines
  • prepared for accessibility
  • examples for all standard content elements
  • optimized for short loading times and accessibility
  • state of the art
  • visually and functionally individually adaptable

It can be used as a basis for your own website and represents a "best practice" example. Here you can learn how to set up a TYPO3 project. It is not a design template, but a project template. You can adapt the design to your own ideas.

We have deliberately kept the template lean and preinstalled only the most frequently used functions:

  • Display of current news (extension: news)
  • Readable web addresses (speaking URLs)
  • Optimized for indexing in search engines (SEO) including preview of the display as Google Snippet
  • Support for search engine optimization of the website
  • Lightbox effect for click-enlargement of images
  • Configurable Cookie Consent Manager

The sample project uses TYPO3 CMS version 11.5, which allows it to operate without relaunch until at least the end of October 2024 (with extended support until October 2027).

Our template has been around since 2008 and has been revised and improved with each TYPO3 CMS version. Here you can find information about theHistory of our template.

It's that easy: Your own website in 5:47

In this short video we show how quickly the sample template can be turned into your own website. Sit back and be amazed!

What is the cost of the sample project?

The template is included in all newTYPO3 Hosting Packages from jweiland.net included in the price and already pre-installed. It can be downloaded and used from this website for free (download link see above)

What about updates?

The project is under continuous development. The current version ###mp11version## of the template from Januar 2023 is based on TYPO3 version 11.5 LTS and is automatically available in the cloud hosting packages.

Note, however: existing installations cannot be updated automatically, as each customer can make changes to the template project files themselves. Automatic updates would overwrite these changes.

So that you can upgrade new functions or bug fixes yourself if necessary, we log all important changes in the change log.

Sample websites based on our sample project

What is new in version 11 of the template?

In versions 10 and 11 of the sample project, we have not only improved existing functions, but also added many new features. In the following video you can see an overview of some of these new features.

There are for example

  • Reponsive images and different crop variants for images
  • improved and new navigation variants, for example a mega menu or teasers for pages including thumbnails
  • Grid containers for content
  • Expandable/collapsible content elements
  • and much more

Of course, a lot has changed "under the hood" as well, since we use the new possibilities of TYPO3 11 LTS in programming, such as the new asset collectors.

Install the sample project yourself

When you order a hosting plan (also with the free developer plan), the sample template is already installed by us.

If you would like to install the template in an existing hosting package, we will show you all the necessary steps in the following video.

The following steps are necessary for the installation:

  1. Create a new database (MariaDB) via the customer menu (Plesk).
  2. Login via SSH on the webserver (instructions for Windows, MacOS and Linux)
  3. Unpack TYPO3 source code if necessary (typo3_src-11.5.x.tar.gz)
  4. Unpack archive (sampleproject-11.5.x.tar.gz)
  5. adjust parameters for database access in typo3conf/LocalConfiguration.php
  6. Import database file typo3conf/musterprojekt.sql into the new, empty database
  7. If necessary, adjust/create symlink to TYPO3 11.5.x source code
  8. Let domain point to start directory
  9. Log in to TYPO3 backend (user: typo3-admin, password: pattern)
  10. Call site configuration and adjust domain name

Change username and password

For security reasons we strongly advise to change the username and password of the default user account directly after the first login in the backend!

Change Encryption Key

For security reasons, you should change the so-called encryption key after the manual installation. This is a long random combination of letters and numbers. With this key the different encryptions in the TYPO3 system are "salted", that means another random value is added to the encryption.

Proceed as follows:

  1. Go to the "Settings" section in the backend.
  2. Click here on the "Installation Wide Options
  3. In the area [SYS] you find the input field for the encryption key, enter here a long random combination of numbers and letters.
  4. To save click on "Write Configuration
  5. Afterwards you have to log in to the backend again
  6. Finally, use the lightning icon to flush all caches.

The steps are described in the following video.

Change the language of the backend

The TYPO3 backend can be used in many different languages. English and German are already pre-installed, but also other languages can be installed very easily.

By the way, every backend user can set his preferred language himself. But before that they have to be installed by an administrator.

Customize company name

One of the first steps in customizing the sample project should be to change the company name. This can be seen, for example, at the very bottom of each page's footer. Of course, instead of a company name, you can enter your personal name or any other text here.

Follow the steps below:

  1. Click on "Template" in the left main menu in the backend.
  2. Click on the page "Home" in the page tree.
  3. If necessary, select "Constant Editor" in the selection box, in the main area at the top left.
  4. Select "JWEILAND.NET MUSTER PROJECT" as the category.
  5. Click on the pencil icon next to the "Company name" field to be able to edit the contents of the field.
  6. Click on the "Save" button at the top to finish.

You can also see all the steps in the following video.

Replace the logo in the header

At the top left of each page you will find a logo, which is also always automatically linked to the home page. To exchange our example logo, proceed as follows:

  1. Upload your logo file via the "File list" module (file format JPG, PNG or SVG recommended). If necessary, create a folder to organize your files.
  2. Click on "Template" in the left main menu in the backend.
  3. Click on the page "Home" in the page tree.
  4. If necessary, select the "Constant Editor" in the selection box in the top left corner of the main area.
  5. Select "JWEILAND.NET SAMPLE PROJECT" as the category.
  6. Scroll down to the "Layout" section.
  7. Click on the pencil icon next to the "Logo" field to activate editing.
  8. Enter the path to your logo file here (for example, fileadmin/logos/my_logo.png).
  9. Click the "Save" button at the top.

Replace favicon and appicon

Favicons are small images that are displayed in the browser title bar / browser tab, for example. A company logo or similar is usually used here.

The sample project is prepared for the use of individual favicons. Touch icons (app icons) for smartphones and tablets are also created.

Both types of icons can be easily exchanged using the constant editor.

Please note:

  • The image file for the favicon and the standard touch icons must be square.
  • The second variant of the image, which is particularly useful for Windows phones, requires an aspect ratio of 31:15, for example: width 310 px, height 150 px
  • Use an image file in PNG or JPG format. PNG is recommended. As different variants are created dynamically in the sample project, the classic ICO files do not work here. However, these are no longer required nowadays.

To customize the files, proceed as follows:

  1. Switch to the "Template" backend module.
  2. Select the "Home" page in the page tree (the page with the globe).
  3. In the large, right-hand area of the backend, switch to the "Constant editor" via the upper selection box.
  4. In the "Category" selection box, select "JWEILAND.NET SAMPLE PROJECT".
  5. Scroll down to the "Layout" area.
  6. Click on the pencil icon next to "App-/Favicon Square" or "App-/Favicon Wide" to activate the input field.
  7. Enter the path to your image file in the input field. This can be located below fileadmin/ or in a separate extension:
    • Example for fileadmin: fileadmin/mydirectory/images/appicon-square.png
    • Example of an extension: EXT:myextension/Resources/Public/Icons/appicon-square.png
  8. Finally, click on "Save" at the top.
  9. If the change is not immediately visible, you must delete the frontend cache and also your browser cache.

Replace the image in the header

The image in the header area can be replaced or removed as required. You will find a special area on each page where you can create a content element of the type "Text & Media", for example, and use it to integrate an image.

If necessary, you can use the image editor integrated in TYPO3 to adjust the section of the image and even set different image sections for desktop computers, tablets and smartphones.

Many pages in the navigation? No problem!

Especially when using horizontal navigation, you can quickly run into problems if you have many pages on the first menu level or the page titles are relatively long. Under certain circumstances, the layout can be disturbed by the navigation breaking into a second line.

Although there is a rule of thumb that a maximum of 5-7 pages should be placed on the first level of a navigation, this may not always be possible.

We have implemented a solution for this in the sample project!

As soon as the available space in the navigation is no longer sufficient to display all menu items in one line, a link automatically appears under which the remaining pages can then be found. This means that the menu can react flexibly to different viewport widths and is always displayed perfectly on every device, whether desktop PC, laptop, tablet or smartphone.

Navigation variants

Horizontal navigation is used as standard. If a page has further subpages, these are displayed as a so-called "drop-down menu".

In addition, different variants can be activated via the constant editor:

  • Horizontal navigation (default)
  • Vertical navigation
  • Horizontal and vertical navigation

The navigation type can also be used to switch between the standard output and a so-called "mega menu".

Pictures in the mega menu

People like to work with images in mega menus. That's why we have also implemented this option.

You can see how you can define images for the second level of the menu and what you need to bear in mind in the video.

Page layouts

The sample project provides various page layouts to display the content in a certain structure.

The various layouts can be used to cover the majority of common layout requirements.

Edit content in the footer area

Any content elements can be displayed in the footer area of the website. These are maintained centrally on a special page and automatically displayed on the entire website.

Change the layout of the footer area

A 3-column layout is used as standard for the footer area. You can place any content elements in these columns.

However, a 2-column and a 1-column layout are also available. You can see how to select the desired layout in the following video.

The pages in the lower navigation

In the footer of the page you will see a so-called "meta navigation" with links to various pages (Home, Contact, Imprint, Privacy).

In this video, you will learn how to edit the pages displayed there.

What is the dashboard?

Various information can be displayed in the dashboard using so-called widgets. TYPO3 already comes with some widgets, we have also integrated a small widget in the sample project that takes you directly to the documentation (i.e. to this page).

There are also some extensions in the TYPO3 Extension Repository (TER) that provide additional widgets.

Each backend user can set up the dashboard individually. You can even create several dashboards if required.

Search engine optimization (SEO)

In TYPO3 11 LTS, you no longer need an additional extension for basic SEO functions. The manual adjustment of the page title, the control of indexing by search engines and the generation of the canonical tag are among the standard functions.

You will find an "SEO" tab in the page properties

  • Title for search engines: here you can manually overwrite the automatically generated page title (<title> tag in HTML)
  • Robot instructions:
    • Index this page: controls whether search engines index the current page or not (meta tag robots="noindex" or "index" in HTML)
    • Follow this page: controls whether search engine bots follow the links on the current page or not (meta tag robots="follow" or "nofollow" in HTML)

However, we have added the extension "yoast_seo" as an aid for easier "on page" search engine optimization. "On page" means: measures that you can carry out yourself on your site.

For example, the extension analyzes the text of a page for readability and also provides tips for improvement. It also checks whether the "Description" field is used in the page properties, as this is used to generate the important description meta tag, or whether the title of the page is correct. The extension has other functions, we recommend that you read the documentation carefully.

Social Media

In the page properties of each page, you can customize the title, description and an image for Facebook and Twitter. Certain meta tags are generated in the HTML source code (Open Graph and Twitter Cards). There is a "Social Media" section in the page properties for this purpose.

If a visitor shares the page via Facebook or Twitter, these meta tags are read by these platforms and taken into account. This allows you to control very precisely which texts and images are displayed in the preview of the two platforms.

Crop variants for images in content elements

In the sample project for TYPO3 11, we use "Responsive Image Rendering". This means that, depending on the end device used to view the website, an image optimized in size for this device is delivered. The browser on a smartphone therefore receives a smaller image than the browser on a desktop computer.

This greatly improves the performance of the website, as it naturally makes little sense to deliver large images (= large amounts of data) to devices that can only display the images smaller anyway.

As a user, however, you don't have to worry about this at all - TYPO3 takes care of it fully automatically in the background.

But we have also integrated the option of using different "crop variants".

This means that you can provide a user with a smartphone with a different image section than a user with a desktop computer. This can be very useful for certain types of images (example in the video).

We have also integrated the option to synchronize the crop variants for the different devices. This is important if you want to change the image section for all devices. Previously, you had to do this manually.

You can see exactly what this is and how it works in the following video.

Image gallery with square thumbnails

You don't actually need an extension to implement an image gallery with TYPO3. It can also be done very well with on-board tools.

To improve the presentation of such galleries a little, we have added the option to display square thumbnails of the images. This can be controlled via the "Layout" field of the content elements.

Details in the following video.

Maintain metadata of files

Meta data can be managed for each file that is used in the backend. Meta data can be, for example, an "alternative text" for images or copyright information. In some cases, this metadata is also automatically displayed in the frontend if it is available.

There are two ways to maintain this metadata:

  1. per content element on the files used there
  2. globally via the file list backend module

The global way has the advantage that you only have to maintain this data once per file. If you then use the file in a content element (even several times on different pages), the globally maintained metadata is automatically used.

Nevertheless, you still have the option of overwriting the global metadata locally for each content element if required.

You can see how this all works in the following video.

Copyright information for images

You can also store information about the creator and copyright in the metadata of files. If these fields are filled in, this data is automatically displayed for images.

Overview of the constant editor

Many functions of the sample project can be conveniently controlled in the backend via the constant editor. The following video gives you an overview of the various areas and options.

We also go into more detail about certain functions in other videos.

Hide the search function

In the sample project, we have also integrated a search function for the website. We use the standard extension "indexed_search". (There are other, sometimes more powerful search extensions such as "ke_search" or"solr").

However, if you do not need this search function, you can simply switch it off via a constant in the constant editor of the template backend module.

Hide the language menu

The sample project is delivered in 2 languages (German, English). However, if you only want to run your website in one language, you can hide the language menu using a constant. Below you will find videos on how to add additional languages or remove languages that are not required.

Configure the Cookie Consent Manager

Although TYPO3 does not set any cookies in the frontend in the standard configuration, we have integrated a tool that displays a so-called "cookie banner" to visitors to the website. If cookies are to be set by the site, visitors have the option of agreeing to the use of individual or all cookies, or generally rejecting cookies.

In a newly installed sample project, consent to cookies from YouTube or Vimeo is requested, as we also embed a Vimeo video on a demo page.

You can control the behavior of the cookie banner via the constant editor. You can also deactivate it completely if your website does not set any third-party cookies.

Note: Cookies for logging in to the backend or frontend are technically necessary cookies that do not need to be pointed out separately.

We have also preconfigured the Cookie Manager for common tools. You only need to add the relevant information to the constants in order to use the following tools:

  • Matomo
  • Google Analytics
  • Facebook Pixel
  • Twitter
  • Youtube / Vimeo

Edit and customize the contact form

Even relatively complex e-mail forms can be implemented with TYPO3. Simple contact forms as well as multi-page order forms, survey forms, application forms and much more can be realized.

You will also receive a sample form with the sample project. Here we have included a few of the various form options as examples. However, you will need to make a few adjustments before you can use the form.

In the following video, we show you how to remove existing input fields and add new fields.

Customize the form recipient

The correct recipient must be defined in the form so that the messages sent via the contact form also reach you.

To do this, the form's finishers must be edited in the "Forms" backend module. A finisher defines an action that is executed when the website visitor clicks the "Send" button on the form.

However, to ensure that the emails sent actually reach the recipient, there are also a few important points to consider when configuring the corresponding finisher.

All the details in the following video.

Configure TYPO3 correctly for sending emails

We generally recommend using an existing e-mail account to send e-mails from TYPO3. This can be used to send emails via SMTP.

You can either use an existing email account or create your own account for sending emails via your customer menu (Plesk). This can also be an address in the format noreply@name-der-domain.de. In other words, an address that is only used for sending, but where the name itself indicates that emails sent to this address will not be read.

You will then need the following information for configuration in TYPO3:

  • Server for outgoing mail SMTP: deinedomain.de
  • Port: 465
  • Username: your e-mail address
  • Password of your e-mail address

You can see the necessary steps in the following video.

The page configuration (overview)

The "Page" module in the "Page management" section allows you to make some basic settings for the website. Here, for example, you can change the page title that is displayed in the title bar of the browser in the frontend. You can also configure the languages used and much more.

IMPORTANT: Allow indexing of the website by search engines

A newly installed sample project cannot be indexed by Google or other search engines. This is prevented by entries in a file called robots.txt.

This also makes sense at the beginning, as you want to add your content to the sample project first. Only when the demo content has been removed and replaced with real content does it make sense to have the website indexed by search engines.

You can control this by making an entry in the page configuration.

Translate pages and content

Multilingual websites are no problem with TYPO3. This has been a core function of TYPO3 right from the start. At the same time, TYPO3 is extremely flexible here, as in many other areas.

In order to make the content of a website available in several languages, two steps are basically necessary:

  1. A translation must be created for the page itself
  2. The content elements on this page must be translated.

TYPO3 offers two different modes for this:

  1. the connected mode
  2. the free mode (Free Mode)

In connected mode, the content elements in the standard language are closely linked to the translated content elements. If the original element is deleted, the translated element is also automatically deleted.
This mode is useful if the content is to be translated almost 1:1 into other languages.

In free mode, there is no link between the original and translated elements. If the original element is deleted, the translated element is retained.
This mode should be used if the content in the different languages differs in many parts.

Add more languages

The sample project is delivered preconfigured with German and English as front-end languages. However, you can of course add other languages if required.

Remove unneeded languages

If you do not need multilingualism for your website, you can also simply delete superfluous languages in the backend.

You can also switch off the language menu display in the frontend. To do this, switch to the template module in the backend, select the "Home" page, switch to the constants editor if necessary and select the "jweiland.net sample project" category there. If you scroll down a little, you will find the option to switch the language menu on or off.

Translate the Cookie Consent Manager

The sample project is delivered in German and English, so the Cookie Consent Manager texts are also available in these languages.

Of course, you can add any other languages. However, the texts in the Consent Manager must then also be translated if necessary. To do this, you must edit the typo3conf/ext/jwmusterprojekt10/Resources/Private/Page/Partials/Klaro.html file via SSH or FTP.

You can see the exact steps in the following video.

Show content elements expandable and collapsible

We have now integrated a function that is often requested in customer projects into the sample project: the option to display content elements in the frontend in an expandable and collapsible form.

Especially with long texts or a lot of content on a page, this gives you an option to make the texts clearer.

We have also integrated the option of displaying content elements in expandable and collapsible form only on smartphones, i.e. small screens. On larger screens, these content elements are displayed "normally".

Create and manage news articles

News articles, blog articles or similar can be maintained with the supplied "News" extension.

News articles differ from normal content elements in that they are usually collected centrally in one place or folder. The output of the articles, i.e. where on the website and in what form, is controlled via so-called plugins.

A news article consists of at least a headline, usually a teaser text and the actual news text. In addition, images, files, relevant links and more can be added to articles, for example.

Different list views for news articles

The news extension provides a list view for news articles by default. In addition, we have configured two further display types in the sample project:

  • a reduced list view, which can be used on the homepage of the website for the latest news, for example
  • a card view, which can be used as an alternative to the standard view.

The desired display type can be selected in each news plugin.

Configure the RSS feed for news

The sample project provides an RSS feed for news articles. Visitors can subscribe to this feed to keep up to date with new articles.

If you want to use this feed for your news articles, you must configure it using the constant editor.

The following must be adjusted:

  • The title of the RSS feed
  • The description
  • The domain name of the website, including protocol (http or https)

You can also generally switch the feed on or off using a constant.

What is the cache and why it needs to be cleared from time to time

To speed up the delivery of a website, TYPO3 uses various cache mechanisms. The cache is a type of temporary storage so that TYPO3 does not have to regenerate the requested page with every front-end call.

From time to time, however, it is necessary to delete this cache manually. You can find out exactly how this works and why it is necessary in the video.

Customize CSS

If you want to change the colors or fonts of the sample project, for example, the easiest way to do this is via a special CSS file that you can edit directly from the backend.

If you are familiar with Sass/SCSS, you can find the corresponding files in the sample project extension.

Updating the sample project

If you have previously used the sample project 10, you can of course upgrade to TYPO3 11.

After the successful upgrade, you have two options:

  1. You continue to use the sample project extension, version 10 (jwmusterprojekt10), in TYPO3 11
  2. You replace the sample project extension version 10 with version 11 (jwmusterprojekt10).

To 1)

Advantages:

  • You have a current TYPO3 version
  • If you have made your own customizations to the files of sample project 10 (CSS, TypoScript, fluid templates, etc.), these customizations are still available and the website simply continues to work in the frontend as before

Disadvantages:

  • You cannot use the new functions of sample project 11 (responsive image rendering, new navigation types, multi-column containers for content, cookie manager)

2)

Advantages:

  • You also have a current TYPO3 version
  • You have all the new functions of the sample project 11 (see above)

Disadvantages:

  • If you have made your own adjustments to files in sample project 10 (CSS, TypoScript, Fluidtemplates etc.), you must transfer these adjustments manually to the corresponding files in sample project 11. Automatic migration is not possible.

Both variants therefore have advantages and disadvantages, and you must decide for yourself which variant you choose. Of course we can help you with this!

In the following videos, we show an example of a complete upgrade from sample project 9 to 10, including replacement of the sample project extension (can also be used for version 11).

Change log (changelog)

Here we document all the changes we make to the TYPO3 template over time. This way, users can always keep their own installation up to date. This makes future TYPO3 updates much easier.

09.01.2023: V1.0.8 [BUGFIX] edited position of allowLanguageSynchronization for nav_image, page.php

25.08.2022 : V1.0.7 [UPDATE] Update b13/container (2.0.1)

12.07.2022: V1.0.6 [FEATURE] edited Security Headers, 000_config.typoscript

22.06.2022: V1.0.5 [TASK] reset default headerComment, 000_config.typoscript

23.05.2022: V1.0.3 [BUGFIX] allowLanguageSynchronization for nav_image, page.php

11.05.2022: V1.0.2 [BUGFIX] css for ce-above/ce-below ce-center

06.05.2022 : V1.0.1 [BUGFIX] for svg file output.

06.12.2021: Release of version 1.0.0

Updated: 17.07.2024