Matrix Themes design
Select your right design for your website
Design
How to choose the right template
The first step is to pick out the right template of Matrix themes. Let's see the main difference between them:
- Multipurpose or default: template with standard dropdown menu.
- Multilingual: template for multilingual websites with standard Jimdo navigation, -no dropdown. In this kind of template, the first level of menu will be used only for language select, the second one- for the main navigation and the third level for submenu;
- Explosion or ecommerce: template with megamenu. If the first level of navigation has only one submenu,- it will display the standard dropdown menu. In case your second level has submenu, it will be displayed with mega dropdown navigation;
Regarding the design options, the templates has been divided on the following features:
Fullwidth layout: the content width has 100% width so it's perfect for custom elements such as parallax, fullwidth sections etc;
Boxed layout: the templates with boxed layout, limited width for the main content and footer.
Layout structure
Each of Matrix Themes has the same template structure:
- hs-top-header - available in all themes though in some of the templates this part is hidden. The content of this section ( contact information) can be edited directly in HTML ( custom layout> HTML )
- hs-header - header of your website. The background color of this section can be edited in CSS or through HTML with helper classes
- hs-content - content of your website
- hs-footer - footer of your website
- footer-btm - bottom footer of your website
additional sections
Some of the Matrix themes have additional template sections:
- Matrix-hero - fullwidth/fullscreen image based on Jimdo Awesome backgrounds. In can be edited in Menu>Design>Background. Here you can use single image, slideshow, video or simple color background.
- Magic field/button - usually placed in header. Any custom widget with helper class 'hs-magic' added to content or footer will be displayed on the top of your website.
Questions and Answers
Q. How to change the logo image?
A. Prepare your own logo image with the name logo.png. ( it should have transparent background with suggested width - 400px ). Go to Custom Layout>Files and upload your image. After refreshing the page, the new uploaded image will automatically replace the old one
Q. How to remove some of the section in Matrix Themes?
A. Add the class 'hidden' in HML:
<div class="hs-top-header bg-primary color-white link-grey hidden">
...
Q. How to change the background color of the header?
A. Add the helper class in HTML:
<div class="hs-header bg-white">
...
Q. How to hide the shopping cart icon?
A. Add the helper class in HTML:
<div class="sc-wrapper no-icon">
...
Q. How to remove/add animated navigation links?
A. Add/remove the helper class in HTML:
<div class="hs-menu snip-nav size-11 weight-400">
...
Q. How to remove Matrix Hero in specific page?
A. Add the body class 'no-hero' in Edit Head section:
Q. How to remove Matrix Hero overlay?
A. Add the body class 'no-hero-overlay' in Edit Head section:
Important!
The overlay filter is important for the visibility of white navigation or caption text. Removing the overlay filter, make sure your menu is well visible for the website visitors
Add your own question here!
The answer will be published within 24h
STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE
Richard (Saturday, 02 November 2019 11:32)
Great! Thanks!
Serhiy (Saturday, 02 November 2019 10:47)
@Richard
1) section "quick setup"
2) section "shortcodes"> awesome buttons
Richard (Saturday, 02 November 2019 10:41)
Hi Serhiy,
1- How do I change the background colour of the footer?
I tried to change .hs-footer, .footer-btm and .footer-top in CSS, but without any respons.
2- Is it possible to change the colours of the buttons in two variations? I would like to try transparant filling + text and outline in black or white (depending on the background). Is that possible?
Serhiy (Thursday, 31 October 2019 13:50)
https://www.rapidtables.com/web/html/link/html-anchor-link.html
Richard (Thursday, 31 October 2019 13:26)
Hi Sherhiy, it is in templates like https://lemberg-template3.jimdo.com/#scroll and probably a lot of other templates with a one page option. I see now that these are specific variations of certain templates. Too bad, since my customer likes this very much (it was also used in his former website).
Is there a work-around possible to realise this in the Alsten template?
Serhiy (Thursday, 31 October 2019 13:04)
@Richard I think it's been misunderstanding.
I have no tutorial about anchor links to a specific section of the page. Can you show me please a matrix themes you saw it?
There are templates with one page layout and anchor links in navigation. Those templates have a specific layout structure and features which are not available in other templates ( multilingual, multi purpose and templates with megamenu )
Richard (Thursday, 31 October 2019 12:50)
Hi Serhiy, I am using the Alsten template, but when I am looking on the Matrix website, I see 11 templates, but none of them is called "One Page". Can I also use one page technology in Alsten? How do I proceed?
Serhiy (Thursday, 31 October 2019 12:44)
@Richard this section and feature is only available in one page layout ( matrix themes menu> one page)
Richard (Thursday, 31 October 2019 12:40)
Hi Serhiy, I like to know more about these one page layout. Where to find that?
Serhiy (Thursday, 31 October 2019 12:32)
@Richard In custom widgets ( module Widget/HTML ) you need to add manually the url of the linked page, while using text, jimdo CTA etc, you can add a link with default Jimdo tools ( see the screenshot https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/adding-links.png?t=1572521319 )
I don't have tutorial for linking a specific section of the page. This options is available in one page layout.
Richard (Thursday, 31 October 2019 12:18)
I am looking for instructions how to navigate to a certain shortcut on a page. For instance from a CTA or Read More button or teaser. I miss the original Jimdo method to a link to another page, but I also need an a:link to go to a specific place on the same page. Can you help me out?
Richard (Monday, 28 October 2019 10:32)
I missed that one indeed (there is so much to read and to find out), but it works! Thanks.
Serhiy (Monday, 28 October 2019 10:26)
Richard, you haven’t read the instructions ( shortcodes> shortcodes ) about how to upload your own image and change it in custom widgets
Richard (Monday, 28 October 2019 10:22)
Hi Serhiy,
But how can I change the picture? The image source is now: "https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg"
But where is file this located and how do I put my own pictures in place?
Serhiy (Monday, 28 October 2019 10:00)
@Richard there's no further instruction for the widget "overlay teaser"
Richard (Monday, 28 October 2019 09:52)
Where can I find more instructions about the Matrix Widget overlay teaser?
I like to customise them.
Serhiy (Monday, 25 February 2019 12:58)
@Sandra in admin mode you can see the red box in your content section " Edit here your header title". Just click it and edit for your preference
Sandra Kolodjezak (Monday, 25 February 2019 12:57)
Hallo, wie kann kann ich den Text "Your Hero Titel" auf meiner Startseite ändern?
Agnieszka (Friday, 28 September 2018 13:00)
@Serhiy, thank you, It is gone.... easier than I thought :-)
Serhiy (Friday, 28 September 2018 12:18)
@agnieszka the hero caption can be edited in red box widget placed in content area of your website
agnieszka (Friday, 28 September 2018 11:26)
Hi how can you remove the NEVER LØØK BÆCK text from the overlay header part of the template?
I have uploaded my own picture, still the writing has remained.
thank you
Serhiy (Friday, 13 July 2018 16:11)
@Marcel all you have to do is to change the image url inside of the widget code. From your page I can see that one parallax widget is correct while for the second image you used the wrong widget - fullwidth image.
Marcel (Friday, 13 July 2018 15:58)
How to change the parallelax image. If I change it with a new photo, it's completely bown up. I want to have a normal sized photo at the background with scrolling text.