At any given point, there are thousands of deals available out on the market. Deals on cloths, furnitures, utilities and also on WordPress plugins, themes, services, hosting and so on.
Creating Deals page is one of the dream for all bloggers. There are few plugins out there which helps you create nice Deals page.
Have you check out Deals page? https://crunchify.com/deals/.
We have recently updated our Deals page with different format but this tutorial still generates nice Deals page and works perfectly.
If not, check it out and let me know what do you think. On Crunchify, we have created this custom Deals page. We haven’t used any custom plugin. Built only based on custom CSS.
If you want to create similar custom Deals page then you are at right place. We will go over CSS and HTML code to create very similar page for you all.
Let’s get started:
Step-1 CSS (style.css)
Open you WordPress theme’s style.css file and add below code into it.
/* For Deals Box */
div.crunchify-panel {
float: left;
width: 43%;
margin: 25px;
padding: 35px 30px 30px 30px;
border: 1px solid #ececec;
font-size: 15px;
position: relative;
box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset;
height: 420px
}
div.crunchify-panel img {
border: 1px solid #e8e8e8
}
/* For Rectangle Dotted box */
.crunchify-deals-coupon {
border: 2px dashed #dd7127;
padding: 3px 3px 5px 8px;
border-radius: 5px;
color: #464646;
font-size: 13px;
display: inline-block;
margin-bottom: 15px;
width: 100%;
}
.crunchify-deals-coupon::before {
font-size: 18px;
vertical-align: top;
content: "\f0a4";
font-family: "Font Awesome 5 Free";
color: #b11f24;
margin: 5px 10px;
}
.crunchify-deals-coupon:hover {
border: 2px solid #dd7127;
text-decoration: none
}
Above CSS code will create nice layout for your deals section.
We are using FontAwesome fonts on Crunchify. That’s why hand arrow icon coming from. If you want to add Font Awesome to your WordPress theme then follow detailed FontAwesome tutorial.
Step-2 (HTML page)
- Go to
Pages - Click on
Add New - Create new
Full widthpage - Put below code to page’s HTML section
- Save file
<div class="crunchify-panel">
<a href="https://crunchify.com/refer/genesis" target="_blank" rel="noopener noreferrer"><img class="size-full aligncenter" src="https://crunchify.com/wp-content/uploads/2017/08/GenesisWP-Crunchify-Deals.png" alt="Genesis WordPress Framework Logo" width="100" height="100" /></a>
<h3 style="text-align: center;"><a href="https://crunchify.com/refer/genesis" target="_blank" rel="noopener noreferrer">Genesis WP</a></h3>
<p style="text-align: center;">Best WordPress design frameworks. Quickly and easily build incredible websites - <a href="https://crunchify.com/crunchify-co-moved-to-genesis-framework-thesis-vs-genesis/" target="_blank" rel="noopener noreferrer">Details</a></p>
</div>
<div class="crunchify-panel">
<a href="https://crunchify.com/refer/wpengine" target="_blank" rel="noopener noreferrer"><img class="aligncenter size-full" src="https://crunchify.com/wp-content/uploads/2017/08/WP-Engine-Crunchify-Deals.png" alt="WP Engine" width="100" height="100" /></a>
<h3 style="text-align: center;"><a title="Premium WordPress Themes that Work" href="https://crunchify.com/refer/wpengine" target="_blank" rel="noopener noreferrer">WP Engine</a></h3>
<p style="text-align: center;"> Crunchify and WP Engine have teamed up to give you a special offer. Vibrant and Fully Managed WordPress Hosting</p>
<div class="crunchify-deals-coupon"><b>25%</b> off Coupon: <a href="https://crunchify.com/refer/wpengine" target="_blank" rel="noopener noreferrer">crunchify25</a></div>
</div>
<div class="crunchify-panel">
<a href="https://crunchify.com/refer/maxcdn" target="_blank" rel="noopener noreferrer"><img class="size-full aligncenter" src="https://crunchify.com/wp-content/uploads/2017/08/MaxCDN-Crunchify-Deals.png" alt="MaxCDN Logo" width="100" height="100" /></a>
<h3 style="text-align: center;"><a href="https://crunchify.com/refer/maxcdn" target="_blank" rel="noopener noreferrer">MaxCDN</a></h3>
<p style="text-align: center;">One of the best CDN for WordPress & used at Crunchify. MaxCDN speeds up your website - <a href="https://crunchify.com/maxcdn-content-delivery-network-and-crunchify-exclusive-coupon-code-crunchify/" target="_blank" rel="noopener noreferrer">Steps</a></p>
<div class="crunchify-deals-coupon"><b>25%</b> off Coupon: <a href="https://crunchify.com/refer/maxcdn" target="_blank" rel="noopener noreferrer">CRUNCHIFY</a></div>
</div>
<div class="crunchify-panel">
<a href="https://crunchify.com/refer/bluehost" target="_blank" rel="noopener noreferrer"><img class="size-full aligncenter" src="https://crunchify.com/wp-content/uploads/2017/08/BlueHost-Crunchify-Deals.png" alt="Bluehost Logo" width="100" height="100" /></a>
<h3 style="text-align: center;"><a href="https://crunchify.com/refer/bluehost" target="_blank" rel="noopener noreferrer">Bluehost</a></h3>
<p style="text-align: center;">One of the largest and most trusted web hosting services powering millions of site - <a href="https://crunchify.com/bluehost-wordpress-hosting/" target="_blank" rel="noopener noreferrer">Steps</a></p>
<div class="crunchify-deals-coupon">Upto <b>40%</b> off link: <a href="https://crunchify.com/refer/bluehost" target="_blank" rel="noopener noreferrer">Click here</a></div>
</div>
Above code will add 4 different Deals section for you. Just replace link and image as needed.
Let me know if you face any issue putting above code to your theme.