MEET SITKA | A super-customizable modern WP theme!

Okay
  Print

Add Promo Boxes to Alder

Please note: This tutorial is specifically for the Alder theme.



Some of our themes, like Redwood and Oleander, offer an element called Promo Boxes which are 3 horizontally-aligned hyperlinked images, usually beneath the Featured Area Slider element. By default, Alder doesn't include this feature, though it is possible to manually insert Promo Boxes onto its post feed/blog page. 

To do so, navigate to Alder's WP Dashboard > Appearance > Editor > and open up the file titled "index.php". 

On Line 6, copy and paste in the following block of code:

<div class="promo-area">
<div class="sp-container">
    
    <div class="promo-item" style="background-image:url('YOUR-IMAGE-URL-HERE')">
        <a href="YOUR-LINKING-URL-HERE" class="promo-link"></a>
        <div class="promo-overlay">
            <h4>PROMO BOX 1 TITLE</h4>
        </div>
    </div>
    
    <div class="promo-item" style="background-image:url('YOUR-IMAGE-URL-HERE')">
        <a href="YOUR-LINKING-URL-HERE" class="promo-link"></a>
        <div class="promo-overlay">
            <h4>PROMO BOX 2 TITLE</h4>
        </div>
    </div>
    
    <div class="promo-item" style="background-image:url('YOUR-IMG-URL-HERE')">
        <a href="YOUR-LINKING-URL-HERE" class="promo-link"></a>
        <div class="promo-overlay">
            <h4>PROMO BOX 3 TITLE</h4>
        </div>
    </div>
    
</div>
</div>


In this block of code, there are 3 sections.  Each section is related to 1 of the 3 Promo Boxes.  

Each section of code has some dummy text in it to help you know where to insert the necessary text, image, and hyperlink for each Promo Box. Please be sure to replace the dummy YOUR-IMAGE-URL-HEREYOUR-LINKING-URL-HERE, and PROMO BOX TITLE text for each section with your own images, links, and text. 

NoteFor linking in an image, we recommend first uploading it to your WordPress Media Library. Once in your library, click the image and a box will pop up with its unique URL. Use this URL to pull in your desired image to the Promo Box.

Be sure to save changes when finished.


Lastly, navigate to WP Dashboard > Appearance > Customize > Custom CSS/Additional CSS and copy & paste in the following code:

/****************************************/
/* ADD PROMO BOXES TO ALDER
/****************************************/
.promo-area {
    overflow:hidden;
    margin-bottom:60px;
}
.promo-item {
    display: table;
    width:363px;
    float:left;
    margin-right:30px;
    height:200px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding:16px;
    position:relative;
}
.promo-item:last-child {
    margin-right:0;
}
.promo-overlay {
    height: 100%;
    display: table-cell;   
    vertical-align: middle;   
    text-align:center;
    border:1px solid #fff;
}
.promo-overlay  h4 {
    color:#000;
    line-height:1.5em;
    padding:8px 12px 8px 13px;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:2px;
    background:#fff;
    display:inline-block;
    max-width:60%;
}
.promo-link {
    position: absolute; 
    height: 100%; 
    width: 100%;
    top: 0;
    left:0;
    z-index: 999999;
    display: block
}
@media only screen and (min-width: 942px) and (max-width: 1170px) {
.promo-item {
    width:275px;
    height:172px;
}}
@media only screen and (min-width: 768px) and (max-width: 960px) {
.promo-item {
    width:213px;
    height:135px;
    margin-right:18px;
}}
@media only screen and (max-width: 767px) {
.promo-area .sp-container {
width: 75%;
}
.promo-item {
    width:100%;
    height:176px;
    margin-bottom:30px;
}}
@media only screen and (min-width: 480px) and (max-width: 768px) {
.promo-item {
    width:100%;
    height:200px;
    margin-bottom:30px;
}
.promo-item:last-child {
    margin-bottom:0;
}}


Save changes to your Custom CSS when finished.