Slider Revolution WP
09.27.2016
Split Content Grid Items
Use Custom Meta, HTML and CSS to create a "split content" type grid for your projects.Video screencast also useful for learning more about Custom Meta in general.
HTML from Screencast:
|
1 2 3 4 5 6 7 8 9 10 11 |
<div style="background-image: url(%eg-custom-image%)"></div> <div> <div class="cj-content"> <h4><a href="%post_url%">%title%</a></h4> <p>%eg-custom-excerpt%</p> <p class="cj-read-more"><a href="%post_url%">Read More</a></p> </div> </div> <div class="cj-clear"></div> |
CSS from Screencast:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
/* BEGIN STAFF GRID CSS */ .eg-text-and-image-nostyle-element-10 { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .eg-text-and-image-nostyle-element-10 > div { width: 50%; height: 100%; float: left; background-size: cover; } /* content padding */ .eg-text-and-image-nostyle-element-10 .cj-content { padding: 20px; } /* CSS reset */ .eg-text-and-image-nostyle-element-10 h4, .eg-text-and-image-nostyle-element-10 p { padding: 0; margin: 15px; } .eg-text-and-image-nostyle-element-10 h4 { margin-bottom: 0; } /* paragraph font sizing */ .eg-text-and-image-nostyle-element-10 p { font-size: 12px; line-height: 18px; } /* read more link */ .cj-read-more a, .cj-read-more a:visited { color: #06F; border-bottom: none; } /* clear floats */ .eg-text-and-image-nostyle-element-10 .cj-clear { width: 0; height: 0; float: none; clear: both; } /* END STAFF GRID CSS */ |
Quick Demo Import:
Information about importing demos:
https://essential.themepunch.com/documentation/#import_export
Demo Grid/Skin .json file (unzip first before importing)
https://www.themepunch.com/wp-content/uploads/2016/02/ess_grid.zip
Short screencast walking through the import process:
