The right-to-left text direction – RTL

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

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:

Change the text direction to RTL on the entire landing page

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

1. Log in to the Landingi platform and navigate the editor of your landing page.

2. Go to Page Settings and click on Add custom CSS.

When editing, you can go back to Page Settings by clicking on the arrow:

3. Copy the CSS code indicated below; add it to the main page of your landing page (1) or/and to the conversion page (2).

.widget {
	direction: rtl !important;
}

4. Save & close. Then publish your landing page.

CSS codes are not active in the editor. Changes will be visible only on a published landing page.

RTL for a single widget

With a CSS code you to change text direction to RTL on your widget.

1. Click on a widget. Find the Other tab in a right-side toolbar and copy the widget's ID.

2. Go to Page Settings and click on Add custom CSS.

3. Copy the CSS code indicated below; add it to the main page of your landing page or/and to the thank you page. Replace the #elementID with the copied ID.

#elementID {
	direction: rtl !important;
}

4. Save & close. Then publish your landing page.

CSS codes are not active in the editor. Changes will be visible only on a published landing page.

RTL for multiple widgets

You can change text direction to RTL for multiple widgets by adding the appropriate class to them. It may be useful if you have content in several languages on one landing page.

1. Click on a widget. Find the Other tab in a right-side toolbar and enter textrtl in the Classes field. 

2. Repeat the previous step for every widget, which direction you want to change to RTL.

3. Go to Page Settings and click on Add custom CSS.

4. Copy the CSS code indicated below; add it to the main page of your landing page or/and to the thank you page.

.textrtl {
	direction: rtl !important;
}

5. Save & close. Then publish your landing page.

CSS codes are not active in the editor. Changes will be visible only on a published landing page.