DAY 1 | EPISODE 11

LAYOUTS

Paul Davenport

  Paul  |    9:49  |    15 mins

Well congratulations, this is the final episode of Day 1! Now all the Styling work is compete, we finish the day by consolidating all your hard work and letting our bots update the screenshots in your Layouts Drawer. The result will be a fantastically tangible showcase all of today's efforts. Well done, what an amazing start to the challenge!

In this episode we manage your Layouts in the Layouts tab of the Styles area. Changes you make here are instantly live. Over in the Editor, if you don't see your changes in the Layouts Drawer, remember to give your page a hard fresh -  Shift Ctrl(⌘) R - on Google Chrome.

LESSON PLAN

  Use the Quick Clips below as a browsable breakdown of Full Flick above, with convenient class notes and takeaways.

Layouts Intro

  Paul Davenport  |    01:34

You can manage your custom site Layouts via the Layouts Tab in the Styles area.

   Transcription 

"This is the final episode of day one. I have to say, this is my favorite episode of all because this is where we're going to get the AI Website Bots with just one click to go and update your Layouts Drawer to show all the hard work that we've done throughout today. You're going to see all of these Layouts with your Colours, with your fonts and your images ready to drag and drop on any page. Now, for many of you, you'll feel that your design work is done, and it might be. Getting this far is perhaps enough for many of you. But on day three, we're going to go in and show you how to customize Layouts and even build them from scratch so that your team can use your Layouts in day four. And to wrap the session, I'll give you a quick tour of the Layouts Drawer to show you some of the Layouts, and this will inspire you for the types of Layouts you want to make for your website. Let's do this. Let's use those AI Website Bots to update the Layouts Drawer."

Bot Assisted Layouts

  Paul Davenport  |    02:06

Let our bots update all the Screenshots of your Layouts via one quick click.

   Transcription 

"Well, here we are in the Layouts area, which you can access by styles. And as you know now, look at the top bar and click Layouts. Well, you can see here, here are all of the Layouts. These are your custom Layouts that we're going to be custom designing throughout day three. So let's see where they live. Here in the Editor, you can see my Layouts are here. So this is in the same order of which they appear in the Layouts area. So we'll go back to the Layouts area. So why have they got all of the old images from when we signed up, the old Colours from when we signed up? So you can see all of my images here. These are all the nice beautiful ones that we've uploaded. Well, I now need to go and use the AI Website Bots to update all of those Layouts.

What it's going to do is take the screenshots that we put in that Drawer. So I'm going to go up here to take screenshots and click save. But you'll notice it still hasn't updated, but that's because we need to refresh the browser. So we're just going to click refresh at the top and bang, within that instant, all of your Layouts have now been updated. It's got all of my fonts, all of my images, all of my Colours, and we're looking good. So let's go and have a look at this in the Layout's Drawer. And here you can see all of those Layouts are now fully styled with my brand, with all the hard work that we've done today, ready for yourself or myself or my team to drag and drop. So here we go. Look at this one. I'm going to drop this one onto the page. Bang, looking absolutely brilliant."

Layouts Drawer Tour

  Paul  |    08:06

There are thousands of Layouts in you MOBLE editor. Here we show you around the base Layouts for every type of website Layout. Plus we explore the Layouts for our Themes. Simple drop any Layout by holding Shift and Click and it will drop an to you page and change the the Styles of your Brand.

   Transcription 

"So let me give you a quick tour of the Layouts Drawer because it's not just the custom Layouts that we're making. There's a whole bunch of other Layouts too, 5,000 other Layouts that you can drop onto the page, and then when you drop those ones, they'll instantly transform into your brand. So let's have a look here. So you can see under Theme. You can see my Theme is Bilio. That's literally just my site name. So I can look for my custom Layouts at any time in Theme and under Bilio. This will obviously say your site name. But watch this. So I can add to this, so I can search by other Themes. I could take this one here Charlie. So now that's showing me my Layouts and also the Layouts from Charlie. I could add something else. Let's add Senya. I can delete mine if I want to as well.

