Using image blocks to vary transition design
Feb 21, 2022
I saw an article that suggested creating custom images to vary the transition from block to block. Usually, it's a hard horizontal line. I saw an example of a lesson using a wavey line.
I created an image, put 0px padding, and the transition looks huge compared to the example I saw.
I tried changing the dimensions of an image a few times to see if that made a difference-it didn't. Any recommendations on how to make the block height lower?
I ended up inserting a "subtitle" on the image block to help fill out the space between the blocks, but it's still massive IMO compared to the example I saw.
(Example course: https://rise.articulate.com/share/y4s8LQpErGvNJyVVKQ8LlonmuDAV6cYj#/lessons/iJmg3uOcXM5x0GLjRXwNL90Ynxbjoy-a)
(I used 1200px by 200 px for my dimesnsions.)
Attached: My example and the example of the linked course.
See how close their wave is to their text? I can't seem to achieve that.
4 Replies
The example image is 1999px191px. And it's sitting underneath a quote block.
Rise keeps a buffer for responsive layouts. It's really a LOT of trial and error to get things looking right, and you need to be designing for the optimum screen size for your users.
Personally I would suggest:
I did a quick throw together and it looks pretty close to the example course.
Thanks, Simon. I'm assuming it's quote block A, Image Full Width, and Image and Text to produce what you made. Is that right?
Hey Michael, almost, here's the exact setup.
Hi,
How do you create the wavy transition? Is there a tutorial available?
Thanks!