Create a cool widget with standard Jimdo tools
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
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>
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>
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>
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>
<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>
<div class="t06">
</div>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
$('.j-module:has(.t06)').addClass('has-mask rel is-tile');
});
})(jQuery);
//]]>
</script>
Write a comment
Peter Litke (Friday, 11 October 2019 07:09)
Hi,
I would like to use "Tile Banner 6", I think it bugs.
It puts a gray background from bottom to top on the page
as you can see here: https://www.bdm-litke.de/start-2/
The other Tile Banners do work on my page.
Thank you for your help, Peter
Serhiy (Friday, 11 October 2019 10:00)
@Peter thank you for letting me know, I just fixed it.