Wordpress Avada Theme - Next Level Tutorial - Column Control on Mobile | Andrew Turner | Skillshare

Playback Speed


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

Wordpress Avada Theme - Next Level Tutorial - Column Control on Mobile

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 (19m)
    • 1. WordPress Tutorial COLUMN CONTROL Introduction

      0:44
    • 2. Module 1 The Problem

      2:00
    • 3. Module 2 Quick Fix

      5:52
    • 4. Module 3 CSS Solution

      10:43
  • --
  • 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.

6

Students

--

Projects

About This Class

This short tutorial class will teach you how to control the way the columns on your website stack when viewed on a mobile phone or small tablet.

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 COLUMN CONTROL Introduction: next level tutorial, This one is going to be concentrating on column control on mobile devices. Now, what I mean by that is controlling the way columns on your page stack on a mobile device. So first of all, in the first module, we're gonna look at the problem itself, and I'll explain in a bit more detail what the issue is. Then we're gonna go on and look a quick and dirty fix, too. Result the issue, which can often be very useful but does have limitations on I'm going to. As a result, I'm gonna provide you with a CSS solution, which is a much better fix on easy to manage going forward. So let's launch straight in with Module one. 2. Module 1 The Problem: First of all, let's identify what the problem actually is. I've got a demo site I put together here just to demonstrate this. You'll see that we've got a top section head of section with a slider image on it when we've got another row, which is a single column, full width throw, just with some text in its own image and button. But then we've got a split column. So we've got a text on the left and an image on the right and then an image on the left and text on the right. Now that's all well and good looks lovely on the desktop. But when we view this on a mobile phone, what's gonna happen is thes columns are going to stack left first and then right, so we're going to end up with a bit of text and image underneath it. But then another image immediately underneath this this image, which is on the right, this'd image will immediately be underneath it. And then this text will be underneath this image. So what we're gonna try and achieve is have text image, text image on mobile view. Let me just shrink my browser and I'll show you exactly what this looks like now when it stacks by default. So there we have the slider at the top, the single column bit of text with the image. Then we got our text, which is on the left on desktop, and then the first image, which is on the right on the desktop. And here's the issue. Now we've got that image immediately underneath the first image on the text relating to it underneath that image. Now, you might want it like that, which is fine, but what I'm going to show you how to do is to move this bit of text. So it appears between the two images in mobile view on we're gonna have a look at that in the next module, first of all, going to show you a quick and dirty fix for it on then, in the final module of this tutorial, we're gonna look a much better CSS solution 3. Module 2 Quick Fix: look a quick fix for this. This problem I'm going to just opened another tab to edit the page. So we've got one tab open with the front end. Andi, we've got the other tab open with the in edit mode would process it. So there are containers. We've got the I had a container with slider in. We got another container with the text with just the full width column on Dhere. We start our containers with the split column, so we've got half and half in two rows. We've got text on the left image on the right. Incidentally, the image is set of background here, which is why it stretches so well and to the screen size according to to whatever is being viewed on. Incidentally, quite a few people have contacted me and asked me how I put this together, how I've made it work. So I may do a tutorial later on about this particular layout and how to achieve it. If you're interested, Do do drop me a note and just let me know if there's enough people interested, then obviously I'll put the tutorial together. But anyway, let's just concentrate on this. This quick fix for, um, showing these columns in the way we want them to appear on a mobile device. So a za se within within Nevada, there is a facility to show certain things on some devices and hide them on others. So that's what we're gonna do on what I'm gonna do is I'm going to take one of these containers, which the second container with the the two columns in. Because that's the one that's gonna cause us the problem on mobile. We don't have to do anything with the first container because we know that's going to stack text on the top image underneath. That's automatic. That's gonna happen. It's this 2nd 1 that is the problem. So what I'm gonna do is I'm just gonna clone that on, so we've got to containers that are identical at the moment. But what I'm gonna do is I'm just going to take the text in one and move it to the left. Okay, So if I now update that on, go to the front end and just refresh. You'll see that we've got two identical containers saying deli and cafe anything. Images that switched around one to the other. Okay, so if we have a look at that on mobile view, this is what it's gonna look like. Here's our first container text on the left Image on the right. We've still got the image on the immediately underneath and then the text. And now we've got text underneath and then an image. So that's fine. That's what I would expect. But what we need to do now is to hide one of those containers on global view. So what we're gonna do is we're gonna hide this this, um, this first container, or rather, the second container. But the 1st 1 that we've copied, Andi, we're going to hide it from the small screen, which is the mobile device. Okay. And then what we're gonna do is hide this 2nd 1 from medium and large screen. So what I've done is I've I've said sharing this one on just the desktop and show this one on just mobile view. But if we then update that and refresh what we should see now is we back to our regular page? So we've got text on the left image on the right image on the left text on the right. Perfect. Now let's shrink the browser and have a look at what that looks like. A mobile view. So as our slider first section text image text image. Perfect. Now you'll notice that the there's an image immediately underneath. Um, that image this is this is now going into that third row where there's actually three columns. So we've got image text image now if you wanted to. What you could do at this point is to start applying some rules to this column as well, if you wanted to rearrange the the order that this particular row and columns appear on mobile devices. But let's leave that for the next model because first of all, what I want to do is have a look at the CSS fix, which I think is a better solution. The reason it's a better solution is because although this works and it's actually very good, you can imagine that if this page gets very long, you'll start to it becomes unmanageable. Really, because what you've got is you've got duplicated containers containing the same bits of information on. If you make a change in one, you're gonna have to remember to make it in the mobile version as well. So it's just going to become a bit cumbersome and it's better if you can, just to leave it as a one container so effectively you're gonna be looking more or less than what you see on the front end for for all devices. And that's what the CSS solution is going to give you. So it negates the need to duplicate these containers. Okay, so let's stop there for this module. Onda will move on and have a look at the CSS solution in the final module of this tutorial . 4. Module 3 CSS Solution: at what I think is a better solution to deal with this situation. It's just it's slightly more complicated, but once you get used to it, it's it's actually really, really easy to implement. First of all, what I'm gonna do is undo what I did earlier. So I'm going to remove this container that we, Koppett. And I'm just going to make this original container that we hit from mobile view visible own all devices once again. So So we're basically back to the two rows with the split columns. And if we have a look at what that looks like on the front end, it should look identical. It's just refreshing. Okay, so let's have a look. And make sure that your mobile view we're seeing what we're expecting, which is the issue with the two images appearing on top of each other. OK, so that's back to where we were. So instead of instead of duplicating these containers, what I'm now going to do is apply a little bit of clever CSS to enable me to control the order of these rows. So first of all, we need to look at the CSS, So we're gonna go to Nevada theme options. Andi Custom CSS. Now, if you've imported my original set up code to set the various theme options from the very beginning, you'll already have this CSS in the custom. CSS. It's right down at the bottom, it says. Changes GRID COLUMN Order on mobile view. Now it may have a slightly different heading. I may have changed it since, but nevertheless it should be there. If it's not there, I will be including it in the tutorial notes alongside this anyway, So you'll be a big toe to grab it. But let me just explain what what it's doing. You don't really need to fully understand what this is the makeup of this necessarily. But just to give you some idea, at least this line, this first line number 2 to 1 is saying, Apply this rule on anything below 800 pixels wide so either a small tablet or mobile. Then we put in a CSS class called Main Kant, just short for men container. Really, that just allows me to put a wrapper on it and to apply it to a particular container and say to indicate programmatically to to apply it to this particular complete container on, then this. Another CSS class here, call one. Just short for column one is again a rapid just to allow me to apply the CSS to a particular column on the page. Eso That's it. It seems fairly complicated, but in fact it's not. Once you've just all you have to do is just copy and paste that but CSS code into the custom CSS field, and then it will be available to you. So how do we now apply that? Let's go back to edit this page just closed in that tab. Okay, so all we have to do is apply the two CSS classes that I mentioned the main Kant and the call one to one of thes containers. And again, we're working on the the second container. That is the one that's gonna cause us the problem. So the first thing we do is we go to the container and we edit the container and then we go to CSS class. We type in Maine. Coat importantly, you have to spell it correctly. Main contact. There we go. And now the next thing to do and the only thing that you need to do is applied the same CSS class. Or rather apply a CIA CSS cast that called one class to we call him itself. Let me just show you that again. What I did is I went into the container afflict edit container, and I entered Main Kant into the CSS class and then in The Container column on the left again on edited that column. I want to see a sex class and they entered cold one. Now what? That what that CSS is going to do is gonna force this column. To be on this side in mobile view so effectively will force it to come underneath this bit of text. Where is on the desktop view? It's actually going to remain the same, so it will be on the left. So let's have a look at that from 10. Hopefully on a desktop view, which is the way we're looking at it. At the moment, nothing will have changed. So that's just refreshing now. Okay, so we've got our expected text on the left image on the right image on the left, text on the right. Perfect. That's how we want it on desktop view. Let's just shrink my browser, go to mobile view. I'll just refresh that sorts, resize everything correctly. Okay, so there we have the first split row. We've got text above the image on beautifully. We've now got text above the image. Now notice that again. As we saw in the previous module, we've got this image appearing immediately underneath another image. That's because that's the first image in the column, the road with three columns in it. Now what we could do to overcome that if we didn't like that is to go back to the edit mode instead of applying any CSS to this. Because this is this is really only an issue on mobile phone, and we're not going to necessarily duplicate this. So what we could do is instead of using any CSS, we could just choose that one column and turn that off on the mobile device. So what we're doing there is we using a combination off the quick and dirty fix, which I just applied to this column here on the moral, more manageable CSS solution to the to the other column. So let's just refresh that and see what that looks like. Taking a little time to save. Okay, that's no save. So just refresh that, okay? And again, I'm gonna shrink my browser just to see what that looks like. A mobile view. So there we have the text image, text, image, text, image, text image. Lovely. That's how we want it to look perfect. Now, I'm just going to show you one more thing. Now, which explains it a bit more detail. Why? This is a better solution. Because what we can now do is we can know instantly. What I'm gonna do is I'm just gonna rename this container to say, move all fix for columns. Okay, so we know that we've got, um the CSS applied to this particular container. So what we can now do is weaken duplicate that container and duplicate the one above. And then I'm just gonna move this between the two. So now these are obviously gonna be identical at the moment. But what we can do now is just change that text and change that image. We know we've got the mobile fixing that container, so let's just do another one and another copy. So what I'm doing is I'm just duplicating each one of these rows, which obviously is gonna make the page longer, have more content. But importantly, the way I've arranged it is that we've got a unfixed container which we know is gonna be fine on desktop view. Then we've got the mobile fixed container, which has the rules that will be applied only for mobile of you. Then we've got another desktop container which we know is gonna be fine because it's already left, right? It's already stacking left, right. Then we've got another mobile fix for columns, then a normal one, then another mobile fixed problems. So if I Now what date? That We will have a look at the front end and see what that looks like. And what we should see is text, image, text, image, text image all the way down. But importantly, what we're doing is keeping the containers to a minimum, so they're much easier to maintain going forward. So if I make a change here to this text or this image, I don't have to remember to do it to the desktop version of that that particular container as well, because it's just one of the same. So let's have a look at how that now looks so on the desktop view. We've got text image, image, text, text, image, image, text, text, image, image, text and so on. Def. We have a look at what that looks like on Mobile that just shrink my browser properly. There we go. OK, so there's the mobile view text image, text image, text image. That's it. That's how you can control the column appearance on mobile view. Hopefully, this has been really useful, and please look it up for other tutorials in the In the Siri's many Thanks, bye.