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 is-nav-animated 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 - 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
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
05. Your questions
For all enquiries regarding the landing pages, please leave your comment below
GET INSPIRED
STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE