A simple way to create a custom Under Construction page in Matrix Themes
This tutorial is based on Lemberg Theme with hero section and it can be also used in following templates:
- Alsten
- Hafen
- Bergen
- Altona
- Enkel
- Tjorn
- Oland
01. Prepare a navigation structure
In Admin mode create a new page called "under Construction" and make it visible as homepage. All other pages should be hidden
02. Add a custom style to Edit Head
Copy the below code and paste it inside the section "Edit Head" ( Settings> Edit Head )
<style>
/* <![CDATA[ */
/*** under construction page ***/
.cc-indexpage .hs-top-header,.cc-indexpage .top-nav,.cc-indexpage .hs-header,.cc-indexpage .hs-content,.cc-indexpage .hs-footer,.cc-indexpage .footer-btm {
display:none;
}
.matrix.cc-indexpage .hs-top-header,.matrix.cc-indexpage .top-nav,.matrix.cc-indexpage .hs-header,.matrix.cc-indexpage .hs-content,.matrix.cc-indexpage .hs-footer,.matrix.cc-indexpage .footer-btm {
display:block;
}
.cc-indexpage #cc-inner .matrix-hero,
.cc-indexpage #cc-inner .jqbga-container{
max-height: 100vh!important;
min-height:100vh!important;
height:100vh!important;
display:block!important;
}
.cc-indexpage .jtpl-background-area {
position:fixed;
}
.cc-indexpage .button_container.only-mobile,.cc-indexpage #downbutton{
display:none!important;
}
/*** end under construction page ***/
/*]]>*/
</style>
03. Edit the image and text
In admin mode, you can customize the hero image ( design> background ) and the text using the widget "hero title".
The alternative way is using a new Matrix Themes feature "Draggable hero" ( just in case you needed to add a contact form or any other Jimdo module).
Resources
Documentation
| bg-primary | |
| bg-primary-light | |
| bg-primary-dark | |
| bg-secondary | |
| bg-secondary-dark |
| body | |
| top-header | |
| top-header-inner | |
| header | |
| header-inner | |
| navigation-inner | |
| navigation color | |
| dropdown background color | |
| content |
| background | |
| text color | |
| link color | |
| horizontal line |
| style 1 | |
| style 2 | |
| style 3 | |
| text color |
| background color | |
| navigation color |
| social icons | |
| top header border | |
| header border | |
| nav inner border |
| Template configurations | |
|
|
| Top header inner | |
| Header inner | |
| Navigation inner | |
| Navigation styles | |
| size-15 weight-400 snip-nav --line01 | |
| Sub-menu (breadcrumbs) styles | |
| size-15 | |
| Mobile Navigation styles | |
| size-30 | |
| Content styles | |
| form-white | |
| Footer styles | |
| o-form color-white | |
| Footer background image | |
|
Typography |
|
| Heading H1 | |
| weight-400 | |
| Heading H2 | |
| weight-400 | |
| Heading H3 | |
| weight-400 | |
| Buttons | |
| weight-400 | |
| Advanced settings | |
| Custom CSS | |
|
#cc-inner .my-class { color:#f0f0f0; }
|
Note: All changes made here will be applied to your entire website.