Forum Discussion

MichaelHunter-9's avatar
MichaelHunter-9
Community Member
4 years ago

Using image blocks to vary transition design

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.

rise 360

4 Replies

  • SimonSmith-db99's avatar
    SimonSmith-db99
    Community Member
    4 years ago

    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:

    • Download the image from the test course and try to replicatate it exactly.
    • Check the padding-bottom on the text block too.
    • See how it looks on different screen widths.

    I did a quick throw together and it looks pretty close to the example course.

    • MichaelHunter-9's avatar
      MichaelHunter-9
      Community Member
      4 years ago

      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?

  • SimonSmith-db99's avatar
    SimonSmith-db99
    Community Member
    4 years ago

    Hey Michael, almost, here's the exact setup.

    • Quote block B
      • No author name
      • Padding-bottom: 0px
    • Image full width
      • Padding-top: 0px
      • Padding-bottom: 0px
    • Image & Text
      • Padding-top: 0px
  • SanjuThapa-b5a0's avatar
    SanjuThapa-b5a0
    Community Member
    3 years ago

    Hi,

    How do you create the wavy transition? Is there a tutorial available?

    Thanks!