The Frontend Visual Editor lets you translate your site directly on the live page — exactly as your visitors see it. Instead of working in the WordPress admin dashboard, you browse your actual website and click on any piece of text to translate it right there, in context. This is the most intuitive translation method because you can see exactly how the translated text fits within your real page layout, with the actual fonts, colors, spacing, and images surrounding it.
This tool is ideal for reviewing and refining translations rather than creating them from scratch. Many content managers use AI bulk translation to generate first drafts, then switch to the Frontend Visual Editor to walk through the site as a visitor would, spotting awkward translations and fixing them in real time.
When to use the Frontend Visual Editor
| Situation | Why it helps |
|---|---|
| Reviewing AI-generated translations | You see the translation in its real layout, catching issues like text that is too long for a button or a heading that wraps awkwardly |
| Fixing a translation error you spotted while browsing | One click to edit, no need to find the post in the admin and open the editor |
| Working with page builder layouts (Elementor, Divi) | The admin editor often does not show the true visual design. The frontend editor shows exactly what visitors see |
| Translating short UI elements like buttons and labels | Clicking directly on a “Read More” button to translate it is faster than hunting for it in the String Translation table |
| Client review and signoff | Walk through the site with a client who can see exactly how translations look in context |
Step-by-step: Translating content on the live page
- Make sure you are logged in to WordPress as an administrator or editor
- Navigate to any page on your site’s frontend with the query string
?lf_frontend_editor=1appended (for example,https://yoursite.com/about/?lf_frontend_editor=1). The Lang Forge admin-bar dropdown also exposes a “Translate this page” entry per language that does the same thing. The toolbar is opt-in so it doesn’t appear on pages a logged-in admin is just browsing - The page reloads with the frontend translation toolbar anchored to the top of the viewport — language selector on the left, Save All and Close buttons on the right
- (legacy reference: this section previously talked about a “Lang Forge icon” in the admin bar — replaced 2026-04-28 by the explicit query-string entry point)
- Select the target language from the language selector in the toolbar. For example, choose “Spanish”
- The page reloads to show the current state of the Spanish translation. Translatable text elements become interactive — when you hover over them, a subtle border and highlight appear
- Click any highlighted text element on the page — for example, a heading, a paragraph, a button label, or a menu item
- A translation popup appears right next to the element, showing:
– An editable field with the current translation (or empty if untranslated)
– An AI Translate button to auto-translate just this element
– Save and Cancel buttons
- Type or edit the translation in the field. As you type, you can see exactly how the text fits in the layout — whether it is too long, whether it wraps correctly, and how it looks with the surrounding design
- Click Save in the popup. The translated text appears on the page immediately without reloading the entire page
- Continue clicking and translating other elements on the page. Each saved translation is applied instantly
- When finished with this page, navigate to the next page you want to review and continue translating
- Click Close in the toolbar to exit the Frontend Visual Editor and return to normal browsing
What can and cannot be translated in the Frontend Visual Editor
Can be translated:- Post and page titles displayed on the page
- Post and page content (paragraphs, headings, lists, blockquotes)
- Widget text (sidebar, footer, header widgets)
- Menu item labels
- Theme strings (“Read More”, “Search”, footer text, etc.)
- Custom field values that are rendered on the page
- Image alt text (via the popup editor)
- Content inside iframes or embedded third-party widgets
- Dynamic JavaScript-generated text (like live chat widgets)
- Server-generated text from external APIs
Real-world example: Final review before launch
A restaurant chain is launching its French website next week. The content manager uses AI bulk translation to create French versions of all 30 pages, then spends two hours in the Frontend Visual Editor walking through the site as a French visitor would. On the homepage, she notices the hero heading “Bienvenue dans nos Restaurants” is too long and pushes the subtitle to a second line — she shortens it. On the menu page, she catches that “House Special Burger” was translated literally instead of being adapted for French diners — she rewrites it. On the contact page, the phone number format needs adjusting for French conventions. Each fix is made with a single click, directly on the live page.
What happens on the Free plan
The Frontend Visual Editor is exclusively available to PRO users. On the Free plan, the Lang Forge icon does not appear in the admin bar when viewing the frontend. The standard admin-side translation workflow remains available.
> Tip: The Frontend Visual Editor works best for reviewing and polishing translations that already exist. For translating an entire page from scratch, the admin-side Visual Editor (side-by-side) is more efficient because it shows all segments in a structured list.
> Good to know: Changes saved in the Frontend Visual Editor are immediately visible to all visitors. There is no separate publish step — saving updates the live translation directly. When you launch the Frontend Visual Editor from the source-language page and save a target-language translation, Lang Forge updates the translation post in the background without replacing the source text on the page you are currently viewing. Open the translated URL or the generated draft to review the saved copy. If you want to draft translations without showing them to the public, use the admin-side Visual Editor instead, which lets you save as Draft.
> Important: Test the Frontend Visual Editor on both desktop and mobile screen sizes. A translation that looks fine on desktop might overflow a button or break a layout on mobile. Resize your browser window to check.
[Screenshot: The Frontend Visual Editor showing a highlighted heading with the translation popup open, displaying original text, editable translation field, and AI Translate button]
—