How To Remove Your Page Title and Footer

Welcome back to the User Experience podcast!  This week we're going to remove the Page Title and Footer Links, to get the "Landing Page" look. 

Grab the code from the windows below and give it a shot.  

Thanks for joining us in the User Experience podcast series of page design tutorials.

Remember, you can get more advanced help in Juci's "Summer of CSS Magic" program.

LEARN FROM A PRO

For detailed help in your own MV site with design like this and many other style features, please visit our friend Juci's program "Summer of CSS Magic" -- where you can get individual help making your MV shine!

CSS CODE

Copy the code below and paste it into the CSS field, in the "Advanced" section of your Page.

AUDIO

TRANSCRIPT

Hey, I'm Steve knots. Welcome back to the User Experience podcast. We are in the middle of our summer Page Design series, where we show you little tips and tricks to tweak your pages and make them look great whether you're building a sales page, or something inside a module in lesson or possibly a page on your blog.

So today, we're going to look at how to remove your page title and footer links. The page title is this thing right here that says Page Title. And the footer links, of course, are these things at the bottom that are helpful, but maybe you don't want them on everywhere. Like a sales page, you don't want people to click these links and navigate off your sales page, you want them to click the button and sign up here. So before we jump into how to do this with some code, it's going to be quick and easy and painless. And I'll help you make sure you don't break your site. Let me remind you on the MemberVault blog at courses dot VIP member vault.com We have a post called the CSS library where you can find all of the previous episodes as links, Episode list, how to add custom buttons, how to make drop down menus with the accordion that was cool, how to make a background box, all this cool stuff. And today, we're going to add in the page title and footer links.

And this is all part of our summer series, where we are helping you design your pages. If you want some more help from a real professional who actually knows what she is doing. Please sign up for the summer of CSS magic that's available through a link on the MemberVault site, we'll help make sure it's easy to find. Our friend Juci who is a professional coder is doing a whole series on how to really design this stuff to match your branding on your MemberVault site to make your pages look great, change the colors, change the style, change the font, whatever you're doing, she is the person to help you with her program.

You can see the modules, the list of ingredients, what you're going to do page, tweak basics, eye catching page sections, all this kind of stuff, I really recommend you sign up for her course to take you through the basics of HTML and CSS programming to make your page look amazing. And it is absolutely worth the investment in that rather than hiring somebody else. spending hours and hours going back and forth on email, you can learn to do this stuff.

And I'm gonna guide you through it as an example of what I do. Now, I'm not a professional coder, but I can show you how to work with the MemberVault tools to do some cool stuff. So first of all, why do I want to remove the page title? Well, this is something like a landing page, I've got a video up top. And it's called the track feedback live stream. This is something I do regularly on YouTube. So first, I want people to just click the button, come in and watch the video. And then if they want to actually participate and submit some music that I review as part of the live stream, there's a call to action join the track feedback crew get feedback twice a week, sign up button takes them to a Patreon page. And there's my video. That's a replay from here we go. Okay, and that's just a replay from the last one as a placeholder for this workshop.

So how do I get rid of that page title so that when people load the page, they only see the video up top, they see my smiling face describing the offer and asking them to sign up. Let's take a closer look. So we're in the Pages section. This is in contact content pages, you see your list of all pages down here how to remove your page title and footer links in visible. Let's edit the page. These are all things you can set up and do on your own MV right away. So I put in a page name, title, I edited the URL to be shorter. I don't want to have all this in my link, just title and footer. Enable comments. No, I don't think I need comments on this.

And here is our page content where I embedded a video using the Embed tool. You can see there as the embed code with the iframe. Then I put in some text, I use the heading one control to make that big out of the links. Here is a custom button which we covered in an earlier episode. To take a look. Let's look at the source code using the HTML switch and see what that all looks like. So this section at the top is the video embed code. When you see iframe and your YouTube link, that's how you know you're looking at the code for a video. h1 is heading one to make the track feedback live stream to make those words appear in big black text. Then we've got normal p tags for the paragraph. And remember with HTML, the tag opens with the two pointy brackets and closes with a forward slash around the pointy brackets. Right. So what do we have for track feedback live stream and then the next word starts 12pm.

