Homepage › Community Forums › Epik Theme Support › 5 column element
Hi there,
New to Epik and responsive design, been doing occasional WP development for a while, have used Genesis for most of my projects so somewhat familiar with it. Not a WP guru or a “developer” per se, but know enough to be dangerous.
I’ve got a pricing scheme that has 5 levels. In the previous version of the site, we used the Buckets plugin, but that site wasn’t responsive.
The current code is a ul with li elements for each of the five levels.
How would you recommend displaying this in an interior page?
Easy. Add the code to your page of choice. You need to change it to this for the page, which ADDS one more column.
Epik
<div class="plans">
<div class="plan-col">
<div class="plan-col-wrap">
<div class="plan-head"><h4>Simple</h4></div>
<div class="plan-pricing">
<span class="plan-price"><sup>$</sup>45</span><span class="monthly">/mo</span>
</div>
<ul class="plan-list">
<li><strong>100</strong> Themes</li>
<li><strong>Unlimited</strong> Bandwidth</li>
<li><strong>300</strong> E-mail Accounts</li>
<li><strong>Free</strong> 1-800 Number</li>
<li><strong>5 Free</strong>Domains</li>
<li><strong>Unlimited</strong> Downloads</li>
</ul>
<div class="plan-button"><a href="ADD_LINK_HERE.com">Buy Now</a></div>
</div>
</div>
<div class="plan-col-popular">
<div class="plan-col-wrap">
<div class="plan-head"><h4>Popular</h4></div>
<div class="plan-pricing">
<span class="plan-price"><sup>$</sup>59</span><span class="monthly">/mo</span>
</div>
<ul class="plan-list">
<li><strong>200</strong> Themes</li>
<li><strong>Unlimited</strong> Bandwidth</li>
<li><strong>300</strong> E-mail Accounts</li>
<li><strong>Free</strong> 1-800 Number</li>
<li><strong>5 Free</strong>Domains</li>
<li><strong>Unlimited</strong> Downloads</li>
</ul>
<div class="plan-button"><a href="ADD_LINK_HERE.com">Buy Now</a></div>
</div>
</div>
<div class="plan-col">
<div class="plan-col-wrap">
<div class="plan-head"><h4>Great</h4></div>
<div class="plan-pricing">
<span class="plan-price"><sup>$</sup>99</span><span class="monthly">/mo</span>
</div>
<ul class="plan-list">
<li><strong>300</strong> Themes</li>
<li><strong>Unlimited</strong> Bandwidth</li>
<li><strong>300</strong> E-mail Accounts</li>
<li><strong>Free</strong> 1-800 Number</li>
<li><strong>10 Free</strong>Domains</li>
<li><strong>Unlimited</strong> Downloads</li>
</ul>
<div class="plan-button"><a href="ADD_LINK_HERE.com">Buy Now</a></div>
</div>
</div>
<div class="plan-col">
<div class="plan-col-wrap">
<div class="plan-head"><h4>Awesome</h4></div>
<div class="plan-pricing">
<span class="plan-price"><sup>$</sup>199</span><span class="monthly">/mo</span>
</div>
<ul class="plan-list">
<li><strong>500</strong> Themes</li>
<li><strong>Unlimited</strong> Bandwidth</li>
<li><strong>300</strong> E-mail Accounts</li>
<li><strong>Free</strong> 1-800 Number</li>
<li><strong>20 Free</strong>Domains</li>
<li><strong>Unlimited</strong> Downloads</li>
</ul>
<div class="plan-button"><a href="ADD_LINK_HERE.com">Buy Now</a></div>
</div>
</div>
<div class="plan-col">
<div class="plan-col-wrap">
<div class="plan-head"><h4>Awesome</h4></div>
<div class="plan-pricing">
<span class="plan-price"><sup>$</sup>199</span><span class="monthly">/mo</span>
</div>
<ul class="plan-list">
<li><strong>500</strong> Themes</li>
<li><strong>Unlimited</strong> Bandwidth</li>
<li><strong>300</strong> E-mail Accounts</li>
<li><strong>Free</strong> 1-800 Number</li>
<li><strong>20 Free</strong>Domains</li>
<li><strong>Unlimited</strong> Downloads</li>
</ul>
<div class="plan-button"><a href="ADD_LINK_HERE.com">Buy Now</a></div>
</div>
</div><!--formatted-->
It won’t look right unless you change your .css “Pricing Plan” section. You reduce the column size to 20% (it was 25%, so shaving off 5% to use for the new column). Adjust the padding as well.
/*
20 Pricing Plans
---------------------------------------------------------------------------------------------------- */
.plans {
clear: both;
margin: 0 auto;
padding: 10px 0 0;
text-align: center;
}
.plan-col {
background: #eee;
float: left;
font-weight: 300;
padding: 0;
text-align: center;
vertical-align: top;
}
.plan-col-popular {
background: #fff;
float: left;
font-weight: 300;
padding: 0;
position: relative;
text-align: center;
vertical-align: top;
}
.plan-col,
.plan-col-popular {
width: 20%;
}
.plan-col-wrap,
.plan-col-popular-wrap {
border: 1px solid #d3d3d3;
margin: 0 auto;
padding: 40px 10px;
}
.plans .plan-head h4 {
font-size: 20px;
font-weight: 300;
margin: 0 0 20px;
text-transform: uppercase;
text-align: center;
}
.plan-head em {
font-size: 14px;
}
.plan-pricing {
background: url(images/border-img-x.png) repeat-x scroll center bottom;
clear: both;
margin: 0 0 20px;
padding: 0 0 20px;
text-align: center;
}
.plan-price {
font-size: 60px;
}
.plan-price sup {
font-size: 24px;
}
.plan-pricing .monthly {
font-size: 14px;
}
.plan-list {
margin: 0 0 20px;
overflow: hidden;
}
.plan-list li,
.entry-content .plan-list li {
list-style: none;
margin: 0 0 20px;
}
.plan-button {
clear: both;
}
.plan-button a,
.entry-content .plan-button a {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #303236;
color: #fff;
font-size: 18px;
font-weight: 400;
padding: 6px 20px 8px;
}
.plan-button a:hover {
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
-webkit-transition:all .5s ease;
opacity: .7;
transition:all .5s ease;
text-decoration: underline;
}
Of couse adjust colors and shading as desired.
Thanks Andy, I will try that.