Hi, my name is Hogan and in this tutorial,
I am going to be showing you how to make your website super mobile responsive
and by that, I mean if you go to Teslamotors.com,
and if you hit on enter, you'll see this video background and it looks really nice
but when you actually re-size it,
and once it reaches the tablet size
and also the mobile size,
it changes the background and also the layout, the text and the buttons. All changed.
Okay, so the reason to that is because the video background wouldn't look very nice on the iPad
as it's fully too small so they changed it into a static image
and I think that video backgrounds don't work well on all mobile devices
and that's why they did it.
So, basically I'm gonna be showing you how to do that. Okay, so if you have a background image
and you wanna change it, um, to something else on the tablets and mobile devices
then this tutorial is for you.
Okay, so I'm gonna be using one of my demo sites as an example
Now, you'll need to log-in to your Wordpress and you'll need to turn on your Themify Builder.
Okay, so I'm gonna be using this row here as an example
So, I'm gonna be showing you how to duplicate it and then edit it so that it looks nice on mobile devices
Okay, so what it looks like now is if you go to Responsinator.com
and you'll need to enter in your URL up here
Okay, so just copy this URL and paste it directly into here and then click on go
Okay, so it's going to take a few seconds to load,
And, afterwards when you've done that, scroll down
And let's say for this, um, example, you'll see that you can't see the person the person there properly
Um, it's sort of like cut-off
and the reason for that is that there's so many different modules in here
the only way they can fit it all in is to, um, stack it on top of each other.
Okay, so there are too many modules in here.
That's why the only way the computer or the Themify Builder can fit it in is to stretch the image out by it's length
They can't make the module here smaller
if they do, then it would mean the text would be really small and you can't see it.
So, I'm gonna be showing you how to edit that and it's gonna be really cool
So, let's go back to our website, first of all,
and let's say for the row that you want to edit
all you need to do is to duplicate that row. So, click on duplicate,
and scroll down. You'll see the exact same row down on the bottom. Okay.
So, first thing you'll need to do is delete just everything inside
Okay, so I'm going to delete that just by clicking Delete
and delete that as well.
Okay, so you got a empty module section here
And this where we're going to drop in a slider module
Now, the reason why I'm dropping in a slider module is because I want to display the quotes one by one.
If I display it one by one, that means it wouldn't require such huge spacing
Okay, you'll see in a minute. So, let's drop in this slider module.
And what you'll need to do is we want to Display Text.
And you can display images or video, that's up to you. Or even your blog posts.
But I wanna display text specifically 'cause, uh, I wanna add in a quote
So, click on that,
And I'm just gonna get some Lorem Ipsum text
So, I'm might grab, you know, a few lines of text here,
and what I'm going to do is add some quotation marks
paste that in
I might actually just paste this plain text just in case there's some formatting,
Okay, so just paste in like that
Now, what I'm gonna do is I'm gonna add in, you know, pretend that we're gonna add in 3 more quotes
So, I'm gonna click on Add New Row
and then I'm just gonna quickly add those in
Okay, so once that is done, what you can do is you can click on Preview
Okay, so that will show you what it looks like.
I want to add in a background so like that transparent black background
And I want change that text to white
Okay, that's just for my website. It's up to you if you want to do that or not
So, for Styling, um, I want to go to Background Color
and I'm gonna select black , set the Transparency down to, maybe. 40%
Click on Preview to see what that kind of look like
Okay, so I'm gonna remove the slider arrow and also the pagination
so you can scroll down here and select No for the pagination and No for the slider arrow
I mean, you can keep them those if you want to. Let's preview that.
Okay, that's about right and all I wanna do now is add some padding on the top.
So, go back to Styling
And I wanna de-select padding for all and I just wanna add, maybe, 5% padding to the top
And you can preview that to see what that looks like.
Okay, that looks about right
I mean, it's not perfect but I think you guys get the example
So, what we're gonna do now is if I change the font color to white,
It might not actually change
Okay, so we'll need to change the font color on the actual row.
Okay, so I'm gonna change. Click on the row options.
Go to Styling
And then I'm gonna change the font color to white.
Okay, and then click on Save.
Okay, once that is done, I actually want to center the slider.
So to do that, I can change the layout of it by hovering over this section here.
Do that, and then I'm gonna paste in like that.
And then I'm going to add in a button below that,
So, what I am going to do is to use this button and basically duplicate it
Okay.
So dupe it, and then just move it down and I'm done.
Okay, so I'm gonna click on Save to see what that currently looks like
and close that
And what I want to do is probably reduce this spacing here
and because there is some, um, spacing set into that button so I'm going to reduce that,
And I'm also going to add a bit of padding to the top
umm, to fix that
Okay, so turn on your Builder
And i'm just gonna double-click on that button
You probably won't have this issue because, um, you might not set it in, but
what I'm gonna do is just to delete that.
Maybe might just change it to 5% and give that a preview,
click on Save
save that
and then I'm gonna to go to Row Options
I'm gonna add some padding to the top
deselect that and add in 5% padding to the top
click on Save
click on Save here,
And then we're gonna close that to see what that kind of look like.
Okay, that looks about right
um, you can, you know, fix this spacing up here and add some more spacing up there if you want to.
but I think it looks about good.
I might want to change the buttton style
and that's just me
So, double-click on that and I might change that to Outlined.
I think that looks a bit better
and then,
Okay, that looks about good. Click on Save
click on Save
and close that
Okay, now we want to test the responsiveness
We're gonna pull it in and see if that works.
Okay, so as you can see that doesn't work yet
Okay. And the reason for that is because I've set the Parallax Scrolling
um, and we don't want that.
So turn on your Builder
and go back to that row
for that background image. We've actually set that to Parallax Scrolling.
We want to set it to full cover
and then click on Save
and save that
close that section
and let's try to pull it in,
So, it's sort of like the iPad ummm, sizing. That looks pretty good.
Let's pull it in even further
Okay, that looks about good.
So, what we're gonna do now is to confirm that before we, um, set everything in.
Go to Responsinator.com, and lets refresh that page.
Okay, so scroll down
And, as you can see, this is our image
So, that looks much nicer than this one, um, because we've reduced the number of modules
inside the actual row
Okay. Um, I might want to fix the padding here a little bit.
And maybe add a little bit padding to the top to make that look better.
Okay, let's scroll down and let's look at what it looks like on the iPad
Okay
Okay, so as you can see here the person still a little bit cut off on the bottom and we can change that as well.
Okay, so let's go back here
And what I want to do is turn on the Builder
And then let's duplicate this one more time,
Okay, and look at this one.
So, for the iPad, um, we probably want to add maybe a little bit more spacing.
Okay, so what we're gonna do is for the 3rd row-
Okay, the 3rd row.
This is the first one, the original
The second one
and the 3rd row
Okay, so if we click on Row Options
and if we add a little bit more padding to the top,
perhaps we could change that to by 7.5% and maybe 2.5% to the bottom
Okay, it's important that you set in the percentages
because that, the percentage, would be dependent on the screen height
Okay, so if you set in pixels, then that would be fixed
Okay, if you set it to be fixed, then there will always be this massive space
No matter what device it is on
Okay, but lets click on Save
Okay, so let's go back to Responsinator.com
and let's just refresh that, and wait for that to load
Okay, so scroll down. This one is the original,
This one is the second copy
and this one is the third copy
Okay, so for the third copy, as you can see, we added some more spacing here
and we've added a litle bit more spacing here
So, now we're able to see the person sitting there more clearly
um, you can add a little bit more spacing, um if you want to.
That's up to you
But I think that's good enough for now
and let's go back here
and let's turn on our Builder
Now, what we need to do is o click on the row options
and for Styling, we want to set the visibility.
Okay, so if you don't have this function
um, it might be because you don't have the latest Themify theme.
Okay, You should actually get it.
You can actually go to my website and go to my blog.
click on Blog and you should see this Shop Tutorial here. Click on this Shop Tutorial.
and what you can do is download the theme here, it uses the latest Ultra theme,
and then after that, go to Google,
and then type in Themify Upgrading and click on the first result here.
and this will tell you to actually upgrade
so you can click on method 3
So this is using the Re-installing the Theme method
Okay, if you have the Themify membership, then you can easily auto-upgrade. Okay.
So, after you've done that then you actually see this things here
Okay, so what we're gonna do is for the visibility of the first one,
we're going to show for the desktop
but what we're gonna do is hide it for the tablet and hide it for the mobile.
and then we're gonna click on Save
okay
Now, the second one is for mobile devices so we're gonna click on Row Options
click on Styling
and for the desktop, we're gonna hide it
and also for the tablet we're gonna hide that as well
So, we're gonna click on Save
Okay, now for the third row. We're gonna click on Options as well,
and then what we're gonna do is click on Styling
and we're gonna hide it for desktop
and we're also going to-actually, we're going to show it for tablet
But we're also going to hide it for mobile devices
Click on Save
and let's click on Save here
and then we're gonna click on Close
Okay, so let's refresh that page
and let's go back to our Responsinator website
and let's refresh the page here
Okay, once that's done refreshing lets just scroll back up
and let's look at what it looks like on the iPhone 5
So, we're gonna scroll it down
And as you can see at the iPhone 5 it looks pretty good,
um, I haven't taken away the space but that looks pretty good.
Now, let's scroll down and we're gonna go to the iPad
Okay, let's scroll down here.
and then that looks pretty good as well
obviously, you can add a bit more spacing
um, it's not perfect but I think you guys get the picture
and that is how we actually set in a super mobile responsive image
and, you know, modules and things like that
Okay, what else we can do is... we can actually turn on the Builder
Okay, so I'm actually going to show you how you can move the button up a little bit
and what I found is if I double-click on this slider here,
Go to Styling and then for the margin
I set a margin of 0%
Okay, so margin is basically outside the invisible box
Okay, padding is the space between here and there,
and margin is actually outside that box
So, if we set it to be 0 percentage, as you can see, it moves up like that.
I might try 2%
See what that looks like and preview that
Okay, so that might look good and we're gonna click on save
click on Save again
and then refresh that
and let's refresh that to see what that kind of looks like
Okay, so that looks pretty good
and what else you can do is actually set the location of the background image
Okay, for example, if we turn on that Builder again.
We go to that second row, click on Options
We can actually set the position - the background position-
Okay, so what that means is that you can set the focus of where that image is
So for example, background position: if we set this to the left top,
and we click on Save
Then when you resize the screen,
you'll focus ,um, on this part and it will always show this part here.
Okay, so if we actually refresh that,
Okay, if we look at the image on the iPhone 5 landscape it sort of focuses on this area here.
but you want it to be focused on this person here
So, what I like to set it as is the bottom,
okay
so it would be right bottom, Click on Save,
'cause its the right-hand side and it focuses on this area here.
So click on Save
and close that
and let's just refresh that again
and as you can see, it gives more focus to the right-hand bottom part here.
So whatever image that you have in there and you want to set it to the focus
So you would look at the location which is the righthand side bottom part,
and you want to select that from the background position
Okay, so if your image was here, you'd probably select the lefthand top
Okay, so when it's re-sized, then it will always show that part.
So, that's pretty much it and I hope you guys enjoyed it.
Umm, Thank you for watching and look out for my other tutorials.