Play of columns

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

Text with Photo

Overlay banner

Fullwidth sections

Styling list

Tile banner

Animations

Quick snippets

Fullwidth section

<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>

Animations

<script type="text/javascript">
//<![CDATA[
     jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {

// wow
wow = new WOW(
    {
      boxClass:     'j-hgrid',
      animateClass: ' animated fadeInUp',
      mobile:       true,
      offset:       100
    }
  )
  wow.init();

});
})(jQuery);
//]]>
</script>

<style>
/* <![CDATA[ */
.j-hgrid{
   visibility: hidden;
}
/*]]>*/
</style>

Tile banner with dark background

<div class="t02">
</div>
<script type="text/javascript">
//<![CDATA[
     jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
$('.j-module:has(.t02)').addClass('bg-dark color-white white-outline-btn is-tile');
});
})(jQuery);
//]]>
</script>

100% height Tile banner

<div class="t04">
</div>
<script type="text/javascript">
//<![CDATA[
     jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
$('.j-module:has(.t04)').addClass('bg-dark color-white white-outline-btn is-fullwidth is-tile is--flex is-flex-block is-img-100');
});
})(jQuery);
//]]>
</script>

Tile banner with overlay background

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

Fullwidth 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>

Tile banner

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

Fullwidth Tile banner

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

Tile banner with overlay title

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

Zødiac framework

Current version: 5.5.3

From 10/12/2020 the domain zodiac-framework.com has been moved to a new Jimdo website.

The new website and version (5.0) is available here:

www.hembarevskyy.com/projects/zodiac/