Guide
Lovable RTL Website in WordPress: Hebrew and Arabic
A Lovable RTL website moves to WordPress like any other Lovable project, with one extra job: the direction has to survive the move. Our converter reads the page language and hreflang from your project and writes them into the theme, so a Hebrew or Arabic site keeps its language setting. Direction itself comes from WordPress: install the site in the matching language, and the editor and most core blocks flip to right-to-left. The parts that need your eye are custom Tailwind spacing, icons that point one way, and anything you positioned absolutely.
What RTL means in a Lovable project
Lovable builds React and TypeScript apps styled with Tailwind CSS and shadcn/ui. In a right-to-left project, the direction usually comes from two places: a dir="rtl" and lang attribute on the HTML root, and Tailwind's logical utilities such as ms-4 or text-start instead of ml-4 and text-left.
Logical utilities are the ones that travel well. ms-4 means "margin on the start side", so it becomes margin-right in Hebrew or Arabic without any extra code. Fixed-side utilities like ml-4, pr-6 or left-0 do not flip. They look correct in your Lovable preview only because you placed them by hand for one direction.
Fonts matter too. Latin webfonts rarely carry Hebrew or Arabic glyphs. Most RTL Lovable sites load a Google Font that does, such as a Hebrew or Arabic family, and the browser falls back for anything missing. Note which family you used before you convert, because you will want the same one in WordPress.
What our converter does with language and direction
The IQDesk converter reads your Lovable ZIP or GitHub repository in the browser and writes a WordPress block theme. Page language and hreflang are part of what it converts, so a site marked lang="he" or lang="ar" does not arrive as English.
The design tokens come across too. Tailwind's type scale and colors land in theme.json, Google Fonts are carried over, and each page becomes a block pattern. Sections, grids and flex rows become columns blocks, which are direction-aware in WordPress core.
What the converter does not do is rewrite hand-placed left and right values into logical ones. If your Lovable code pinned something to the left with absolute positioning, that part is in the "not converted" list anyway. The full list is on supported features.
After conversion you review the result next to the original inside WordPress Playground, in the browser. For an RTL site this review is the important step: you see the mirrored layout before you install anything.
Set up WordPress for right to left
WordPress ships RTL support in core. You switch it on by choosing the language, not by editing CSS. Do this before you judge the converted theme, or you will be looking at an LTR rendering of an RTL design.
- Install the theme. Go to
Appearance → Themes → Add New → Upload Theme, upload the ZIP from the converter, and activate it. Pages are created on activation and the front page is set. - Set the site language. Go to
Settings → General → Site Languageand pick Hebrew, Arabic or your language. WordPress loads its RTL stylesheets and the admin flips. - Check the front end. Open the site. Text should align to the right, and columns should read right to left.
- Open the Site Editor. Go to
Appearance → Editorand look at the header template part first. Navigation and logo order are the most visible thing to get wrong. - Keep it out of the index while you work. Tick
Discourage search engines from indexing this siteunderSettings → Reading, and untick it before launch.
The five things to check on every page
Most of an RTL conversion is correct out of the box. The failures cluster in a few places, and they are quick to find if you know where to look.
Walk each page in the Site Editor with the list below. Fixing these in blocks is faster than fixing them in code, because block settings already know about start and end sides.
- Header order. Logo on the right, navigation on the left is the usual Hebrew and Arabic pattern. If the converted header part has them the other way round, swap the two blocks inside the row.
- Icons with direction. Arrows in buttons, chevrons in accordions and "next" indicators in carousels point the wrong way after mirroring. Replace or flip them.
- Numbers, prices and codes. Digits, phone numbers and Latin product codes stay left to right inside RTL text. Browsers normally handle this, but check mixed lines such as a price next to a currency word.
- Asymmetric spacing. A card with extra padding on one side came from a fixed
pl-orpr-utility. In WordPress, set the padding in the block's dimensions panel instead. - Images that contain text. Screenshots and mockups do not mirror. If a screenshot shows an LTR interface inside an RTL page, that is a design decision, not a bug, but decide it on purpose.
Fonts and typography for Hebrew and Arabic
Your Lovable project's Google Font comes across into theme.json as a font family. If that family has no Hebrew or Arabic coverage, headings will fall back to a system font and the site will look inconsistent.
The fix is to set a family that covers your script. In the Site Editor, go to Appearance → Editor → Styles → Typography and change the heading and body families. The change is saved into the theme's global styles, so it applies everywhere at once.
Arabic needs a little more line height than Latin, because of ascenders and diacritics. Hebrew usually needs slightly less tracking. Both are adjusted in the same Typography panel. Set them once at the global level rather than per block.
If you prefer to self-host the font files, place them in the theme and register them in theme.json. That is a developer task, and the details are in the WordPress theme.json documentation.
Bilingual sites and hreflang
Plenty of RTL projects are bilingual: Hebrew or Arabic plus English. Lovable sites handle this in different ways, so how it converts depends on how you built it.
If each language is its own route, such as /he/about and /en/about, each route becomes its own WordPress page with its own slug. The language attribute and hreflang are carried per page. You then have a working two-language site made of plain pages, and you can connect them with a menu or a multilingual plugin.
If the language switch is React state, with one route and translated strings swapped in JavaScript, it does not convert. Custom React state and event handlers are in the not-converted list. You get the default language only, and you add the second language in WordPress afterwards.
Either way, confirm the lang attribute on the live pages before launch. View source and look at the opening html tag. For questions about how Lovable itself sets language and hreflang in newer apps, check Lovable's documentation.
What still needs a developer
Some RTL work is beyond a theme conversion. Being clear about it up front saves a frustrating afternoon.
Absolutely positioned decorations do not convert at all, in any direction. Carousels, tabs, modals and dropdowns are approximated in their default state, so their arrows and animations will need attention. Custom React logic, authentication, dashboards and Supabase data are not converted; those stay in your Lovable app or get rebuilt.
Responsive behaviour is approximated too. The converter uses your desktop values, and WordPress stacks columns on mobile. On an RTL site, a stacked column order can read differently from the side-by-side one. Check your key pages at phone width.
If you want to compare the effort of fixing these in a converted theme against a full rebuild, see converter vs manual rebuild. Every account includes two free AI-fix attempts, and conversion, review and download are free, so you can measure the gap before deciding.
FAQ
Does the IQDesk converter support right-to-left Lovable sites?
Yes. The converter reads the page language and hreflang from your Lovable project and writes them into the WordPress theme, so a Hebrew or Arabic site keeps its language. Direction itself is handled by WordPress once you set the site language under Settings, General. You review the mirrored result in WordPress Playground before you download the theme.
How do I turn on RTL in WordPress?
Go to Settings, General, and set Site Language to Hebrew, Arabic or another right-to-left language. WordPress then loads its RTL stylesheets for both the admin and core blocks. There is no separate direction switch to find.
Will my Tailwind spacing still be mirrored after conversion?
Logical Tailwind utilities such as ms-4 and text-start mirror correctly because they refer to the start and end sides. Fixed utilities such as ml-4 or pr-6 were written for one direction and will not flip. After conversion, set that spacing in the block dimensions panel in the WordPress Site Editor instead.
My Hebrew font looks wrong after installing the theme. What happened?
The Google Font carried over from your Lovable project probably has no Hebrew or Arabic glyphs, so the browser falls back to a system font. Open Appearance, Editor, Styles, Typography and choose a family that covers your script. Setting it there applies the change across the whole site at once.
Can I convert a bilingual Lovable site with Hebrew and English?
If each language lives on its own route, each route becomes a separate WordPress page with its own slug, language attribute and hreflang. If the language switch is React state on a single route, it does not convert, and you get the default language only. In that case you add the second language in WordPress after the conversion.