SHADOWS AND CSS CLASSES

"Now, if we recall on our column that we're building, let's just go and have a look at this. Let's just jump in here. This has got this shadow around it, which the shadow off the white creates this really cool look. We've got this white and neutral, which is why we really like to have a neutral and a white. It gives us lots of really cool design techniques that we can use, and this is one of them. Look at this, this shadow looks amazing, lifting this off the page.

Let's now go and put the shadow in here. But if I go to the shadow, which is in advanced and I click shadow here, you can see here I've got three shadow settings. Now, cool thing to remember here that MOBLE is making the hard decisions for you. MOBLE, as an agency, we've built hundreds and hundreds of websites, so we know the common use cases, and we've bought those common use cases right into the editor so that you don't have to make decisions.

Now here, you can see three very common setups for shadow. If I click this first on shadow, it's added my shadow as you can see, but it's only added around this particular frame. We want to add it around the whole frame. I'm going to talk more about on shadow and CSS in just one second. I'm just going to turn this off, and we've got here this block column, haven't we? Which goes all the way around.

Well, what we would do if we want the shadow to go around here is just take off the padding of the block. So, watch this. I'm just going to take off the padding, and now we can apply the shadow around the side. You think you get where I'm going with this? Let's put our shadow in here. I'm just going to put shadow more for now. It's got shadow, but again now, the shadow is encroaching onto our next column.

What I'm going to do now is use the plus icon to add another frame around the side. And in this one, I will now go and put our padding. And what I'll do is make sure my padding is the same as the other frames for now, but knowing that I could use the shortcuts to go and apply all. Okay. Now, this one has got padding inside it. Our inner padding is now moved to here, hasn't it? So, what we want to do is just indicate that for our team. Now, we have a column with padding around. In fact, because this is shadow more, I'm just going to add a little bit more padding in here. Now, I'll just talk about CSS for a short moment here. You can see on MOBLE, like I said, we've made the hard decisions for you.

The last thing we want people to do is go and have to do more complicated things. If you've used Photoshop or other programs, adding shadow where you need to set particular blur, et cetera. Well, we know that these common use cases just work, but we also know if I add most in there, we also know the distance of what we want the shadow to go with to work with columns. Imagine if a content user comes in now makes this four column, the shadow could encroach over that, couldn't it? So, these are things that most first-time users and in fact a lot of designers aren't thinking about. They're only looking at that design for that particular use case. When they're using it right now, does it look good?

Well, MOBLE is a web builder for design and a CMS for business, we need to think about designing for all those future users. So, we set up common presets, if you like, that we know just work. Even if you are a designer, you know that these look really nice anyway, and you now know that you don't have to think about this for what columns people are going to change to or what devices this going to be looking at. We've already made the hard decisions for you, just enjoy it.

Now, if you do want to change your own, a shadow is a class. So, back over in... I'm just in the advanced tab here. Now, watch this. I'm going to change the class here, and it changes the... I'm just using the UI tools here to make changes, and it's changing the class. Now, if you are a front-end developer, you can go over to the styles area and in the top you can see the html, CSS, and JavaScript. You can go to CSS and actually change the class for shadow-most, and that will change it across the whole website for all those users. If you're a front-end developer, you can really use this tool to maximum effect knowing that you're creating classes that there's UI tools for, and that's very, very cool. I think you get that if you're a front-end developer.

And also, I'll show you our class list while we're here. Our class list is things that mobile are working on new features that are in beta that people can play with, that we haven't actually released in the UI yet. So, there's a quick tip for front-end developers. You see how powerful this platform actually is. Okay. So, we say it's a website design builder for designers and you don't need code, but you still can use code and you still can use code in a uniform way that it still works for all those future content editor. It's very, very cool stuff.

I'll just show you cool technique. I'm just going to flip this across, and let's just say in our class box here, this is all the classes that we have here. I'm just going to make this one a little bit bigger to accentuate what we're doing here. I could just come into advanced tab and actually just remove all the classes, but notice I never remove the class for row. Watch this. Looking over here, this saves me going to remove the padding and everything that I can just hit delete in here, and it removes everything. It cleans this frame. So, that's a little masterclass technique there. Even if you don't know code or never wish to learn code, that's a really quick hack there to clean everything up without having to go and find all the UI tools to turn them off."