Let's just investigate this for review. Open tag h1, pointy brackets h1 that says everything after that tag is going to be large heading the words track feedback live stream and then we close the h1 tag with a forward slash close h1 and the words starts 12pm Our normal paragraph formatting with the p tag. So that's just a quick review of how to understand what you're looking at when you go to into source code mode. I know this looks like all just black and white text. It's not that complicated. You can understand this stuff. And the main idea is we want it to recognize what are we looking at so it starts to, Call to Action join the feedback crew.

And then here is our custom button. which is aligned to the right side of the screen, the link goes to Patreon, target equals blank, that means it's going to open in a new window, not the same window. And then this stuff is how you get the Custom Button code class equals mv custom button that's available in the knowledge base and the help guide tutorials in a previous episode, trying to make it available to everywhere you need to find it. And then finally, to sign up here is the actual text on the button. So that's just the stuff that makes the page appear with the video, the heading short description call to action. This is basically like a landing page, I'm just making a quick little simple thing. But I don't want that heading on top of my landing page, how do I actually remove this because I don't, I don't see any place to actually edit the title. You know what I mean? Well, to do that, you need some custom advanced code.

So we're gonna go to the advanced section and work with CSS. And I have some custom code that I got from Juci, our amazing talented friend. So I'm going to copy this and paste it into our advanced CSS section, h1 text, three XL font bottle. And honestly, I don't really know what that means. I know that what it's doing is referring the program to a location on the page where that field takes place. I do recognize, oh, display none, that sounds like it's telling this thing. Go to that zone, whatever that location is, and do the action of turn off the display. Okay. So that's as much as I'm going to explain about what the parts of the code are. I'm going to save this. And let's see if it works. I have run into some glitches where sometimes it doesn't work. And we'll troubleshoot that I'm not afraid to tell you I'm experimenting, saved, refreshed.

Ah, look at that. It's gone. Bye, bye, no more page title. Now the page loads up nice and clean. So I can take this link, put it into an email, send it out to my list and say, Hey, next Friday coming up, here's an event I want you to be there. And they get the link, they load it up right there branded logo, video, nothing in the way nothing to do but click the button and see what's happening. And then scroll down below the video, a short little thing, if they're on their phone, I want them to see video headline button all above the fold. That's the purpose of a landing page is to get it in their face before they have to even scroll. So we have successfully removed the title by simply pasting in this little bit of custom code, which I'm going to give to you in the notes for this show.

You paste it in there, click Save and refresh your tab. Remember that when I'm doing this testing, if there's any other code in here, what I would do is go select all copy, go to my text document and paste and save it somewhere else. Before I mess with my code. I want to do a copy of the whole thing. We took a look at this whole HTML code, right? Guess what I have in my text document, HTML backup, Paragraph Style center iframe YouTube link video player, track feedback heading one, click in and get synched button COVID Patreon link, get it edited.

I copied this whole HTML section right out of member vault, just in case I make a mistake in this video, I don't want to lose the whole page and have to rebuild it. So make a copy to a text document when you're editing anything in your code. And then you don't have to be afraid you're not going to break your page, you're not going to mess it up. Because you have a backup at the worst. The worst case scenario, I have to copy my backup like this, do Ctrl C, go to my source code control a hit delete, paste in the new one, the replacement. And I got a whole brand new page exactly the way it was at the beginning like reset just no damage everything cool.

So that's the value of backing up it allows you to comfortably experiment inside your MemberVault page without feeling like you're going to break member vaults or, you know break your site or something like that you're not going to break member vault it's going to be okay. So we removed the text header. One more time just to prove this. Let's select this stuff, delete go up here. Click Save preview in a second tab refresh. There's the page title and footer links.

So it reappeared. So we proved that that works. Now I'm going to copy my header stuff and am the footer code. And what is that all about? Well, this target says MV footer, which is telling the page that okay, we're going to do some we're gonna go to the location called footer and do an action, right and what's the action, the action is display none. So basically, we're telling the page when it's loading, do everything normally. And then when you get to the footer section, just don't display it. Just switch it off. It's like a little like, like turn off that circuit breaker. So we paste it in some code. Save and go to the next tab. Command+R refresh. Did the page title remove? it did yeah. Is the footer going to be there? No.

