About the use
With the selection of background colors, images and buttons, you give special websites the special RPTU aesthetic and, more importantly, help the site visitor to find their way around the site.
Background colors highlight individual content. Background images also create a kind of background atmosphere.
However, not every page and not every page area needs an additional background. Texts are easy to read and distraction-free on the very light, gray background of the entire website.
The single(!) button on a page or in a large page area serves as an invitation to the page visitor to click here and follow our recommendations. This can be a visit to a special website (e.g. overview of all/your degree programmes) or a link to a registration form for a special event. (Recommendation: picture with a disturber)
About background colors
You can give most content elements a background color. The color selection can be found in the "Appearance" tab of the content element.
A background color is used to highlight content on a page for a specific topic.
If surrounding content is without a background color, this highlighting has a special effect. On the contrary, the effect of highlighting is lost if background colors are used everywhere on a page. In addition, the appearance of a "nested" page is created. This does not correspond to the desired aesthetics of the current RPTU design.
The highlighting by a background color is all the stronger if you select the option"full window width with centered content" in the "Frame" setting. This can also be used to divide a page vertically into topic blocks . This is ideal for introductory or overview pages.
Due to the very light default background color, it is no longer necessary to give content elements a white background! The white background is a technically necessary remnant from old templates.
About wallpapers
You can also give most content elements a background image and fade it with a background color. You will find the option for this in the "Appearance" tab of the content element.
A background image highlights content and can/should convey a mood. The background image is not used to transport content.
Use:
- Highlighting content with a mood
- A background image must not be important in terms of content.
- The page is understood even without a background image
- The image and the background color must be selected in such a way that there is a high contrast between the text and image for all screen sizes (accessibility)!
- Not:
to avoid the light gray background
Special setting Parralax effect:
If you use the "Enable parallax effect" setting, the background image is fixed and the content scrolls across the image.
This effect captures the attention of the page visitor very strongly. Nevertheless, the image cannot be fully captured in motion and text is difficult to read.
Use this effect sparingly and only for information that may be overlooked.
Here it is even more important that the contrast between text and image is high enough across the entire surface of the image in all screen sizes.
About buttons
A free-standing button entices the page visitor to click on it. This usually only works if there are no other strong highlights in the page visitor's field of vision. Cleverly placed, you can lead a site visitor across several pages.
The RPTU design provides two button variants
- Primary button filled out in
- black with a light background
- white with a dark background
- Secondary button with
- black border, colorless area and black text on a light background
- white border, colorless area and white lettering on a light background
Use of
- a maximum of two buttons in the page visitor's field of vision
- if two buttons are used, the primary and secondary buttons are used - it can be assumed that the primary button will be clicked first
- Buttons are not a substitute for visible navigation. It is better to use the menu content element here (design will be adapted)
Highlighting with background color at the top
In this tutorial, this page itself is the live preview.
The gray background at the top draws the visitor's attention to the content. It is important to us to get the reader in the mood for the topic and to think about the use of colors. We consider this information to be more important than the step-by-step instructions below.
The color of the highlighting is neutral, gray. No strong colors are needed for the effect required here.
Highlighting by background color with image below
We want to use this color throughout the Typo3 pages when it comes to self-study. The dark green area stands out clearly and serves as a user interface for self-study. The primary button leads to the next step. The secondary button leads to the overview.
Step 1: Selecting the background color
To set a background color for the content element, first go to the "Appearance" tab. There, select the desired frame color in the "Background color" area.
If you select a light background color, the text of the content element will be black. If you select a dark background color, the text will be white.
If you select "Full width with centered content" under "Frame" in the "Appearance" tab, the frame will extend across the entire width of the window.
Important: Please only use this option to highlight particularly important elements. Bright colors specifically draw the user's attention. Too much highlighting can have the opposite effect.
Step 2: Selecting the background image
To set a background image for the content element, first go to the "Appearance" tab. There, click on "Add image" in the "Background image" area. You will then be redirected to the file list where you can select the desired image. Alternatively, you can also integrate a local file directly by clicking on "Select file and upload".
You can then set various effects and filters for the background image in the "Background image options" area. For example, you can use the "Fade effect" to ensure that the text of the element is still clearly legible. You can also use the "Fade effect" to combine the background color and background image.
If you select "Full width with centered content" under "Frame" in the Appearance tab, the background image extends across the entire width of the window.
We recommend a pixel width of 1900px for full window width, 1400px for 100% page width in the desktop view. And at least 750px at 50 % page width in the desktop view. This ensures that the images are large enough for all possible views.
Please note that the media file is saved in the file list in the "user_upload" folder when the "Select and upload file" option is selected. This may make it more difficult for you and other editors to find this file in the file list.
Important: Please only use this option to highlight particularly important elements. Background images specifically draw the user's attention. Too much highlighting can have the opposite effect.
Step 3 Add buttons
Buttons are created directly in the RTE:
- Create a normal link in a separate line,
- click in the linked text in the RTE and
- select the desired button at the top left under "Style".
At this point, you are responsible for choosing the button color black or white, which offers a sufficient contrast ratio to the background (legal obligation for accessibility).
The fully filled buttons are to be seen as the primary button. Only one of these should be in the field of vision of a site visitor. They serve as a call to action. The buttons with a border should be seen as secondary buttons. These do not attract quite as much attention, but should also be used sparingly.
TYPO3 self-study
Exercise
- Create a text/media content element.
- Fill the content element with headline and text.
- Play with the options for assigning background colors and background images.
- Link these instructions with a button.
Now please observe yourself as a website visitor and think about it:
- Pick a few pages from the central web presence at RPTU.
- Where was your attention drawn?
- If it was drawn, what attracted your attention?
- Are there background colors and/or images on the page? If so, do these help you find the most important part of the page? Do these help with orientation on the page? Do you recognize a content structure?
- Do you know what to do next? Where should you click?