Edit Image and Hero section Button

On the main page, this template uses a hero header. You can delete it or change the appearance as you wish.

Here are some steps to edit the hero section of the template header

Steps customization

  1. On the blogger dasbhoard
  2. Open the Blogger HTML editor
  3. Look for the following code <div class='header-hero ...'>
  4. You will see the complete code like this
<!--[ Hero Header ]-->
<div class='header-hero col-xxl-auto px-5 py-4 text-bg-dark'>
  <div class='container'>
    <div class='row flex-lg-row-reverse align-items-center g-5 py-4'>
      <div class='col-10 col-sm-8 col-lg-6 d-none d-lg-block'>
        <img alt='Bootstrap Themes' class='d-block mx-lg-auto img-fluid' height='200' loading='lazy' src='https://cdn.inputekno.com/tbloggerstrap/assets/img/hero.svg' width='400'/>
        </div>
      <div class='col-lg-6'>
        <h1 class='display-6 fw-bold text-body-dark lh-1 mb-3'>Blogger Bootstrap</h1>
        <p class='lead'>The free blogger template uses the latest version of Bootstrap 5.3</p>
        <div class='d-grid gap-2 d-md-flex justify-content-md-start'>
          <a class='btn btn-primary px-4 me-md-2' href='/search' type='button'>Blog</a>
          <a class='btn btn-outline-secondary px-4' href='/p/newsletter.html' type='button'>Join Newsletter</a>
        </div>
      </div>
    </div>
  </div>
</div>

Information:

  • Change the src='#' attribute with your image url
  • Replace the header words/sentences as desired.
  • Change the href='#' attribute with the destination url
Labels:

Commentaires

Enregistrer un commentaire