Sample Mobile Sidebar Widget

This is a sample widget published to the Sidebar Bottom position, using the "Sidebar" style. There is also a Sidebar Top position below the search.

Sample Mobile Sidebar Widget

This is a sample widget published to the Sidebar Top position, using the "Sidebar" style. There is also a Sidebar Bottom position below the menu.
Custom Code Used For This Design

Custom Code Used For This Design

Written by shapdemoswp
Published: 26 Aug 2015
Occasionally we need to use custom html to obtain the layouts shown on our demos in specific widgets. The code below is what was used on this theme:

Image and Content Fader Code:

The S5 Image and Content Fader actually uses no custom code for this design. Simply enter the images and into the default fields in the back end of the widget. This demo uses 1600x900 images, but you can use any image size; just make sure they are all the same size. Features like size, zoom, slide effects, and others are controlled in the widget's backend.



Top Colored Boxes With Images:

This is one text widget published that is published to the Top Row 1.1 position.


<div class="image_top_wrap">
<div class="image_top_row">
<div class="image_top">
<div class="image_top_inner">
<a href="http://shape5.com/demo/wp/game-world//features/theme-specific-features">
<div class="image_top_img">
<img src="images/top1.jpg" alt="" />
</div>
<h3>Warlock</h3>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit varius turpis sit amet feugiat. Integer efficit.</span>
<div style="clear:both;height:0px;"></div>
</a>
</div>
</div>
<div class="image_top">
<div class="image_top_inner">
<a href="http://shape5.com/demo/wp/game-world//features/theme-specific-features">
<div class="image_top_img">
<img src="images/top2.jpg" alt="" />
</div>
<h3>FIA Soccer</h3>
<span>In suscipit varius turpis sit amet feugiat. Integer efficit. Lorem ipsum dolor sit amet, consectetur adiscing.</span>
<div style="clear:both;height:0px;"></div>
</a>
</div>
</div>
</div>
<div class="image_top_row">
<div class="image_top">
<div class="image_top_inner">
<a href="http://shape5.com/demo/wp/game-world//features/theme-specific-features">
<div class="image_top_img">
<img src="images/top3.jpg" alt="" />
</div>
<h3>Halo Valor</h3>
<span>Integer efficit lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit varius turpis sit amet.</span>
<div style="clear:both;height:0px;"></div>
</a>
</div>
</div>
<div class="image_top">
<div class="image_top_inner">
<a href="http://shape5.com/demo/wp/game-world//features/theme-specific-features">
<div class="image_top_img">
<img src="images/top4.jpg" alt="" />
</div>
<h3>Recore</h3>
<span>In suscipit varius turpis sit. Lorem ipsum dolor sit amet, consectetur adipiscing elit amet feugiat. Integer efficit.</span>
<div style="clear:both;height:0px;"></div>
</a>
</div>
</div>
</div>
<div style="clear:both;height:0px;"></div>
</div>

Home page Content:

This is the "Home" page. The page title is hidden using HTML comments.


<a href="/game_world/http://shape5.com/demo/wp/game-world//features/theme-specific-features">
<img style="margin-bottom:25px;" alt="" src="/game_world/images/article.jpg">
<h3 class="h3_line">New Version Of Crysis Coming In 2016 For Xbox and Playstation</h3>
</a>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim metus purus, a consequat velit scelerisque elementum. Vestibulum in augue mauris. Proin ligula mi, eleifend eget felis et, congue dictum mauris. Vestibulum varius ligula mollis risus.
<br>
<i class="ion-android-star star_active"></i>
<i class="ion-android-star star_active"></i>
<i class="ion-android-star star_active"></i>
<i class="ion-android-star star_active"></i>
<i class="ion-android-star star_inactive"></i>

Plus Image Boxes:

These images are published to the Custom 3 position.


<div class="plus_img_main_wrap">
<a href="/game_world/http://shape5.com/demo/wp/game-world//features/theme-specific-features">
<div class="plus_img_wrap_outer">
<div class="plus_img_wrap">
<img src="/game_world/images/thumb1.jpg" alt="">
<div class="plus_img_icon">
<i class="ion-plus"></i>
</div>
<div class="plus_img_icon_box"></div>
<div class="plus_img_text">
Custom Highlight Colors
</div>
<div style="clear:both;height:0px;"></div>
</div>
</div>
</a>
<a href="/game_world/http://shape5.com/demo/wp/game-world//features/theme-specific-features">
<div class="plus_img_wrap_outer">
<div class="plus_img_wrap">
<img src="/game_world/images/thumb2.jpg" alt="">
<div class="plus_img_icon">
<i class="ion-plus"></i>
</div>
<div class="plus_img_icon_box"></div>
<div class="plus_img_text">
Google Fonts Integrated
</div>
<div style="clear:both;height:0px;"></div>
</div>
</div>
</a>
<a href="/game_world/http://shape5.com/demo/wp/game-world//features/theme-specific-features">
<div class="plus_img_wrap_outer">
<div class="plus_img_wrap">
<img src="/game_world/images/thumb3.jpg" alt="">
<div class="plus_img_icon">
<i class="ion-plus"></i>
</div>
<div class="plus_img_icon_box"></div>
<div class="plus_img_text">
Specify Custom Background
</div>
<div style="clear:both;height:0px;"></div>
</div>
</div>
</a>
<div style="clear:both;height:0px;"></div>
</div>

Banner Ads:

These ads are published to Below Columns 1 and Below Columns 2, and they are text widgets. The background for this row is controlled in the Vertex admin under Main/Layout.


<a href="/game_world/http://shape5.com/demo/wp/game-world//features/theme-specific-features">
<img style="width:100%;" alt="" src="/game_world/images/banner1.jpg">
</a>

Media Player and Text:

This area is a text widget published to Bottom Row 1.1. The background is controlled under Main/Layout in the theme configuration. The video uses the default WP video shortcode.


<div class="video_wrap">
<div class="video_wrap_left">
WP VIDEO PLAYER SHORTCODE GOES HERE
<div style="clear:both;height:0px;"></div>
</div>
<div class="video_wrap_right">
<h3>Are You Ready?</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non turpis a sem tristique blandit. Praesent eget eros.
<br /><br />
Sed ultrices, urna vitae mattis placerat, quam velit tincidunt odio, vel consequat dolor leo a augue. Proin massa erat, mollis quis lacus eu, fringilla lacinia turpis.
<br />
<span class="highlight1">06.12.2016</span>
<br /><br />
Praesent hendrerit nisi quis felis tempus, non malesuada urna tincidunt. Proin varius bibendum urna, convallis tempus purus condimentum eu vestibulum
<br />
<span class="highlight1">11.21.2016</span>
<div style="clear:both;height:0px;"></div>
</div>
<div style="clear:both;height:0px;"></div>
</div>

S5 Masonry:

This widget is published to Bottom Row 2.1 and does not use any custom HTML. The images are defined as the featured image in the settings of each post.



Social Icons:

This is a text widget publishd to the Custom 4 position. Ion Icons must be enabled in the theme configuration for these to show.


<a href="javascript:;" class="social_icon ion-social-facebook"></a>
<a href="javascript:;" class="social_icon ion-social-twitter"></a>
<a href="javascript:;" class="social_icon ion-social-googleplus"></a>
<a href="javascript:;" class="social_icon ion-social-rss"></a>
<a href="javascript:;" class="social_icon ion-social-youtube"></a>
 

Our Newsletter

Sign up for our newsletter to receive updates, game reviews and author best picks.

S5 Box – Login

Publish a login form or anything you want to this position.

S5 Box – Register

Publish a registration form or anything you want to this position.