Guide to Using Bablic’s Visual Editor

Expensive website translation is a thing of the past thanks to the cost-effective, easy-to-use platform, Bablic.

Translating your website into any language is as simple as signing up, adding your site, and pasting a line of code into the header of your site.

You’re then good to go and can start making use of the easy-to-use language translation platform.

To ensure you get the most out of the Bablic platform, in the upcoming weeks we’ll be sharing a series of tutorials.

We’ll start the series with the most popular feature – the Bablic Visual Editor.

This is where you’ll be spending the majority of your time, so we’ll highlight all the features you can use. But, before you can reap the benefits, you need to access the editor.

Accessing the Visual Editor

Signing in to your Bablic account where you’ll be greeted with the Dashboard.

In the left menu, go to Visual Editor.

Bablic Dashboard

You’re then taken to the following page and can start using the editor.

Bablic Visual Editor

Using the Editor

For this tutorial, we’ve already added a website. Take note of the following:

1. You have a top menu bar. Here you can access the various areas of the editor. We’ll discuss these in more detail shortly.

Top Menu Bar - Bablic Visual Editor

2. You can also change anything on your translated website by right-clicking any element and text, on your site.

Right Click - Bablic Visual Editor

3. You’re able to change text, font sizes, images, padding etc

Right Click Editing - Bablic Visual Editor

4. You can make changes on any page by navigating your site as you normally would. Simply click on the links to get to the right page. This feature is also accessible from the Options tab.

Simply click on Go to page and use it to navigate your site.

Go To Page - Bablic Visual Editor

5. Any changes you make will only reflect on the translated website, not your original site.

6. Make changes for both desktop and mobile by alternating between the two. Find this feature in the top left of the Visual Editor.

Responsive Editing - Bablic Visual Editor

7. When you’ve made all changes, click on the Publish Changes button.

You’ll then be taken to this screen.

Snippet - Bablic Visual Editor

8. For the changes to appear on your live site you need to ensure that the Bablic code is in the header of every page. You can access the Bablic code at any time from the Options menu, under Show Snippet.

Show Snippet - Bablic Visual Editor

Aside from on-page edits, there are several features that are accessible from the menus.

Let’s get started with the top right menu.

Publish Changes - Bablic Visual Editor

Languages

Clicking on the Language Tab you’ll be able to see all your languages, including the language of your original site.

Languages - Bablic Visual Editor

If you want to translate the language of your site to another language, click on Add Language.

Dashboard

You can also return to the Dashboard that greeted you upon signing up.

Link to Dashboard - Bablic Visual Editor

My Sites

Add as many sites as you want under My Sites. This will allow you to manage multiple sites under the same account.

My Sites - Bablic Visual Editor

Help

The help function gives you access to a guided walk through, should you need help when you start using the editor.

View walk-through - Bablic Visual Editor

There’s also an option to contact us via email or by using the online contact form we’ve provided.

Contact Us - Bablic Visual Editor

Below the top right menu, you also have access to Options.

Options - Bablic Visual Editor

Options

You have access to many different features under Options.

Options Menu - Bablic Visual Editor

Add a Language

Click on Add Language like you did with the add language tab in the top right menu. You’ll be taken to this screen.

Add Language - Bablic Visual Editor

Upgrade

Everybody who signs up has access to a two week free trial with limited machine words (words Bablic translates).

Upgrading your account is as simple as clicking on Upgrade.

You’ll be taken to our pricing page where you can choose your plan, starting with a basic plan of $15/month.

Show Snippet

The snippet is the Bablic code you need to paste in the header of your site should you want any changes you’ve made to reflect.

Bablic will tell you if the code is missing on your site. (see image above, under Publish Changes section)

Edit Site Glossary

There may be certain words that require a specific translation (Brand names, industry specific terminology, etc.) or that should not be translated at all. Let Bablic know by entering them into the site glossary. Click and you’ll be taken back to your dashboard to edit your site glossary.

Glossary - Bablic Dashboard

The Language Widget

This is the language widget.

Language Switcher - Bablic Visual Editor

As highlighted earlier you can also access this feature by simply right clicking it.

Customize widget - Bablic Visual Editor

The widget is fully customizable. You can change the colors and placement on your site. You can show flags or language name and even hide Bablic’s logo or the entire widget if you choose to. There’s also an option to customize it for both mobile and web versions of your site.

Language widget - Bablic Visual Editor

In-Text Editor

For access to the in-text editor click on Show in Text Editor.

You’ll be presented with a summary page that will show all the translated content of your site

Pages and Text Editor - Bablic Dashboard

Here you can see any edit’s you’ve made and make further changes. You can also filter the elements by status or use the search box to go directly to the content you are looking for.

Scan Website

When signing up, Bablic scans your entire site. Click on the Scan Website if you want to exclude certain pages from the scan.

Scan Website - Bablic Visual Editor

Edit Page Meta

Any page meta can be also be edited by following the link under the Options Tab

Edit HTML Meta Tags - Bablic Visual Editor

Go to Page

Go to any individual page of your website, that you want to edit, by typing the page’s URL.

Go To Page Popup - Bablic Visual Editor

Or simply click on any internal link in the site while in the editor.

CSS Editor

You’re probably not going to be using this function unless you’re a developer. But if you want to edit the CSS of a specific language, click to open the editor.

CSS Editor - Bablic Visual Editor

Chrome Extension

We have also created a nifty Chrome Extension which serves as a support tool to the editor. Most users don’t need it, so please consult with our Support Team to see if this is necessary for you.

Human Translation

Aside from machine translation, we’ve also partnered with translation service providers that can take care of your content professionally.

To access this feature go to the top left of the visual editor and click on Human Translation.

Link to Human Translation - Bablic Visual Editor

Select pages you want to translate.

Human Translation Popup - Bablic Visual Editor

Click on create project.

Click on create project - Bablic Visual Editor

Based on your selection, Bablic will let you know how much it’s going to cost, starting with the lowest quote.

In the next screen, you’ll be able to choose from several providers. Make your selection.

Summary

That, in a nutshell, is the Bablic Visual Editor. The power of Bablic’s Visual Editor lies in the ability to make on-page edits to your translated website.

Start playing around with the many features and contact us if you have any questions.