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
  1. Support

One Pager


  • Overview

    01

  • Navigation

    02

  • Anchor sections

    03

  • Theme options

    04

  • Your questions

    05

 

From April 2022, one pager 'Varmdo' has been replaced by 'Landing pages'.

Please check the official documentation.

01. Overview

Varmdo is a custom template used for landing pages

The main difference between one pager and any other Matrix theme is a specific structure of the template where the Jimdo menu is hidden ( visible only in admin mode ) while the main navigation in header edited in Widget/HTML.

 

Important!

- Since the main content of a landing page is displayed only homepage, it is strongly recommended to keep a copied hidden page in order to restore it in case you delete it by mistake

- The hidden pages can be linked in the main menu or in content/footer sections with text or any image.

- For any questions regarding the one pager, please select the section Your Questions and leave your comment

 

02. Navigation


<div class="hs-menu snip-nav has-brand-color__ has-link-inherit__ g-font size-15 right-align weight-400"> <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="#portfolio">Portfolio</a> </li> <li> <a href="#contact">Contact</a> </li> </ul> </div>

Important!

In order to make the navigation links accessible from other pages, you need to add the full url like this


 
 <li>
    <a href="https://www.matrix-themes.com/#home">Home</a>
 </li>

       

Navigation options

The main menu is using the following helper classes which can be customized for your needs:

g-font - custom font

size-15 - font size of menu

add-top-20 - add top padding to align  menu in header

is-nav-animated snip-nav- underline animated style 

has-brand-color - hover and active nav links with your brand color

has-link-inherit - hover and active nav links with opacity color

right-align -  nav alignment, you can also use left-align or center-align

weight-400 -  font weight

03. Anchor sections

The next step is creating relative sections in your homepage. Using the module Widget /HTML in content area, you add the anchor links


<div class="section" id="home">
    <span>Home</span>
</div>

<div class="section" id="about">
    <span>About</span>
</div>

04. Theme options

Design 1

has-shadow has-padding is-100

This design  has left logo and right aligned menu, so when you create a draggable logo in footer, you need to use a module Columns with 2 columns. The navigation should be used with helper class right-align

 

Design 2

has-shadow has-padding is-100

In this design for header logo you need to use a module Columns with only one column.

Inside the column you add a module Photo for the logo on the top and the module Widget/HTML with the navigation on the bottom. In this case the menu code should use the class center-align

Important note!

The header height has a fixed height setup directly in HTML. Adding a big logo size will overlap the header, so please use a small image size, otherwise change the default size (90px):


<div class="is--flex flex-admin no-padding" style="height:90px;">
 

If you change the height of the header, you might need to change the margin-top in CSS to fit the correct anchor section with a new header size


.section {
   margin-top: -120px;
}
 

Design 3

has-shadow has-padding is-100

This design  has left logo and right aligned menu, so  you need to use a module Columns with 2 columns for the draggable logo. The navigation should be used with helper class right-align.

To make transparent header and big hero image,  you need to activate 2 classes directly in HTML( Design> custom template> HTML tab):

has-custom-header and has-custom-hero

 

bg-grey  mid-round add-10

05. Your questions

For all enquiries regarding the landing pages, please leave your comment below

Comments: 0

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
  • Style Switcher
  • Common Issues
  • Installation
  • Guides
  • Blog
  • Updates
  • Marketplace
  • Scroll to top
Close