Headers and Text Formatting
Headers
Header 1
Header 2
Header 3
Header 4
Header 5
Paragraph
Text Colors
Muted: Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
Primary: Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
Success: Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
Info: Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
Warning: Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
Danger: Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
Texts with different Alignment
Alignment: Left (Default)
The headers and continuous texts of the elements are usually left-aligned by default. The left-aligned text on the website ensures a well-structured and easy-to-read user interface.
Alignment: Center
Center-aligned text gives the page an aesthetic symmetry and draws the reader's attention to the content. This alignment can create an appealing visual effect, particularly in design elements such as headings or quotations.
Alignment: Right
Right-aligned text can help create some visual contrast and make the layout of a page more interesting. This alignment is often used to attract attention or highlight important information.
Continuous Text in different Sizes
Large formatted text has the ability to immediately grab the reader's attention and highlight important information. Using larger font sizes can improve readability and strengthen the visual hierarchy of a page. This style is often used to clearly emphasize headlines, headlines or important messages to help guide the reader.
Normal-sized text forms the basic structure of each page and makes it easy to read. It serves to present the main part of the content clearly and comprehensibly without distracting from other elements. A balanced font size can achieve a harmonious visual presentation that makes reading easier and the information more accessible.
Small-formatted text is often used for secondary information or footnotes and enables a compact presentation of additional details. Despite its smaller size, small-format text can still be clear and easy to read, especially when presented in an appropriate contrasting color. Using smaller text can help save space and keep the design of a page uncluttered.
Areas
Large Spacing – Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
Normal Spacing – Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
Small Spacing – Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
Highlight Boxes
Attention! - a Danger Highlight Box
Success! - a Success Highlight Box
Warning! - a Warning Highlight Box
Info! - a Info Highlight Box
Buttons
Labels and Badges
Default Label
Success Label
Warning Label
Danger Label
Info Label
Badge
Quotation
Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
Tables
Standard
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
Text with Images
The following display options for images (with text) only show the options of the 'Text & media' content element. Combined with grids, mask elements and plugins, there are many other possibilities for designing images and text in an appealing way. You will find examples of this all over the demo page.
Embed Image centered above the Text
In TYPO3, an image is integrated centrally above a text in order to emphasize visual elements and structure the content more clearly. This can be particularly useful for important information or to illustrate concepts. A centered image attracts the user's attention and gives the page an aesthetic balance. With its flexibility and content elements, TYPO3 offers an easy way to combine images and text to create an appealing and user-friendly presentation.
Embed Image right aligned above the Text
In TYPO3, an image can be used aligned to the right above the text to create a rather unusual but interesting visual structure. This arrangement can be used to set visual accents, while the text underneath deepens the content. Especially for special sections or to emphasize certain topics, this structure can provide an interesting variety. TYPO3 makes it easy to create such layouts, allowing creative and appealing combinations of image and text.
Embed Image left aligned above the Text
In TYPO3, an image can be aligned to the left above the text to create a clear visual hierarchy. This arrangement ensures that the image introduces the content, while the text below provides details. This layout option is ideal when the image plays a central role but the focus remains on the accompanying text. TYPO3 makes it possible to design such layouts flexibly and to integrate images in different orientations to match the structure and design of the website.
Embed image centered below the text
In TYPO3, an image can be embedded centrally below the text to clearly conclude and visually round off the content. This arrangement is particularly suitable for keeping the text in focus and using the image as a supplementary element that visually supports the information. An image below the text can reinforce concluding thoughts or details and draw the user's attention to an important visual conclusion. TYPO3 offers the flexibility to easily implement such layouts.
Embed image right aligned below the text
In TYPO3, an image can be aligned to the right below the text to visually complete the content and at the same time create an interesting, asymmetrical look. This arrangement is particularly suitable if the image plays a complementary role and the right-hand side of the page is to be emphasized. It provides a harmonious balance between text and image while still making the layout look dynamic. TYPO3 makes it easy to design such specific layouts to achieve the desired effect.
Embed image left aligned below the text
In TYPO3, an image can be aligned to the left below the text to visually round off the content and create a subtle balance in the layout. This placement draws attention to the text first, before the image forms the conclusion. It is an effective way to use the image as a supporting element that complements the content without disrupting the flow of the text. TYPO3 offers the flexibility to easily create such layouts to optimize the visual structure of the page.
Embed Image floating in Text (Right)
Integrating an image smoothly into the text on the right is a tried and tested method of harmoniously combining text and image. In TYPO3, this technique makes it possible to embed the image in the text flow in such a way that it is not only visually appealing but also functional. The text flows around the image, creating a lively and dynamic design. This arrangement is particularly suitable if the image supports the text content without interrupting the reading direction.
The image on the right attracts the reader's attention and offers a welcome change in the text without disrupting the flow of reading. This is ideal if the image provides additional context or offers a visualization of the content. The combination of text and image in this form can also help to break up longer sections of text and improve readability.
This type of image integration is easy to implement in TYPO3. The image is placed so that it fits seamlessly into the text, with the text automatically using the available space. This flexibility makes it possible to create layouts that are both aesthetically pleasing and user-friendly.
Smooth image integration is particularly suitable for blog articles, news or information pages where text and image contribute equally to conveying information. It makes it possible to design content in a clear and appealing way so that the reader is intuitively guided through the text, while the image provides supporting information.
Overall, the smooth integration of an image to the right of the text offers an effective way of visually enhancing content while maintaining the structure and readability of the page. TYPO3 provides the necessary tools to implement these layout options optimally.
Embed Image floating in Text (Left)
The smooth integration of an image in the text on the left-hand side is a common method of visually enhancing texts and presenting content in an appealing way. In TYPO3, this technique can be used to integrate images seamlessly into the text flow so that the image is aligned on the left and the text wraps around to the right.
This type of image placement is particularly suitable if the image is intended to complement or visually support the text content. The left alignment brings the image directly into the reader's field of vision, which is particularly effective if the image has a strong visual message or contains important information. At the same time, the flowing text ensures that the reading flow is not interrupted, which improves the user experience.
The flexible design options in TYPO3 make it possible to use this technique in longer articles as well as on pages with shorter text. It creates a balance between text and image and avoids large, empty areas that could make the layout look cluttered.
By fluidly incorporating images on the left-hand side, website owners can ensure that their content is not only informative but also visually appealing. This method helps to keep readers' attention and improve the comprehensibility of the content by providing visual anchor points to guide the eye through the text. Overall, TYPO3 provides the necessary tools to implement this layout option effortlessly, ensuring optimal presentation of content.
Videos
If a video has been uploaded to the File list, it can be integrated into a page via the content element 'Text & Media'.
You can also use our video plugins for YouTube and Vimeo to embed videos on your TYPO3 site in no time at all, without having to upload them to the file list. Practical, fast and customizable!