Today, we will cover how to add dimension to your websites to create a faux 3D effect in Mono Editor. This effect is achieved by enabling specific parameters that make it appear as though the foreground and background content are separated.
The sense of dimension occurs when the foreground shifts while the background either stays still or moves more slowly.
To apply this effect to your content:
- Hover over the row or column you want to modify
- Click the element button
- Click the edit icon.
For this example, we'll use our header row, which already has a background image and filter. In the menu overlay, under "Background," we can choose either the Parallax scrolling effect or Fixed position.
- The Parallax effect makes the background image move at a different speed than the foreground as a visitor scrolls.
- In contrast, the Fixed position option keeps the background image static while the rest of the page scrolls.
Give your template dimension by selecting one of these options. For this example, we’ll apply the Parallax effect.
If you upload or add an image as a background filter, you can also apply dimension to that. Here, we’ll replace the current gradient with a different transparent image filter.
Once we do that, additional parameters for the filter image will appear. We can set the size and position of the filter, then select Fixed position. In this example, there will be three speeds for this row as the user scrolls: the foreground scrolls at a normal speed, the background image moves more slowly, and the filter image remains static.
Feel free to mix and match these effects and parameters. With background images, filters, and dimension effects, you can create eye-catching designs. Happy building!