Content elements

Create and manage content

Create a new content element

1. Click the ‘Create new content element’ button.
2. The “Create new content element” window appears. The available content elements depend on the configuration of your TYPO3 installation and the extensions installed.

Types of content elements

• Typical page content: Add regular text and image content to create standard web pages.
• Form elements: Create a login or contact form.
• Menu items: Display a menu or a list of page links in various ways.
• Plugins: Provided by extensions and depend on the plugin architecture or backend configuration.
• Special elements: Insert HTML code or a horizontal separator. With ‘Insert records’, you can reference other content elements without duplicating them.

Add new content to a page

1. Click the “+ Content” icon at the point on the page where you want to insert content.
2. In the “Typical Page Content” tab, select the “Text & Media” element. The “Create New Page Content” screen appears.
3. In the ‘Heading’ field, enter a title such as ‘My new content element’.
4. In the text area, you can enter text, which is edited using a rich text editor (RTE).
5. Save and close the content element. The newly added content will be displayed on the page.

Editing content

1. On a page, click the pencil icon for the content element you wish to edit and make the desired changes to the text and other settings.
2. You can also change the type of the content element by selecting a new element type from the list.

• When you change the type of a content element, TYPO3 reloads the form to display the relevant input fields.
• This action does not delete the content; the content is saved in the background and restored when you select the original content type again.

Tip: For added convenience, you can use various keyboard shortcuts in the backend.

Working with content in TYPO3

Content is mainly managed in the Web > Page module. This module has two modes: ‘Columns’ and ‘Languages’. For editing, we will work in ‘Columns’ mode. You can switch modes in the header menu.

• Page view: In the backend, the page’s content is displayed in different areas (columns) such as “Margin”, “Centre: Left”, “Centre: Centre”, etc. Many icons are greyed out or only appear when you hover over specific areas.
• Typical page icons:
  • Edit all content elements in a column.
  • Add a new content element at a specific position in the column.
  • The content element icon indicates the type of element. Click on it to open the context menu for actions such as Copy.
  • When you hover over an element, a group of icons becomes active:
    • Pencil icon: Edit element.
    • Toggle the element on or off to show or hide it on the front end.
    • Delete element.
• Moving content elements:
  • Elements can be moved using drag-and-drop. Drag the grey bar at the top of the content element, and the highlighted areas will show you where you can drop it.
  • You can also move content elements from one page to another in the Web > List module using cut and paste. For more information on using the clipboard, see the relevant section.

The Rich Text Editor (RTE) in TYPO3

The text editor in TYPO3 is similar to a word processor. The options in the toolbar vary depending on the configuration of your TYPO3 installation.

• Formatting: You can format text, set the alignment, insert tables and symbols, and add internal and external links.

Creating a link:

1. Select the text you want to link.
2. Click on the link icon in the toolbar. The link browser window will open.

• Internal links: You can link to an internal page, file, folder or content element. Select the desired page in the page tree. Alternatively, you can link to a specific anchor on the page by clicking the arrow icon next to the page name and selecting the desired content element.
• External links: In the Link Browser window, select the ‘External URL’ tab, enter the URL and select ‘New Window’ from the ‘Target’ drop-down to open the link in a new window.

Removing a link:

• To remove a link, place the cursor in the linked text and click the “Remove link” icon in the toolbar.

Working with images in TYPO3

For content elements that support images (such as “Text & Images”, “Text & Media”, “Images Only”), there is an “Images” tab when creating or editing the content element.

Adding images:

1. Uploading images centrally: It is best to upload new images via the Files > File List module. This way, the files are stored centrally and all information or metadata is used throughout the website wherever the image is used.
2. Attaching files: If you use the “Select & Upload Files” button, the image file is attached directly to the page and uploaded to the “user_uploads” folder in the file list. However, it is recommended that you upload and organise images via the “Add Image” button or directly in the Files > File List module.

Add an image to a page:

