How to Edit CSS and Styling Using Bablic’s Visual Editor

The Bablic Visual Editor gives you the power to fix the style of any page element of your translated website, whether text, images, or icons.

This tutorial will explore CSS and Styling in more detail.

For a quick review watch this video:

Keep reading  if you want more detailed information –

Start by logging in to your Bablic account and accessing the Visual Editor from your Dashboard.

You’re now set to start customizing.

Customizing the Style of Your Site

Select the element you want to customize. In this instance, I’ve selected some text.

Text Selection - Bablic Visual Editor

Now right-click the element and select Fix Style.

Right Click After Text Selection - Bablic Visual Editor

The Fix Style Box will now appear.

Fix Style Box After Text Selection - Bablic Visual Editor

You can apply changes to font size, padding, and margins:

  • Font Size: change the font size to your liking
  • Padding: Adjust the padding on the left and right
  • Margin: you also have the option of adjusting the margin on the left and right

If at anytime you want to restore the original settings, click restore.

Remember to hit save for the settings to take effect on your translated site. Also, any changes you make will only apply to your translated site and not your original!

Repeat this process for all elements you want to change.

For Quick Navigation to Make Edits

Navigate your site like you normally would, by clicking links to move from page to page.

Website Menu Navigation - Bablic Visual Editor

If you’d like, you can also move to the page by clicking on Options and go to page.

Go To Page Popup - Bablic Visual Editor

Now type in your URL.

Go To Page Popup - With URL - Bablic Visual Editor

Moving The Fix Style Text Box

It’s also possible to move the Fix-Style Box by clicking on the arrow in the top right.

Clicking Move-To-Sidebar Button - Bablic Visual Editor

The box will now move to the right sidebar.

Fix Style Box - Right Sidebar - Bablic Visual Editor

If you need any help, don’t forget to make use our Help function in the top menu.

Note for Advanced Users

If you want to delve a little deeper and have coding experience why not access our CSS Editor? This will let you edit the CSS of your translated website yourself.

Access the CSS editor in the top right of the Fix-Style box.

Click on CSS Editor Link - Bablic Visual Editor

You’ll now be greeted with the CSS Editor box. The changes you made with Bablic’s fix style box will reflect here.

CSS Editor Popup - Bablic Visual Editor

Feel free to apply any further changes and remember to hit Save.

There we have it. Adjusting the styling and applying your own CSS is that easy.