Everything you need to know about creating a multilingual website with Jimdo without sacrificing the dropdown or megamenu as explained in previous post.
The below tutorial can be used for any multipurpose Matrix Theme
This is a post about how to add Google translate button on you website. It can replace a real multilingual version as it's explained here, but it can be a an alternative and easy way to translate your pages.
For this tutorial you need to update your template with the latest version of Matrix theme, as the old templates are using the top-header section with contact information and shopping basket area which can't be deleted or changed.
01. Add the top-header section
We add a new block with our code directly to HTML (Design> Custom Template> HTML)
Please pay attention to it's place
<!-- hs-top-header -->
<div class="hs-top-header bg-dark" style="min-height:40px;">
<div class="inner is--flex cc-clearover">
<div class="is--left size-12 add-top-10 add-btm-10">
</div>
<div class="is--right is--left-mobile rel">
<!-- Google translate widget -->
<div id="google_translate_element">
</div>
<script type="text/javascript">
//<![CDATA[
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'de,en,es,fr,it,nl,no,sv,da,pt,ru,ja,zh-CN,tr,el'}, 'google_translate_element');
}
//]]>
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>
</div>
<!-- end inner -->
</div>
<!-- end hs-top-header -->
02. Add the CSS styles
Add the style to any place of our CSS ( Design> Custom Template> CSS)
/*** google translate widget 01 ***/
@media screen and (max-width: 746px) {
select.goog-te-combo {
font-size: 16px!important;
}
}
.goog-te-gadget{
color: transparent !important;
max-height:40px;
}
.goog-te-gadget .goog-te-combo {
margin: 0;
padding: 5px;
-webkit-border-radius: 0.3em;
-moz-border-radius: 0.3em;
-ms-border-radius: 0.3em;
-o-border-radius: 0.3em;
border-radius: 0.3em;
border: 1px solid;
border-color: rgba(255, 255, 255, 0.3);
color:#fff;
max-height: 45px;
background: transparent;
}
.goog-te-banner-frame.skiptranslate,.goog-logo-link {
display:none!important;
}
.body {
top: 0px !important;
}
/*** end google translate widget 01 ***/
Note
This example is using english language as default. You can customize it for your own preference in this line:
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'de,en,es,fr,it,nl,no,sv,da,pt,ru,ja,zh-CN,tr,el'}, 'google_translate_element');
| bg-primary | |
| bg-primary-light | |
| bg-primary-dark | |
| bg-secondary | |
| bg-secondary-dark |
| body | |
| top-header | |
| header | |
| content |
| background | |
| text color | |
| link color | |
| horizontal line |
| style 1 | |
| style 2 | |
| style 3 |
| social icons | |
| navigation color | |
| subnav background |
| background color | |
| navigation color |
| has-center-nav g-font |
| size-15 weight-400 snip-nav is-uppercase --line01 |
| form-white |
| o-form color-white |
| weight-600 is-uppercase |
| weight-600 is-uppercase |
| weight-600 is-uppercase |
| weight-600 is-uppercase |
Note: All changes made here will be applied to your entire website.
MATRIX THEMES
STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE