-
-
Save srikat/1aa8e914481bcf25c3f8d2e0f45ac36e to your computer and use it in GitHub Desktop.
How to add Reasons grid similar to the one on StudioPress.com. http://sridharkatakam.com/add-reasons-grid-similar-one-studiopress-com/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css' ); | |
wp_enqueue_script( 'modernizr-flexbox', get_stylesheet_directory_uri() . '/js/modernizr-flexbox.js', '', '1.0.0', true ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
genesis_widget_area( 'front-page-4', array( | |
'before' => '<div id="front-page-4" class="front-page-4"><div class="solid-section"><div class="flexible-widgets widget-area' . altitude_widget_area_class( 'front-page-4' ) . '"><div class="wrap">', | |
'after' => '</div></div></div></div>', | |
) ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
?> | |
<div id="front-page-4" class="front-page-4"> | |
<div class="reasons"> | |
<div class="wrap"> | |
<div class="grid"> | |
<div class="grid-box title"> | |
<a class="grid-box-content features-link" href="#"> | |
<h2 class="medium-title">8 Reasons to Choose the Genesis Framework</h2> | |
<span class="small-title">Find Out More</span> | |
</a> | |
</div> | |
<div class="grid-box reason-1"> | |
<a class="grid-box-content features-link" href="#"> | |
<i class="fa fa-search" aria-hidden="true"></i> | |
<h3>Search Engine Optimization</h3> | |
<p>State-of-the-art code and smart design architecture mean search engines see your content.</p> | |
</a> | |
</div> | |
<div class="grid-box reason-2"> | |
<a class="grid-box-content features-link" href="#"> | |
<i class="fa fa-mobile" aria-hidden="true"></i> | |
<h3>Responsive HTML5 Designs</h3> | |
<p>Genesis offers an array of beautiful themes for your content that are HTML-compatible and mobile-responsive.</p> | |
</a> | |
</div> | |
<div class="grid-box reason-3"> | |
<a class="grid-box-content features-link" href="#"> | |
<i class="fa fa-hdd-o" aria-hidden="true"></i> | |
<h3>Unlimited Everything</h3> | |
<p>Unlimited support. Unlimited updates. Unlimited websites. One low price entitles you to support, updates, and domains.</p> | |
</a> | |
</div> | |
<div class="grid-box reason-4"> | |
<a class="grid-box-content features-link" href="#"> | |
<i class="fa fa-lock" aria-hidden="true"></i> | |
<h3>Airtight Security</h3> | |
<p>Features don’t mean a thing if your site’s not secure. Choose Genesis, which adheres to WP security best practices, and it will be.</p> | |
</a> | |
</div> | |
<div class="grid-box reason-5"> | |
<a class="grid-box-content features-link" href="#"> | |
<i class="fa fa-cloud-download" aria-hidden="true"></i> | |
<h3>Instant Updates</h3> | |
<p>In a snap, update the code that runs in the background all while keeping the look and feel of your site just the way you want it.</p> | |
</a> | |
</div> | |
<div class="grid-box reason-6"> | |
<a class="grid-box-content features-link" href="#"> | |
<i class="fa fa-tachometer" aria-hidden="true"></i> | |
<h3>Customizable and Fast</h3> | |
<p>Genesis makes customizing your site easy, but without bloated code that slows down your site.</p> | |
</a> | |
</div> | |
<div class="grid-box reason-7"> | |
<a class="grid-box-content features-link" href="#"> | |
<i class="fa fa-wpforms" aria-hidden="true"></i> | |
<h3>Widgets & Layout Options</h3> | |
<p>We developed custom widgets you can use on any area of your site, and you can even choose to mix-and-match your layout.</p> | |
</a> | |
</div> | |
<div class="grid-box reason-8"> | |
<a class="grid-box-content features-link" href="#"> | |
<i class="fa fa-code" aria-hidden="true"></i> | |
<h3>Developers You Can Trust</h3> | |
<p>If you want a custom design, we have a list of talented, reliable designers who will knock one out of the park for you.</p> | |
</a> | |
</div> | |
</div><!-- end .table --> | |
</div> | |
</div> | |
</div> | |
<?php |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
if ( is_active_sidebar( 'front-page-1' ) || is_active_sidebar( 'front-page-2' ) || is_active_sidebar( 'front-page-3' ) || is_active_sidebar( 'front-page-4' ) || is_active_sidebar( 'front-page-5' ) || is_active_sidebar( 'front-page-6' ) || is_active_sidebar( 'front-page-7' ) ) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
if ( is_active_sidebar( 'front-page-1' ) || is_active_sidebar( 'front-page-2' ) || is_active_sidebar( 'front-page-3' ) || is_active_sidebar( 'front-page-5' ) || is_active_sidebar( 'front-page-6' ) || is_active_sidebar( 'front-page-7' ) ) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ## Grid | |
--------------------------------------------- */ | |
.reasons { | |
padding: 100px 0; | |
background-color: #f3f3f3; | |
} | |
.grid { | |
overflow: hidden; | |
width: 100%; | |
} | |
.grid-box { | |
background-color: #fff; | |
border: 1px solid #eee; | |
border-width: 0 1px 1px 0; | |
color: #fff; | |
float: left; | |
margin: 0; | |
vertical-align: top; | |
width: 33.333333333333%; | |
} | |
.grid-box:nth-of-type(3n+1) { | |
clear: both; | |
} | |
.grid-box-content { | |
display: block; | |
min-height: 260px; | |
overflow: hidden; | |
padding: 50px; | |
width: 100%; | |
} | |
.grid-box a { | |
color: #0066cc; | |
border-bottom: 1px dotted #0066cc; | |
text-decoration: none; | |
} | |
.grid-box a:focus, | |
.grid-box a:hover { | |
color: #222; | |
border-bottom-color: #222; | |
} | |
.grid-box a.features-link { | |
color: #3a3a3a; | |
border: none; | |
} | |
.grid-box a.features-link:focus, | |
.grid-box a.features-link:hover { | |
background-color: #3a3a3a; | |
color: #fff; | |
} | |
.reasons .grid-box.title { | |
background-color: #e0922f; | |
} | |
.reasons .grid-box.title, | |
.reasons .grid-box.title a { | |
color: #fff; | |
} | |
.reasons h3 { | |
font-size: 18px; | |
font-weight: 600; | |
} | |
.reasons .medium-title { | |
font-size: 36px; | |
font-weight: 100; | |
letter-spacing: -.03em; | |
margin-bottom: 20px; | |
} | |
span.small-title { | |
display: block; | |
font-size: 14px; | |
font-style: normal; | |
font-weight: 700; | |
letter-spacing: .16em; | |
margin-bottom: 20px; | |
text-transform: uppercase; | |
} | |
.grid .fa { | |
display: block; | |
margin-bottom: 20px; | |
font-size: 30px; | |
} | |
/* Grid - Flexbox Supported | |
--------------------------------------------- */ | |
.flexbox .grid { | |
display: -webkit-box; | |
display: -webkit-flex; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-orient: horizontal; | |
-webkit-box-direction: normal; | |
-webkit-flex-direction: row; | |
-ms-flex-direction: row; | |
flex-direction: row; | |
-webkit-box-align: stretch; | |
-webkit-align-items: stretch; | |
-ms-flex-align: stretch; | |
align-items: stretch; | |
-webkit-flex-wrap: wrap; | |
-ms-flex-wrap: wrap; | |
flex-wrap: wrap; | |
overflow: visible; | |
} | |
.flexbox .grid .grid-box { | |
display: -webkit-box; | |
display: -webkit-flex; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-align: stretch; | |
-webkit-align-items: stretch; | |
-ms-flex-align: stretch; | |
align-items: stretch; | |
height: auto; | |
} | |
.flexbox .grid-box:nth-of-type(3n+1) { | |
clear: none; | |
} | |
.flexbox .grid-box-content { | |
display: -webkit-box; | |
display: -webkit-flex; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-orient: vertical; | |
-webkit-box-direction: normal; | |
-webkit-flex-direction: column; | |
-ms-flex-direction: column; | |
flex-direction: column; | |
-webkit-box-pack:justify; | |
-webkit-justify-content:flex-start; | |
-ms-flex-pack:justify; | |
justify-content:flex-start; | |
min-height: 0 !important; | |
padding: 50px; /* Add pixel value for FF bug on rendering percentage as 0 */ | |
} | |
.flexbox .grid-box-item.bottom p:last-of-type { | |
margin-bottom: 0; | |
} | |
@media only screen and (max-width: 960px) { | |
.grid .grid-box { | |
width: 50%; | |
} | |
.grid .grid-box:nth-of-type(3n+1) { | |
clear: none; | |
} | |
.grid .grid-box:nth-of-type(even) { | |
clear: both; | |
} | |
.reasons .grid-box.title { | |
width: 100%; | |
} | |
.grid-box.title .grid-box-content { | |
min-height: 0; | |
} | |
} | |
@media only screen and (max-width: 600px) { | |
.grid .grid-box { | |
border-width: 0 0 1px; | |
width: 100%; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment