Matrix Page Builder is the advanced front-end framework, that lets you create beautiful Jimdo websites in the easiest and quickest way possible.
⬤
⬤
Core features
Find out the new features of the Matrix Page Builder for default Jimdo templates.
- The advanced style editor for the global colors of your website.
- Drag & drop tools to create custom full width page sections.
- Self hosted files. All source files including Google fonts and Font Awesome icons are being hosted on your own website.
Installation
Install it via Jimdo CDN
Copy the below files and paste them to your website ( Menu> Settings> Edit Head )
<script src="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/js/matrix-builder.js?t=1697615600" type="text/javascript"></script>
<link href="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/css/matrix-builder.css?t=1697615593" rel="stylesheet" type="text/css" />
The above files are being hosted on a Jimdo website. It is reccomended to use the CDN for the quick installation or testing. Once installed the page builder on your Jimdo website, you can download the source files and host all of them on your own website following the detailed tutorial in documentation.
Install the style editor
In order to use the custom colors for your widgets, you'll need to install the style editor:
Add a module 'Columns' to the footer of your website with only one column. Inside of the column add 'Table' and clicking the button 'Edit HTML' replace the existing code with the following one:
Style Editor
part 1 ( table )
<div class="color-switcher admin-only mid-round add-10 color-white" spellcheck="false" style="background: #404040; max-height: 240px; overflow-y: scroll;">
<p style="color: #ffffff!important;"> </p>
<div class="cc-map-additional-devider"><span style="color: white;">Global colors</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr class="" style="height: 32px; color: white; font-size: 15px;">
<td class="color1" style="cursor: pointer; background-color: #2951d5; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;"> </td>
<td class="bg-transparent color-white" style="background-color: rgba(0, 0, 0, 0); height: 32px;"> bg-primary</td>
</tr>
<tr class="" style="height: 32px; color: white; font-size: 15px;">
<td class="color2" style="cursor: pointer; background-color: #f3f4f6; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;"><span style="color: #ffffff;"> </span></td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;"> bg-primary-light</span></td>
</tr>
<tr class="" style="height: 32px; color: white; font-size: 15px;">
<td class="color3" style="cursor: pointer; background-color: #26262c; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;"><span style="color: #ffffff;"> </span></td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;"> bg-primary-dark</span></td>
</tr>
<tr class="" style="height: 32px; color: white; font-size: 15px;">
<td class="color4" style="cursor: pointer; background-color: #2ccab9; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;"> bg-secondary</span></td>
</tr>
<tr class="" style="height: 32px; color: white; font-size: 15px;">
<td class="color5" style="cursor: pointer; background-color: #76787f; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32.5382px;"><span style="color: #ffffff;"> bg-secondary-dark</span></td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0%" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);"></table>
<div class="cc-map-additional-devider"><span style="color: white;">Custom buttons</span></div>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px; color: white; font-size: 15px;">
<td class="color6" style="cursor: pointer; background-color: #2951d5; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);"> background</td>
</tr>
</tbody>
</table>
<table align="" border="0" cellspacing="10" cellpadding="0" width="100%" height="0" class="mceEditable" style="border: 0px solid #ffffff; background-color: rgba(0, 0, 0, 0);">
<tbody>
<tr style="height: 32px; color: white; font-size: 15px;">
<td class="color7" style="cursor: pointer; background-color: #ffffff; width: 32px; height: 32px; text-align: center; border-radius: 500px; border: 1px solid #666666;"> </td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);"> text color</td>
</tr>
</tbody>
</table>
<div class="c"></div>
<br /> <span class="is-brandon-font" style="color: #ccc; font-size: 12px;">Note: All changes made here will be applied to your entire website</span>
<div class="c"></div>
</div>
Inside of the same column, add the module "Widget/HTML" with the following code. Click the save button at the end and refresh the page.
Style Editor
part 2 ( Widget/HTML )
<var>is-switcher</var>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict(),function(t){t(document).ready(function(){function e(){var e={};[".color1",".color2",".color3",".color4",".color5",".color6",".color7"].forEach(function(i){e[i]=t(i).css("background-color")}),document.documentElement.style.setProperty("--bg-primary",e[".color1"]),document.documentElement.style.setProperty("--bg-primary-light",e[".color2"]),document.documentElement.style.setProperty("--bg-primary-dark",e[".color3"]),document.documentElement.style.setProperty("--bg-secondary",e[".color4"]),document.documentElement.style.setProperty("--bg-secondary-dark",e[".color5"]),document.documentElement.style.setProperty("--bg-btn-01",e[".color6"]),document.documentElement.style.setProperty("--text-btn-01",e[".color7"])}t(".is-boxed").length&&t("body").addClass("has-sidebar"),t(".j-hgrid").unwrap().wrap("<div class='m-section' />"),t(".cc-m-htmlcode").on({mouseenter:function(){t(this).find("var, ins").show().css("display","block")},mouseleave:function(){t(this).find("var, ins").hide()}}),t("var").each(function(){t(this).closest(".m-section").removeClass().addClass(t(this).text())}),t(".matrix-view").on("click",function(e){e.preventDefault(),t("#cms",window.parent.document).parent().parent().parent().toggleClass("j-prev-phone-portrait")}),t(".cc-m-all-opened .is-fluid").removeAttr("data-mce-style");var i,n=t('<div class="guide-lines-container"><\/div>').appendTo(".matrix .is-fluid-area");function o(e){n.empty();var i=e.position(),o=e.outerWidth();e.parent(),t('<div class="guide-line-vertical"><\/div>').css({left:i.left+o/2,top:0,bottom:0}).appendTo(n)}function s(){n.empty()}t(".matrix .is-fluid").draggable({containment:"parent",grid:[1,1],stop:function(){var e=t(this).parent().width(),i=t(this).parent().height(),n=t(this).position().left/e*100+"%",o=t(this).position().top/i*100+"%";t(this).css("left",n),t(this).css("top",o),s()},drag:function(t,e){o(e.helper)}}),t(".matrix .is-fluid").dblclick(function(e){t(e.target).hasClass("btn-radius-plus")||t(e.target).hasClass("btn-radius-minus")||t(this).draggable({disabled:!0})}),t(document).on("click",function(e){t(e.target).closest(".matrix .is-fluid").length||t(".matrix .is-fluid").draggable({disabled:!1})}),t(".matrix .is-fluid-area .is-fluid").resizable({containment:"parent",autoHide:!0,resize:function(t,e){var n=e.element.parent(),o=e.element.width()/n.width()*100+"%";e.element.css({width:o,height:"auto",left:i.left,top:i.top}),s()},start:function(t,e){i=e.element.position(),o(e.helper)},stop:function(){s()}}),t(".matrix .is-fluid-area").resizable({handles:"s",autoHide:!0,stop:function(t,e){var i=e.element.parent();e.element.css({height:e.element.height()+"px",width:e.element.width()/i.width()*100+"%"})}}),t(".matrix .mask-section").resizable({containment:"parent",autoHide:!0,resize:function(t,e){var i=e.element.parent(),n=(e.element.width()+r)/i.width()*100+"%",o=e.element.height()/i.height()*100+"%",r=4;e.element.css({width:n,height:o,left:0,top:0}),s()},start:function(t,e){o(e.helper)},stop:function(){s()}}),t(".matrix .fluid-img").resizable({containment:"parent",autoHide:!0,aspectRatio:!1,resize:function(t,e){var n=e.element.parent(),o=(e.element.width()+a)/n.width()*100+"%",r=e.element.height()/n.height()*100+"%",a=4;e.element.css({width:o,height:r,left:i.left,top:i.top}),s();var l=e.position.left/e.size.width*100+"%",c=e.position.top/e.size.height*100+"%";e.element.css("background-position",l+" "+c)},start:function(t,e){i=e.element.position(),o(e.helper)},stop:function(){s()}}),new MutationObserver(function(i){i.forEach(function(i){"childList"===i.type&&i.addedNodes.length>0&&(e(),t(".bg-custom-color").each(function(){var e=t(this).find("span").css("color");t(this).parent().attr("style","background-color: "+e+"!important")}))})}).observe(document.body,{childList:!0,subtree:!0}),e(),t(".reset-btn").click(function(){t(".matrix .is-fluid").draggable("destroy"),t(".matrix .is-fluid").draggable()}),t(".edit-btn").click(function(){t(".matrix .is-fluid").draggable("destroy")}),t(".btn-delete").click(function(){t(this).parent().remove()}),t(".btn-add").click(function(){var e=t(this).parent(".is-fluid"),i=e.clone();e.hasClass("is-rel")&&i.removeClass("is-rel"),i.css({left:"+=10px",top:"+=10px"}),i.insertAfter(e)}),t(".is-fluid").removeAttr("data-mce-style")})}(jQuery);
//]]>
</script> <!-- editor buttons -->
<button class="btn btn-sm cc-m-save btn-save btn-float-left matrix-msg matrix-save invisible" data-action="save" style=
"width: 32px;height: 32px;position:fixed;text-align: center;top:1px;left:35px;z-index:999999;border:1px solid transparent;padding:5px;font-size:30px;background: #1ba9e1;color: #fff;-webkit-border-radius: 2px;border-radius:4px;">
 </button><button class="btn btn-sm btn-float-left matrix-msg invisible matrix-view" style=