1. Click the “Add image” button in the “Images” tab. The file selection window will open.
2. Browse the file tree and select a folder.
3. Tick the “Show thumbnails” box to view a preview of the images in the folder.
4. Click on an image’s name to select it, or click the + symbol to select multiple images before closing the window.

Configure image:

• Image metadata: Use the small arrow next to the thumbnail to expand or collapse this section. Here you can add general metadata such as a description and alt text, and insert a link to the image. If the image was added via the Files > File List module, the information here is taken from the file list. You can override this metadata if necessary to set specific values for the current content element.
• Media adjustments: Manually set the width and height of the image in pixels and apply a border.
• Gallery settings: Select the position of the image relative to the text. Images are automatically arranged in columns, two side by side. You can change this behaviour in the ‘Number of columns’ field.
• Behaviour: Enable the “Enlarge on click” setting to display the image in a lightbox.

Embedding videos and audio

As with images, it is best to upload new video and audio files via the Files > File List module. This ensures the files are stored centrally, and all information or metadata is used across the entire website wherever the media file is embedded.

• Attach files directly: If you use the “Select & Upload Files” button, the media file is attached directly to the page and uploaded to the “user_uploads” folder.

Tip: Files added solely via “Select & Upload Files” quickly accumulate in the “user_uploads” folder. It is better to upload and organise files via the “Add Media” button or directly in the Files > File List module.

Adding a video to a page:

1. Go to the “Media” tab and click the “Add Media” button. Follow the same process as when adding an image.
2. Alternatively, you can click the “Add media via URL” button to insert a link to a video or audio file from the web.

Configure video:

• Autoplay: Choose whether the video should start automatically as soon as the page loads.
• Further settings: Configure various options for media files (e.g. add a border, position on the page and behaviour), similar to configuring images.

Creating a contact form

You can create a form in the Web > Forms module. This system extension must be enabled by your administrator. It is written in TypoScript and fully documented in the Form Framework system extension manual.

Creating a form:

1. Creating a form:
   • In the Web > Forms module, click the “+ Create new form” button. The “Create new form” wizard will appear.
   • Choose whether you want to create a blank form or use a predefined form. In this case, select “Predefined form”.
   • Select the predefined “Simple Contact Form” and enter a name for the form.
   • Check the settings and click “Next” again.
   • In the starter template list, select “Simple Contact Form” and enter a name for the form.
   • Click “Next” and then “Finish”. Your new form will be displayed.
2. Customise the form:
   • The predefined “Simple Contact Form” already has some default settings, but you can edit these and add additional fields. For example, you can delete the summary page and change the button labels.
   • Add the form to a page just as you would with any content element. In the “Form Elements” tab, select the “Form” option.
   • In the form content element, go to the “Plugin” tab and select your form from the “Form definition” dropdown.
   • In the ‘General’ tab, enter a header for your form, then save and close the record.
   • Preview the page to see how the contact form looks on the front end.

Create a form from scratch:

1. Create a new form:
   • In the Web > Forms module, click the “+ Create new form” button.
   • In the “Create New Form” wizard, select the “Blank Form” option.
   • Give your form a name, click “Next” and then “Finish”. A blank form will be displayed.
2. Add form fields:
   • Click on the “Create new element” button. The “New element” window will appear.
   • TYPO3 offers over twenty form fields as standard, including:
     • Basic elements such as text or password fields
     • Special elements with specific format validation, such as telephone numbers or dates
     • Selection fields such as checkboxes or multiple selection
     • Advanced elements with special rules, such as user uploads or calendar date pickers
     • Container elements for the visual organisation of surveys
   • Select a form field and configure the settings for the field (e.g. placeholder text and field validation) on the right-hand side of the screen.
3. Preview and editing:
   • Click the preview icon to view a preview of your form on the front end.
   • Use the edit icon to return to editing your form.

Working with forms:

• If you have added multiple fields to your form, you can reorder them using drag-and-drop.
• Click the ‘Settings’ button at the top of the form to add ‘submission actions’ such as a confirmation message or a redirect to another page.
• You can integrate extensions into existing forms, e.g. for seamless integration with Mautic for comprehensive lead tracking.