Style Editor Docs
     
  • Home
  • Add-ons
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Hafen
    • Altona
    • Enkel
    • Horten
    • Hisingen
    • Agen
    • Tjörn
    • Halmstad
    • Öland
  • Support
    • Style Switcher
    • Common Issues
    • Installation
    • Guides
    • Blog
    • Updates
    • Marketplace
  • Home
  • Add-ons
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Hafen
    • Altona
    • Enkel
    • Horten
    • Hisingen
    • Agen
    • Tjörn
    • Halmstad
    • Öland
  • Support
    • Style Switcher
    • Common Issues
    • Installation
    • Guides
    • Blog
    • Updates
    • Marketplace
    03. April 2022

    How to create a powerful free landing page

    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'.
    How to build a professional landing page with Jimdo creator
    screenshot of Lemberg landing page

    Documentation

    Step by step detailed tutorial 

     

     

    Step 1:  hide Jimdo navigation

    Please make sure that all items of your navigation are hidden

    How to build a professional landing page with Jimdo creator bg-darkgray add-5

    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>
    How to build a professional landing page with Jimdo creator bg-darkgray add-5

    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.

     

    How to build a professional landing page with Jimdo creator

    <!-- 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
    tagPlaceholderTags:

    Write a comment

    Comments: 1
    • #1

      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

    SUPPORT

    • Blog
    • Support center
    • Tutorials
    • Common Support issues
    • Updates

    QUICK LINKS

    • Advanced Style Editor
    • Features
    • Pricing
    • Pre Purchase Questions
    • Marketplace
    • Zødiac Framework
    • Jimdo Creator

    WIDGETS

    • Instagram feed
    • Team Showcase
    • Animations
    • Parallax widget
    • Full width widgets
    • Countdown Timer
    • All Widgets

    GET INSPIRED

    • Showcase
    • Custom widgets
    • Enterprise Package
    • No coding features
    • Matrix variables
    • Dolphin Block Elements
    hide-in-doc-page

    Showcase
    draggable-logo

     

    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
    Other elements
      social icons
      navigation color
      subnav background
    Mobile navigation
       background color
       navigation color
    Template configurations
    has-center-nav g-font
    navigation styles
    size-15 weight-400 snip-nav is-uppercase --line01
    content styles
    form-white
    footer styles
    o-form  color-white
    Typography
    Heading H1
    weight-600 is-uppercase
    Heading H2
    weight-600 is-uppercase
    Heading H3
    weight-600 is-uppercase
    Buttons
    weight-600 is-uppercase
    Animations
    none

    Note:
    All changes made here will be applied to your entire website.
    is-switcher admin-only

    MATRIX THEMES

    STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE

    About | Privacy Policy | Cookie Policy | Sitemap
    Copyright © 2022 All rights reserved
    Log in Log out | Edit
    • Scroll to top
    Close