How do I make a multi language website?

  • 1
  • Question
  • Updated 8 years ago
  • Answered
I'm trying to make a website that has an English and a Chinese version. I've looked at the Creating Sub-pages tutorial. I've created pages for both english and chinese version. Now I just don't know how to set up the webpage to the way I want.

I'm hoping to have my index page with just my company logo and 2 links. One to the English site, and the other to the Chinese site.

Now how do I set up each language site to have it's own unique navigation bar? Is this possible? I can't seem to do it... when I'm in the English section, I put all the English pages in the Navigator. But these pages then also appears on my index page and my Chinese section.

I want the levels of Navigation as follows:
1. Index (Main page with just the Logo)
2a. English
2b. Chinese
3a. English subpages
3a. Chinese subpages

Can this be done?

Thanks.
Photo of MonkeyRPN

MonkeyRPN

  • 24 Posts
  • 2 Reply Likes
  • frustrated

Posted 8 years ago

  • 1
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, you can do this but you'll have to like create different sites for each one and then put it on a sub domain like spanish.yoursite.com/index Here is a tutorial on creating sub domains with a Yola bought domain name: Creating sub domains with your Yola-bought domain name

You can also use Google Translate which will be much easier. It is on my website here: http://nathansmusicstudio.tk It is the tab at the bottom, it says "Translate" Just click it and choose your language to translate to and it will translate all the text on the page!

You can get your own here: Google Translate Tools Just select "More options" on number 3. Then select "Tabbed" to make it like mien and select your options and copy that code it gives you and paste it into an HTML widget by dragging it over form the side bar and dropping it on the page.

I hope this helps!

Sincerely,
Nathan
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Hi, MonkeyRPN,

Another suggestion would be to create your own navigation: To create your own navigation instead of using the default navigation provided by the style you've chosen, you can use this workaround:

1. You can take your pages out of your navigation (click on the "Edit Navigation" button and drag the pages from "Pages in the Navigation" to "Pages out of the Navigation" - this will hide your default navigation).
2. Create your own page text links in a Text Widget and place them where you'd like this new navigation menu to show up. This can be done by adding text, highlighting it and clicking on the link button on the text toolbar and linking to the specific page on your site. You can then edit the text links using the text toolbar to appear the way you would like.

If you want to make your own buttons for a custom navigation, you will need to create the button, and then link it to the specific page on your site.

There are quite a few banner/button making programs on the Internet if you would like to create your own. I have used a few programs which worked quite nicely if you would like to give them a try: http://www.bannerfans.com/banner_make... and http://www.bannermakerpro.com/, (this is not a free program, but they do have a free trial available).

You can then link the button like this:

1. Add the button to your page, using the Picture Widget.
2. Click on "Properties" tab in the Sidebar, on the right of the screen.
3. Click on "Choose a Link" and make your selection; you will be able to choose to link to a page in your site, an outside URL, an email address or a file.
4. Click on "Apply".

To check that your link is working, preview your page and then click on the link.

Yola offers you an easy way to incorporate Google Translate in your Sitebuilder. Please follow these steps:

1. Drag and drop the Google Translate Widget from the "Communicate" folder from the Sidebar on the right.
2. Save your page.

To test it, preview your page and then click on the translate button.

Please note: If you wish to have your whole site translated, the Google Translate widget will need to be added to each page.

Another option is to use conveythis.com. This tool adds a button to the page that visitors can click on, choose the language and online translation service they would like to use and have the page and site translated. To add it to your site, follow these steps:

1. Go to conveythis.com and click on "Get your Button".
2. Customize your settings and click on "Get your Button".
3. Copy the code provided.
4. Drag and drop an HTML Widget from the Sidebar on the right onto your page (the icon for this is a blue sphere).
5. An HTML editor will open up on your screen. Copy or paste your code into the HTML editor (use right-click > paste or ctrl-V to paste).
6. When you are done, click "Save". The translation service will be displayed on the page.

Let us know if you need any help
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I'm glad it helped! Would you like me to make an example page so you'll see how it'll look or do you already have it in your website? Also, you can put in spacing so they will be spaced apart a little bit and look better and not touch each other and stuff. To put in spacing, just put in this before the menu code in the same HTML widget:


<br>

&lt;style type="text/css">

tr td {
margin:20px;
}

&lt;/style>
<br>



If this does not work, let me know.

Thanks,
Nathan
Photo of MonkeyRPN

MonkeyRPN

  • 24 Posts
  • 2 Reply Likes
Hi Nathan, I'm trying it out on my unpublished website right now. For the script, you said to put it before the menu code... where is the menu code?

