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 is-img-maxed');
});
})(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

Write a comment

Comments: 6

#1
Sean (Wednesday, 03 July 2019 14:06)

Thank you for the amazing job that you are doing.

I wanted to ask how you would "Add the module "Columns" with only one column" when all columns come in pairs?
#2
Serhiy (Wednesday, 03 July 2019 20:36)

@Sean you need to remove one column, so it will be only one
#3
Matrix themes (Wednesday, 11 March 2020 10:25)

@Kathi you need to zoom out the page in admin mode and then resize the image to the full width size.
#4
Alice (Wednesday, 29 July 2020 11:58)

How can you set Google map as a fullwidth without background? as you did above.
#5
Matrix themes (Wednesday, 29 July 2020 13:28)

@Alice please provide your website url
#6
Tom (Friday, 25 December 2020 08:50)

Now that javascript gets banned, how are we going to do this in the future?