Suppørt center
Common issues
Hero image
Everything you need to know about fullscreen hero image/video available in themes Lemberg, Bergen, Altona, Enkel and Oland
1) Overlay filter
This is one of the most frequented questions. Each theme has overlay filter with gradient color. This has been made in order that image caption text is well visible , so instead of dark background color I used different gradient colors from the website https://uigradients.com/. (The quick tutorial about using gradients can be found in section 'select your color' of Matrix Themes menu.
How to remove overlay filter?
The simple and quick way is to use body class 'no-hero-overlay'.
In admin mode go to Settings > Edit Head > Pages and add the body class no-hero-overlay
Please note that body class for each page can be used only in Pro or Business Jimdo versions
Alternative way to hide the overlay filter
In Admin mode go to Design > Custom template > HTML find the below block of code and remove the class 'bg-gradient'
<div class="matrix-hero">
<div class="hs-overlay bg-gradient">
</div>
<br />
<a id="downbutton" href="*#scroll" name="downbutton"></a>
<div id="scroll">
</div>
</div>
<!-- end matrix-hero -->
How to hide the hero image?
You can easily hide the whole hero image displaying the owl carousel instead.
There are 2 ways to do so:
1) using the body class 'no-hero'
2) manually in HTML by adding the class ' hidden' ( this method works also in old Matrix themes)
<div class="matrix-hero hidden">
<div class="hs-overlay bg-gradient">
</div>
<br />
<a id="downbutton" href="*#scroll" name="downbutton"></a>
<div id="scroll">
</div>
</div>
<!-- end matrix-hero -->
2) Image size
The hero image has always 100% height and it's not possible to change it. Here I'll explain how to make the perfect 100% height with custom header and logo.
Sometimes when you resize the logo image or the header making it smaller or bigger, you will need to change some values of hero image in CSS. Because of relative position between header and content, the hero element always depends on header height. If your header has 80px height, the value in CSS should be -80px.
.matrix-hero {
min-height:100vh;
margin-top:-80px; /* this value should be the same as the header height */
position:relative;
}
#hs-video{
position:relative;
margin-top:-80px;/* this value should be the same as the header height */
}
3) Image hero caption
<div class="bg-caption g-font animated fadeInUp">
<h1 class="big color-white weight-800 center-align">
Never løøk bæck
</h1>
<center>
<!-- left button with youtube popup -->
<a class="hs-button bg-white mid-round small-btn popup-youtube" href="https://www.youtube.com/watch?v=TPw5iuUklFk" target="_blank">Watch video</a>
<!-- right button with simple button link -->
<a class="hs-button bg-primary mid-round small-btn" href="http://www.matrix-themes.com/purchase/" target="_blank">Purchase</a>
</center>
</div>
<div class="matrix-msg invisible">
Edit here your slider caption
</div>
Contact
Do you have further questions?
Please ask here!
Write a comment
Christina Mandt (Sunday, 07 May 2017 12:11)
Hello Serhiy,
is it possible to have a video sequence shown on the start page (matrix hero) of hamlstad photography theme instead of the bg image?
Thanks and best regards,
Christina
Serhiy (Sunday, 07 May 2017 12:15)
Hello Christina,
yes, the Halmstad theme has an option of fullscreen video. All you have to do is to place the code inside the content area in widget/HTML and add the ID of youtube video in HTML folder. Please check the details in section " documentation ".
Best,
Serhiy
João Melo (Friday, 12 May 2017 20:29)
Hey Serhiy.
I'm trying to do the full width image you told me but the image is not showing up. What can the problem be?
Serhiy (Friday, 12 May 2017 20:51)
Hello Joao,
I just fixed the error.
Kind regards,
Serhiy
João (Sunday, 14 May 2017 01:00)
Hey Serhiy.
I've put a parallax code in my landing page but I'm having difficulties putting the button in the center. I've replaced the left-aligned for right align and it work but for the center it isnt working. Besides that can you tell me how can I put the text box with less width since it' using the total width of the parallax?
Apart from that, I'd also like to know how I can leave no blank space between the elements and have them have full width.
Serhiy (Sunday, 14 May 2017 01:01)
@João
1) use the class 'text-center' to add center aligned buttons;
2) you can use grid columns for <p>
for example <p class="col-10"> and 'text-center' if you wish to make it center aligned;
3) use </br> to make the space between two elements
João (Thursday, 22 June 2017 21:30)
Hey Serhiy.
I have an image saved as header03.jpg to use it as a header. I replaced the old one for a new one in the header fullwidth image by uploading in the 'Files' but it is still showing the old, which was already deleted. Can you help please? Thanks.
Serhiy (Thursday, 22 June 2017 21:44)
@Joao there are 2 ways to fix it:
1) upload a file with different name, for example instead if header.03.jpg use 'header003.jpg'. then in CSS change the file name and click the save button.
2) this is happens because Jimdo system is still showing the old image saved in cache. You need to make any change in CSS ( no matter, just remove a piece of code and add it again) clicking the save button at the end. In this way your CSS folder will be updated and you can see the new image.