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.
Quick links
| bg-primary | |
| bg-primary-light | |
| bg-primary-dark | |
| bg-secondary | |
| bg-secondary-dark |
| body | |
| top-header | |
| header | |
| content |
| background | |
| text color | |
| link color | |
| horizontal line |
| style 1 | |
| style 2 | |
| style 3 | |
| text color |
| social icons | |
| navigation color | |
| subnav background |
| background color | |
| navigation color |
| Template configurations |
| has-center-nav g-font has-large-header |
| Navigation styles |
| size-15 weight-400 snip-nav --line01 is-uppercase |
| Content styles |
| form-white |
| Footer styles |
| o-form color-white |
|
Typography |
| Heading H1 |
| weight-600 is-uppercase |
| Heading H2 |
| weight-400 is-uppercase |
| Heading H3 |
| weight-600 is-uppercase |
| Buttons |
| weight-600 is-uppercase |
| Animations |
Note: All changes made here will be applied to your entire website.
MATRIX THEMES
STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE
Write a comment
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?
Serhiy (Wednesday, 03 July 2019 20:36)
@Sean you need to remove one column, so it will be only one
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.
Alice (Wednesday, 29 July 2020 11:58)
How can you set Google map as a fullwidth without background? as you did above.
Matrix themes (Wednesday, 29 July 2020 13:28)
@Alice please provide your website url
Tom (Friday, 25 December 2020 08:50)
Now that javascript gets banned, how are we going to do this in the future?