Skip to content
wpgraft
BoltBoltA page Bolt built
DiviDiviDivi 5 block markup

How to move a page from Bolt to Divi

Move a page from Bolt to Divi as real, editable Divi elements, not a screenshot. What comes across, and what does not.

wpgraft reads the page as your browser rendered it, the real elements and the real computed styles, at every breakpoint you ask for, and rebuilds it as Divi’s own native elements with the styles in Divi’s own fields. It does not care that a language model wrote the HTML, and it does not care what framework the page was built with: by the time wpgraft looks, all of that has already become computed styles.

The awkward part of building a page with Bolt was never the generating. It is that what comes out is HTML, and what you need is something you can edit in Divi next month without opening a code editor. This closes that gap: the generated page is rebuilt as real Divi elements, so the next change is a click in a panel rather than a prompt and a re-paste.

Before you start

What to have ready

Which Divi wpgraft can write

Divi 5 only

The block-based rewrite: Divi theme or Divi Builder 5.0 and above. wpgraft writes divi/* block markup, which is what Divi 5 stores.

Divi 4 is not a destination

Divi 4 keeps pages as et_pb_* shortcodes, a different format entirely, and wpgraft does not write it. A Divi 4 page is still a perfectly good SOURCE: wpgraft reads the rendered page, not the shortcodes.

Phase 1 · Set up
  1. 01

    Install the wpgraft extension in Chrome

    wpgraft is a Chrome extension. Get it from wpgraft.com/releases. Install it, click the icon, sign in: the free tier needs an account but is never billed. On your very first copy it asks you to confirm you have the right to reuse what you are copying, once, and does not ask again.

    Get the Chrome extensionwpgraft.com/releases → Get the Extension
  2. 02

    Install the wpgraft plugin on the Divi site

    The plugin is the WordPress half of wpgraft: it receives the copy, shows it in a panel inside the Divi editor, inserts it, and pulls the images into your Media Library. Download the zip from wpgraft.com/releases, then upload it in wp-admin. It is free software with no licence key and nothing to configure. Its only admin screen, Settings → wpgraft, is a status page that tells you which builder it detected. It updates itself from inside wp-admin like any other plugin: a version check against wpgraft.com that carries no token and no licence key, only your WordPress and PHP versions and your site's own address in the request's User-Agent, as the privacy policy sets out. It touches nothing on your site until you send it something.

    Download the plugin (.zip)Plugins → Add New → Upload Plugin → Activate
Phase 2 · Copy, in Bolt
  1. 03

    Open the Bolt page you want

    Bolt runs your project in a preview pane inside the editor. That is a frame. Open that preview in its own browser tab, or deploy it, and copy the tab.

    Open the preview in its own tab
  2. 04

    Choose Divi in the extension

    Click the wpgraft icon on the source tab and pick your destination under Copy into. There is one Divi entry, labelled Divi 5. Switch Also copy tablet & phone on unless you only want the desktop layout: it is off until you turn it on, and it captures three viewports instead of one, so the copy arrives responsive.

  3. 05

    Point at what you want and copy it

    Select element starts a picker: hover to highlight, press ↑ to widen the selection to the parent and ↓ to narrow it again, click to confirm, Esc to cancel. Whole page takes the entire document in one pass and is a Pro capture. wpgraft scrolls the page for you first so lazy images and scroll-triggered effects have fired, then waits for the fonts and images to finish before it reads anything.

    click copies · ↑ widen · ↓ narrow · Esc cancels
Phase 3 · Insert, in Divi
  1. 06

    Open the page in Divi

    From the front-end admin bar on the page you want. The Visual Builder opens on the page’s own permalink with ?et_fb=1. The wpgraft panel appears in the bottom-right corner of the editor as soon as it recognises the builder.

    Enable Visual Builder
  2. 07

    Send the copy to the site

    The extension does not push copies at sites by itself, because that would mean any approved site could receive a capture made for another one. Click the wpgraft icon again with the editor open: it names the site and the copy and asks you to confirm, or press Send to open builder. The first time for a given site it also asks whether that site may receive copies at all; approve it once and it stays approved (you can take a site off the list later from the same popup).

    Send to open builder
  3. 08

    Insert it

    The panel lists what is waiting for this builder. Decide whether to tick Import images to Media Library. On, and the images become yours; off, and they keep pointing at the original page. Then press Insert into builder. wpgraft posts the converted blocks to the server, which writes the page content and Divi’s builder meta, registers the fonts the copy needs, writes the page’s Custom CSS and clears Divi’s static CSS cache. The Visual Builder then reloads to read the new markup.

    Insert into builder
  4. 09

    It is already saved

    Nothing to press. The content and Divi’s builder meta are written, the fonts registered, the page Custom CSS in place and Divi’s static cache cleared. The Visual Builder reloads itself.

Phase 4 · Edit
  1. 10

    Edit it like you built it

    This is where the product earns its keep. Click anything in the copy and Divi’s own panel opens with real values in it. There is no wrapper you may not touch, no “generated, do not edit” block and no code view. Change the heading, swap the image, drag the padding.

The result

What lands in Divi

Divi 5 blocks

Real divi/section, divi/group and module blocks, the same things the Divi 5 Visual Builder creates when you build by hand.

Divi’s own module settings

Styles are written as module attributes, so the Divi settings modal shows the values rather than an empty panel over a styled element.

Fonts registered with Divi

Web fonts the copy needs are registered on the site rather than left to a stylesheet Divi does not know about.

After the insert: Nothing to press. The content and Divi’s builder meta are written, the fonts registered, the page Custom CSS in place and Divi’s static cache cleared. The Visual Builder reloads itself.

The source side

Copying out of Bolt

Bolt runs your project in a preview pane inside the editor. That is a frame. Open that preview in its own browser tab, or deploy it, and copy the tab.

  • Open the preview in its own tab. The pane inside the editor is a frame, and wpgraft copies the tab’s own page.
  • Bolt runs the project in the browser, so the preview is a genuinely rendered page, which is all wpgraft needs. Framework, bundler and CSS approach make no difference to the copy.
  • Navigate to the exact screen and state you want before you pick. What is on screen is what is copied.
Honest limits

What does not carry over

A guide that only lists what works will waste your afternoon. These are the things that surprise people, set out before you start rather than discovered afterwards.

  • What is on screen is what is copied. A closed accordion is copied closed; an inactive tab is copied inactive; a carousel is copied on whichever slide was showing. Put the page into the state you want before you pick.
  • Behaviour does not travel; appearance does. A slider arrives as its markup and its styling, not as a working slider; a form arrives as a form that has had its submit target deliberately removed, so your copy can never post to Bolt’s endpoint. Wire interactive things up with Divi’s own tools.
  • Anything driven by a query arrives as a design. A post grid copies as the posts that were on the page at that moment, not as a loop that keeps querying.
  • Raw HTML in a copy needs the unfiltered_html capability, which normally means an administrator. Without it, the parts of the copy that would output markup verbatim are removed before the insert, or, where WordPress sanitizes them on save instead, left to it, and the panel tells you how many. Everything else in the copy still lands. Insert as an administrator if you want all of it.
  • Links that pointed at code are disabled. A javascript: link in the source page is neutralised on the way in, for every account including an administrator’s, and you are told how many. It is the one thing wpgraft will not carry across for you.
  • Only the page in the tab is copied; never what is inside a frame. An <iframe> is kept as the embed it is: a YouTube or Vimeo frame becomes a video element, a Google Maps frame becomes a map. wpgraft does not descend into it, same origin or not, which is also why a builder’s own editor canvas and an AI chat’s artifact preview have to be opened on their own URL before you can copy them.
  • A whole-page copy replaces the page, and sets it to Divi’s "Blank Page" template. A section or element copy appends and leaves the template alone. That is deliberate, because a full page is a page, not an addition, but it means you should copy a whole page onto a new or empty page, not onto one you have already built.
  • A handful of page-wide declarations have no native home in Divi 5: divi/section and divi/group carry no font attributes at all, so the baseline that stops Divi’s own body { font-size: 14px; color: #666 } repainting every cloned paragraph is written as page-level CSS instead. It is there on purpose; removing it would make the page render wrong to make a number look better.
  • That page-level CSS lives in wpgraft’s own post meta and is printed by wpgraft, not in Divi → Page Settings → Custom CSS. It has to be: Divi owns that field and rewrites it from the builder’s state on every save, so a value put there disappears the next time you press Save, with no error anywhere.
  • Writing that CSS needs the edit_css or unfiltered_html capability. An administrator has it; an editor normally does not, and without it the CSS is skipped and the clone renders with Divi’s own defaults instead.
Questions

Bolt to Divi: FAQ

I am on Divi 4. Can I still use this?

As a source, yes: wpgraft reads the rendered page, so a Divi 4 page copies into any destination exactly like any other page. As a destination, no: wpgraft writes Divi 5 block markup, and Divi 4 stores et_pb_* shortcodes instead. Update to Divi 5 first, or pick a different destination.

Why did my page disappear when I copied a whole page in?

It was replaced, which is what a whole-page copy does in Divi, and the page was switched to Divi’s Blank Page template at the same time. Your previous content is in the page’s WordPress revisions; open the page in the normal editor, restore the revision from before the copy, and set the template back. Copy whole pages onto empty pages to avoid this.

Does moving from Bolt to Divi change anything on the Bolt side?

No. wpgraft reads the generated page and writes to Divi. Nothing is sent back to Bolt and nothing there is altered.

Will the Divi copy still need Bolt installed?

No. What lands in Divi is Divi’s own elements with the styles in Divi’s own fields. There is no shortcode, no embed, no wrapper block and no stylesheet borrowed from Bolt. The copy is fully yours and stands on its own.

Is the result editable, or is it a locked block?

Editable. Click anything in it and Divi’s own settings panel opens with real values in it. That is the whole product, and it is measured on every release: an inserted copy has to be selectable through Divi’s own API and the editor has to reopen cleanly on the saved page, or the build does not ship.

Does it copy the mobile and tablet layouts too?

Yes, once you switch Also copy tablet & phone on. It is off by default, and with it off you get the desktop layout only, slightly faster. With it on, wpgraft measures the page three times: at your window’s own width, then at 768px, then at 375px. The per-breakpoint values are written into Divi’s own responsive controls. One honest caveat about the measurement: the Web Store build produces the narrow viewports inside the page rather than by resizing the window. It re-evaluates every media query at the target width, pins the layout width, resolves vw units and clamps position: fixed boxes to it, and the result is measured at 100% of the property values a real 768px and 375px window produces on getbootstrap.com and on a stock WordPress theme. What it cannot do is re-run the source site’s own JavaScript for the new width, so a layout a script computes on resize is copied as the desktop script left it, and the capture says so in a warning.

What does this cost?

The free tier is three copies in total, usable on any destination, at full fidelity, with nothing watermarked or downgraded, within seven days of signing up. Whole-page copies are a Pro capture; sections and elements are not. Pro removes the copy limit and opens up whole-page captures.

Do I need the wpgraft plugin on the Divi site?

Yes. It is the WordPress half of wpgraft, and it is free software with no licence key, no counter and no upgrade nag in it. It receives the copy, shows it in a panel inside the Divi editor and imports the images. It does nothing on its own until you send it something.

Is copying a page from Bolt legal?

A page you generated yourself is yours to use, subject to the terms of the tool that generated it. Fonts, images and icons that the page pulled in from somewhere else carry their own licences and those follow them into the copy.

Read more

Try a single section first.

Three copies free, every destination unlocked, full fidelity. Point at one Bolt section, put it in Divi, then judge the result before you decide anything.