Learn TYPO3

TYPO3 is a flexible CMS ideal for small blogs and complex multilevel online corporations.

• Last Updated: 05/20/2020
• ( 12 minutes reading )

How to add Content to newly created Pages in TYPO3

Introduction

A page without content is like a building without a foundation - it will simply not hold anyone! This is why it is important to populate your pages with fantastic content, which will draw the attention of visitors and help you either start a great business or build a robust community. In this tutorial, we are going to teach you how to add content to your page in TYPO3. Let’s begin!

 

Getting Started

To start adding content to your pages in TYPO3, you need to log into your Admin Dashboard first. To do that, please add “/typo3” to your domain name - for example, “mycms.com/typo3” where “mycms.com” is your actual domain.

 

Login page

 

Accessing the mentioned URL will show a login page, where you have to enter your login credentials to access the backend. We also highly recommend checking our Typo3 Backend Overview tutorial, which will teach you the basics.

Once you have logged inside your dashboard, please point your attention to the left, where you will see the Module Menu. 

 

Access Page Section

 

Right under the “Web” section, you will see the “Page” option. When you click on it, the page will be refreshed, and the so-called Page Tree will appear in the middle of the screen. It will contain a list of all your pages.

 

Select Page

 

Left-clicking on a page from the list will refresh the middle section of the screen once more, and it will display options for you to add content to it. 

 

Page Layout

 

Now, the areas in which you add content are entirely reliant on your theme. Considering that, what you see on your side could be completely different in regards to the layout of the page. Although the principles of adding content will be completely analogical.

 

Adding Content to Pages

To add a content element to the page, all you need to do is press the “+ Content” button corresponding to the area on the page where you want to insert it. For example - the “+ Content” button within the first block will add the content element(s) right on top of the page, below the navigation menus.

 

Add Content at the Top of the Page

 

Once you have clicked on the intended "+ Content" button, a popup window, containing all content types you can add will be presented. The options are quite a lot, and we cannot cover all of them, however, we will try and mention the ones you will use most often.

 

Content Types

 

Under the “Typical page content” tab, you will see the most commonly used content elements. We will list some of them and some of the elements that are located under the other tabs underneath.

  • Header only - Selecting this element will allow you to add a heading to that area of the page.
  • Text & Images - Selecting this element will allow you to insert text along with any image files to it, either as a background or around it.
  • Text & Media - Selecting this element will allow you to insert text along with any media files (images, pictures, videos) to it, either as a background or around it.
  • Table - Selecting the “Table” element will generate a table on the page, which you can then edit by adding more rows or columns based on your needs.
  • Image Only - Selecting this element will insert an image to the chosen area of the page.
  • Bullet List - Selecting this element will insert a single bullet list.
  • Audio - Selecting this element will allow you to add audio to the chosen area of the page. 
  • Media - Selecting this element will allow you to add media files (images, pictures, videos) to the chosen area of the page.
  • Social Links - Selecting this element will allow you to add various icons associated with social networks such as Facebook, Twitter, and Instagram.
  • Dividers - A diver element will literally draw a horizontal line, which you can use to separate content elements from each other.

For the purposes of this tutorial, we will go through the processes of adding a Header Only element, as it is perfect for beginners. The rest of the elements will be somewhat similar, with a few exceptions.

Please select the “Header Only” option to open up the element customization screen.

 

Add Header Only element

 

The element customization screen will be divided into separate tabes, each containing specific aspects you can change for the element, such as the text, its position, its type, alignment, and some other custom things which will be related to the current theme you are using. 

 

Customization element section

 

These alteration options will be grouped under a few tabs.

 

General tab

Each setting under the “General” tab will allow you to change specific details. The most important of which is the actual name of the newly created header element. Let’s go over all the options you have under this tab, in the same manner, they are actually listed. You will see two sections.

Under the “Content Element“ section, you will find Two options represented by dropdown menus. 

  • Type - This down drop menu will allow you to change the element type. For example, you can select “Text & Image” instead of “Header Only”.
  • Column - This dropdown menu will allow you to change the position of the element on the page.

 

Content Element Section

 

Going down, you will reach the “Headlines” section. This section has a few options, which we will explain underneath:

  • Header - In this text field, please enter the name of the heading you want to display on your site.
  • Type - Using this dropdown menu, please select the type of heading you want it to be - H1, H2, H3, etc.
  • Alignment - Using this dropdown, you can set its alignment - center, left, or right.
  • Date - Using this text field, you can set a date for this heading, which will be displayed underneath it.
  • Link - You can turn this heading into a link by typing in a URL you want to link it to inside this text field.
  • Subheader - Entering a name within this text field, will put a sub-heading right under the main one.

 

