How to switch between Languages using the hover function? York Template

Hello @tuanphan 

I'm currently trying to figure out a way to make a website friendly towards a client base that is divided into 3 different language groups - English, French and Chinese.

Currently, english is not a problem as t's the default language on Squarespace, but I am wondering if anyone has any ideas around how to switch between languages or translate headings and text through a hover function?   

For example, the perfect situation would be if a client who lands on the home page could scroll down the page and hover over a heading to read it in their native language or have a heading flick through three different translations on hover but the default is english when navigating away. 

The other option (if there is one) would be to have a line of code that translated the website automatically on any browser base one where they're searching from... Is this possible?!

I hope this is clear, but please ask questions if you have any suggestions. 

@Nick.Loubser Just search on Google, and found this, seems work...

https://squarecamp.com/services/turn-your-squarespace-site-into-a-multilingual-one

you can also add Google Translate button, like this site: https://cylinder-mackerel-pnk5.squarespace.com/

pass: abc

not good way, but simple & free 😂

ps You can customize it to show only 3 languages

2 hours ago, tuanphan said:

@Nick.Loubser Just search on Google, and found this, seems work...

https://squarecamp.com/services/turn-your-squarespace-site-into-a-multilingual-one

you can also add Google Translate button, like this site: https://cylinder-mackerel-pnk5.squarespace.com/

pass: abc

not good way, but simple & free 😂

ps You can customize it to show only 3 languages

Ok thank you for this, I found this site too! I was hoping it was clean fix - I will have a look into the plug-in and see how it goes Again, thank you very much

5 hours ago, tuanphan said:

@Nick.Loubser Just search on Google, and found this, seems work...

https://squarecamp.com/services/turn-your-squarespace-site-into-a-multilingual-one

you can also add Google Translate button, like this site: https://cylinder-mackerel-pnk5.squarespace.com/

pass: abc

not good way, but simple & free 😂

ps You can customize it to show only 3 languages

 @tuanphan The only other question I have - on the homepage, do you have any idea how to make the page titles invert colours on hover to improve usability? 

For example, in the attachment I sent, how would I make "Intellectual Property Management" change colour or invert colours the user scrolls down the page and hovers over each section? 

Cheers, 

@Nick.Loubser You can use custom code (CSS) to change color on hover, with css

class-name:hover {color: #fff;}

Need site url to check exactly code.

11 minutes ago, tuanphan said:

@Nick.Loubser You can use custom code (CSS) to change color on hover, with css

class-name:hover {color: #fff;}

Need site url to check exactly code.

Ok, cool - Would this go into the custom CSS section or into the Navigation Title area within the individual page settings?

1 minute ago, Nick.Loubser said:

Ok, cool - Would this go into the custom CSS section or into the Navigation Title area within the individual page settings?

Please see URL - https://bellflower-bumblebee-ltke.squarespace.com/config/pages

Code Quedo

I don't think hovering to translate is a good solution because it won't work on touch devices such as tablets and phones. 

4 minutes ago, colin.irwin said:

 

I don't think hovering to translate is a good solution because it won't work on touch devices such as tablets and phones. 

 

@colin.irwin very good point, do you have any other ideas - the plug-in Tuanphan suggested looks like a good and easy solution  - I'm looking into it further to see how it works on mobile. 

@Nick.Loubser Your site is private. Please setup password & share url. See how to: https://beaverhero.com/squarespace-how-to/

12 minutes ago, tuanphan said:

@Nick.Loubser Your site is private. Please setup password & share url. See how to: https://beaverhero.com/squarespace-how-to/

It should be set to password... Just checked and the password is Quedo - please let me know if this doesn't work. 

8 minutes ago, Nick.Loubser said:

It should be set to password... Just checked and the password is Quedo - please let me know if this doesn't work. 

@tuanphanHmm sorry, you're right - the site is currently unpublished I may have to publish it for you to see it. - Is there any other way to see the code? I can copy and paste what I have in the custom CSS section if that helps?

@Nick.Loubser Add to Home > Design > Custom CSS

#index-section-intellectual-property-management:hover a {
    color: #fff;
}

13 minutes ago, tuanphan said:

@Nick.Loubser Add to Home > Design > Custom CSS

#index-section-intellectual-property-management:hover a {
    color: #fff;
}

 

@tuanphanThank you, that seems to do the trick at the moment! Really appreciate your help on this.