08. May 2019

Play of columns 5 - Tile banner

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

New Button

<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

New Button

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

New Button

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

New Button

<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

This is a title

Aliquam eu nunc. Donec vitae sapien ut libero venenatis faucibus.

New Button

<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

This is a title

Aliquam eu nunc. Donec vitae sapien ut libero venenatis faucibus.

New Button

<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

Comments: 2

#1
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
#2
Serhiy (Friday, 11 October 2019 10:00)

@Peter thank you for letting me know, I just fixed it.

Matrix themes Close

Documentation Quick setup Select a color Select a font Shortcodes Helper classes Updates Enterprise package Help Showcase Marketplace

Play of columns 5 - Tile banner

How to use

tile banner 1

This is a title

Tile banner 2

This is a title

Tile banner 3

This is a title

Tile Banner 4

This is a title

Tile banner 5

This is a title

Tile Banner 6

This is a title

Support

Quick links

Get inspired

Play of columns 5 - Tile banner

How to use

tile banner 1

This is a title

Tile banner 2

This is a title

Tile banner 3

This is a title

Tile Banner 4

This is a title

Tile banner 5

This is a title

Tile Banner 6

This is a title

Support

Quick links

Get inspired

Strictly necessary

Functional

Performance

Marketing / Third Party

Cookie Policy