Are you struggling to hide something on your WordPress website? Maybe you only want hide a section to hide on a mobile device? Well the Divi Theme lets you tackle this without code. Kori Ashton will show you both ways to do this “hide” option. One way is with the Divi Theme – the other is using code only with your regular theme. Below are a few of the videos that she mentions in this tutorial. Hope this helps you!
Full Video Transcript
Hey y’all, happy WordPress Wednesday my name is Kori Ashton. Today’s video is to teach you how to use the Divi Theme and to hide any element that you want on your entire website. You can literally hide anything on a mobile device only, on and iPad or a tablet view, or desktop view, or just in general, just hide it.
Maybe you want to work on an entire section later on and you’ve already started deving it inside of your live site, but it’s just not quite ready yet. How do you hide that for now, so that your viewers can’t see it. Or what if you just don’t want a section to appear on a mobile device. How do you hide that? I’m gonna show you right now and there’s no code required.
But, if you’re not wanting to use the Divi Theme I’ll show you at the end of this video how to do it without the Divi Theme using code, super simple, copy and paste, don’t panic, easy to do. Let’s go you guys.
Liquid Web – Sponsor
This video’s brought to you by Liquid Web, the most helpful humans in hosting. They’re my go-to for all my websites for hosting for extra security, especially if you’re running on WordPress. So be sure to check them out. I’ll put a link below so you can get 35% off your hosting right now. I’ll put that link down below.
Divi Theme
Alright you guys let’s get to the Divi Theme. So I use Divi on AskKori.com. You guys know that if you follow my channel. I freaking love this theme. It’s amazing. Super easy to use and it has so many templates that you can just plug and play all your content.
Hiding A Section In Divi
But what if you’re trying to work on a section and you just need to hide something for now? Or you don’t want it to appear on a mobile device? Or maybe you want it to appear differently on a mobile device? How do you do that? I’m gonna show you right now.
You do have to enable the builder in order to do this, so we wanna be able to go up here and click “enable builder”. With that enabled though now we are using the Divi builder, which by the way if you don’t wanna change your whole theme, and you just wanna go by the Divi builder and plug it in as your page builder, you can do that and get this function. Super cool to do.
But I do highly suggest taking a look at the whole theme itself because it’s really robust. Super easy to use once you get the hang of it. A little bit of a learning curve because it’s got a lot of bells and whistles to it. But notice as I’m hovering over each section. I start to get these editable icons now that allow me to do different things to the different sections. With that I’m able to manipulate and change and add code and affect these different areas.
So, I’m gonna show you right here using again the Divi Builder. I’m hovering over this section. I just don’t want any of this to appear right now. All four of these sections. One, two, three, four. I don’t want these to appear at all. So, let’s go into the gear icon here. Open that up.
Once you do that you’ve got this cool little editable side here on the left side of your screen. And we’re gonna want to go to “Advanced”. Open up “Advanced”. Go down here to “Visibility”. Open that up. Check this out you guys. Disable on phone, tablet, or desktop. And disable just means don’t show it or hide it. So, you can say disable it on phone, disable it on tablet, disable this whole section on desktop. And you can click check that. Notice that it kinda muted it out.
You’re still able to see it because what we didn’t do is we did not delete it. We don’t want to delete it because maybe we want to render it again later. But, we’ve hidden it in a sense. Right? So, now that’s done, you come down to your three dots at the bottom, go ahead and click save. So that function is now saved and is rolling live to all your viewers.
You can come up here now to exit the visual builder and when you scroll down those are completely gone. Hidden away, but not deleted. Now, what if we only wanted to hide those things on the mobile view? I’ll show you how to that. Lets go ahead and enable the visual builder again. Obviously it kinda makes sense. Right? You would only click on disable on phone. Right? So, let’s scroll back down. You’re gonna see that area is still there. I, in fact, did not delete it. I just kinda hid it. Going to “Advanced”. Going to “Visibility”. Click off tablet. Click off desktop. Because we want them to view there. Click check for save.
And then let’s show you what this mobile view would look like then. I’m seeing it on a desktop. Right? Let’s go to mobile view. This is gonna shrink down so I can see exactly what it’s gonna look like on a mobile device. And you’ll see here these are muted. Look at that. It’s gonna stack nicely in our mobile view. And these are muted so we won’t actually see them. So, let’s click save. That’s gonna roll live. Exit the visual builder. We should still see them on desktop. Right? There they are right there.
And let’s use the Chrome extension to view it in mobile. Let’s go down to an iPhone, let’s say, six, seven, eight. There it is. Scrolling down. We do not see them. Completely hidden. That plays off of media query.
Hide A Section in CSS
So let’s say you don’t want to invest in the Divi Builder, you don’t want to invest in the Divi Theme, you just need to know the code. How do you do that? It’s all based on media queries, and I’ve got a whole video that teaches you more about it. But, I’m gonna show you the code right now that you would use to just jump into your CSS file and add a “display none”.
So if you watch my channel you know that I love jumping over to w3schools.com and they have a great tutorial here on the display property for your CSS file that shows you very easily how to tinker an play with “display:none;”. See this? So, whenever you type this inside of your CSS file whatever element you’re assigning this to, this property to, it will actually hide it.
Now, this particular property will hide it across the board, across all devices. Right? Display none. So if you wanna hide your footer or hide a certain element on your website, you would add this to that. If you wanted to do it based on the device, you would use the other video I have listed below for the media queries. But, for this one I’m gonna put this link in the description box as well so you can come over here and play around with it, Because see this little button that says “Try it Yourself”? You can do that.
You can come over here and try it yourself. So, let’s come on over here, click “Try it Yourself”. You’ll notice here that it’s using “display: block;” up here. Right? Display block. And it’s displaying this is assigning to our links for “a” for our anchors. And we are just gonna change that to “none”. And click “run”. And see how they disappeared? They’re still there. They’re still there. But, we’ve told it- oops block. We’ve told it to hide basically. To don’t display it. None. Run. See. Very cool right?
So, with the display none you can actually take that little bit of code, go over to your CSS file, find the element in the sheet that you wanna assign it to, and type it in there and say “display none”. And if it doesn’t work and you know you’ve typed it and spelled it correctly, you can always add the important sign to it That one right there. Exclamation point important. You add that to it and it kinda yells at it. It tells it absolutely do this and it will override everything inside of any other style sheet. That should push it through and hide the element for you.
Pretty cool right? And I told you it’s not a whole lot of code so you should be able to do this. But, if you are a Divi user please go into that “Advanced” tab and go into the “Visibility” area and just tinker with those three different ways of hiding things. Super easy to do.
I use it a lot whenever I’m developing sections on a page that I don’t want to be seen just yet. I just hide it for now on all three elements. Just make certain that nobody can see it while I’m kinda editing it and playing with it. And then when I’m ready to go live you can take it off. I’ve also done it for countdowns. Let me show you one more quick example before you go.
Back over here on AskKori.com on my home page. When I have an upcoming event, I want to do a little countdown over here and right now you can’t see that, but there is, inside of Divi, the theme itself. There’s a widget for a countdown. A timer right? That counts down to an event. Kinda cool to have. Notice here I enabled my visual builder. And it’s hiding here. “Kori is Speaking at WordCamp US”
So, I can come in here if I wanted to and change this out. I’m gonna go to “Advanced”, I’m gonna click on “Visibility”, and open this up so that it’s able to be seen on all of them. Click the little checkmark. And now I’m going to edit what the content says. Right? Because, WordCamp US is over for 2019. I’m going to be speaking at WordCamp Phoenix 2020. So, lets open that up and type that in. And that is coming up in February the 7th through the 9th. So, we are gonna put that on there.
And it probably starts closer to 9 o’clock or so maybe earlier for registration. But, you can put that in there you can put the minute everything like that. If you have a link that you want them to come check out. We can do that here. Grab the link. There you go. There’s the module link. And even if you want to inside the button say grab tickets. So, let’s do that and go to the button. And say “Buy Tickets”. Put the link in there. There you go. Click okay. And again now that will be active once I click save. We can exit the builder. And now it’s there.
Check that out. “Kori is speaking at WordCamp Phoenix” There you go. Buy tickets. That clicks over. As soon as that event is done though if I don’t wanna have to rebuild that every time I can just come back in here, enable my visual builder, and hide the element. Pretty straight forward right?
So, I love this easy to use tool. Especially inside the Divi theme. If you’re not familiar with Divi yet I’ll put a link down below. Go check it out. You can also tinker and play around with their builder online and really get a sense of how easy it is to drag and drop and change elements. It really opens up the possibilities inside the world of WordPress if you’re not a developer like me. I’m not a developer. I only know how to code just enough to get in trouble.
Alright y’all. Check out Liquid Web again. Please tell them you are thankful that they are a sponsor of our channel, because they help me deliver this content to you every single WordPress Wednesday. I hope you are having a great one. See you next WordPress Wednesday. Bye Everyone!
Health Update
Hey y’all thanks for sticking around till the end of the video. I know that it has been a crazy six months, at least for me it has. You guys have seen me go from being in the hospital. Literally my first video that announced that I was diagnosed with Cervical Cancer back in July of 2019. And you’ve watched me just kind of go through this and I’ve tried to do videos there’s just been a couple months that I’ve been a little slow because I was either in a surgery or in the hospital or doing radiation and chemo.
But as most of you know, you heard my news announced about two weeks ago now That I am in full remission. What what!
So all of your amazing support, love, and prayers thank you for all that. But, it has definitely been a struggle. So, I’m doing my best to get my energy back up and running and consistent. And trying to get back out in the WordPress world.
WordCamp
So, I will be at WordCamp Phoenix. So, please come see me if you are in that area. Come attend. It’s going to be amazing. There are so many speakers coming to that event. It’s really good. There are also all sorts of other WordCamps literally all around the world. So, if you’re in a community that has one click the link below.
I’ll put it into the description box to go find WordCamps in your area. But, most of the times it’s like $25 to grab a ticket. You come be apart of things. That includes your lunch both days. That includes typically some free swag like a T-shirt or something cool like that. Just come be apart of things because I promise you it’s worth the value.
Even if you come and get one little nugget that’s gonna help you improve your design process, your development process, how you sell websites for clients, how you engage with clients, even just how you host your websites and security. There’s all sorts of vendors that’ll be there.
Anyway, this turned kind of into a spiel about WordCamps. I wanted to tell you. I’m doing great though. Thank you again for all you love and support. And I hope that 2020 is amazing for you, because it’s gonna be for me I’m claiming it now. Alright, see y’all next week. Bye everyone!
