Matrix Page Builder is the advanced front-end framework, that lets you create beautiful Jimdo websites in the easiest and quickest way possible.
Matrix Page Builder for Jimdo templates
Create unique Jimdo websites using advanced customizations, CSS, JS plugins and pre-made design sections.
⬤
Find out the new features of the Matrix Page Builder for default Jimdo templates.
Watch video
Begin with a stunning design of completely redesigned Jimdo templates with Design Kit feature. Select fonts, colors,
backgrounds, and much more to personalize every detail. What's more, you have the flexibility to switch templates whenever
you desire without losing any of your progress.
Version: 6.5.2
Last updated: 03.04.2024
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=1707678991" type="text/javascript"></script>
<link href="https://u.jimcdn.com/cms/o/sa58ac84176c7327c/userlayout/css/matrix-builder.css?t=1712135219" rel="stylesheet" type="text/css" />
Clicking the middle left button will open the admin menu of the page builder.
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( sidebar ) 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 br5 add-10 color-white" spellcheck="false" style="background: #404040; max-height: 270px; 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>
<div class="cc-map-additional-devider"><span style="color: white;">Custom CSS</span></div>
<table align="" border="0" cellspacing="0" cellpadding="3" width="100%" height="100%" class="mceEditable">
<tbody>
<tr>
<td class="cc-config cc-css config10 col-6">
<p> </p>
<p>#cc-inner .my class {</p>
<p> background:red;</p>
<p>}</p>
<p> </p>
</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(".config10").each(function(){var e=t(this);if(e.hasClass("config10")){var i=e.find("p").map(function(){return t(this).text().trim()}).get().join("");i=i.replace(/\s+/g," ").trim();var n=t('style[data-type="custom-css"]');n.length>0&&!i?n.remove():(n.remove(),t("head").append('<style data-type="custom-css">'+i+"</style>"))}else e[0].textContent.trim().replace(/\s+/g," ").trim().split(" ")}),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 s(e){n.empty();var i=e.position(),s=e.outerWidth();e.parent(),t('<div class="guide-line-vertical"></div>').css({left:i.left+s/2,top:0,bottom:0}).appendTo(n)}function o(){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+"%",s=t(this).position().top/i*100+"%";t(this).css("left",n),t(this).css("top",s),o()},drag:function(t,e){s(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(),s=e.element.width()/n.width()*100+"%";e.element.css({width:s,height:"auto",left:i.left,top:i.top}),o()},start:function(t,e){i=e.element.position(),s(e.helper)},stop:function(){o()}}),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+"%",s=e.element.height()/i.height()*100+"%",r=4;e.element.css({width:n,height:s,left:0,top:0}),o()},start:function(t,e){s(e.helper)},stop:function(){o()}}),t(".matrix .fluid-img").resizable({containment:"parent",autoHide:!0,aspectRatio:!1,resize:function(t,e){var n=e.element.parent(),s=(e.element.width()+a)/n.width()*100+"%",r=e.element.height()/n.height()*100+"%",a=4;e.element.css({width:s,height:r,left:i.left,top:i.top}),o();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(),s(e.helper)},stop:function(){o()}}),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>
<button class="btn btn-sm cc-m-save btn-save matrix-msg matrix-save" data-action="save"> </button>
<button class="btn btn-sm matrix-msg matrix-view"> </button>
You should see 3 buttons in the top left corner:
1. Open/close the menu
2. Apply the color
3. Mobile view
If you're using a Jimdo template with a left or right sidebar, you need to add 'is-boxed' in the first line of the variable tag (the second part of the style editor).
Matrix Page Builder is the advanced front-end framework, that lets you create beautiful Jimdo websites in the easiest and quickest way possible.
Matrix Page Builder can be used only with Jimdo Creator websites and doesn't work in Jimdo Dolphin.
You can use the Matrix Page Builder only with default Jimdo templates
There's no limitation to use the page builder for multiple websites
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.
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.
For any further questions, please use the contact form from the page 'support'.
#StandWithUkraine