• Home
    • Templates
      • Alsten
      • Lemberg
      • Bergen
      • Hafen
      • Altona
      • Enkel
      • Horten
      • Hisingen
      • Agen
      • Tjörn
      • Halmstad
      • Öland
    • Support
    • Purchase
    • Blog
  • Home
  • Templates
    • Alsten
    • Lemberg
    • Bergen
    • Hafen
    • Altona
    • Enkel
    • Horten
    • Hisingen
    • Agen
    • Tjörn
    • Halmstad
    • Öland
  • Support
  • Purchase
  • Blog
    20. November 2020

    How to make your Jimdo site multilingual- Part 2

    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

    Live example

    bg-grey mid-round add-20 has-shadow wow animated fadeInUp
    Live demo

    Before you start

    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

    bg-dark mid-round add-20 has-shadow wow animated fadeInUp

    <!-- 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');
    tagPlaceholderTags:

    Support

    • Blog
    • Support center
    • Tutorials
    • Common Support issues
    • Updates
    • Matrix Checkup

    Quick links

    • Features
    • Pricing
    • Pre Purchase Questions
    • Partners
    • Custom Installation
    • Zødiac Framework

    Get inspired

    • Showcase
    • Web Design Inspirations
    • Professional Package
    • Enterprise Package
    • Play of columns
    • No coding features
    • Matrix variables
    hide-in-doc-page

    Showcase
    draggable-logo

    STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE

    About | Privacy Policy | Cookie Policy | Sitemap
    Copyright © 2021 All rights reserved
    Log in Log out | Edit
    • Scroll to top
    Close