09. May 2019

Play of columns 6: Fullwidth sections

Display any Jimdo module as fullwidth section

Before you use any below example, it is suggested to activate the animation effect for your module inside the columns. The details can be found in my previous post

How to use it

Add the module "Columns" with only one column. Then display any Jimdo module inside you'd like to be fullwidth. Now as the last module at the bottom of the column, display "widget/HTML" with the following code

<div class="f01">
</div>
<script type="text/javascript">
//<![CDATA[
     jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
$('.j-module:has(.f01)').addClass('has-padding is-fullwidth has-custom-caption');
});
})(jQuery);
//]]>
</script>

Simple image

Slideshow

Text with Photo

Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Sed aliquam ultrices mauris. Mauris sollicitudin fermentum libero. Phasellus dolor.

Google maps

Fullwidth section with background color

<div class="f02">
</div>
<script type="text/javascript">
//<![CDATA[
     jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
$( ".j-module:has(.f02)" ).wrap( "<div class='hs-fullwidth bg-primary color-white link-white white-outline-btn' />" );
});
})(jQuery);
//]]>
</script>

This is a title

Morbi nec metus. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Cras ultricies mi eu turpis hendrerit fringilla. Vivamus quis mi.

Aliquam lobortis. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Phasellus consectetuer vestibulum elit.

Nullam sagittis. Fusce convallis metus id felis luctus adipiscing. Integer tincidunt. Fusce convallis metus id felis luctus adipiscing.

This is a title

Morbi nec metus. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Cras ultricies mi eu turpis hendrerit fringilla. Vivamus quis mi.

Aliquam lobortis. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Phasellus consectetuer vestibulum elit.

Nullam sagittis. Fusce convallis metus id felis luctus adipiscing. Integer tincidunt. Fusce convallis metus id felis luctus adipiscing.

New Button