“Importing a page design” means something different depending on where the design actually comes from, and picking the wrong method for your situation is why this task feels harder than it should. A theme’s bundled demo content, a page builder’s saved template, and a raw HTML/CSS file from a designer are three separate problems with three separate solutions, and none of them work by just pasting one into the other’s workflow.
This covers all three paths, what actually happens to your database and files in each case, and the mistakes that turn a routine import into a broken layout or, worse, a broken site.
Figure Out Which Kind of “Design” You Have First
Before picking a method, identify the source format, because it determines everything downstream.
A theme demo is pre-built content bundled with a purchased or downloaded theme, meant to be imported once during initial setup to populate an otherwise empty site with sample pages, images, and menus matching the theme’s marketing screenshots.
A page builder template is a saved layout from Elementor, Beaver Builder, Divi, or a similar tool, either one you built yourself and want to reuse, or one downloaded from a template marketplace, imported through that specific builder’s own import function rather than anything WordPress-native.
Raw HTML/CSS is a static design, possibly from a designer who does not work in WordPress, or exported from a tool like Figma or a static site generator, that needs converting into a WordPress-compatible template rather than simply pasted in.
Method 1: Importing a Theme’s Demo Content
- Install and activate your chosen theme first, through Appearance > Themes > Add New, or Upload Theme if it is a premium theme purchased as a zip file.
- Look for a “Demo Import,” “Starter Sites,” or “One Click Demo Import” option, usually surfaced automatically in the WordPress admin notice bar right after activation, or accessible under Appearance in the sidebar.
- Choose the specific demo variant if the theme offers more than one (many multipurpose themes ship five or ten different demo layouts for different industries).
- Run the import and wait; larger demos with many images can take several minutes.
- Once complete, go to Pages to see the newly created content and start customizing.
The critical thing to know before running this: demo import adds content, it does not create an isolated preview. Every demo page, post, and image becomes real content in your live database. Running this on a site that already has content risks duplicate pages, and in worse cases, a demo importer that resets Reading settings can accidentally point your homepage at demo content instead of your real one. Do this on a brand new install or a staging copy, never directly on a live site with existing content you care about.
Method 2: Importing a Page Builder Template
Using Elementor as the example, since it is the most common page builder in current use, though the general pattern (My Templates or an Import Templates option inside the builder itself) applies similarly across Beaver Builder, Divi, and others.
- Install and activate Elementor if it is not already active.
- Go to Pages > Add New, then click Edit with Elementor.
- Click the folder icon inside the Elementor editor to open the template library.
- Choose My Templates to import a template file you already own (a JSON export), or browse the built-in template library if you want one of Elementor’s own pre-made designs.
- For an owned template file, click Import Templates and upload the JSON.
- Select the imported template and click Insert to add it to your current page.
A common point of confusion: a template exported from one Elementor site sometimes looks broken when imported into another, missing fonts, misaligned spacing, images replaced with placeholder icons. This usually means the original site used a Pro-only widget your current Elementor plan does not have, a font that was locally hosted rather than pulled from Google Fonts, or images that were referenced by ID rather than embedded, and those IDs do not exist in the new site’s media library. Check the template’s widget list against your active plan before assuming the import itself failed.
Method 3: Converting Raw HTML/CSS into a WordPress Template
This is the path for developers turning a static design into an actual WordPress page template, and it is the only one of the three that genuinely requires editing theme files.
- Create a new PHP file inside your active child theme’s folder (never the parent theme, since updates will overwrite it), named something identifiable like page-custom.php.
- Add a template header comment so WordPress recognizes it as a selectable page template:
<?php
/*
Template Name: Custom Page
*/
get_header(); ?>
<!-- your HTML content here -->
<?php get_footer(); ?>- Paste your HTML markup between the get_header() and get_footer() calls.
- Enqueue any accompanying stylesheet properly through functions.php, rather than pasting a style block directly into the template file:
function my_custom_styles() {
wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/path-to-your-style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_custom_styles' );- In wp-admin, go to Pages > Add New, and under Page Attributes on the right, select your new “Custom Page” template from the dropdown.
- Publish and check the result on the front end.
Static HTML built without WordPress in mind almost never handles things WordPress expects, like the loop, widget areas, or menu markers, correctly on the first attempt. Expect to spend real time reconciling the static structure with WordPress’s templating conventions rather than treating this as a straight copy-paste job.
A Fourth Option: Full-Site Migration Plugins
If the “design” you are importing is actually an entire existing WordPress site, not a single page, template, or theme demo, the right tool is a migration plugin like All-in-One WP Migration rather than any of the page-level methods above.
- Install the plugin on both the source and destination sites.
- On the source site, go to All-in-One WP Migration > Export, and choose File to generate a downloadable export.
- On the destination site, go to Import, upload the exported file, and follow the prompts.
This moves the entire database, not just design elements, so it is the wrong tool if you only want one page’s layout. Use it specifically when the goal is cloning a whole site, moving from a local dev environment to production, for example, rather than borrowing a single design.
The free tier of most migration plugins, including All-in-One WP Migration, caps export file size, which becomes a real constraint on sites with a large media library. Duplicator is a common alternative with a similar workflow and its own file size considerations on the free tier. For a site whose export exceeds the free limit, either the paid version of the plugin or a direct database and file transfer over SFTP, more manual but with no size ceiling, becomes the practical option.
Best Practices Regardless of Method
Back up before any import. Theme demo imports, template imports, and full-site migrations all write substantial new data into your database. A backup taken thirty seconds before is the difference between a five-minute rollback and a lost afternoon if something goes sideways.
Test responsiveness on an actual phone, not just a resized browser window, after any import. Desktop browser resizing approximates mobile layout reasonably well most of the time, but touch target sizing and font rendering differences occasionally only show up on a real device.
Check for plugin dependencies before assuming a template import is broken. Many premium page builder templates rely on specific plugins beyond the builder itself, an icon pack, a slider addon, a specific widget bundle, and a template that looks partially broken after import is very often just missing one of these rather than genuinely corrupted.
Run a full SEO pass after importing demo content specifically. Theme demo content ships with placeholder titles, meta descriptions, and often placeholder alt text on every image. None of it is written for your actual site, and leaving it in place after import is a common, entirely avoidable SEO mistake.
Troubleshooting Common Problems
Design does not display correctly after import. Check for missing enqueued styles or scripts first, open browser dev tools and look for 404 errors on CSS or JS files, which usually means a path reference broke somewhere in the move.
Layout conflicts with your existing theme. This shows up most often when a template designed for one page builder gets force-fit into a site using a different builder or a block-theme structure. A child theme isolates most of this, but not all of it; some conflicts require picking one system (block editor or a specific page builder) per page rather than mixing them.
Site slows down noticeably after a heavy demo or template import. Large demo imports bring a lot of unoptimized images along with them. Run everything through an image optimization plugin immediately after import rather than leaving full-resolution demo images live on a production site.
Importing a Figma Design Specifically
Designers increasingly hand off in Figma rather than static HTML files, and this deserves its own note because it is not the same problem as raw HTML/CSS. Figma has no native WordPress export. Two realistic paths exist.
The first is manual translation: a developer reads the Figma file’s spacing, typography, and layout, and rebuilds it as an actual WordPress template, block pattern, or page builder layout by hand. This produces the cleanest, most maintainable result but takes real development time proportional to the design’s complexity.
The second is a Figma-to-code plugin or service that generates HTML/CSS from the design file, which then still needs converting into a WordPress template using Method 3 above. These tools have improved substantially but rarely produce production-ready output on the first pass, expect to clean up generated class names, fix responsive breakpoints, and remove redundant wrapper divs before the result is something you would want to maintain long-term.
Skipping straight from “designer sent a Figma link” to “paste into WordPress” is not actually a step that exists. Budget for the translation work, whichever path you take, rather than treating it as a quick copy-paste task.
Block Themes and the Site Editor Change This Slightly
If your site runs a block theme (one built for Full Site Editing rather than the classic PHP template hierarchy), demo and template import work a little differently than the classic-theme instructions above. Block theme demo content typically imports as patterns and template parts rather than individual pages, accessible through Appearance > Editor > Patterns rather than a separate Pages list.
A design intended for a block theme’s Site Editor generally cannot be dropped into a classic PHP-template theme, and the reverse is also true. Confirm which theme architecture your target site uses before assuming a downloaded template or demo will work at all; the two systems are not cross-compatible despite both technically being “WordPress themes.”
What Happens to Menus and Widgets During Import
This is a detail that catches people by surprise after an otherwise successful import: the pages exist, but the navigation menu linking to them does not automatically appear, or the sidebar looks empty even though the demo screenshots showed widgets in it.
Most theme demo importers do bring menu structures and widget configurations along with the page content, but not universally, and it depends heavily on the specific importer plugin’s feature set. After any import, check Appearance > Menus to confirm a menu was created and actually assigned to a theme location (creating a menu without assigning it to a location is a separate, easy-to-miss step), and check Appearance > Widgets to confirm widget areas are populated the way the demo screenshots suggested they would be.
How Long This Should Actually Take
Expectations matter here more than most guides admit. A theme demo import, on a reasonably fast host, takes anywhere from two to fifteen minutes depending on how many images the demo bundles. A page builder template import is faster, usually under a minute for the import itself, plus whatever time you spend swapping placeholder content for your own afterward.
Converting raw HTML/CSS into a proper WordPress template is not a minutes-scale task at all. For a single, straightforward landing page, budget an afternoon for a developer comfortable with WordPress’s template hierarchy. For a multi-page design with custom post types, dynamic content, or complex JavaScript interactions, it can run to several days. Sites that market “import your design in five minutes” almost always mean the theme-demo or page-builder-template path, not a genuine custom conversion. If a project brief conflates the two, correcting that expectation early avoids a much worse conversation later in the timeline.
Frequently Asked Questions
Can I import a design without a page builder plugin at all?
Yes, through the raw HTML/CSS-to-theme-file method described above, but it requires PHP and WordPress templating knowledge. For non-developers, a page builder or a theme’s own demo importer is the more realistic path.
Will importing a demo overwrite my existing homepage?
It can, depending on the specific importer and whether it touches your Reading settings. Always check the Reading settings (Settings > Reading) after any demo import to confirm your intended homepage is still selected.
Is it safe to import a template from an unfamiliar marketplace?
Scan the file first if your security plugin supports uploaded-file scanning, and stick to reputable marketplaces with reviews and update histories. A malicious or poorly coded template can introduce the same risks as any other untrusted plugin or theme code.
Do imported designs update automatically when the original theme or template updates?
No. An import is a one-time copy into your database. If the original theme ships an updated demo later, you would need to re-import to get those changes, which can conflict with customizations you have already made.
What happens if I try to import a demo built for a different theme than the one I have active?
Most demo importers check for the correct parent theme before running and will refuse to proceed, or warn you explicitly, rather than importing content that references shortcodes and widgets your active theme does not support. If you force it through anyway, expect broken layouts, since the demo content typically relies on that specific theme’s custom blocks or shortcodes to render correctly.
Can I undo a demo import if I do not like the result?
There is no dedicated one-click undo. Restoring from the backup you took before running the import is the reliable path. Manually deleting the imported pages, menus, and media one by one is possible but tedious and easy to leave residue behind, particularly in custom database tables some demo content installs alongside standard posts and pages.
