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.

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.
Custom Code In This Release
Register

Search Our Site

MENU
1-800-555-1212

Custom Code In This Release

Written by shapdemoswp
Published: 12 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:

Phone Number:

This widget is published to the Custom 2 position.


<span class="ion-ios-telephone"></span><div class="phone_number">1-800-555-1212</div>

Icons With Read More:

These icons are placed in individual widget positions on the Top Row1 area. Each widget contains the code below and use the style Gray Hover.


<div class="insurance_icon_set" data-scroll-reveal="enter from the top after 0s">
<img src="images/icon1.png" />
<br />
<span>Health<br />Insurance</span>
<a class="readon" href="http://shape5.com/demo/wp/spectrum/features/theme-specific-features">Read More About This</a>
</div>

Text Next To Icons:

This widget uses the style Gray Large.


<span class="highlight_font" style="font-size:2em;margin-bottom:11px;color:#191919;display:block;font-weight:700">
Are You Looking to Save Money
<br />
</span>
<span class="highlight_font" style="font-size:1.9em;color:#191919;">
On Your Insurance Costs?
</span>
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam molestie mi a nunc porta facilisis. Mauris varius volutpat interdum. In quis congue velit, sit amet ultricies augue.
<br /><br />
Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam molestie mi a nunc porta facilisis. Mauris varius volutpat interdum. In quis congue velit.
<br /><br />
<a href="http://shape5.com/demo/wp/spectrum/features/theme-specific-features" class="readon">View All Of Our Services</a>

Customer Quotes:


<div class="customer_wrap">
<div class="custom_item" data-scroll-reveal="enter from the top after 0.1s">
<div class="custom_item_inner">
<img src="images/cust1.jpg" alt="" />
<span class="cust_name">Matt Smith</span>
<span class="cust_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus ante vel aliquam mattis este ant.</span>
<a href="http://shape5.com/demo/wp/spectrum/features/theme-specific-features" class="readon">Continue Reading</a>
<div style="clear:both;height:0px"></div>
</div>
</div>
<div class="custom_item" data-scroll-reveal="enter from the top after 0.25s">
<div class="custom_item_inner">
<img src="images/cust2.jpg" alt="" />
<span class="cust_name">Steph Green</span>
<span class="cust_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus ante vel aliquam mattis este ant.</span>
<a href="http://shape5.com/demo/wp/spectrum/features/theme-specific-features" class="readon">Continue Reading</a>
<div style="clear:both;height:0px"></div>
</div>
</div>
<div class="custom_item" data-scroll-reveal="enter from the top after 0.4s">
<div class="custom_item_inner">
<img src="images/cust3.jpg" alt="" />
<span class="cust_name">Brian Lockard</span>
<span class="cust_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus ante vel aliquam mattis este ant.</span>
<a href="http://shape5.com/demo/wp/spectrum/features/theme-specific-features" class="readon">Continue Reading</a>
<div style="clear:both;height:0px"></div>
</div>
</div>
<div style="clear:both;height:0px"></div>
</div>

Checkmark List For Tab Show:


<ul class="ul_check">
<li>We strive to have the best customer support and customer satisfaction.</li>
<li>Our no worries price assures you that are you getting the best price.</li>
<li>Choose from the widest variety of insurance companies and options.</li>
</ul>

Frequent Questions:


<span class="top_margin" style="margin-top:-5px;">
<span class="large_title">Find Frequently <strong>Asked Questions Here</strong></span>
<span class="large_title_subtext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus metus ligula, eu hendrerit sapien malesuada.</span>
</span>

<section class="ac-container" style="float:left;width:49%;">
<div data-scroll-reveal="enter from the left after 0.1s">
<input id="ac-1" name="accordion-1" type="radio">
<label for="ac-1"><span class="ion-ios-arrow-forward accordion_icon"></span>How long does it take to setup an account?</label>
<article class="ac-small">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis gravida justo, a rhoncus sem volutpat in. Pellentesque lacinia lacinia ligula, eget tempor elit sagittis non. Vestibulum pellentesque lorem nec diam interdum pellentesque.</p>
</article>
</div>
<div data-scroll-reveal="enter from the left after 0.2s">
<input id="ac-2" name="accordion-1" type="radio">
<label for="ac-2"><span class="ion-ios-arrow-forward accordion_icon"></span>What insurance companies do you offer?</label>
<article class="ac-medium">
<p>Etiam tempus facilisis ultrices. Nam adipiscing nunc nec est dapibus, eget eleifend velit mattis. Curabitur facilisis a rhoncus sem volutpat in condimentum augue at viverra. Ut ut tortor feugiat, dignissim nulla non, venenatis leo.</p>
</article>
</div>
<div data-scroll-reveal="enter from the left after 0.3s">
<input id="ac-3" name="accordion-1" type="radio">
<label for="ac-3"><span class="ion-ios-arrow-forward accordion_icon"></span>How do I reach a claim specialist in my area?</label>
<article class="ac-large">
<p> Morbi nunc nunc, elementum quis tortor et, feugiat pharetra eros. Mauris mattis purus at lobortis auctor. Nullam eros velit, laoreet vel libero posuere, a rhoncus sem volutpat in eleifend ornare libero. Cras iaculis interdum dui. </p>
</article>
</div>
</section>

