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
<style>
/*<![CDATA[*/
.goog-te-gadget {
font-size: 0px;
color:transparent;
}
.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: 2px solid #000!important;
max-height: 45px;
color:#000!important;
background: transparent;
}
.skiptranslate:not(.skiptranslate.goog-te-gadget),.skiptranslate.goog-te-gadget span{
display:none!important;
}
body {
top: 0px !important;
}
/*]]>*/
</style>
<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>
02. Add the CSS styles
Add the style to any place of our CSS ( Design> Custom Template> CSS)
/*** google translate widget 01 ***/
.goog-te-gadget {
font-size: 0px;
color:transparent;
}
.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: 2px solid #000!important;
max-height: 45px;
color:#000!important;
background: transparent;
}
.skiptranslate:not(.skiptranslate.goog-te-gadget),.skiptranslate.goog-te-gadget span{
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');
Quick links
| 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 | |
| text color |
| social icons | |
| navigation color | |
| subnav background |
| background color | |
| navigation color |
| Template configurations |
| has-center-nav g-font has-large-header |
| Navigation styles |
| size-15 weight-400 snip-nav --line01 is-uppercase |
| Content styles |
| form-white |
| Footer styles |
| o-form color-white |
|
Typography |
| Heading H1 |
| weight-600 is-uppercase |
| Heading H2 |
| weight-400 is-uppercase |
| Heading H3 |
| weight-600 is-uppercase |
| Buttons |
| weight-600 is-uppercase |
| Animations |
Note: All changes made here will be applied to your entire website.
MATRIX THEMES
STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE