Content elements are the individual building blocks used to fill each page, from a simple title to a complex image gallery. Proper management of your media (images and files) is crucial for a professional appearance, fast load times and good findability.
- Content Elements: The Building Blocks of Your Page A content element is a specific piece of content on a page. The most common standard elements you will use are:
- Title only
- Text & Images
- Images only
- Bulleted or numbered lists
- Table
- Just like pages, you can easily manage content elements: move them with drag-and-drop, copy, cut or delete them. Deleted elements can be retrieved from the recycle bin. You can also apply time control at the level of an individual content element with publication and expiry dates.
- Mastering the Rich Text Editor (RTE) The Rich Text Editor (RTE), based on CKEditor, works on the WYSIWYG ("What You See Is What You Get") principle. It allows you to format text without HTML knowledge.
- Headings: Use headings in a hierarchical way for structure. H1 is reserved for the page title. Use H2 for the main sub-headings on the page and H3 for sub-sub-headings.
- Manage Links: The Link Browser is a powerful link creation tool. You can easily add internal links to other pages, external links to other websites, links to files (such as PDFs) or e-mail links.
- Copy and Paste: Be careful when copying text from other sources (such as Word). Use RTE's paste functions to insert text 'cleanly' (without unwanted formatting).
- Managing files and media with the FILELIST module The FILELIST module is the central hub for all your media assets.
- Organisation: Proper organisation is essential. Create a logical folder structure before uploading files.
- Upload: You can upload files via the upload button or by simply dragging them from your explorer into the upload window (drag-and-drop).
- Metadata: This is a crucial step. Always add metadata to your files. Alt text (alternative text) is mandatory for accessibility (reading software) and very important for SEO. A clear title and description are also recommended.
- Image Editor: TYPO3 has a built-in Image Editor. The most commonly used basic function is to crop (cropping) images, allowing you to create the perfect cutout for different contexts.
- Pro Tip: Get into the habit of giving files a clear, descriptive namebefore you upload them (e.g. typo3-training-backend-layout.jpg instead of IMG_8472.jpg). This not only improves findability in the FILELIST, but also contributes to SEO.
Practice assignment 3 (P3): Pages Filled with Life
Now that the pages are filled with basic content, let's look at how to structure this content into more complex layouts.