Create a cool widget with standard Jimdo tools
- 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
Add a simple columns module with 2 rows: left aligned image and on the right side add any element you'd like to display here. In my example I use title, text and button
Now as the last module on the left, display "widget/HTML" by adding different styles from this page
tile banner 1
This is a title
Praesent congue erat at massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra
<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>
Tile banner 2
This is a title
Praesent congue erat at massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra
<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>
Tile banner 3
This is a title
Aliquam eu nunc. Donec vitae sapien ut libero venenatis faucibus. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.
Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Praesent blandit laoreet nibh. Cras id dui.
<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 4
This is a title
Aliquam eu nunc. Donec vitae sapien ut libero venenatis faucibus. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.
Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Praesent blandit laoreet nibh. Cras id dui.
<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 5
<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>
Tile Banner 6
<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');
});
})(jQuery);
//]]>
</script>
STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE
Write a comment