And just in case the horizontal nav bar isn't working out with my final layout, how would I make a vertical table?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, I meant before the code I gave you. I thought you already added the code in. I meant just paste it right before the code after you have the menu code in your site.

By the way, to add any codes to your website drag over an HTML widget and then paste it in the box that pops up.
Photo of MonkeyRPN

MonkeyRPN

  • 24 Posts
  • 2 Reply Likes
Thanks Nathan. I don't know what I did wrong... but the photos aren't showing up. I see the table, but the images are all dead, with a little "x" in the corner.

UPDATE: Nevermind. Haha~ i didn't know the html script is case sensitive. I change the .jpg to .JPG.... -_-
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, you didn't do anything wrong. You have to put in the correct image name and it has to have resources/ in front of it. Lets say the image name is "home.jpg" Then, you are going to need to put in this:

src="resources/home.jpg"

All you have to do is put the image in the file manager of your website, and then get the image name of it (with the .jpg or the .png after it) If you are confused, let me know.

If you are confused, just email support@nathansmusicstudio.cz.cc and I'll help you from there. Just attach the images to the email.

Thanks,
Nathan
Photo of petercsea

petercsea

  • 153 Posts
  • 19 Reply Likes
Hello Monkey RPN,

The way your heading about this is the best way to produce your site. two streams of language are far superior to machine translations and also gives you the control of the interpretation and emphasis that you wish to convey. machine translations at this time just don't do that as you are probably aware. (Chinese and Hindi are two of the better machine translateable languages wrt English). Machine translations work well for sentences and blocks of text rather than whole sites.

There have been a few sites produced with Yola and the model as you envisage and these all work well. A site that uses Thai and English in this manner: http://sribuaban.synthasite.com . The reader selects the language at the start and goes through the site almost oblivious to the fact that there's a parallel stream. It is possible to swing over to the corresponding section of the other language. I created the language streams as facsimiles of each other which gives you the benefit of only really having to produce half as many page layouts. Then just plug the language specific elements into the correct pages.
Photo of MonkeyRPN

MonkeyRPN

  • 24 Posts
  • 2 Reply Likes
petercsea, thanks for your input. I agree with you that creating two separate sites for each language is better route to go. I just don't trust machine translation to translate my pages correctly.

The website you link is exactly what I'm hoping to do. I notices the pages are *.php. What are these? Can Yola make php pages? Thanks.
Photo of petercsea

petercsea

  • 153 Posts
  • 19 Reply Likes
Hello MonkeyRPN,

php is a server-side HTML embedded scripting language. It provides web developers with a full suite of tools for building dynamic websites. Yola uses this for its web-building. The site you visited was also built with Yola in a former incarnation, called Synthasite. It's name change was a marketing ploy but other than the development of the product it's the same.

Users don't get directly involved with the server side at all and mostly use the WYSIWYG tools and some HTML coding (generally copying and pasting HTML files from some where to your site). If your unfamiliar with web building don't be put off and Yola really is a leader for the novice.

I don't think you will hit big problems with your site. This community is a very good resource for experience and assistance.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi petercsea, you are helping out a lot, I think you are on your way to becoming a champion! :)
Photo of petercsea

petercsea

  • 153 Posts
  • 19 Reply Likes