So now I'm just looking at Layouts from Charlie and from Senya. So loads of Layouts there. And then let's have a look at something else. I can say, "Just show me the Action Sections from these two Themes together." So now here you can see, I've got the Action Section from Charlie and the Action Section from Senya. That's pretty good. Now, if I had to click this, when you drop a Layout, you can drag and drop them in, but that's a little bit efficient. Highly recommend just holding shift and then click, and that will drop it to the top of the page. So here you can see I've dropped this one from Charlie, which is very dark, it's got a bit of black you can see there in the overlay. So I'll just take that black out and put it to my blue, and I can change around the opacity.

As you know, I'm working with this gradient, so I can just go and quickly update that and press save. So it's as quick as that. When you drop the Layouts, it's going to have all of your Colours and you might just want to change certain things, certain nuances, like that Layout had a very dark over lay using the black. So I can just choose to take that out. So this is really what you're going to be doing on day three. You're either going to be choosing from the 5,000 Layouts, ones that you like and making slight adjustments. Or of course you can be building yours from scratch too. So let's have a bit more of a look. When I'm happy with the Layout, I can save it. And now when I save it, it's going to put it back into the Layouts area.

I can change the sort order and things like that over there, but it also adds it straight away to the Layout's Drawer. So if I just jump here, I can flip over to type and back to Theme. That's going to put me back to Bilio, but where's the Layout that we've just saved? Well, this is where you just have to remember to refresh. So it will have saved that for you, so you don't need to save. When you've saved the Layout, it saves the page. And then just refreshing puts that Layout that we've just made to the top of the list. I can also save full pages. So sometimes I might have a Layout that's got several Layouts together that I've combined. So I want to save all of those together. Well, this is where I can hit the bot icon here and save my page, the entire page.

So I'll just show you this. I'm going to call this one My Full Page, and then if I'm happy with that now, I'm just going to hit save as a Layout. Again, that's saving the Layout, saving the page, and I can have now a full page. So this is good if you've got a services or a [inaudible 00:06:36] or a whole page that you want your users to have access to. So I'll slide back over into the Layouts area, and you can see now the two Layouts that we've just made. We saved the custom Action Section as one Layout, and we saved My Full Page as a full page Layout. So those are some initial tips really, and we're going to be learning all of this and much, much more when we get to day three. You can see here, this is where I can choose the position of where my Layouts want to go in the list.

So by default, when we take a new Layout, you'll notice here it gives it a sort order of one, and you can adjust the number to determine the order of which the Layouts appear in your Layout Drawer. And I will also now go and delete those two Layouts to clean up my Layout Drawer. So you can delete any time and then just press save. I'll slide back into the Editor here, in the Layout Drawer, you can see we've just looked at Theme, but I can flip to type. Now in type, there are lots and lots of different Layouts for you choose from. There's 5,000 Layouts in total. So look, you can see here I'm looking at all of the banners, but I could look for any type of Layouts. So I could look for body here, and it's going to show me all of these body Layouts.

You can see we've got Layouts positioned in like Halves, which is generally two column. We've got Singles, we've got Thirds, Fourths, Fifths, and sixth. We've got a whole bunch of different grid Layouts, landing page Layouts, event page Layouts. We've got category Layouts, even four pages like contact us, about us. We've got all the Menu Sections, Action Sections, whole bunch of Layouts in here, and we're always adding more. So this is where you can go and have a play with the Layouts, familiarise yourself with them now and decide what you want to do on day three.

You're either going to just choose some of the Layouts that we've got here for your website, drop them onto a page, maybe change some Colours or change certain things, and then save them back into your Drawer. It's as simple as that for day three, unless, which I highly recommend you learn to build Layouts from scratch, which is what we're going to be doing by the end of day three, you'll be able to look at any website in the world and build it from scratch so that you can have custom Layouts from your team, and also be able to answer literally any questions that your content team might have as well.

Well, that's a wrap. That's the end of day one. I'll see you tomorrow in day two, where we're going to be choosing your menus and navigation."

WHAT'S NEXT?


Tonight's sunset talks is a masterclass on running client design workshops. In this Episode, we unveil MOBLE's tried and tested process to unite a project team and ensure you get design sign-off first time every time, by using our internal process "Design with Metrics, not with Sketches".

70 Award
Winning AI Themes

Start your AI Theme in under 3 minutes, anyone can do it!!

GETTING AROUND

GET A QUOTE

A Web Builder for Design. A CMS for Business. We serve all businesses from SME's to Enterprise. Talk with us for custom website design and website development, ecommerce websites, directories, intranets and social networks.