PICK YOUR AI THEME TO GET STARTED
DAY 03 | EPISODE 02 | QUICK CLIP 28
LAYOUT VARIANTS
Paul Davenport | 02:17
As we discovered in earlier clips in the Intermediate Class, it's important to capitalise on your hard work with by creating variants for your content team to use. Here we look at Light and Dark variants again but this time introduce Background Gradient Animation.
To finish we look at how you can flip columns in the Column tool. Then apply Column Reverse on Mobile, which will reverse the order in which your columns stack on Mobile. By default, the Left Column stacks to the top on Mobile, though by setting Column Reverse the Columns will stack from Right to Left. Therefore, in this example, the Title Column, will stack on top, ensuring consistent mobile formatting with other Layouts on the page.
"And at which point, I think we're ready to save our layout, so I'm going to put it back into business mode. Remember, we're going to make four versions of this ready for our content team. We're going to capitalize on the hard work that we've just done. What I'll do here is clone this one and move down to my clone. As you know now, I'm going to make a dark variant, which I can do with the background Colour here, so flip this over.
As you know, my dark variant is space cadet the blue, and I'm using 130 as my gradient angle. I did say I would show you the animation, which basically pulses the gradient along the gradient angle, so I'll just put this onto, let's say, four. And you can see here it's actually pulsing this in the background. If I can exaggerate this by changing the angle, and what it'll do is slowly pulse between that light and dark. It's a pretty nice technique, but like I said earlier in the video, it does take up a lot of memory. I only like to use it sparingly and that's why I say this because people like it so much, they tend to use it all the time. It's overkill.
So, there's our first two layouts. Now, what I'm going to do is reverse these two. Again, I'm going to clone this one and then back into design mode here, what I can do is go back to our column tool, hit reverse. There's our first one looking quite nice. And then, I'm going to do the same, clone this one, and I'll go in reverse this one again. So, we're looking quite nice. There we go. And now, we've just got four extra layouts, so at which point I can now go and save these to the layouts drawer. I won't do this now because you've seen me do it early in the video. I would just click save layout across all these four, and then go and sort them out into my layouts drawer."
