How to use Weglot for translations

Translations with Weglot

— Configure your languages with Weglot on your website

Follow the steps below if you want to configure your languages in Weglot. Note: the amount of languages depends on your subscription in Weglot.

  1. sign up/sign in at https://weglot.com

2. Click on translations > visual editor > then click ‘start editing’

3. Your website will visually appear. If you want to change the language for example the French translation, click on ‘FR’ in your language menu (above the word ‘contact’).

4. Now you’re in the French version. If you hover over elements such as titles or buttons you can edit the translation in the French version by clicking on the blue pencil icon en fill in the translations.

5. Click at the top on SEO to read and check the French search optimization

Tips 'n tricks

Explore with it and you'll get away with it quickly!


Step 21: build pages in the page editor

Step 21: build pages in the page editor

— Learn how to build pages in the page editor.

Now you can start building pages in the page editor.

Tips 'n tricks

More information on the operation of the page editor go to tour in intercom -> page editor.


Step 20: Customize CSS code or add JS

Step 20: Customize CSS code or add JS

— Here you can add custom CSS code and JavaScript.

Wordpress by Popeye Cloud -> Theme Options -> Utility -> CSS & JS

CSS
Enter here your custom CSS.

 

Javascript
Enter here your custom Javacript code.

 

Tracking
Enter here your custom Tracking code.

Tips 'n tricks

Important: after all the adjustments press save changes
Tip: if the changes are not visible on the website click WP-rocket-> clear cache


Step 19: Page Redirect

Step 19: Page Redirect

— Here you can set up a page that will be shown without menu and no footer.

Wordpress by Popeye Cloud -> Theme Options -> Utility -> Redirect

 

When the option activate page redirect is enabled, all the pages of the website will be referred automatically to the page redirect.
In the case of a maintenance of the website

Activate Page Redirect
Activate to redirect all the website calls to a specific page. NB. This can only be visible when the user is not logged in.

Tips 'n tricks

Important: after all the adjustments press save changes
Tip: if the changes are not visible on the website click WP-rocket-> clear cache


Step 18: Google Maps functionality

Step 18: Google Maps functionality

— With the Google Maps functionality the viewer will see the business location in a map.

Wordpress by Popeye Cloud –> Theme Options –> Utility –> Google Maps

If you want to use the google map platform, it’s important to first apply for an API KEY at: developers.google.com.
If you have received the code, you can paste it on the site. Now you can use the google maps functionality on your website.

Google Maps API KEY
To use Uncode custom styled Google Maps you need to create here the Google API KEY and paste it in this field.

Tips 'n tricks

Important: after all the adjustments press save changes
Tip: if the changes are not visible on the website click WP-rocket-> clear cache


Step 17: add socials in the footer or menu bar

Step 17: add socials in the footer or menu bar

— Here you can add social networks in the footer or menu bar.

Wordpress by Popeye Cloud -> Theme Options -> Utility -> Socials Networks

Add a title, choose an icon and a link to the social network page of your choice.

 

Social Networks
Define here all the social networks you will need.

You can re-order with drag & drop, the order will update after saving.

Tips 'n tricks

Important: after all the adjustments press save changes
Tip: if the changes are not visible on the website click WP-rocket-> clear cache

By adding socials your site will get a more personal touch.


Step 16: add sidebars on your website

Step 16: add sidebars on your website

— Learn how to set sidebars on a page.

Wordpress by Popeye Cloud -> Theme Options -> Utility -> Sidebars

In the sidebar menu, you can add different sidebars for blog, webshops or portfolio websites. The sidebars contain widgets. Add widgets by going to Wordpress by Popeye Cloud -> Widgets.

Site Sidebars
Define here all the sidebars you will need. A default sidebar is already defined.

You can re-order with drag & drop, the order will update after saving.

Tips 'n tricks

Important: after all the adjustments press save changes
Tip: if the changes are not visible on the website click WP-rocket-> clear cache


Step 15: Change the scroll speed or adjust parallax effect in the Extra settings

Step 15: Change the scroll speed or adjust parallax effect in the Extra settings

— Extra settings to give the site more dimension.

Wordpress by Popeye Cloud -> Theme Options -> Visual -> Extra

In the Extra settings you can adjust the scroll speed or parallax effect.

ScrollTo Constant Speed: activate this to always have a constant speed when scrolling to point.

ScrollTo Constant Speed Factor: adjust the constant scroll speed factor. Default 2

Parallax Speed Factor: adjust the parallax speed factor. Default 2.5

Here you can change the portfolio tag.
Portfolio CPT Label: enter a custom portfolio post type label.

Portfolio CPT Slug: enter a custom portfolio post type slug.

Tips 'n tricks

Important: after all the adjustments press save changes

Tip: if the changes are not visible on the website click WP-rocket-> clear cache


