toujou
+64 273 868 404

Header content (here: full screen 100%)

Your maximum width header element in four height sizes (25%, 50%, 80%, 100%).

Item ID: 07-006

Sample view  Step by step guide  File sizes  Screen adaptation


Sample view per device for fullscreen 100%

 

See other sizes

default 80%  half screen 50%  quarter screen 25%


Step by step guide

Create header element

  • Header elements are only selectable as elements in the header area (Kopfbereich) of your page.
  • Click on the +Content button and select the Header content Element element under the Widgets tab.

Insert medium

  • To insert an image, click Add media file in the General tab.
  • Select an image file from your file list or upload a file to the appropriate folder.
  • To insert a video, click Add media by URL & paste the full URL of a YouTube or Vimeo video into the mask that appears in an overlapped window.

Select header height

  • In the Settings tab, select the desired size of the header element.
  • In our example: fullscreen 100%.
  • If you do not make any changes here, the default size 80% will be selected.

Optional steps

Insert headline

  • You have the option to place content in the Header section as well as Text and a Link (see next step). Headlines can also be assigned without further text & link.
  • In the Content tab, an H2 tag is assigned by default. If necessary, change this setting via Type and Headline Size (more about Headlines ❯).

Insert text and link

  • Add content to your header in the form of text.
  • If necessary, complete the content with a link and its corresponding caption.
  • These will appear in the form of a content box.
  • The alignment of the text and link is based on the alignment settings made for the headline.

Content position & size

  • In the Settings tab, you can use the Vertical and Horizontal Position as well as the Header Content Size to determine the exact position and size of the content box.

File sizes

Dimensions: 
  • For the description above, the rule of thumb for the optimal level of header images in full screen 100% mode is 2.4:1.
  • In the sample views above we used header images of the format 1920x800 px at a resolution of 300 ppi. These values ​​are guidelines and may differ depending on the image quality.
General notes for files:
  • When using photographs, the file format JPEG is recommended. Graphics can also be PNG files.
  • In toujou, media files must not exceed a size of 8 MB.
  • Each file only needs to be uploaded once to your file list.
  • Each file can be edited in the image editor for different devices and used multiple times on your website in various elements.
Advice for using header videos:
  • Be sure to use a moderate sized file because the file may affect the overall performance of your website.
  • When links are embedded into your website, from platforms such as YouTube and Vimeo they insert their own links and suggestions to the screen that may take away from the aesthetic of your header. To prevent this from happening you can instead use a video as a media content element.

Screen adaptation

The behaviour of the Header content Element full screen 100% is illustrated by the example shown above: The smaller the device, the more the presentation of your medium concentrates on its center, while retaining almost full screen height.

Therefore, always try to select header images that focus on the center, so that smaller devices do not hide important image information on the side.

In order to transport all image information, it is better to use the Image Header 3:1, which always maintains its image ratio independent of the device.

The position of the content box (step 6 of the manual) is variable and can cover your header image, depending on the amount of text, with smaller devices. Therefore, check the responsive behaviour to see whether it makes sense to display text using a content box.


Linked topics

toujou set-ups & TYPO3 tutorials related to this element description.

Image editing  Filelist