Create Websites with CHEETAH
A detailed look at banners (2)
Background and internal background
Each banner has a special area called "internal background". It is delimited in the designer by two vertical blue guides that become visible whenever the mouse touches the banner area. In this "internal area" you should position all elements that should be visible in all desktop resolutions and in mobile view. It has a width of 1140 pixels, which is also called "page content width" in "Cheetah".
The banner area can be equipped with a color or a gradient or with a custom background image over the entire area via the "General Color" category. However, you can also color the "internal background" in the same way or provide it with an image, which in this case, however, only fills the page content width. Using the slide switch below the rainbow color selection, the transparency can also be adjusted continuously. In the case of the "General Color", the page background image of the website will then shine through to a greater or lesser extent depending on the degree of transparency (provided that an image has been assigned to the banner) and in the case of the internal background, the image assigned to the entire banner. Otherwise the colors overlap.
Parallax effect
With these means alone, a wide variety of design variations can be achieved with minimal effort by configuring a banner. But the range of properties of a banner offers much more. You should try out the "parallax effect". Assign a complete image to a banner and then activate the parallax effect. You also need to place at least one more banner below it, which in turn must be high enough to allow you to scroll the "image banner" vertically out across the screen:
Now you can try out the individual effects with different speed settings. Maybe you like one or the other of these "parallax effects" so much that you want to use it on one of your own websites…
Banner separators
However, you can also specially design the transition from one banner to the following banner. This is done using the "Banner Separator" property, which - when activated - offers a large number of different transition animations to choose from in a drop-down box.
Depending on which transition animation is selected, it can be further configured (e.g. in terms of color and shape).
Here, too, you should take a detailed look at the individual banner separators to get an overview of their design.