Blog Posts Hero Section

You want to make your blog post to wow your audience ?  

The first thing they will see when they land on it, is the hero section.  The section right at the top of the post.

In the this video, you can see how to achieve this with Thrive Architect and Thrive Themes.

Click play on this video to learn more.

You can 

Transcript:

So there was a question this week on Facebook about creating a custom header for a blog post. So this is a blog post from Authority Hacker. They're using thrive themes, they're a very good blog and podcast as well. This is one of the example given and so this blog post has this particular hero section, with title, subtitle, author and dates like this. Then there's an image and it's on a fixed background. So I'll try to replicate that with thrive themes on my own blog, and create a blog post out of it.

    So let's give it a try, so I'll go into on my site, so I've added the new blog post. Put the title in, I've put a featured image that's the default. You should have a featured image so when you share it's there as well. It's going to be on your blogs index page as well. Then if we just save draft and we look at it by default it looks like this. So we have the title of the post, the featured image and then the rest of the text would go here. You can add headers and other content in there, all through and the comment section. Of course, it could it be different depending on your theme, this is using the ignition theme from thrive themes. Most of the theme will have something very similar to that. Then we have the side bar here, that shows up by default for most people.
 
    So the idea is to remove ... I had people asking me I want like this hero section with the side bar, but it's one or the other. Maybe there would be option of moving this down but I think it's just better to get rid of it. This section in general, if you look at a video recording of your website, whether with Hot Jar or Full Story, you'll see that actually if you analyze yourself looking at a blog post, you will start reading there and going to the content. You will basically ignore whatever's there. You might come back to that when you're finished but usually it's not even looked at that much. I've seen a lot of clients as well, their conversion rate on the side bar widget is not very high, compared to the other type of opt ins we can have with thrive themes. So it's not really necessary to my taste anyway.

    So for this exercise we want this to be a full section. So let's try this, so the first step I'm going to do is go to the bottom of the post when we edit it and there's the thrive themes options and the display options. Then there's a few of them. So the first thing we'll do is set it to full width and I'll do it one by one so we see how it looks. I'm going to save the draft and just refresh here. So putting it to full width basically we get rid of the side bar completely. It says full width but it stays within the container of the theme, and it's responsive so it's going to adjust for mobile. But it stays within the container like that.

    So the next thing we want to do is remove this, if we go here, so post title we're going to hide it and the featured image as well, no featured image. That way we're going to hide this, this display share button, we'll see how it goes. We could switch it off as well and use something else. So let's save draft here, and then just refresh. So now we got rid of the featured image and the title, and we have the content itself. So we're in thrive architect right now, so we can start working right on this. So we can take a background section, bring it right at the top and so we have the page, it's going to stay by default within the frame of the blog post. What we can do is set it to stretch to fit screen width. Then we could put like this, and then we can force it to a color, so the example we add red, so let's see here I'll take lets say this dark blue and click apply.

    So you'll see here that I do have this container and something custom I've done on my blog to have this drop shadow and this border. You might not have it depending on your blog layout. But in my case if I want to get rid of this, what I could do is I could use negative margins. I could go in there and I've got this background as section selected, so I'll just use this like this, and whoops ... Just bring it to the top like this, and what I'm going to do as well ... So this is the original text that I had, I want this to be in full width because now with this border it doesn't look that great. So what I'm going to do is drag another background section, put it below here, put it full width. Set it to white, so just select white like this, and just so we can see it I'm going to do it like this. I'm going to move the text that I had here, I'm going to move it right in there. So now we have our text and we still have this border and you see here.

    So what we could do is take this and use a negative margin on the bottom part and just hide this like this. So at least now we've got our section, we could play with margins as well, or padding here. So at least there is a little gradient, but I think it looks better than by default. So again you probably won't have this problem, depending on how your theme is customized. Now what we can do is use the different elements of thrive architect and build our sections. So the idea is to override ... Is to write the title of the blog post and the date manually, and the author. Ideally we want to, so if we put the header here, put H1, so it replaces the H1 as well, so we could set it to wide. Let's say we call it, we can do basically what we want. If I take this here I could vertically align it so it's like this, I could have a subtitle, so I could go and drag something here, center it. So that's H2, put it to white here, and say, of course so I could change here some of the spacing.
 
    Then I could add if we go back to this one, it's basically, so here they ... I'm not sure, we can inspect, see how they've done it. So it's basically they've just typed the information there. We could set it to something else but I could go in and type, and today is May 15 2018. So you can have a look on your other blog posts, make sure it's consistent and uniform throughout your website. But it could be something like this, we could definitely play with the layout. So basically you can do whatever we want, and then it's a question of adding an image maybe. Okay so instead of adding an image I'll use the background video, see how it looks like. I'm doing it straight up there so lets see how that would look. So I've got this nice video here, and I'm going to remove this.

    Okay so I've used this video background here, typed the URL there, what I'm going to do is just maybe put it, I could leave it that width. What I'm going to do just to make sure that we can read the text is to put this layer on top. So I'm going to put radial like this, so that's another trick that you can use. So in the middle I'm going to put it darker in the middle, just so we can increase the contrast there. It doesn't affect too much, so you see by default would be like this and then we're going to just add something like this. Of course this video is probably not the ideal one, the ideal video because this is different type of sometimes it's dark and sometimes it's quite white. But I think it's going to be still quite good, and lets see, so just save this.

    So that's an example of having a custom header for a blog post. What you could do as well is take this, clone it and then reuse it for some of the section of your blog post as well. So instead of having just at the top, you could have it somewhere else. So that's it, hope you've learned something. You can use any type of content at thrive architect has to offer. I'm going to post this right in there, so you'll actually see it, and I might write some text as well. But it'll give you an idea of what it looks like on the blog post. So if you're watching this from YouTube have a look at the links in the comments section or in the description, so you can have a look at the blog post itself. That's it for today.