TishConstruct: Replace Page Header with Custom Content

If you use our TishConstruct theme, you might want to replace the page header with a custom content on a particular page. Here is a step by step guide how it can be done:

1. Login to your Admin Panel > Navigate to Left Menu > Pages > Add New or Edit an existing page

2. In right column, select ‘No Sidebars Page’ as a Page template:

3. Inside the content, insert HTML code for your new Page Header.

Here is an example html content, you can copy-paste it and replace image url, text, titles, etc. for your website:

<section class="fluid-section-one full-width" style="background-image:url(https://tishonator.com/themepreview6/tishconstruct/wp-content/uploads/sites/37/2021/02/construction-1491693_1280.jpg)">
   <div class="outer-container clearfix">
      <!-- Content Column -->
      <div class="content-column">
         <div class="inner-column">
            <div class="sec-title light">
               <div class="separater"></div>
               <div class="title">Welcome Our Company</div>
               <h2>Our 28 Years <br> Working Experience.</h2>
            </div>
            <div class="text">Building Expert explains how you can enjoy high end flooring trends like textured wood and with new laminate flooring. As the general contractor, we first create the highe rust integrity with our clients.</div>
            <!-- Fact Counter -->
            <div class="fact-counter">
               <div class="row clearfix">
                  <!-- Column -->
                  <div class="column counter-column col-lg-4 col-md-4 col-sm-12">
                     <div class="inner wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="1500ms">
                        <div class="content">
                           <div class="icon flaticon-man"></div>
                           <div class="counter-title">Trusted By</div>
                           <div class="count-outer count-box">
                              <span class="count-text" data-speed="3500" data-stop="4390">0</span>+
                           </div>
                        </div>
                     </div>
                  </div>
                  <!--Column-->
                  <div class="column counter-column col-lg-4 col-md-4 col-sm-12">
                     <div class="inner wow fadeInLeft" data-wow-delay="300ms" data-wow-duration="1500ms">
                        <div class="content">
                           <div class="icon flaticon-worldwide"></div>
                           <div class="counter-title">Certification</div>
                           <div class="count-outer count-box">
                              <span class="count-text" data-speed="2500" data-stop="2310">0</span>+
                           </div>
                        </div>
                     </div>
                  </div>
                  <!--Column-->
                  <div class="column counter-column col-lg-4 col-md-4 col-sm-12">
                     <div class="inner wow fadeInLeft" data-wow-delay="600ms" data-wow-duration="1500ms">
                        <div class="content">
                           <div class="icon flaticon-trophy-1"></div>
                           <div class="counter-title">Awards</div>
                           <div class="count-outer count-box">
                              <span class="count-text" data-speed="3000" data-stop="3390">0</span>+
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>

4. Then we need to hide the Page Header in that page

Insert another HML code to your page, and insert the following html code inside it:

<style>

.page-title {display:none;}

#main-content-full, main-content {
   margin-top:-30px;
}

</style>

5. Save changes

Here is a demo page with the applied above steps: