Customize Welcome Note Click To Action Section

Apart from the custom welcome note/text for homepage or BlogrCart landing page, pre-installed a welcome note click to action section that can be edited easily using Blogger Template Editor feature. This section will be displayed in all index (or gallery) pages which also display at Blogger search level pages. To customise the text display, the instructions is as follows:-

$ 129.00

- Select Colour - Blue White Black

- Select Size - Size S Size M Size L

Add to Cart

• Codes & Instructions
• Customisations
• Advance Features

To find the the codes in Blogger template editor, below is the codes for reference:- <!-- Welcome section starts -->     <b:if cond='data:blog.pageType != &quot;static_page&quot;'>       <div class='' id='welcome-section'>         <div class='container'>           <div class='row'>             <div class='col-sm-4 text-center'>               <div class='welcome-section-1 bg-inverse'>                 <span><a class='inverse' href='#'>                   <p class='font-md'>Xmas Specials</p>                   <h3 class='font-lg font-body inverse'>Sale</h3>                   <p class=''>Up to 20% Discounts</p>                   </a></span>               </div>             </div>             <div class='col-sm-4 text-center'>               <div class='welcome-section-2 bg-danger'>                 <span><a class='' href='#'>                   <p class='font-md'>Holiday Delights</p>                   <h3 class='font-lg font-body'>Offers</h3>                   <p class=''>200+ Items Up for Grabs</p>                   </a></span>               </div>             </div>             <div class='col-sm-4 text-center'>               <div class='welcome-section-3 bg-inverse'>                 <span><a class='inverse' href='#'>                   <p class='font-md'>Free Gifts</p>                   <h3 class='font-lg font-body inverse'>Free</h3>                   <p class=''>Limited time only.</p>                   </a></span>               </div>             </div>           </div>         </div>       </div>     </b:if> <!-- Welcome section ends --> Each section starts with a <div class='welcome-section-* bg-*'> tag, starting from top, will display the welcome section from left to right order.

To edit a link for each welcome note section, include the url to your internal pages at <a class='inverse' href='#'>. Replace the # to the url required. To edit the top paragraph text, edit the text in between the <p class='font-md'>Edit Text Here</p> tags. To edit the highlighted middle text, edit in between the <h3 class='font-lg font-body inverse'>Edit Text Here</h3> tags. To edit the bottom paragraph text, edit the text in between the <p class='>Edit Text Here</p> tags. To change the welcome note background colour using Bootstrap pre-built classes find below <div class='welcome-section-* bg-*'> and replace bg-* as follows:- bg-success - a light greenish background colour bg-danger - a light reddish background colour (default) bg-warning - a light orangy background colour bg-info - a light bluish background colour bg-success - a light greenish background colour bg-inverse - a dark blackish background colour Add an inverse class to the text within the parent bg-inverse element as a helper to whiten the text colours.

Template users can add an image as the background for each section easily by replacing <div class='welcome-section-* bg-*'> to below codes:- <div class='welcome-section-* style='background-image:url(http://URL-TO-YOUR-UPLOADED-IMAGE);'> Some quick note, the necessary styles has been included. The image displayed will be be centred & covered within the given welcome note section. Preferred image used as follows:- Image type: .png/.jpg/.jpeg/.gif Image file size: below 100kb Image size: 900px (w) X 600px (l) Image ratio: 4:3