To change the preset google font, just change the font name (yellow color) for your own one. You can use the below website to pickup your own google font:
02. Open the Style Editor and add the class 'g-font' for the main elements of your website:
In case you wanted to apply the google font for all elements of your website, use the first line of 'Template configurations':
- Using the apply button
When you add a new custom widget or populate a new Jimdo element ( e.g. button) you will see the default color and typography style setup in CSS. To see the updated styles of Editor, you'll need
to click the "Apply" button.
- How to reset the Editor
If you made a mistake in Editor or removed some line or cell, you can reset the whole module:
01. Select one of the preset color styles using the 'Copy' button
02. Go back to your Editor and select "Additional options"
03. Click "Edit HTML"
04. Remove the old Source Code and paste the new one from preset styles.
Click the save button and then "Apply" button to see the changes
- How to make a transparent header
Editing the Style Editor, you can choose the background color of your header that will be applied for the whole website. To make the header transparent like in Lemberg theme, you need to use the
helper class 'has-transparent-header' inside the variables of the hero section.
When you add a new class to the variables, you'll need to reload the page to see the effect.
In case you added a class 'has-transparent-header' to the template with dark color navigation, you can improve the visibility of the dark color menu and hero image by
adding the following class ' has-white-overlay' and 'has-sticky-white'.
- Reducing the spacing between the hero and content
The same way to reduce the space between the hero or header and content section. The correct class is 'has-no-gutter'
As you can see in my examples that the classes 'has-transparent-header' and 'has-no-gutter' have been used in hero variables code. In case you don't
have a hero section ( sub-page), you can use the same classes inside any custom widgets having 'is-matrix-block' in the first code line ( all widgets of
Block elements )
If you setup a large font size for the navigation ( e.g. size-20), you might see a flickering effect when the page is loading. This happens because the helper class is applied after the page is
loaded. The solution is:
1) Add the same class for 'hs-menu' directly in HTML;
2) In style Editor add one of the animated effects: wow animated fadeIn or wow animated fadeInUp;
- How to remove the Style Editor
With drag&drop functions move the Style Editor Elements to content section and then remove them.
To add the Style Editor again, please check the following documentation page: