- 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.
(upbeat bright music)
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.
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.
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.
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.
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 check mark.
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!
(music swells)
(bell chiming)
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.
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!