---
title: Headlines
url: "https://www.toujou.com/service/element-library/text-elements/headline-element/headline-h1/"
date: 2019-08-01
modified: 2026-01-16
---

# Headlines

1. [Home](https://www.toujou.de/)
2. [Service](https://www.toujou.de/service/)
3. [Element library](https://www.toujou.de/service/element-library/)
4. [Text elements](https://www.toujou.de/service/element-library/text-elements/)
5. [Headline element](https://www.toujou.de/service/element-library/text-elements/headline-element/)
6. [Headlines](https://www.toujou.de/service/element-library/text-elements/headline-element/headline-h1/)

    Headline element
================

Your headline from sizes H1 to H5.

Item ID: 08-001

[Sample views](#c1006548) [Step by step guide](#c1006552) [Screen adaptation](#c1006555)

---

  Sample views
--------------

   ####  Left aligned H1 Headline

  Centered H2 Headline
----------------------

 ###  Right aligned H3 Headline

 ####  Left aligned H4 Headline

 #####  Centered H5 Headline

 ---

  Step by step guide
--------------------

     [ ![](https://www.toujou.de/_assets/processed/F1Nbgee-sjSMExqMIe2IcDa_J9RQHZl0L35jSLlThFg/q:85/c:1628:915.74999999999:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX0VOXzA4LTAxX0hlYWRsaW5lLXdhZWhsZW5fNzlkN2FjMjAxOQ:t/cb:572bca8642a15f4af98f9d91a4aa3fc1d55ec8a4/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA4X0hlYWRsaW5lL0VOL0VOXzA4LTAxX0hlYWRsaW5lLXdhZWhsZW4ucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/08_Headline/EN/EN_08-01_Headline-waehlen.png) ### Create headline

- Click on the **+ Content** button to create a headline element.
- Select **Headline** in the *Headline Element* tab.
- You can also search for the desired element using the filter wizard.

    [ ![](https://www.toujou.de/_assets/processed/D1A5_jnMwqOFQJn1EYpmlH9UI49o3hUV2EQd0tXQI_8/q:85/c:1628:915.74999999999:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX0VOXzA4LTAyX1VlYmVyc2NocmlmdF9laW5mdWVnZW5fMjYxMzUzOWFmYg:t/cb:5b2bc072d2381ba03936fb6bbdb3f6eab618024e/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA4X0hlYWRsaW5lL0VOL0VOXzA4LTAyX1VlYmVyc2NocmlmdF9laW5mdWVnZW4ucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/08_Headline/EN/EN_08-02_Ueberschrift_einfuegen.png) ### Insert headline text

- Write your headline into the mask of the *Header* section.

    [ ![](https://www.toujou.de/_assets/processed/jLZMX0qqXK3u7-KB0K8wVV5rIzUx7bgSutbF9vmKVMU/q:85/c:1628:915.74999999999:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX0VOXzA4LTAzX1RhZ19Hcm9lc3NlLXdhZWhsZW5fYWY1OWUyMGM2MA:t/cb:7a8bf620101dcdc561a5f98412a0aa5e3cba16fb/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA4X0hlYWRsaW5lL0VOL0VOXzA4LTAzX1RhZ19Hcm9lc3NlLXdhZWhsZW4ucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/08_Headline/EN/EN_08-03_Tag_Groesse-waehlen.png) ### Set tag & size

- From the *Headline Tag* drop-down menu, select the desired tag from H1 (default) to H5.
- Change the display size of the tag, if needed (see below[\*](#c1006554)).

    [ ![](https://www.toujou.de/_assets/processed/K7yCOAnF9Zv2sC5LOIM_W-PDysI_QMLpd9TnMhZbniw/q:85/c:1628:915.74999999999:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX0VOXzA4LTA0X0F1c3JpY2h0dW5nX0ZhcmJlX2I3NzQzMWJmZjU:t/cb:5e41dda69016a85b4c1137023f0b398a9a173fd9/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA4X0hlYWRsaW5lL0VOL0VOXzA4LTA0X0F1c3JpY2h0dW5nX0ZhcmJlLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/08_Headline/EN/EN_08-04_Ausrichtung_Farbe.png) ### Set alignment & color

- Select the desired position from the *Align* drop-down menu. The default alignment is left.
- In the *Header Font Color* menu, choose between the color schemes.

   ### \*Notes:

The following orientation for sizes applies: H1 = alpha (312.5%); H2 = beta (250%); H3 = gamma (200%); H4 = delta (162.5%); H5 = epsilon (137.5%); Font size normal = omega (87.5%). By selecting the default size 100%, the sizes above will always be displayed according to the respective headline tag.

By default, H1, H4, and H5 headers use the [font color](https://www.toujou.de/service/toujou-set-up/color-settings/) (**Default font-color**), H2 the **primary-color***,* and H3 the **secondary-color**. In the settings tab, you have the possibility to vary the assigned default colors and sizes to your taste and/or needs.

---

  Screen adaptation
-------------------

 The *Headline element* reflects the title you inserted in the selected size.

**Responsive**: As with text fields, the alignment of the headline is always the same regardless of the device. On small devices, headlines break into two or more lines, depending on their length.

**Good to know**: Depending on the tag, size, and color selection, numerous individual combinations and deviations from the toujou standard settings are possible.

 ---

 Linked topics
-------------

[toujou set-ups ](https://www.toujou.de/service/toujou-set-up/)& [TYPO3 tutorials ](https://www.toujou.de/service/tutorials/)related to this element description.

 [Color settings](https://www.toujou.de/service/toujou-set-up/color-settings/)