⬤

The advanced page builder for Jimdo websites

Create unique Jimdo websites using advanced customizations, CSS, JS plugins and pre-made design sections.

⬤

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

Option 1: Install it via CDN

Copy the below files and paste them to your website ( Menu> Settings> Edit Head )


<script src="https://u.jimcdn.com/cms/o/s47663cd6a6b7ab6f/userlayout/js/matrix-builder.js?t=1683584812" type="text/javascript"></script>
<link href="https://u.jimcdn.com/cms/o/s47663cd6a6b7ab6f/userlayout/css/matrix-builder.css?t=1685176973" rel="stylesheet" type="text/css" />

The above files are being hosted on a Jimdo website. You can use the CDN only for the quick installation or testing. After which you download all source files and host them on your own website.

Option 2: download all source files and host them on your own website

Matrix Page Builder

( Uploaded 27.05.2023 )

page builder.zip

Compressed Archive in ZIP Format 716.3 KB

Download

Unzip the folder 'Matrix Page Builder' and upload all files on your own Jimdo website ( Design> Custom Templates> Files)

Replace 2 files in section Edit Head in order to host the framework on your own website.

The next step is to install the advanced 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;">&nbsp;</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;">&nbsp;</td>
<td class="bg-transparent color-white" style="background-color: rgba(0, 0, 0, 0); height: 32px;">&nbsp;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;">&nbsp;</span></td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;">&nbsp;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;">&nbsp;</span></td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;">&nbsp;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;">&nbsp;</td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32px;"><span style="color: #ffffff;">&nbsp;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;">&nbsp;</td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0); height: 32.5382px;"><span style="color: #ffffff;">&nbsp;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;">&nbsp;</td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);">&nbsp;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;">&nbsp;</td>
<td class="bg-transparent" style="background-color: rgba(0, 0, 0, 0);">&nbsp;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.

Style Editor

part 2 ( Widget/HTML )



<var>is-switcher</var> 
<script type="text/javascript">
//<![CDATA[
   jQuery.noConflict(),function(o){o(document).ready(function(){var e;o(".bg-custom-color").each(function(){var t=o(this).find("span").css("color");o(this).parent().attr("style","background-color: "+t+"!important")}),e={},[".color1",".color2",".color3",".color4",".color5",".color6",".color7"].forEach(function(t){e[t]=o(t).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"]),o(".is-boxed").length&&o("body").addClass("has-sidebar"),o(".j-hgrid").unwrap().wrap("<div class='m-section' />"),o(".cc-m-htmlcode").on({mouseenter:function(){o(this).find("var, ins").show().css("display","block")},mouseleave:function(){o(this).find("var, ins").hide()}}),o("var").each(function(){o(this).closest(".m-section").removeClass().addClass(o(this).text())}),o(".matrix-view").on("click",function(t){t.preventDefault(),o("#cms",window.parent.document).parent().parent().parent().toggleClass("j-prev-phone-portrait")}),o(".cc-m-all-opened .is-fluid").removeAttr("data-mce-style"),o(".matrix .is-fluid").draggable({containment:"parent",stop:function(){var t=100*parseFloat(o(this).position().left/parseFloat(o(this).parent().width()))+"%",e=100*parseFloat(o(this).position().top/parseFloat(o(this).parent().height()))+"%";o(this).css("left",t),o(this).css("top",e)}}).click(function(){o(this).draggable({disabled:!1})}).dblclick(function(){o(this).draggable({disabled:!0})}),o(".matrix .is-fluid-area .is-fluid").resizable({containment:"parent",autoHide:!0,stop:function(t,e){var o=e.element.parent();e.element.css({width:e.element.width()/o.width()*100+"%",height:e.element.height()/o.height()*100+"%"})}}),o(".reset-btn").click(function(){o(".matrix .is-fluid").draggable("destroy"),o(".matrix .is-fluid").draggable()}),o(".edit-btn").click(function(){o(".matrix .is-fluid").draggable("destroy")}),o(".btn-delete").click(function(){o(this).parent().remove()}),o(".btn-add").click(function(){var t=o(this).parent(".is-fluid"),e=t.clone();e.css({left:"+=10px",top:"+=10px"}),e.insertAfter(t)})})}(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;">
&#160;</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">&#160;</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

What is Matrix Page Builder?

Matrix Page Builder is the advanced front-end framework, that lets you create beautiful Jimdo websites in the easiest and quickest way possible.

Can I use it with Dolphin website?

Matrix Page Builder can be used only with Jimdo Creator websites

Does it work with custom layout?

You can use the Matrix Page Builder only with default Jimdo templates

Does it work with all Jimdo themes?

Yes

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 pre-made block sections, advanced drag & drop editor and the premium support 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

Support

Features

Get inspired

Quick links

hide-in-doc-page

draggable-logo

Showcase

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

is-switcher

MATRIX THEMES

STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE