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

Important!

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

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

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

Design 1

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

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

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

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