<section class="ac-container" style="float:right;width:49%;">
<div data-scroll-reveal="enter from the right after 0.1s">
<input id="ac-4" name="accordion-2" type="radio">
<label for="ac-4"><span class="ion-ios-arrow-forward accordion_icon"></span>Do you offer retirement and investment packages?</label>
<article class="ac-small">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis gravida justo, a rhoncus sem volutpat in. Pellentesque lacinia lacinia ligula, eget tempor elit sagittis non. Vestibulum pellentesque lorem nec diam interdum pellentesque.</p>
</article>
</div>
<div data-scroll-reveal="enter from the right after 0.2s">
<input id="ac-5" name="accordion-2" type="radio">
<label for="ac-5"><span class="ion-ios-arrow-forward accordion_icon"></span>Where is your business located at?</label>
<article class="ac-medium">
<p>Etiam tempus facilisis ultrices. Nam adipiscing nunc nec est dapibus, eget eleifend velit mattis. Curabitur facilisis a rhoncus sem volutpat in condimentum augue at viverra. Ut ut tortor feugiat, dignissim nulla non, venenatis leo.</p>
</article>
</div>
<div data-scroll-reveal="enter from the right after 0.3s">
<input id="ac-6" name="accordion-2" type="radio">
<label for="ac-6"><span class="ion-ios-arrow-forward accordion_icon"></span>Do you offer home and rental insurance?</label>
<article class="ac-large">
<p> Morbi nunc nunc, elementum quis tortor et, feugiat pharetra eros. Mauris mattis purus at lobortis auctor. Nullam eros velit, laoreet vel libero posuere, a rhoncus sem volutpat in eleifend ornare libero. Cras iaculis interdum dui. </p>
</article>
</div>
</section>

Frequent Questions:

This widget uses the style Gray Large.


<div class="phone_wrap">
<div class="phone_wrap_right">
<span class="large_title">Receive Online Acces <strong>To Your Account</strong></span>
<span class="large_title_subtext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus metus ligula, eu hendrerit sapien malesuada. In hac habitasse platea dictumst.</span>
<a class="readon" href="index.php/features-mainmenu-47/template-features/responsive-layout">Read About Responsive</a>
</div>
<div class="phone_wrap_left" data-scroll-reveal="enter from the top after 0.2s">
<img src="images/phone.png" alt="" />
</div>
<div style="clear:both;height:0px"></div>
</div>

Logos:


<div class="logos_wrap" data-scroll-reveal="enter from the top after 0.1s" >
<div class="logo_item">
<div class="logo_item_inner">
<img src="images/logo1.png" alt="" />
</div>
</div>
<div class="logo_item">
<div class="logo_item_inner">
<img src="images/logo2.png" alt="" />
</div>
</div>
<div class="logo_item">
<div class="logo_item_inner">
<img src="images/logo3.png" alt="" />
</div>
</div>
<div class="logo_item">
<div class="logo_item_inner">
<img src="images/logo4.png" alt="" />
</div>
</div>
<div class="logo_item">
<div class="logo_item_inner">
<img src="images/logo5.png" alt="" />
</div>
</div>
<div class="logo_item logo_bottom">
<div class="logo_item_inner">
<img src="images/logo6.png" alt="" />
</div>
</div>
<div class="logo_item logo_bottom">
<div class="logo_item_inner">
<img src="images/logo7.png" alt="" />
</div>
</div>
<div class="logo_item logo_bottom">
<div class="logo_item_inner">
<img src="images/logo8.png" alt="" />
</div>
</div>
<div class="logo_item logo_bottom">
<div class="logo_item_inner">
<img src="images/logo9.png" alt="" />
</div>
</div>
<div class="logo_item logo_bottom">
<div class="logo_item_inner">
<img src="images/logo10.png" alt="" />
</div>
</div>
<div style="clear:both;height:0px"></div>
</div>

Thank You For Visiting:

This widget is published to the Bottom Menu position.


<span class="highlight_font" style="font-size:2.3em">Thank You For <strong>Visiting Us</strong></span>
Comments Off 

 
SPECTRUM INSURANCE
123 Insurance Street Bigtown, CO 12345
1-800-555-1212 - [email protected]

Sed haec quis possit intrepidus aestimare tellus. Me non paenitet nullum festiviorem excogitasse ad hoc. Paullum deliquit, ponderibus modulis que suis ratio utitur. Petierunt uti sibi concilium.