No thanks Nathan.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi petercsea, I was just letting you know that you are doing good and you are helping out a lot. (I can't set anyone as one anyways, I was just saying, they might set you as one someday because you are helping out a lot! :) )

Thanks,
Nathan
Photo of MonkeyRPN

MonkeyRPN

  • 24 Posts
  • 2 Reply Likes
Yes, I agree with Nathan too. Your replies are very encouraging for me to continue working on my website. Thanks.
Photo of petercsea

petercsea

  • 153 Posts
  • 19 Reply Likes
Thanks Nathan and MonkeyRPN

I hope that Callum B, Jean S and Kevin Pei would be asked to be. Their knowledge is excellent and they very much deserve to be offered it for their contribution on this forum. I'm sure they would like to be offered.
Photo of Callum

Callum

  • 357 Posts
  • 32 Reply Likes
Ooh it would be wonderful if I became a champion! But I haven't been on here for a while, I think I may have got ever so slightly further away from being one though. But you are definitely heading towards being a champion!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I am sure you will Callum Booth! You are going the right way! :)
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I remember the day I became a champion too! It was so surprising to me when I looked at the words:


That's why we promoted him to a champion!


Sincerely,
Nathan
Photo of petercsea

petercsea

  • 153 Posts
  • 19 Reply Likes
Hello MonkeyRPN,

Tables are being deprecated in HTML(ie the code is being removed and the new releases of browsers won't interpret the code anymore) and in some browsers already there are problems. Tables are notorious for rendering differently with different browsers and this can cause you real grief :) (Tables were originally designed for matrix mathematics and data presentation)

I think a very easy alternative is to do this is by using the two columns widget, probably the most powerful and flexible "Five Star Gold" utility in the Yola builder's Tools. Add another two column widget to the left hand side and another to the right hand side of the first. Now you have four columns. You can keep adding more until you have as many columns as you need. If you have an uneven number of images to place then you can simply slide the middle divider of the last two column widget over to the right or left so that it disappears on the published site. The rest you can pretty well eyeball for spacing.

You now drop an image into each column. Spacing between two pictures can be controlled by the properties of the widget. (It is easier to use images of identical size but not essential).

After this is done then you can add html code to each picture to link each to a different page. Then you have your functioning menu.

If you wish to have a sliding image menu have a look at http://paka.yolasite.com this is a fantastic horizontal sliding menu which Sanja found and it works very well. If you would like to experiment with this let me know and I'll locate the reference.

A RULE OF THUMB WITH REGARDS TO CUSTOMISED HORIZONTAL MENUS IS TO SELECT A TEMPLATE STYLE WHICH HAS A VERTICAL MENU EMBEDDED. (The original menu is deleted simply by going to 'Edit Navigation' and moving all the pages from 'In Menu' to 'Out of Menu')

This apparent contradiction is to do with the restricted area access to the space where the menu was shown. (There are tricks to overcome this it but I think for the beginner to keep it simple is a good learning experience)

CONVERSELY SELECT A VERTICAL MENU STYLE IF YOU PLAN TO USE A HORIZONTAL MENU (For the same reason).

I would strongly recommend using the graphical widgets in preference to using HTML in the learning phase of this builder, if you have that option. The reason being is that you can see things as they are happening and see where the problems may lie and what may have caused the problem. If you use HTML alone then if it doesn't work you really have to investigate the reason from first principles. (this is experience based and often non-intuitive)
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I think that is kind of dum though because how will we use tables without them? How will we display information in a table in the new HTML? Monkey already set it up (Monkey was emailing me back and forth and got it working) and I guess they will have to do it this way. This wil work. I was going to give them that idea but then I didn't. But another way is to just layout img tags without br tags in an HTML widget. So, it could be like this:



<!--

<div style="margin:20px"><a href="index.php"><img src="resources/image1.jpg" width="50px" border="0"></a></div>

<div style="margin:20px"><a href="index.php"><img src="resources/image2.jpg" width="50px" border="0"></a></div>

<div style="margin:20px"><a href="index.php"><img src="resources/image3.jpg" width="50px" border="0"></a></div>

<div style="margin:20px"><a href="index.php"><img src="resources/image4.jpg" width="50px" border="0"></a></div>

<div style="margin:20px"><a href="index.php"><img src="resources/image5.jpg" width="50px" border="0"></a></div>

<div style="margin:20px"><a href="index.php"><img src="resources/image6.jpg" width="50px" border="0"></a></div>

<div style="margin:20px"><a href="index.php"><img src="resources/image7.jpg" width="50px" border="0"</a></div>

-->



Don't copy <!-- or --> Just the code in between them.

So, this would work. They are in divs just to put the spacing in between the buttons. Remember to change the src urls to what they really are. Also, change the href="" values to the page name so when you click the button, it will take you to the page it is linked to.

I hope this helps!

Sincerely,
Nathan
Photo of petercsea

petercsea

  • 153 Posts
  • 19 Reply Likes
Image tags are being deprecated also. Use image styling

by Neil Williams.

Older HTML tags and attributes that have been superseded by other more functional or flexible alternatives (whether as HTML or as CSS ) are declared as deprecated in HTML4 by the W3C - the consortium that sets the HTML standards. Browsers should continue to support deprecated tags and attributes, but eventually these tags are likely to become obsolete and so future support cannot be guaranteed.

Tables are to be reserved for tabular data - for those situations where two or more columns and two or more rows of data need to be displayed in a grid. The days of using a single cell table with hidden borders to position text within the page have gone. Generally, as on this page, for a table to be required the content should demand to be divided into visible columns and visible rows.

It is particularly important for special use browsers like text-only and text-to-speech that each row is intact in the source code - don't use a series of
tags to get cell contents to line up. Use if necessary to allow broken lines.

If you would not use a table to present the same data in a word-processor, then the tag should not be used. The CSS alternative is more precise and involves relative or absolute positioning or margin control. Both methods are used on this page - the navigation links are separated from the content using the CSS class "header".
.header {
position:absolute;
top:10px;
left:270px;
padding-right:10px;
}
This places the second column start at a fixed position from the left margin, similar to newspaper columns. Within the content column, two tables are used to display the deprecated tags and attributes.

Each time the image is used, only the src and the id need to be specified. (Older browsers still need the border=0 attribute but you will have to use HTML4 Transitional instead of Strict if you want to support such old browsers as this attribute will cause the page validation to fail.). If you use the same graphic more than once, use a class identifier.

Note also that <!--<td width=>--> is also deprecated. To control the width of table columns, use the <!--<colgroup>--> and <!--<col>--> tags.
Photo of Callum

Callum

  • 357 Posts
  • 32 Reply Likes
I don't know how Yola's gonna be HTML5 compliant. Looking on some pages of my site, I can see dozens of <!--<font--> tags, which are being deprecated. They say to use <!--<center--> tags to center things, and they're being deprecated. Pretty soon most sites on Yola won't work when browser's make the switch...
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Why are they depecating font tags??? I really used those all of the time. I just can't believe it! :( But, yes, I see a lot of them too:



Will we still be able to do <font class="class-name"></font>?

Sincerely,
Nathan
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hello Nathan,
I am sharing this with our HTML team. They will look into it for you and reply within 48 hours. Thanks for your patience!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks Brianna! Is this true though? Is HTML5 actually cutting out font tags and center tags?
Photo of Callum

Callum

  • 357 Posts
  • 32 Reply Likes
Hey Nathan
There's more info here: http://www.w3schools.com/html5/tag_fo...
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks Callum!!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I don't like how they are doing that though! I used to use the font tags all of the time, and now I have to update all of my websites that I built without the site builder! :( Whoever made this decision makes me unhappy!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi everyone

I'm trying to find out more information about this. It may take some time before either myself or someone who is more knowledgeable about this to get back to you. Thanks for your patience.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thank you Sanja! :)
Photo of petercsea

petercsea

  • 153 Posts
  • 19 Reply Likes
I really do't think that it's anything to worry about. Just be pro-active and change your style of writing to accommodate the updated standards. It's certainly within our ability to change as we do with learning. Refer to the standards on the reference : http://www.w3schools.com

HTML non-compliance in the non "HTML widgets" shouldn't be an issue as this is a Yola responsibility and they will upgrade their content. Imported widgets may need to be addressed.

We've all been through this many times with browser incompatibility issues and generally come out the other side with a solution. This is not as difficult as browser issues.
Photo of MonkeyRPN

MonkeyRPN

  • 24 Posts
  • 2 Reply Likes
Hm... interesting. So should I use the html table tags.... or use the column widget?

I tried the column widget... it works. but OMG there's so much more work! I'm using the same jpgs for my all my nav bars... but I can't get them to line up the same on each page. I have to manually adjust the margins for each and every jpg, for each and every page~ what am I doing wrong?
Photo of petercsea

petercsea

  • 153 Posts
  • 19 Reply Likes
Hi MonkeyRPN,

There is more work setting up the first page. Then after you have it right use the "Save As" function and call it something else like eg "menubar" You can use this as your template for every other page in your site. The more you have the universal setup correct on your "menubar" the less work involved in subsequent pages

When you are making a new page open "menubar" make your page specific additions and then again use "save as" your new page name. "menubar" will remain in the page list until you remove it and there's probably no reason to remove it particularly if you suspect that you will add new pages in the future.

This is true for any page and includes any code or widget where you would like to repeat elements. It's a great function.

You should need two of these master templates one for your English pages and one for your Hanzi pages. How many pages do you envisage for your site?
Photo of petercsea

petercsea

  • 153 Posts
  • 19 Reply Likes
Monkey RPN,

Apologies for not answering the first part of your question.

If you are feeling comfortable with HTML and I think you do then I would go ahead with the HTML method, keeping in mind that sometime in the future you may hit issues with certain or all browsers.

It's always a good practice to inspect your published pages with a few browsers eg: IE, Firefox and Chrome. These will pick up most browser related anomalies due to HTML compliancies or otherwise.

if you wish to see a live example of such an anomaly have a look at krooclub.com with those three browsers. The flash movie and the widget are both placed in a table. These all worked on earlier versions of browsers with older versions of HTML. Now they work on some and not others. {I haven't got around to fixing it yet :( }
Photo of Valika

Valika

  • 119 Posts
  • 12 Reply Likes
Hi MonkeyRPN,

I have built my website in two languages previously, each page has a "sister" page in the other language, using the "save as" function. The menu issue is a little tricky, but not too complicated to make the new menus with a good (and free) menu generator. Using one, you don't need to deal with any special HTML coding, just follow the instructions of the menu generator. I used this one: http://flashvortex.com - it was very easy to use. For further information see the following topic, hopefully you could find it useful: http://tinyurl.com/yfy7vw6

Happy sitebuilding!:)