Make your Jimdo website more creative and awesome with the new features "play of columns"
Available in Enterprise package and as Ultimate widgets.
Check the demo features in the latest version of Hafen theme ( v.2.9)
How it works
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
Standalone module "text with image"
Fusce neque. Donec sodales sagittis magna. Maecenas vestibulum mollis diam. Maecenas malesuada. Fusce neque. Donec sodales sagittis magna. Maecenas vestibulum mollis diam. Maecenas malesuada.
Module "Text with image" inside the columns
Fusce neque. Donec sodales sagittis magna. Maecenas vestibulum mollis diam. Maecenas malesuada. Fusce neque. Donec sodales sagittis magna. Maecenas vestibulum mollis diam. Maecenas malesuada.
And if you add it to the last columns, it will have a white overlap element:
Fusce neque. Donec sodales sagittis magna. Maecenas vestibulum mollis diam. Maecenas malesuada. Fusce neque. Donec sodales sagittis magna. Maecenas vestibulum mollis diam. Maecenas malesuada.
Additional overlap styles
You can also get the same overlap effect with 2 columns: you add a simple image to the first column and Widget/HTML to the second one
Your title
This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website
Button
<!-- right overlap banner -->
<div class="is-overlap hs-description bg-primary color-white" style="margin: 5% 0px 0px -50%;z-index:99;">
<h3 class="">
Your title
</h3>
<p>
This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use
to add content to your website
</p>
<br />
<!-- ************* default button ************* -->
<a class="hs-button bg-round ghost-white small-btn" href="http://www.matrix-themes.com/" target="">Button</a>
</div>
<!-- end right overlap banner -->
Your title
This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website
Button
<!-- left overlap banner -->
<div class="is-overlap hs-description bg-primary-dark color-white" style="margin: 5% -80% 0px 0%; z-index:99;">
<h3 class="">
Your title
</h3>
<p>
This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use
to add content to your website
</p>
<br />
<!-- ************* default button ************* -->
<a class="hs-button bg-round ghost-white small-btn" href="http://www.matrix-themes.com/" target="">Button</a>
</div>
<!-- end left overlap -->
Your title
This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use to add content to your website
Button
<!-- centered overlap banner -->
<div class="is-overlap hs-description center-align opacity-6 color-white" style="margin: -50% 5%; z-index:99;">
<h3 class="">
Your title
</h3>
<p>
This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can use
to add content to your website
</p>
<br />
<!-- ************* default button ************* -->
<a class="hs-button bg-round ghost-white small-btn" href="http://www.matrix-themes.com/" target="">Button</a>
</div>
<!-- end centered overlap banner -->
Any further questions or error, please leave your message/ comment below
Documentation
| bg-primary | |
| bg-primary-light | |
| bg-primary-dark | |
| bg-secondary | |
| bg-secondary-dark |
| body | |
| top-header | |
| top-header-inner | |
| header | |
| header-inner | |
| navigation-inner | |
| navigation color | |
| dropdown background color | |
| content |
| background | |
| text color | |
| link color | |
| horizontal line |
| style 1 | |
| style 2 | |
| style 3 | |
| text color |
| background color | |
| navigation color |
| social icons | |
| top header border | |
| header border | |
| nav inner border |
| Template configurations | |
|
|
| Top header inner | |
| Header inner | |
| Navigation inner | |
| Navigation styles | |
| snip-nav --line01 | |
| Sub-menu (breadcrumbs) styles | |
| size-15 | |
| Mobile Navigation styles | |
| size-30 | |
| Content styles | |
| form-white | |
| Footer styles | |
| o-form color-white white-outline-btn | |
| Footer background image | |
|
Typography |
|
| Heading H1 | |
| weight-400 | |
| Heading H2 | |
| weight-400 | |
| Heading H3 | |
| weight-400 | |
| Buttons | |
| weight-400 | |
| Advanced settings | |
| Custom CSS | |
|
#cc-inner .my-class { color:#f0f0f0; }
|
Note: All changes made here will be applied to your entire website.
Write a comment
Peter S. (Tuesday, 23 April 2019 15:39)
Hi Serhiy, great work, thanks!
Kerstin (Wednesday, 29 January 2020 14:54)
but I can't handle the instructions. How can I change the images for images with text? If I insert a banner in the next column next to an image according to the instructions, the text does not appear completely on the mobile phone.
Matrix Themes (Wednesday, 29 January 2020 16:11)
@Kerstin please contact via support page providing all details. Thank you.
Jana (Thursday, 23 April 2020 16:46)
Hi Serhiy, can't copy the code. It shows 'copied', but it does not copy the code.
Matrix themes (Thursday, 23 April 2020 16:56)
@Jana just fixed it
Jana (Thursday, 23 April 2020 17:24)
Hi Serhiy, The 'centered overlap banner' does not work on any of my websites.
Matrix themes (Thursday, 23 April 2020 17:39)
The center overlap banner has been removed in recent themes
Jana (Friday, 24 April 2020 10:22)
Pity