The introducing the new feature "Landing pages" for Jimdo website builder that allows you to create a powerful landing page or one page website.
Step by step detailed tutorial
Please make sure that all items of your navigation are hidden
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>
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 -->
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>
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:
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