Multilanguage site

Hello, I need to make one site in English and Spanish language and I read this topic: https://bootstrapstudio.io/forums/search/multilanguage/

but the truth is that I don't understand the explanation well, I don't want to use any CMS ... would someone have a tutorial on how to do it with Bootstrap Studio?

I don't understand the explanation very well, I would have to have the main site in English but then how would I do with the same content in Spanish?

Thank you

I'm sure there are lots of ways to utilize a lot of scripts etc. to accommodate this, but truly since Bootstrap Studio makes it so easy to edit content once your site is done, just make 2 sites, one for English and one for Spanish. Then make a link at the top of each of the sites (or button) that will forward people to the other language if they prefer.

The sites would be separate entities for the most part, but you should be able to utilize this with one project even. The index.html page would be one language, and the home-en.html or home-sp.html would be the other language's home page. You "could" do this in separate projects, but I don't think it would be necessary. This way you would do the following:

1. Create 1 of the home pages in one language. Make sure you have it as complete structure wise as you want it so that you don't have to adjust a lot of structure in two different sites later. Do NOT add any linked components yet to anything, wait until you have the 2nd home page done for that. 2. Duplicate the completed home page and rename it something like home-sp or home-en (depending on which one you made first, this will be the other). 3. Now edit the 2nd page to the other language fully, make sure that your navigation is fully completed as well as any structural updates needed.

Now use these 2 pages as your base for the rest of the pages.

4. Duplicate the first languages index.html page.<br /> 5. Rename this duplicate page to whatever the page will be such as "contact-en" (or -sp depending on which language this page is in) 6. Do steps 4 and 5 for the other home page for the other language. 7. Do a Linked Component setup (instructions can be found in the Tutorials for this if you are not sure how to do this) and paste them from the index page to the duplicated page right in the same (above or below) location as the original one (it will look the same, but will when you edit any linked component it will edit all of them on all pages at the same time. This is something you only do for things you want to be the same on all pages such as navigation menus, sidebars, footers, headers). 8. Now delete the old components that the linked components replaced. 9. Do steps 7 and 8 for the other language home page.

You now have the base setups for both languages in one project. This way you can keep them all in one place, easily edit them and compare pages etc.

Another option is to create a landing page that asks which language they want to view the site in. Then you could have 2 different sites (created with 2 different BSS projects) hosted on 2 different domain names even, and the links or buttons on the landing page would send them to the correct site for the language chosen.

Hope that helps and is what you were looking for :)

1 Like

Hello Jo, Thank you very much for such a comprehensive explanation. I will be doing as you indicate, any questions I will ask again right here!

You're quite welcome, if I can help again I will and if not I'm sure others have some other options they can suggest. :)

I use two divs one for each language. it works well if it is not a big site I shared a component so you can see how I do it search for Multi Language tip

That's an interesting setup Kuli, I was under the impression that we were supposed to only use an ID once per page, and BSS used to not allow it, but I just tried adding the same ID to another element and it let me do it so I'll assume that rule has changed? That allows for your setup to make multiple instances of each component all in the same page which would definitely save time with not having to utilize 2 different pages completely. I guess it works either way, but I like your setup, thanks for sharing that. :)