How to add a cool overlay effect
Want to know the easiest way to add a cool effect to your Readz sites? Try adding what we call the moving or ‘Scrolling Overlay’ effect to your pages.
Back to Menu
It’s super simple to do and adds visual depth to your site. Check out how it looks in the gif below.
Notice how this page has a static graphic in the background while all of the text scrolls on top of it? Well, that's the Overlay Effect!
1 Background image(click here for more info about setting background images via Page Style)
1 Box element
And that's it!
Here is how you go about it: set a background image and then place all of your other content in a box element. This allows the content in the box to slide up over the background image as you scroll, giving the page an interactive and modern look.
Using this effect is especially great for pages such as the cover, table of contents, or chapter separators. You can create a cover page with a background image (or video) and place the table of contents sliding up over it. All you have to do is place your desired background image, and then create a large box under it that covers the width of the page. Add the text from your table of contents into the box, and you’re good to go. How easy is that?!
It’s super simple to do and adds visual depth to your site. Check out the video below for a break-down of how to build these kind of layouts in Readz!
Rather than adding just 1 box over the background image, you can add multiple boxes to allow sections of the background image to peek through. This is great for creating section separators like we used for our
Readzhomepage. As shown in the screenshots of the homepage below, we set the geometric image as the background.
We then placed all of the text content in beige and white boxes that cover up the background image. In the second image, we created some space between two of the boxes to let the background image peek through creating a page separator.
DELIVER BETTER CONTENT EXPERIENCES
DELIVER BETTER EXPERIENCES
DESIGN THE WAY YOUR BUSINESS GROWS
Powerful, intuitive content creation software for marketers and designers.
TRUSTED BY SOME OF THE WORLD’S SMARTEST COMPANIES