Make your Jimdo website more creative and awesome with the new features "play of columns"
Available in Enterprise package and as Ultimate widgets.
Check the demo features in the latest version of Hafen theme ( v.2.9)
How it works
Instead of adding new widgets, I decided to use a different approach - making different styles of default Jimdo widgets if there're special conditions. For example, the module "Image with text" added inside the columns, will have a different style
Standalone module "text with image"
Fusce neque. Donec sodales sagittis magna. Maecenas vestibulum mollis diam. Maecenas malesuada. Fusce neque. Donec sodales sagittis magna. Maecenas vestibulum mollis diam. Maecenas malesuada.
Module "Text with image" inside the columns
Fusce neque. Donec sodales sagittis magna. Maecenas vestibulum mollis diam. Maecenas malesuada. Fusce neque. Donec sodales sagittis magna. Maecenas vestibulum mollis diam. Maecenas malesuada.
And if you add it to the last columns, it will have a white overlap element:
Fusce neque. Donec sodales sagittis magna. Maecenas vestibulum mollis diam. Maecenas malesuada. Fusce neque. Donec sodales sagittis magna. Maecenas vestibulum mollis diam. Maecenas malesuada.
Additional overlap styles
You can also get the same overlap effect with 2 columns: you add a simple image to the first column and Widget/HTML to the second one
Your title
This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website
Button
<!-- right overlap banner -->
<div class="is-overlap hs-description bg-primary color-white" style="margin: 5% 0px 0px -50%;z-index:99;">
<h3 class="">
Your title
</h3>
<p>
This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use
to add content to your website
</p>
<br />
<!-- ************* default button ************* -->
<a class="hs-button bg-round ghost-white small-btn" href="http://www.matrix-themes.com/" target="">Button</a>
</div>
<!-- end right overlap banner -->
Your title
This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website
Button
<!-- left overlap banner -->
<div class="is-overlap hs-description bg-primary-dark color-white" style="margin: 5% -80% 0px 0%; z-index:99;">
<h3 class="">
Your title
</h3>
<p>
This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use
to add content to your website
</p>
<br />
<!-- ************* default button ************* -->
<a class="hs-button bg-round ghost-white small-btn" href="http://www.matrix-themes.com/" target="">Button</a>
</div>
<!-- end left overlap -->
Your title
This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website
Button
<!-- centered overlap banner -->
<div class="is-overlap hs-description center-align opacity-6 color-white" style="margin: -50% 5%; z-index:99;">
<h3 class="">
Your title
</h3>
<p>
This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use
to add content to your website
</p>
<br />
<!-- ************* default button ************* -->
<a class="hs-button bg-round ghost-white small-btn" href="http://www.matrix-themes.com/" target="">Button</a>
</div>
<!-- end centered overlap banner -->
Fullwidth slideshow
Now we can make fullwidth image or slideshow if add inside the columns the module "Photo Gallery"
Fullwidth slideshow in header
Copy the below code and paste it inside the module Widget/HTML
<div class="header-slider">
</div>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
// step 1
$( ".j-module:has(.header-slider)" ).wrap( "<div class='is-foo bg-white' />" );
// step 2
if ($('.header-slider').css('display') == 'block') {
$('.is-foo').appendTo($('.slider_holder'));
}
});
})(jQuery);
//]]>
</script>
Single image
If we upload only one image, we get a single fullwidth image.
You can add the following Widget/HTML inside the same column where you have the image with some additional control
<div class="sgl-img">
</div>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
$( ".j-module:has(.sgl-img)" ).wrap( "<div class='no-controls has-custom-caption' />" );
});
})(jQuery);
//]]>
</script>
Single Image with caption
Tip & suggestions
You can reduce the white space between 2 fullwidth elements by adding the classes ' pull-top ' or 'pull-btm'
<div class="no-space">
</div>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
$( ".j-module:has(.no-space)" ).wrap( "<div class='no-controls has-custom-caption pull-top' />" );
});
})(jQuery);
//]]>
</script>
Any further questions or error, please leave your message/ comment below
STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE
Write a comment
Peter S. (Tuesday, 23 April 2019 15:39)
Hi Serhiy, great work, thanks!