Yeah, Steve wins. It's funny a couple of weeks ago, I was doing a video and I did this whole thing of pasting code saving refreshing and it like totally didn't work and I had to figure it out, doing it live on the fly, which is okay, we make mistakes and we learn from them. And that's how it goes. So now we have a nice clean page, no footer links, which means people have no other stuff to click on, they're not going to get distracted reading my privacy policy or looking into the company history or whatever. They're just like, Oh, here's a video, I can watch the video. That's what I want them to do. And for slightly more information, there's a description and a button.

So now here's where this gets interesting. If you're doing a live workshop, or webinar, a live stream, a q&a, anything like that, where you want to offer a course, to people who have not signed up yet, what you could do is do this whole thing on a page that's public, posted in your Facebook group, your email, list, your LinkedIn, whatever, and then go live on YouTube, or Vimeo or whatever. So people press play, they see you come up, and it's alive. And you can talk to them and say, Hey, here's the program, here's what we're going to do. This is how I help you, this is who is signing up, this is what you're gonna get from it. And now that you understand what the program is all about, I'd like to invite you to scroll down, click the button to sign up, you can have the title of your program, a quick description of would you like to sign up and learn about house flipping real estate, join our program and learn how to flip houses sign up here.

So you can use this strategy to remove the page title. So it's nice and clean, get them focusing on the offer in the video, and then underneath, remove everything else. So they don't even see that they're looking at a course platform on member vault, they just see like, Oh, I'm part of a live video, this person's really cool. They're answering my questions in the chat, I'm on YouTube chatting with them. And then they already thought ahead and planned to give me a link as the audience to give me a title description sub headline link, where I can sign up for this program, if I'm interested. So this is a really cool way there's so much you can do with this to keep people focused on just where you want them to go on the user experience or the customer journey or the path through obstacles and objections to get them to the button. However you visualize your your customers and your audience visiting your MemberVault.

This is a fun way to make it that much easier. So they don't get distracted. There's no holes in your funnel, there's no leaks in the tub or whatever. And you can bring people through to connect with you make a relationship, consume some teaser content, start getting EP, sign up for a freebie, join your subscriber hub. All these kinds of fun things that we can do with MemberVault are just that much easier when you give them a direct path. And these are just little tips to clean up your pages, you know, so that's gonna be it for me for today.

All we did was add six lines of code. One is removing the header or removing the page title. The other one is removing the footer. The activity that I recognize from my minimal programming skills is I'm seeing the words display none, which means we're telling some program not to display something and one of them we're switching off the footer display. The other one, we're switching off the h1 text up in that location. You don't have to go any deeper than that. And remember, save and refresh and your page will be working.

Now if you do want to learn how to make this look different with a different font, different font colors, shapes, sizes, backgrounds, rounded corners, square corners, drop shadows, no colors, shapes, sizes, backgrounds, rounded corners, square corners, drop shadows, no shadows, branded shadows that match your color scheme. These are all possible. I'm laughing about it. But it's really fun. So check out Juci's program summer of CSS magic, you can find the link in the show notes for this podcast. And she will be delighted to help you get your MemberVault looking exactly the way you want to bring your people through to the button.

And let me tell you from working on tech support in the MemberVault chat, I see a lot of accounts and I see some beautiful branding with colors, buttons, matching things, photos. It's amazing what you can do to make your pages look good. I've seen some accounts where I clicked in. I didn't even I found out like is this a member vault account? It looks so good. So there's a lot you can do. I look forward to seeing some of these posts in the Facebook collab after you touch up your site, please post it in there. Let us know what you did, how much fun you had. And again, you can find a list of all these episodes at courses dot VIP member vault.com/css library, and I will put the episode list for this episode into the list. And that's going to be it for me for this time.

Thanks so much for watching. Drop a comment if you have a question or anything and we'll see you next time.