Step 14: customize all default element markup

Step 14: customize all default element markup

— Here you can predefine all default markup like colors, fonts, font sizes, font family’s, font weight,… For menu content buttons forms and footer.

Light skin is used on light background image.
Dark skin is used on a dark background image. You can specify the text skin in the style tap of the column settings in the header content block.
As a result, the light skin will make your primary menu font color black and sets the logo to the one you have chosen in theme options navbar -> logo -> logo light.
The same applies in the opposite way for the dark skin.

Light Skin

SVG/Text Logo Color: specify the logo color if it’s a SVG or textual.

Menu Text Color: specify the menu text color.

Primary Menu Background Color: specify the primary menu background color.

Primary Menu Background Opacity: adjust the primary menu background transparency.

Primary Submenu Background Color: specify the primary submenu background color.

Primary Menu Border Color: specify the primary menu border color.

Primary Menu Border Opacity: adjust the primary menu border transparency.

Secondary Menu Background Color: specify the secondary menu background color.

Headings Color: specify the headings text color.

Content Text Color: specify the content area text color.

Content Background Color: specify the content background color.

Dark Skin

SVG/Text Logo Color: specify the logo color if it’s a SVG or textual.

Menu Text Color: specify the menu text color.

Primary Menu Background Color: specify the primary menu background color.

Primary Menu Background Opacity: adjust the primary menu background transparency.

Primary Submenu Background Color: specify the primary submenu background color.

Primary Menu Border Color: specify the primary menu border color.

Primary Menu Border Opacity: adjust the primary menu border transparency.

Secondary Menu Background Color: specify the secondary menu background color.

Headings Color: specify the headings text color.

Content Text Color: specify the content area text color.

Content Background Color: specify the content background color.

General

HTML Body Background: specify the body background color and media.

Accent Color: specify the accent color.

Links Color: specify the color of links in page textual contents.

Body Font Family: specify the body font family.

UI Font Family: specify the UI font family.

UI Font Weight: specify the UI font weight.

Headings Font Family: specify the headings font family.

Headings Font Weight: specify the Headings font weight.

Menu Letter Spacing: specify the letter spacing in EMs (the default value is 0.05).

Input Text Underlined: activate to style all the input text with the underline.

Fallback Font: select a font to use as fallback when Google Fonts import is not available.

Menu

Menu Highlight Color: specify the menu active and hover effect color (If not specified an opaque version of the menu color will be used).

Primary Menu Skin: specify the primary menu skin.

Primary Submenu Skin: specify the primary submenu skin.

Secondary Menu Skin: specify the secondary menu skin.

Menu Font Size: specify the menu font size. NB: the Overlay menu font size is automatic relative to the viewport.

Submenu Font Size: specify the submenu font size. NB: the Overlay submenu font size is automatic relative to the viewport.

Mobile Menu Font Size: specify the menu font size for mobile (when the Navbar > Animation > is not Menu Centered Mobile).

Menu Font Family: specify the menu font family.

Menu Font Weight: specify the menu font weight.

Menu First Level Uppercase: activate to transform the first menu level to uppercase.

Menu Other Levels Uppercase: activate to transform all the others menu level to uppercase.

Content

Skin: specify the content skin.

Background Color: specify a custom content background color.

Buttons Font Family: specify the buttons font family.

Buttons Font Weight: specify the buttons font weight.

Buttons Text Transform: specify the buttons text transform.

Buttons Letter Spacing: specify the letter spacing value.

Button And Form Fields Border: specify the width of the borders for buttons and form fields.

Button Hover Effect: specify an effect on hover state.

Footer

Copyright Area Skin: specify the copyright area skin color.

Copyright Area Custom Background Color: specify a custom copyright area background color.

Tips 'n tricks

Important: after all the adjustments press save changesTip: if the changes are not visible on the website click WP-rocket-> clear cache


Step 13: add your custom typography

Step 13: add your custom typography

— Here you can add custom fonts, change the default font sizes and specify witch font sizes, line height and letters spacing that will be visible to choose from in the page builder.

Custom Fonts
Define here all the fonts you will need.

 

Default Font Size
Font size for p,li,dt,dd,dl,address,label,small,pre in px.

 

Font Size H1
Font size for H1 in px.

 

Font Size H2
Font size for H2 in px.

 

Note: The same applies to H3, H4, H5,H6.

Custom Font Size
Define here all the additional font sizes you will need.
You can re-order with drag & drop, the order will update after saving.

 

Custom Line Height
Define here all the additional font line heights you will need.
You can re-order with drag & drop, the order will update after saving.

 

Custom Letter Spacing
Define here all the letter spacings you will need.
You can re-order with drag & drop, the order will update after saving.

Tips 'n tricks

Important: after all the adjustments press save changesTip: if the changes are not visible on the website click WP-rocket-> clear cache