Video Summary

All right, in this section, we are going to cover the Splane on settings. And basically what we’re gonna be able to do is we’re gonna be able to target different elements on our website and choose when and when not to display them. This is really going to be powerful when we start talking about mobile optimization, and where are we going to be able to have things be able to be viewed on desktop and not mobile and vice versa? And really, the reason why that becomes powerful as is when we’re talking about a website that’s being viewed through a desktop computer or a laptop, we get a lot more real estate from top to bottom and left to right. So we’re able to add more features more options for the user, but when we’re talking about going to a mobile phone, we only have so much width and so much height to work with. So features that might work very well on a desktop might not work well on a mobile phone or a tablet. So we want to choose when and when not to display them. Now going from desktop to mobile will be near the end of this section because that’s the last thing we really need to focus on. But for right now the ideology is is that certain times we want something to display and sometimes we don’t. Also to is we’re going to run into certain websites and plugins and themes that have that forced us to have different features on there that we might not want to use. And instead of having to go through all lines of code, we can just instantly choose select this element and choose Display. So from building off of the last example, I have an order or an ordered list right here I have options one through four. The only difference is is that I put a class here and I made it as an option three. So this way we can just target this options three. So we’re going to come here and remember when you were using classes, we have to use a period and then we do option. I have options three, and also to is if you ever forget it’s always good just to potentially just copy what you had for your class and then paste it right in here. So that way you know you don’t have any misspellings or you add an extra character or two. So that way, it works just the way you want it. So we’re going to come here and let’s do display. 

None and what that did is just took option three, and now longer, we no longer see option three in our list. And let’s I think the concept is very straightforward and simple. But let’s go into a website and actually play with the Inspect tool. So we’re going to use wordpress.org. I’m going to go into kind of a deep section of what what you guys can use to leverage this open source website where you can get a lot of you can get a lot of plug in information. You can learn from the community you can set up a lot of different stuff, but wordpress.org is built off a WordPress theme. So this is a huge part where you’re going to run into a theme where it might force you to have the search icon right here. But for most of you you’re not going to have enough content on your website for someone to search through. I mean your you know, most most businesses have a five or 10 page website that just outlines the services that they have about their company, how they can get in contact and might have a blog section. Now if your blog section ends up, you know, maybe you have 1000s of blog articles that you have on there, you know, maybe having that search function might be worthwhile, but for the most part, you might not want to have this. So what we’re going to do is we’re going to find this, this little section right here and what we’re going to do is where it’s gonna come down here, and I’m gonna get into this inspect tool in a later section and really in depth but for the most part, what I’m what I’m saying here is we’re targeting this right here. And this is the like, again, this is the HTML of the website that we’re inspecting and here’s the CSS that we’re inspecting. So if we come in here and just do display and put none that is gone. So now if we try to come back here and click this, we can’t we so we just essentially took away that heat or that search feature of that maybe a theme was forcing us to have and now we’re able to take that away. 

Think about that this website and we’ll just go through this. This website right now that we’re looking at has all of this lines of code for this HTML code that they’ve built on this, right? I mean, there’s just probably hundreds, almost maybe 1000 lines of code for here. And if you’re thinking about if you open certain one of these up right, now there’s more lines of code then you can just kind of keep going and going and going. So there’s a ton of code that these guys bill and imagine having to go through not only the HTML but potentially the PHP to find out where exactly they put this search icon. And then go in there go into the code and delete that. That’s a lot of time, a lot of effort that’s not well spent, versus when we can actually just, if you refresh this again, it pops back up. Because we’re just changing the end when you’re when we’re using this inspect tool. We’re just changing the CSS that we see it doesn’t change it for everyone else. This is going to be a huge tool that we’re going to use once you start hopping into WordPress and really playing with the themes but so if I refresh it, it goes back to normal and if we just come here and target this again, And we hit display. 

So it’s a very powerful tool that took us what maybe two seconds to find and remove that versus of maybe spending like 2030 minutes to an hour finding exactly where that’s at And removing them manually. So with that being said, I think you guys see the power of the display none studying, and we will be using that a ton. So with that being said let’s hop into the next lesson.