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 rel is-tile');
});
})(jQuery);
//]]>
</script>
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
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.