Style Editor Docs
     
  • Home
  • Add-ons
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Hafen
    • Altona
    • Enkel
    • Horten
    • Hisingen
    • Agen
    • Tjörn
    • Halmstad
    • Öland
  • Support
    • Style Switcher
    • Common Issues
    • Installation
    • Guides
    • Blog
    • Updates
    • Marketplace
  • Home
  • Add-ons
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Hafen
    • Altona
    • Enkel
    • Horten
    • Hisingen
    • Agen
    • Tjörn
    • Halmstad
    • Öland
  • Support
    • Style Switcher
    • Common Issues
    • Installation
    • Guides
    • Blog
    • Updates
    • Marketplace
    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

    QUICK LINKS

    • Advanced Style Editor
    • Features
    • Pricing
    • Pre Purchase Questions
    • Marketplace
    • Zødiac Framework
    • Jimdo Creator

    WIDGETS

    • Instagram feed
    • Team Showcase
    • Animations
    • Parallax widget
    • Full width widgets
    • Countdown Timer
    • All Widgets

    GET INSPIRED

    • Showcase
    • Custom widgets
    • Enterprise Package
    • No coding features
    • Matrix variables
    • Dolphin Block Elements
    hide-in-doc-page

    Showcase
    draggable-logo

     

    Main colors
       bg-primary
       bg-primary-light
       bg-primary-dark
       bg-secondary
       bg-secondary-dark
    Template sections
       body
       top-header
       header
       content
    Footer Styles
       background
       text color
       link color
       horizontal line
    Buttons
       style 1
       style 2
       style 3
    Other elements
      social icons
      navigation color
      subnav background
    Mobile navigation
       background color
       navigation color
    Template configurations
    has-center-nav g-font
    navigation styles
    size-15 weight-400 snip-nav is-uppercase --line01
    content styles
    form-white
    footer styles
    o-form  color-white
    Typography
    Heading H1
    weight-600 is-uppercase
    Heading H2
    weight-600 is-uppercase
    Heading H3
    weight-600 is-uppercase
    Buttons
    weight-600 is-uppercase
    Animations
    none

    Note:
    All changes made here will be applied to your entire website.
    is-switcher admin-only

    MATRIX THEMES

    STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE

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