Editing a Lovable Site in the WordPress Editor

Where the Site Editor is and what it shows

Open Appearance → Editor in the WordPress admin. This screen only exists for block themes, which is what a converted Lovable site is. If you see Appearance → Customize instead, an older classic theme is active; activate the converted theme first.

The left panel lists five areas. Navigation holds your menus. Styles holds colors, fonts and spacing for the whole site. Pages lists the pages created when the theme was activated. Templates holds the HTML layouts, such as the front page and the single post. Patterns holds the reusable chunks, including the header and footer template parts.

Clicking any area opens a live preview on the right. Click the preview to start editing. Everything saves together: WordPress shows one Save button and lists what changed before you confirm.

Colors and fonts live in Styles, not in classes

In Lovable the design came from Tailwind classes and CSS variables. In WordPress those tokens move to theme.json, and the Site Editor edits that file through the Styles panel. Click the half-filled circle icon in the top right of the editor.

Under Styles → Colors you see the palette from the Lovable project. Change a palette color once and every block that uses it updates across the site. This is the closest equivalent to editing a Tailwind color variable.

Under Styles → Typography you set the font families and the sizes in the type scale. Google Fonts used in the Lovable project are carried into the theme, so they appear in the font list. Size steps map to the Tailwind scale, so a heading set at the large step stays consistent everywhere.

Styles → Blocks lets you restyle one block type at a time. For example, set the default button color or the heading margin without touching individual pages.

• Site-wide change — edit Styles, then save. Every page follows.
• One-off change — select the block on the page and use the block sidebar instead.
• Reset — Styles has a revisions list, so you can roll back a styling change.

Editing the header, footer and navigation

The converter writes the Lovable header and footer as template parts. Open Appearance → Editor → Patterns and look under Template parts, or click the header directly in any template preview and choose Edit.

A template part is shared. Change the footer once and it changes on every page that uses the template. That is the main difference from editing a page.

The header navigation becomes a Navigation block. Select it and use the list view or the plus button to add, rename, reorder or remove links. Links to converted pages can be picked by page name; external links take a full URL.

The site logo is set as a Site Logo block. Replace the image there and it updates in the header and anywhere else the block is used.

1. Open Appearance → Editor and click Patterns, then Template parts.
2. Choose Header or Footer and click the pencil icon to edit.
3. Select the Navigation block and edit the menu items in the block sidebar.
4. Click Save and confirm which parts you are saving.

Pages, patterns and templates: which one to edit

This is the part that confuses most people coming from Lovable, where a page was one file. In WordPress the content and the layout around it are separate things.

A page holds the content of that one URL. Edit it under Pages in the admin or under Appearance → Editor → Pages. The converter creates one pattern per Lovable page and inserts it into the matching WordPress page, so the blocks you see are the sections from your original design.

A template is the frame: header, content area, footer. Templates live under Appearance → Editor → Templates and are HTML files with block markup in the theme folder. Edit a template when you want a change on a whole class of pages, such as all blog posts.

A pattern is a reusable group of blocks stored in the theme's /patterns folder. Edit a pattern when you want to reuse a section on a new page. Inserting a pattern copies its blocks, so later edits to the pattern do not change pages where it was already used.

• Change text or an image on one page — edit the page.
• Change the header, footer or post layout — edit the template part or template.
• Reuse a section elsewhere — insert the pattern from the plus menu.

Working with converted sections and blocks

Lovable sections, grids and flex rows become Columns blocks. Cards become a column with an image, heading and paragraph inside a Group. Open the list view, the icon with stacked lines in the top left, to see this structure and select the right level.

Resizing is done per column in the block sidebar. WordPress stacks columns on mobile by default, so a three-up grid becomes three stacked cards on a phone. The converter writes desktop values; check the responsive preview in the editor before launch.

Some pieces come over as an approximation. Tabs, modals and dropdowns arrive in their default state. Animations arrive at their final state. Carousels are flattened. If a section looks static where it moved in Lovable, that is expected, and the supported features list says which parts behave that way.

A few things do not convert at all: absolutely positioned decorations, canvas, Lottie, iframes and anything driven by React state. Rebuild those with a block plugin, or ask a developer for a small custom block.

Editing the theme files directly

Everything above can also be done in files, which is useful if you keep the theme in Git. Templates and template parts are HTML files with block comment markup. Patterns sit in /patterns. Design tokens sit in theme.json.

One warning. Once you edit a template in the Site Editor, WordPress stores your version in the database and stops reading the file. The editor shows a Reset option on customized templates to go back to the theme file. Pick one way of working per template and stay with it.

The WordPress developer handbook at developer.wordpress.org documents the block markup and the theme.json schema if you want to go deeper.

Checking changes before they go live

Keep Settings → Reading → "Discourage search engines from indexing this site" checked while you rework pages on a staging site. Uncheck it before launch, or the site stays out of the index.

Per-page titles and descriptions are not edited in the Site Editor. They live in your SEO plugin box at the bottom of the page editor, in Yoast, Rank Math or SEOPress. If the Lovable project used TanStack Start head() entries, the converter already wrote those values there.

If a converted section is far from the original and you would rather not fix it by hand, the IQDesk converter keeps a review screen that shows the converted page next to the Lovable original inside WordPress Playground. Its AI fix agent can read the source project and edit the theme for you. Conversion, review and the theme download are free, and every account includes two free AI-fix attempts.

FAQ

Why is there no Customize option for my converted Lovable site?

Converted Lovable sites are WordPress block themes, and block themes replace the old Customizer with the Site Editor. Go to Appearance then Editor instead. Colors, fonts, header, footer and templates are all edited there.

Do I need to know Tailwind to edit a converted Lovable site?

No. The Tailwind palette and type scale are written into theme.json during conversion, and the Site Editor edits those values through the Styles panel. You change a color or font once and the whole site follows. Tailwind classes are not used in the WordPress theme.

Should I edit the page or the template?

Edit the page when the change affects only that one URL, such as text or an image. Edit a template or template part when the change should appear on many pages, such as the header, footer or post layout. Template parts are shared, so one edit updates every page that uses them.

Why does my three-column section stack on mobile?

WordPress stacks Columns blocks on narrow screens by default. The converter writes the desktop layout, so responsive behavior comes from WordPress rather than from your original Tailwind breakpoints. Check the mobile preview in the editor and adjust column settings if the stacking is wrong.

Can I still edit the theme files if I use the Site Editor?

Yes, but not for the same template. Once you save a template in the Site Editor, WordPress keeps that version in the database and ignores the file. Use the Reset option on a customized template to go back to the theme file version.

Keep reading