Wordpress Avada Theme - Next Level Tutorial - Scaling Block Page Layout | Andrew Turner | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Wordpress Avada Theme - Next Level Tutorial - Scaling Block Page Layout

teacher avatar Andrew Turner, Web developer & WordPress trainer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

4 Lessons (35m)
    • 1. WordPress Tutorial SCALING BLOCKS Introduction

      2:14
    • 2. Module 1 - Single Column Setup

      9:41
    • 3. Module 2 - Two Column Setup

      13:05
    • 4. Module 3 - Multiple Column & Header Slider Setup

      9:55
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

10

Students

--

Projects

About This Class

This short tutorial class will teach you how to create a block page layout that automatically scales to the browser viewport size.

These ‘Next Level’ tutorials are created to be short, focused tutorials addressing specific challenges that you will face as a web developer. They assume you have either completed the ‘Introductory Course’, or are already familiar with WordPress, and the Avada theme in particular.

I will be adding new tutorials over the coming weeks.  If there is something specific that you would like me to include, please contact me via the details in my profile.

Meet Your Teacher

Teacher Profile Image

Andrew Turner

Web developer & WordPress trainer

Teacher

Andrew Turner is a full-time web developer and WordPress trainer working through his own training company Web Design Workshop. He is also a fanatical street photographer and author of the book 'Shooting Street'. He lives with his wife and two daughters in the beautiful city of Oxford in the UK.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. WordPress Tutorial SCALING BLOCKS Introduction: To another next level tutorial. This tutorial assumes that you've already done the introductory course that I've put together that is available on skill share. All that you're up to speed to a reasonable level with the Wordpress theme called a harder. So what we're going to be looking at in this particular tutorial is how to achieve what I've called scaling blocks page dial. So it's basically a layout that would look similar to something like this, where you've got some text sitting on top of a background color with an image to one side or the other. Now, you're seeing it in two columns here, but we're gonna go on and look at how to achieve this with three columns, 45 or even six. If you want to get slightly more complicated the number of columns you add to it. But the idea is that when the browser either gets bigger or smaller, these columns, these blocks, as I've called them, scale according to the browser view size. So that's what we're going to be doing. So first of all, we're going to have a look at how to achieve this layout just with a single column, which is perhaps the most straightforward. Then we're going to look at how to split that into two columns and achieve the same effect with the right borders and the right sort of stacking or mobile phone. Then we're going to look at how to do that with three columns. And then perhaps even go on quickly and look at 456. And I'll explain how the complexities get introduced once you start to introduce more columns. So finally then we'll look at perhaps how to put a slider into the header of the page. So it just looks a lot nicer. So you've got some revolving images in the top section of the page. Right? So for your class project, I just want you to work through this tutorial and have a go at it yourself. Try and build the same page yourself using the techniques that I'm going to show you. And then let me know how you get on. I'll see you in the first module. 2. Module 1 - Single Column Setup: This next level tutorial, I've called it scaling block Page Layout. And what you're going to learn how to do is to build a page layout similar to this example site. Now, this is the website of a restaurant that is near to where I live in Oxford in the UK. I didn't build this site. Incidentally, somebody else has built it, but when I saw it, I thought, yeah, that looks good. I'll figure out how to do this. And also fixed and things like this where there's the overlap there, which I'm not sure why that is there. But anyway, in my version, hopefully that won't actually happen. And here's the end result of what you're going to learn how to do today. And hopefully, you'll see that if I take the browser fullscreen, everything scales nicely. It's all, it's all got this consistent 20 pixel white border around each block. And everything scales according to the viewport being used. So whether it's on a desktop, whether it's perhaps on an iPad, which might be more like that. Perhaps a mobile phone which might be more like that. So we've still got this, this block that is scaling according to the size of screen that is being used to view it. So that's what we're going to learn how to do. Let's launch straight in and have a look at how to at least get the first top section in the first container. Okay, so if you've imported the code into a border that is included in the introductory course, you will already be set up. And your page will look similar to this with nothing on it. It's just a blank page and moments, so, but it's important to import that code. So you've got the container settings and column spacing settings by default that we are actually going to override anyway, but let's work through it. You'll see works. Okay, so if you've, if you start a new page, you'll automatically set up in this way. So the first thing we're gonna do is add a container with just a single column in it. And I'm going to add some color to that column, just a background color, a block of color. So we can, so we can see something. I could actually put that contain that background on the container incidently, but a lot of what we're gonna be doing going forward through this tutorial is working on the columns and rows within the containers. So the container, once it's set up, we'll, we'll pretty much stay the same. It's the settings within the columns within that container we're going to be working in. So for the purposes of this tutorial, I'm just going to set the background color to be only on the column itself. Now let me just update that and show you what this looks like. I'm going to try and work through this quite slowly step-by-step. So you can see each step of the way. Now if I just refresh that and see the front-end just about, see that yellow line, which is the background of the column within that contained with just that single column. Now, obviously, it would help if we could see a bit more of that. So I'm just going to add temporarily, I'm going to add a separator. And set it at 450 pixels, just so there's some height in that column. So we can see what's going on. Okay, let's refresh that. And now what we should see is a, just a yellow block. Ok, there it is. So we see we've got a lot of space left and right. Some space top and some space bottoms one and it's just white at the moment, obviously. Okay. So the reason that the yellow is not stretching across the full width at the moment is because, well, the two things actually, the first thing is that our default template is set to the page width rather than 100% width, so, or rather the site. So let's set the page to a 100% and update that. And see what effect that has had. Once we set this container up, we're pretty much gonna copy it for everything subsequently. But it's important to get this set up initially correctly because then the changes we just apply to the columns. Okay, So that doesn't appear to have done anything. Now, the reason is, although we've set our template page to be a 100% width, at the moment, the internal elements of the container is still by default set to cite width. We also need to set a 100% width on the interior content. That being row currently for single row, single column. Okay, so let's refresh that now. This should begin to look better. Okay, so now we've got our full width, although we've still got some spacing around the edge. Now the reason for that is because by default I have the, if you've, if you've imported my settings, then by default the padding will be set to 4%. Now for this particular tutorial, this is not true for all page layouts, but for this particular page layout, what we need to do is eliminate that and override it. So now I could set that at the Nevada options level, but that would then affect potentially some other pages within the site. So if we only wanted to achieve this scaling block on the homepage, then it would be sensible just to override this on this homepage. So let's just do that. And what I'm gonna do is I'm going to set the padding to be 0. So basically taking it out, removing all the padding on the container. So let's update that. Now we can have a look to see what effect that has heard that should now stretch across the full width of the page there we have it. Lovely. Ok, so now we've got the full width of the page. If we make it bigger, it scales with it. But what we haven't got is the border that we're trying to get. Okay, so what I'm gonna do is I'm gonna put the border into the container. But I'm not gonna put the border. Okay, here we go. So let me just do that again on probably did that too quickly. Okay, I'm gonna go into edit the container. I'm going to go to Design. And then I'm going to scroll down to contain a border size which is currently set to. Now, I could set 20 pixels all the way around and click, save and update. Now that will give us exactly what we want. Okay, so there's the border. But let's just see what happens if I now put another container in and update that. What happens is that because it's got a border all around it. It's having the border at the bottom. We're showing here in the border on the top showing here, we've got double the space over which we want to avoid. So let's just go back. I'm going to take that container out. And I'm gonna go back into the top container. And I'm going to go to Design containable order size. And I'm going to take out the top and the bottom container builder. What I'm gonna do instead is I'm going to set, go into the column and go to design. And I'm going to set the margin to be 20 pixels at the bottom. Now I could put it at 20 pixels at the top as well. But we'll have the same effect as you've just seen with putting the contain a boulder all the way around. Once it come, wants to come to duplicating some of these columns and rows. So just set your margin to be 20 pixels underneath or down. Okay, so let's refresh that. Now. Refresh, okay, so we've still got the one. Now let us see what happens if I duplicate this container and update it. There we have it. So now because we've only got the border on the left and the right of the container, which is showing there. And we've only got 20 pixels underneath each column. So that means that the spacing will be consistent and we can make it bigger, so we can make it smaller. So it is as simple as that. It gets a little bit more complicated once we split this second column into, second row into two columns and 345 and so on. But that's it for the first module. In the next one, we'll look at how to split this into two columns. 3. Module 2 - Two Column Setup: Let's have a look at how to split this second row into two columns. Ok, so we've already cloned the column in the previous module, but it's identical to the one above. So what we, what we want to do now is to split this into two halfs. So we're just going to select the resize column tool, make it a half, and then clone it, and then update it. And let's have a look. See if that's done the trick. Refresh. Okay, so almost there, we've got the consistent border left and right, but we've got a big space in the middle here. So what's happening? What we've, what we're looking at there is the fact that the column separator default is kicking in and we need to override it. We need to specify the width that we want to have between these two columns. And the way to do that is to go in and edit the container. Oh, incidentally, sorry, let me just go back. Because what you're looking at here is the very latest version of Nevada and your version of provider may not look like this. It may look. Let me just go into the container and this is, these are the new tools that are available in the very latest 7.02 version of a vibe or I think it is. But if you click legacy in the container, you'll get your familiar looking tools. It's worth having a look at what new tools are available because they are basically column alignment tools that are very powerful. But I'm not gonna go into those in this particular tutorial that's for another time. But by all means, have a play around. If you've got the latest version of Nevada, have a play around. But for the purposes of going forward with this tutorial, just, let's just click legacy and save that because then everything will look familiar to the way it did in the introductory course that I've done. Ok, so now if we go into the edit, the first column, we've got this option called column spacing. Now what I'm gonna do is I'm just going to set that to 20 pixels in the first column and in the second, and we're going to set it to 0. Now because the second column is the last column that needs to be set to 0. And that's true for every other, any number of columns going forward that we introduce here. We're gonna do 3456 in a later module, but it's always the last one needs to be set to 0. The first one needs to be set to 20 pixels, and everything else up to the last one needs to be set to 20 pixels. Only the last one needs to be set to 0. If you don't set it to 0, then your, your last column will appear underneath it will appear in a row underneath. Try it. Okay, let's refresh that and see if that's done the trick. Okay, there we go. Now we've got consistent 20 pixels left, right, top, and bottom. And again, let's scale that up. Okay, is looking good. Let's go down to mobile phone. And even on the mobile phone, it's scalar. Now, the reason is doing that is because we've correctly set the border size on the container left and right. And the column spacing in the rows in the column and the margin on each of the columns within a row. Now, if you set them to anything else than we've just covered, you may not get this effect. So it's important to follow the steps very, very carefully in order to get and this scaling effect. Ok, so let's make it look a little bit nicer. Now let's try putting an image in. I'm gonna take that separator out. And I'm going to set the image as a background image to this right hand column. I. Normally when you put an image on a page, you can just click element and an image and then you choose your image. Now because we want it to scale, it will scale much better if we set this as a background image. So I'm going to go into the column itself. I'm going to go to background, image, upload the image. Atlas, choose this one. And while we're at it, I'm gonna go to back to color here and clear the background color so it's not sitting on top of the image. You can't have the color on top of an image if you like, you can set a certain transparency for that color and it will sit over the top of the image. But for the purposes of this demonstration, we're not gonna do that. And now let's take the separator out from here and put some text into this left-hand container. Let me just grab some dummy text. Scrub this paragraph here. Okay, so element textblock text. Let's refresh that, see how that's looking. Okay, so what we're gonna see when it's refreshed is text on the left, an image on the right of the second, the second row. It's still, it's taking a while to save. For some reason. Here we go. Okay, so first of all, we can notice that our text is butting right up against top and bottom of this particular column. The background color is only around the text. So we'd like that to stretch all the way to match the image if possible. So let's fixed, let's fix first of all, the text and put a bit of spacing around it now because we've taken the padding out of the container in order to facilitate this layout. If we want padding around the text, we're going to have to put it into the column itself. So let's go into the column and design. Find the padding section. And you can either put in a fixed pixel or a percentage or lie to use percentages. I use either for six or 8% usually seems to work pretty well. And let's refresh that. Okay, so that should fix the padding around the text. But what is not going to do is make our left hand, right hand column the same height that we have to do in the container itself. So let's go back into that second container. Edit the container and choose set columns to equal height seti AS safe. And update. Refresh. Okay, lovely. So we've now got them the same height, but the image I shrunk. So basically what that's doing is being, the image size is being controlled by the amount of text left to the, to the left. Now, ideally what I'd like is to have the image in each one of these blocks to be a consistent size or at least roughly consistent size because the chances are the amount of text will vary. I would obviously try and keep it fairly short, so it wasn't longer than the image size. But what I'd like to do is to set that image to be more or less a consistent size. So there is a way of doing that. This time we're gonna go into the right-hand column in the second container. And I'm going to go to Design. And this time I'm going to set the padding within this column to be thirty-three percent. Now you can play around with these percentages. I find 33% works for most images. So what we should see is a reasonably good size image. There'll be a lot of spacing around the text or at least this amount of text which should look, look nice. It will let the text read a little. Ok, let's refresh that and see how that looks. Okay, there we are. So you see that the image has grown, the texts. I could set that to be centered if I wanted to do incidently, but, you know, you've got a bit of space now to put a button NameNodes and another paragraph. And that image is, is more or less always gonna be not that size because it scales with the browser, but at least we're going to have more or less see the top and most, most of the image that we want to see, let's see what it looks like when it goes big. So the image itself is scaling nicely. And if we go smaller, again, you know that that image size is more or less in terms of its, IS acts aspect ratio and what we're actually seeing in the image. And again, on the mobile view, it's all looking pretty good. Okay, so now we've got those settings in place there, more or less the call settings that we need. So now what we can start to do is very easily clone or container. And now on this one perhaps let's switch the text and image around. Now, let me just show you what happens here. If you remember earlier what I said is that the first column needs to have a column spacing of 20 pixels, and the last one needs to be 0. Now because I've switched off clone that container and I've switched them around. They're actually going to be back to front. So let's see what happens. Okay, there we go. So that's what, that's what happens. We've lost that spacing because the 0 is on the first column. Now that could actually look quite nice in certain designs. You might want that effect. So you can leave it as it is. But if you want the consistent border, what you need to do now is to go into the column, the first column, set it to 20 pixels and set the second column to 0. Because we switched it around. Click update, and refresh that. We should have our spacing back. There we go. And let's have a look. If we make the browser bigger, still got that lovely, consistent spacing, everything scaling nicely. Let's go down to mobile phone View and then we'll see a problem. Ok, so here's the problem with mobile phone view. Because of the way the browser stacks the page content. For responsive view, we're getting our left column, first, right column, then our left column. And if you remember, the image is on the left in the second, second row, and then the text underneath. Now if you want to switch those round, if you want it to be text image, text image or image text, image text. What you need to do is to overwrite that, that default and effectively switched them around when the browser, when it's being viewed on a mobile phone. Now there is a way of doing it very neatly with some custom CSS is very easy. I've done another tutorial called column control, which covers that technique and it's really, really useful. So suggests you have a look at that. Now, it really only works for two columns. You could extend it to work for 3456 columns, but it starts to get really, really complicated. So I would suggest at least to start with just stick to two columns or three columns to this view. Although we're going to go on and show, I'm going to show you how to create the same page, page layout for multiple columns anyway, up to, up to six columns. And we'll have a look at that in the next module. 4. Module 3 - Multiple Column & Header Slider Setup: Of this particular tutorial, we're gonna look at how we can extend this page layout technique 23456 columns. I've already said in the previous module that beyond two or three columns, it starts to get problematic on mobile phones, but that's something for you to decide whether that's a problem or not. There are plenty of ways around it, but you might want to avoid it, at least until your skills have gone to that level where you can control it. Okay, so let's just launch right in and create three columns. So and again, we can just clone this container. It gets easier and easier. We're going to make this column or third. I'm gonna duplicate that column. And then I'm going to make the middle column list the image column a third as well. And I'm going to put the image in the middle, so I just dragged it across, and that's it. Now, the only thing that we have to do is to check if you remember or column spacing. First one has to be 20 pixels. Second one has to be 20 pixels. The last one has to be 0. Okay, Let's update that and see how that looks. Okay, refresh. And there we have it. So now we've got three columns. And if we go bigger, grows nicely. And smaller. Stacks. Lovely. Ok, so three columns on a mobile phone is just about manageable. And particularly if you've got an image in the middle and text either side, they'll stack quite nicely because you get your text, then you image, then the text. It gets a bit more problematic if you have a couple of images perhaps or well, have a look on a mobile phone, you'll, you'll see what the issue is. It can work depending on your page content. Okay, so that's three columns. Now let's have a look at four. So all I'm gonna do is claim that container again. Now you're saying we're not having to make any changes to the container or any changes to the margins set on the columns themselves because we've done all that. You're wrong. We've set the foundation. Now we can just build on this and it becomes really, really quick. Okay, so let's make this four, and let's clone that one. So now we've got two images in the middle and text either side. Again, we just need to check we've got 20 pixels. This will all be fine because I've just copied them in the correct way where 20 pixels by 20 pixels on the third column and 0 on the last can save all changes. See how that's looking. No, we go. 1234 columns. And we can go on and on. We can do five exactly the same copy. Let's make a third image in the middle. You need to do, whoops, wrong button. Now we just need to set this to a fifth. Column width to a fifth. Fifth. Another one down here. Now because of the way I've copied that, I know that my last column is going to be set to 0. Now the others are already got 20 pixels. Update, refresh. So now you can see just how easy it is once you've set that foundation, it's really, really easy to duplicate it to just clone those columns. Let's go back and just finally do six, cloned it. So I'm going to make it slightly more complicated by having a couple of images, sorry, a couple of blocks of text at the beginning, and then four images. So because I've lost track now of where my column spacing is, I just need to go in and check that I've got 20 pixels in the first column. It is an error. The role when you say 20 pixels in the second column, 23rd, 24th, 25th, 0, and the final column, and update. And then we should see we've got one column two and another 234 columns, five columns and six columns. They will all grow beautifully. With the browser size. Is big, be it a big browser or a mobile phone. It'll all stack nicely with the consistent border around each of the elements on your page. Okay, so finally what we're gonna do for this tutorial, let's have a look at this top section because it's very rare that you'd use a block color that would probably be an image at the top of the page. So, so let's put an image in there. Or at least let's put a slider in the, now I've already prepared the slider because that would take a bit of time, but you need to do some research on how to use the Vada slider, which is very powerful. And you'll be able to achieve this effect. So I just slot the slider in here, so I've just put it in as part of the story, put it in as an element within the row in this first container. And if we refresh that, we now see I've still got the color on there so I can take the black background color out. But you see that we've now got a slider in the top. Now, my preference actually is not to have the slider with the board is on it. Now you can, if you prefer, leave it as it is and it can look quite nice, but I think it's more powerful if we actually take the borders off the slider, the top image, if it was just a static image, it would be the same in my feeling. So let's just go into the container itself, into design. And let's just remove the container border and save that. And update and refresh. And there we have it. So the slider is now the full width of the browser. And if we, if we scale it up, it's gone the full width, but the borders appear in everything else underneath it. For me, that just looks better. And what looks even better is if that image bleeds into, bleeds to the very top. So the navigation sits on top of it. So in order to achieve that, what we need to do is to go in and edit the page, scroll all the way down to the header section of the Ivana page options. Look at the background color, which is currently set to white. And basically tuned down the opacity to 0. So basically we're making it transparent. And that will automatically, unless you've got any content padding settled there, it will automatically push the slider. Should push the slider all the way. Refresh. And we got, okay, so there we have. Now the navigation doesn't really work on that particular image, works a little better on that image. So you have to be careful for image selection there as to whether your navigation is going to show over the top of it. But that to me is a better solution for, for the header. I much prefer that solution. Okay, so that's it. You've now learned how to create that quite striking, I think, Page Layout. And hopefully what you can do now is the the, the, the course project is you can work through that yourself and step-by-step and create this same page layout using whatever images and text, whatever number of columns you choose, whatever padding you choose. And hopefully you'll have a lot of fun doing it. I hope this has been really useful and please do take my other courses related to this. I'm trying to create as many of these sort of short follow on tutorials as I can. Concentrating on specific tasks like that, like this because I think they're really useful. And I hope you found it useful. Okay, good luck. Many thanks.