The introducing the new feature "Landing pages" for Jimdo website builder that allows you to create a powerful landing page or one page website.
- Landing pages can be used with any Matrix themes ( multi purpose or multilingual) installed from April 2022. This feature replaces the previous Matrix one page theme 'Varmdo'.
Documentation
Step by step detailed tutorial
Step 1: hide Jimdo navigation
Please make sure that all items of your navigation are hidden
Step 2: add a custom scroll menu
Copy the below code and paste it inside the Widget/HTML of the footer section.
Refresh the page to see your menu inside the header.
<style>
/*<![CDATA[*/
.section {
margin-top: -100px;
padding-top: 100px;
}
.section:first-child .section {
padding-top: 100px;
}
.section span {
display:none;
}
.matrix .section span {
display:block;
}
.matrix .section {
background:#404040;
border-radius:4px;
font-family: "Brandon Text",Asap,Verdana,Arial,sans-serif!important;
-webkit-font-smoothing: antialiased;
font-size:12px;
font-weight:400;
letter-spacing:0;
color:#fff;
padding:7px;
margin-top:0px;
}
.matrix .hs-header .cc-m-htmlcode {
position: relative!important;
}
@media only screen and (max-width: 1023px){
.one-page,.one-page .nav li {
display:block!important;
}
.section{
margin-top: 0px;
padding-top: 0px;
}
.section:first-child .section {
padding-top: 0px;
}
}
ul.nav {
margin:0;
padding:0;
list-style:none;
}
.hs-menu .nav li {
display:inline-block;
}
.hs-menu .nav a {
text-decoration:none;
color: inherit;
display:inline-block;
line-height:150%;
margin: 15px 15px;
padding: 2px 0px;
border-bottom:0px solid transparent;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.hs-menu .nav a:hover,.hs-menu .nav .current a,
.hs-menu.snip-nav .nav a:hover,.hs-menu.snip-nav .nav .current a {
color: inherit;
border-bottom:0px solid #fff;
}
/*]]>*/
</style>
<!-- start scroll nav menu -->
<div class="hs-menu one-page snip-nav g-font size-16 right-align weight-400 hs-magic">
<ul class="nav">
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#service">Service</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- end scroll nav menu -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-one-page-nav/3.0.0/jquery.nav.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
// scroll-menu
$('.one-page').onePageNav();
$('.one-page ul li a').click(function() {
$(".overlay").removeClass("open");
$(".button_container").toggleClass("active");
});
});
})(jQuery);
//]]>
</script>
Step 3: Edit your menu
Even if your menu will be displayed on the top of your website, it can be edited inside the Widget/HTML,- the same place you added it to the footer.
<!-- start scroll nav menu -->
<div class="hs-menu one-page snip-nav g-font size-16 right-align weight-400 hs-magic">
<ul class="nav">
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#service">Service</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- end scroll nav menu -->
Step 4: Add the anchor sections
At the beginning of each anchor sections you'll have to add Widget/HTML with the following code:
<div class="section" id="home">
<span>Home</span>
</div>
<div class="section" id="about">
<span>About</span>
</div>
<div class="section" id="service">
<span>Service</span>
</div>
<div class="section" id="contact">
<span>Contact</span>
</div>
The most common issues
Issue 01: incorrect anchor sections
The anchor section's offset should be more or less the same as the header height. By default it's setup 100px. To change this value , you can edit the following part of the code:
.section {
margin-top: -100px;
padding-top: 100px;
}
.section:first-child .section {
padding-top: 100px;
}
Issue 02: external pages
In order to use an external page inside of your scroll menu and to make your navigation accessible for other pages of your website ( privacy page, Not found page, sitemap, blog post etc), you'll need to add a full path of your website URL:
<!-- start scroll nav menu -->
<div class="hs-menu one-page snip-nav g-font size-16 right-align weight-400 hs-magic">
<ul class="nav">
<li>
<a href="https://alsten-template4.jimdofree.com/#home">Home</a>
</li>
<li>
<a href="https://alsten-template4.jimdofree.com/#about">About</a>
</li>
<li>
<a href="https://alsten-template4.jimdofree.com/#service">Service</a>
</li>
<li>
<a href="https://alsten-template4.jimdofree.com/#contact">Contact</a>
</li>
</ul>
</div>
<!-- end scroll nav menu -->
Issue 03: templates that don't support landing pages
The landing pages can not be used in the following Matrix themes that have a specific template markup:
- Halmstad
- Oland
- Enkel
- Nordland
- Heisenberg
- New-York
- Holborn
GET INSPIRED
| bg-primary | |
| bg-primary-light | |
| bg-primary-dark | |
| bg-secondary | |
| bg-secondary-dark |
| body | |
| top-header | |
| header | |
| content |
| background | |
| text color | |
| link color | |
| horizontal line |
| style 1 | |
| style 2 | |
| style 3 |
| social icons | |
| navigation color | |
| subnav background |
| background color | |
| navigation color |
| has-center-nav g-font |
| size-15 weight-400 snip-nav is-uppercase --line01 |
| form-white |
| o-form color-white |
| weight-600 is-uppercase |
| weight-600 is-uppercase |
| weight-600 is-uppercase |
| weight-600 is-uppercase |
| none |
Note: All changes made here will be applied to your entire website.
MATRIX THEMES
STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE
Write a comment
Chris (Thursday, 07 April 2022 12:01)
Hey Serhiy,
great feature! Thank you!
Is it possible to use this "new" menu together with the "hs-magic" social icons? When I try it, the social icons appear to the left of the menu. I'd like to have them on the right of it.
Kind regards.
Chris