The right-to-left text direction – RTL

Last Updated: 03.10.2019

By default, the text on the landing page is displayed from the left-to-right (LTR). This applies to both text created using the text widget and user input in the form field.

You can change the text direction to RTL (right-to-left) by adding CSS code to the landing page.

This option is useful when you want to create content in right-to-left oriented languages, such as Hebrew or Arabic.

Below is an example of RTL implementation on the landing page:

RTL_PL3

I. How to change the text direction on RTL on the entire landing page?

This method will allow you to change text direction to RTL on the entire landing page, including form.

1. Log into Landingi platform and enter the edition of the chosen landing page.
2. In the sidebar on the right, find the Page Settings and click on Additional Options.

2019-10-03_09-46-59

3. Go to the Custom style tab.
4. Copy and paste the CSS code below; add it to the main page of your landing page (A)  or/and to the thank you page (B).

.widget {
direction: rtl !important;
}

5. Save the changes and republish your landing page.

II. How to change the text direction on RTL for the single widget on a landing page?

This method will allow you to change text direction to RTL on the chosen widget. It may be useful if you have content in several languages on one landing page.

1. Log into Landingi platform and enter the edition on the chosen landing page.
2. Select the chosen widget (1) and copy its ID (2).

RTL_EN2

3. Next, on the sidebar on the right find the Page Settings and click on Additional Options.
4. Go to the Custom style tab.
5. Copy and paste the CSS code below; add it to the main page of your landing page or/and to the thank you page. Replace the #elementID by your ID copied from the editor.

.#elementID {
  direction: rtl !important;
}

6. Save the changes and republish your landing page.

III. How to change the text direction on RTL for few widgets on a landing page?

This method will allow you to change text direction to RTL on the chosen widgets by adding the appropriate class to them. It may be useful if you have content in several languages on one landing page.

1. Log into Landingi platform and enter the edition on the chosen landing page.
2. Select the chosen widget (1), which direction you want to change on RTL and assign to it a proper class (2), for example ‘textrtl’.

RTL_EN3

3. Repeat the previous step for every widget, which direction you want to change on RTL.
4. Next, on the sidebar on the right find the Page Settings and click on Additional options.
5. Go to the Custom style tab.
6. Copy and paste the CSS code below; add it to the main page of your landing page or/and to the thank you page. Replace the fragment ‘textrtl’ by your class name.

.textrtl {
direction: rtl !important;
}

7. Save the changes and republish your landing page.

Depending on the chosen method, the selected widget(s) or whole content on the landing page will be displayed right-to-left.

Was this article helpful?

You might also check:

custom CSS landing page edition

Can’t find what you need?

Let us help you!
Send us a message
We are using cookies for analytical purpose. Learn more.