Why we should Add a Responsive Hero Section in blogger website.
To Understand this thing, you have to keep in mind the benefits of a hero section. Which are given below so you can easily decide that you should add it or not. So take a look of advantages of Adding a Hero Section in Blogger.
Advantages of Add a Hero Section in blogger:
- A quick introduction about your Website or a person.
- User can easily understand where is he.
- User will not confuse that this website is for him or not he can decide that it is good for him or a time waste.
- A Good hero section can increase trust between visitors and the audience.
- So hurry up and add it to your Website.
How to add the Hero Section to Blogger:
I have discussed the benefits and much more. You might were be asking that it's OK but tell us that how we can add it in our website. So without wasting any time let's see our source code of this project. Now this time it is not from codepen, I personally design it. I design it from inspiring the hero section of nafie HTML template. But I have not copied it. I have designed it by inspiring so there is no problem in usage. Now a question comes in mind if a Hero section is important for a website so why I have not added it to my website. The answer is very simple I am using a CSS slider instead of a Hero section.
<div class='hero'>
<img class="hero-image" src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0JAfaRtI1ItnYibXjdUWiGURISzs8MlSNPex5YrYPk0Rb2YvcYL3oVPtTBuJ1a1e4VxU9OFQBtddJkPM5nKAKzsSsh3-5EoQVUlY5CWI-lr-fZ9TqRodVxaw0Ds3PuVVoG_-WpldwsBU/
" alt="Paris" style="width:80% "/>
<div class='hero-items'>
<h2> Design An Awesome
Environment to Experience</h2>
<p>Our blog helps to Provide Latest Tips and Tricks tutorials about Blogging <br/> Business, SEO Tips, much more. this Blog and stay tuned to this <br/> blog for further updates.</p>
<div class='butto'>
<button id='full'
onclick="window.location.href = 'https://www.pskathait.in/search/label/SEO%20Tips';">
Learn SEO
</button>
<button id='outline'
onclick="window.location.href = 'https://www.thekathait.in/search/label/Blogger%20Tips%20%26%20Tricks';">
Blogger Tips & Tricks
</button>
</div>
</div>
</div>
<style>
/* hero items */
.hero {
background-color: inherit;
}
.hero-image {
display: block;
margin-left: auto;
margin-right: auto;
margin-top:-10%;
}
.hero-items {
display: flex;
padding: 1rem 0;
flex-direction: column;
align-items: center;
text-align: center;
margin: 0 1rem;
}
.hero-items h2 {
font-size: 40px;
font-weight: 700;
width: 80℅;
text-align:center;
margin-top:-5%;
}
.hero p {
font-size: 17px;
font-weight: 500;
margin: 1rem 0;
text-align:center;
}
.hero button{
padding: 1rem 4rem;
font-size: 17px;
font-weight: 600;
color: #fff;
border-radius: 3px;
transition: all 0.2s ease-in;
margin: 1rem 0;
border-color: #000000;
}
.hero button:hover{
cursor: pointer;
background: #ff9900;
transition: all 0.2s ease-in;
}
.butto{
display: flex;
gap: 1rem;
}
#full{
background: #ff9900;
}
#outline{
background: none;
border: 1px solid #000000;
color: inherit;
}
#outline:hover{
background: #ff9900;
color: #fff;
}
@media(max-width: 780px){
.hero h2{
font-size: 40px;
width: 100%;
}
}
@media(max-width: 400px){
.hero-items{
align-items: flex-start;
text-align: left;
}
.hero h2{
font-size: 30px;
}
.hero p{
font-size: 16px;
}
.hero button{
padding: 9px 15px;
}
}
</style>Version 2.0 (Different styling for desktop version)
<div class='hero'>
<img class="hero-image" src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0JAfaRtI1ItnYibXjdUWiGURISzs8MlSNPex5YrYPk0Rb2YvcYL3oVPtTBuJ1a1e4VxU9OFQBtddJkPM5nKAKzsSsh3-5EoQVUlY5CWI-lr-fZ9TqRodVxaw0Ds3PuVVoG_-WpldwsBU/
" alt="Paris" style="width:50% "/>
<div class='hero-items'>
<span class="hero-categorise">Coding / Designing / Experiencing</span>
<h2> Design An Awesome
Environment to Experience</h2>
<p>Our blog helps to Provide Latest Tips and Tricks tutorials about Blogging Business, SEO Tips, much more. this Blog and stay tuned to this blog for further updates.</p>
<div class='butto'>
<button id='full'
onclick="">
Learn SEO
</button>
<button id='outline'
onclick="">
Blogger Tips & Tricks
</button>
</div>
</div>
</div>
<style>
/* hero items */
.hero {
background-color: inherit;
display: flex;
flex-direction: row-reverse;
margin: 0;
align-items: center;
align-content: center;
}
.hero-image {
display: block;
margin-left: auto;
margin-right: auto;
}
.hero-items {
display: flex;
padding: 1rem 0;
flex-direction: column;
margin: 0 1rem;
width: 60%;
}
.hero-items h2 {
font-size: 22px;
}
.hero p {
font-size: 15px;
font-weight: 400;
margin: 1rem 0;
}
.hero button{
font-size: 13px;
font-weight: 600;
color: #fff;
border-radius: 3px;
transition: all 0.2s ease-in;
margin: 1rem 0;
border-color: #000000;
padding: 0.8rem 0.6rem;
}
.hero button:hover{
cursor: pointer;
background: #ff9900;
transition: all 0.2s ease-in;
}
.butto{
display: flex;
gap: 1rem;
}
#full{
background: #ff9900;
}
#outline{
background: none;
border: 1px solid #000000;
color: inherit;
}
#outline:hover{
background: #ff9900;
color: #fff;
}
@media(max-width: 780px){
}
@media(max-width: 600px){
.hero{
display: block;
margin-top:-10%;
}
.hero-image {
width:80% !important;
}
.hero-items{
align-items: flex-start;
text-align: center;
align-items: center;
align-content: center;
width:90%;
}
.hero p{
font-size: 14px;
}
.hero h2{
margin-top:-10%;
}
.hero button{
padding: 9px 20px;
}
.hero-categorise{display:none;}
}
</style>Changes in this Code:
A lot of websites are using light mode and dark mode feature in there design. So a problem occurs in this design, that is the background colour. hich doesn't changes in dark mode and look your website so bad. So we also solved this problem we have add a guide abut changes to colours in this Hero section.
Tags:
Add a Responsive Hero Section in blogger website.
Cool and stylish designed Hero section for blogger website.
A complete guide about adding a responsive hero section in blogger website.
Opinions:
As compare to benefit and disadvantages we have a result. That if it is looking good in your Website so add it. You have to replace the heading lines an introduction paragraph with your details. According to your niche.