Headlines section

 

If you are happy with the settings you made under this tab, please click the “Save” button located on the top of the screen.

 

Save Settings

 

To view your changes, you can press the “View” button, which will be located right next to the “Save” button. 

 

Page on the frontend

 

This process will put the content element on the page, using the defined settings you made.

 

Appearance tab

The appearance tab will contain all sorts of options you can use to change the visual look of your element. Let’s go over all the options you have under this tab in the same order they are listed. You will see two sections.

The first one is the “Content Element Layout”. Here is everything that you can do underneath.

  • Layout - This dropdown menu will allow you to select a Layout for the element.
  • Frame -  This dropdown will allow you to select a frame for your element. Note that changing this will either remove or add additional options on the page, such as the ones shown underneath.
  • Space Before - Using this dropdown you will be able to set space before the element.
  • Space After - Using this dropdown you will be able to set space after the content element.
  • Background Color - Using this dropdown you will be able to set a color for the background of the content element. These colors are typically the ones that are used for your theme so that they will vary in name and color.
  • Background Image - This area will be represented by two buttons. The “Add image” button and the “Select & upload files”. We recommend using the “Select & upload files” as it is a method of uploading the file and using it for the element immediately. The “Add image” button will open a new window, which will allow you to utilize the “Filelist” functionality, which we will discuss in a separate tutorial.
  • Background Image Options - The options underneath will allow you to add certain types of effects on your element. These are again specific to your theme.
    • Parallax - This is an effect that will cause the element to move slower, as opposed to the background, which makes it look way cooler!
    • Fade - Using this option will add a fade effect to the element.
    • Filter - Using this option can add a filter effect to the element, making it black and white, for instance, which gives it a retro look!

 

Content Element Layout section

 

The second section is the link section, which only has two options underneath it.

  • Show in section menus - If you use this toggle-switch option, the Content Element will appear in Section Menus.
  • Append with links on top of the Page - If you use this toggle-switch option, a small "To Top" link will be added next to the Content Element, linking back to the top of the page.

 

Links section

 

If you are happy with the settings you made under this tab, please click the “Save” button located on the top of the screen.

 

Save Appearance Settings

 

To view your changes, you can press the “View” button, which will be located right next to the “Save” button.

 

Language tab

The languages tab will allow you to select a language for the specific element. 

 

Select Element Language

 

If you are happy with the settings you made under this tab, please click the “Save” button located on the top of the screen.

 

Save Language Settings

 

To view your changes, you can press the “View” button, which will be located right next to the “Save” button.

This will only be available if the theme actually has language choices attached to it. Otherwise, the default “English” will be used.

 

Access Tab

The "Access" tab will allow you to control the visibility of the element to the people visiting the site. You will see four options there.

  • Visibility of the content element - Using this toggle-switch, you can completely hide the element for everyone.
  • Publish date & Expiration date - You can set a publish time that will deploy the element on the designated date, and then you can set an expiration date, which will remove it from the site.
  • Usergroup access rights - This option will provide you with two content boxes underneath, allowing you to control who sees this element based on their current status (Logged in or Logged out) or their account’s user group.
  • Restrict editing by non-admins - This toggle-switch will allow you to control if non-admins are able to edit this element.

 

Element Access Settings

 

If you are happy with the settings you made under this tab, please click the “Save” button located on the top of the screen.

 

Save Access Settings

 

Categories Tab

The categories tab will allow you to group and put the element under a specific category. Categories are typically created using coding, and if you are interested in how to do it, you should check the official documentation. In our case, these examples are generated by the theme we have installed.

 

Element Category

 

If you are happy with the settings you made under this tab, please click the “Save” button located on the top of the screen.

 

Save Element Category

 

Notes Tab

The last tab provides you with a content box, which you can use to put a note for the specific element. This is useful if, for instance, you are still working on it, and you want to let other admins know about your progress.

 

Page Element Notes

 

If you are happy with the note you left under this tab, please click the “Save” button located on the top of the screen.

 

Save Changes

 

And there you have it! The way to add content to your pages in the TYPO3 CMS. You may be overwhelmed at first, but if you get used to the method of adding content, you will soon come to realize how flexible, easy, and convenient it is!

 

 

...
Sebahat
Content Marketing Specialist

Sebahat is a young and bright woman who has become an invaluable part of our team. She started as a Customer Care Representative, mastering that role and, along the way, growing into a tech-savvy individual who is well acquainted with every support layer of the company. Driven by her aim to improve our customers’ experience constantly, she is committed to enhancing the extraordinary support we deliver.