"width: 32px;height: 32px;position:fixed;text-align: center;top:1px;left:69px;z-index:999999;border:1px solid transparent;padding:5px;font-size:30px;background: #1ba9e1;color: #fff;-webkit-border-radius: 2px;border-radius:4px;"
data-action="save"> </button> <!-- end editor buttons -->
You should see 3 buttons in the top left corner:
1. Open/close the menu
2. Apply the color
3. Mobile view
Templates with sidebar
Full width elements don't work correctly in Jimdo templates having left or right sidebar. In this case you'll have to add 'is-boxed' in the first line of variable tag ( the second part of the style editor)
Frequently Asked Questions
Can I use it with Dolphin website?
Matrix Page Builder can be used only with Jimdo Creator websites and doesn't work in Jimdo Dolphin.
Does it work with custom layout?
You can use the Matrix Page Builder only with default Jimdo templates
Can I use it for my customers' websites?
There's no limitation to use the page builder for multiple websites
Is it free?
Once installed, you have the access to the documentation sections and main custom widgets. The access to the password protected sections requires a valid password that can be sent after upgrade.
How can I upgrade the page builder?
After the installation, you'll find the upgrade section inside the admin menu. It is possible to upgrade the page builder by contacting Jimdo Experts or Matrix Themes Partners.
Do you have any further questions?
For any further questions, please use the contact form from the page 'support'.
#StandWithUkraine
Quick links
hide-in-doc-page
draggable-logo
Main colors
| bg-primary | |
| bg-primary-light | |
| bg-primary-dark | |
| bg-secondary | |
| bg-secondary-dark |
Template sections
| body | |
| top-header | |
| header | |
| content |
Footer Styles
| background | |
| text color | |
| link color | |
| horizontal line |
Buttons
| style 1 | |
| style 2 | |
| style 3 | |
| text color |
Other elements
| social icons | |
| navigation color | |
| subnav background |
Mobile navigation
| background color | |
| navigation color |
| Template configurations |
| has-right-nav has-large-header g-font m-text-16 |
| Navigation styles |
| size-16 weight-400 snip-nav |
| Content styles |
| form-white |
| Footer styles |
| o-form color-white |
|
Typography |
| Heading H1 |
| weight-600 |
| Heading H2 |
| weight-600 |
| Heading H3 |
| weight-500 |
| Buttons |
| weight-400 |
| Animations |
Note: All changes made here will be applied to your entire website.
is-switcher
Stand out with professional Jimdo website