Skip to content
Log in Sign up

How to import any demo page from offical demo to your WordPress

Copy any page from the official Listivo demo into your own site: save it as an Elementor template on the demo, export the file, then import it onto any page of your WordPress.

2 minute read

Two sites are involved
The first half of this guide happens on a free private copy of the official demo, where you export the page. The second half happens on your own website, where you import it.

Export the page from the official demo

  1. 1 Find the demo page you want

    Browse listivotheme.com and pick the page you wish to import — for example www.demo14.listivotheme.com.

  2. 2 Click "Try it Free"

    Start a free private copy of that demo.

    Listivo demo homepage; a green arrow points at the dark "Try free demo" button, with a green "Buy Listivo" button beneath it.
  3. 3 Choose the demo again

    You will be redirected to a page with all demos: https://tangiblewp.com/listivo/try-for-free where you can choose it again to get a private WordPress.

    Grid of demo screenshots on the try-for-free page, each thumbnail with a purple "Explore Back-end Demo Now" button underneath.
  4. 4 You become the administrator

    After clicking the button you become the administrator of the chosen demo.

    WordPress admin with the Listivo Panel Basic settings open, showing the default and reversed logo, homepage and public email fields.
  5. 5 Open the page you wish to import

    For example the homepage. Click "Visit Site" in the top left corner.

    WordPress admin bar with the site menu open and the cursor over "Visit Site".
  6. 6 Edit it with Elementor

    Use the "Edit with Elementor" button in the admin bar.

    Demo front page with the Elementor dropdown open in the admin bar; a green arrow points at "Edit with Elementor".
  7. 7 Save the page as a template

    Open the arrow next to the Update button and choose "Save as Template".

    Elementor editor with the widget panel on the left; a green arrow points at "Save as Template" in the menu above the UPDATE button.
  8. 8 Name the template

    For example "New Homepage".

    Elementor "Save Your Page to Library" dialog with "New Homepage" typed in the name field next to a green SAVE button.
  9. 9 Search for it and export

    Find the template in the library and use Export from its actions menu.

    Elementor template library filtered by the search word "new"; the row menu for New Homepage is open showing Delete and Export.
  10. 10 The file downloads to your computer

    Elementor saves the template as a JSON file.

    Browser download bar showing a downloaded file named elementor-8440-....json.

Import the template into your website

You can import the file onto any empty page, or add it to an existing page.

  1. 1 Open a page with Elementor

    Edit any page of your site with Elementor.

  2. 2 Click the Add Template icon

    It sits just above your footer, next to the plus button.

    Empty Elementor section showing a pink plus button and a grey folder icon labelled "Add Template", with a green arrow pointing at the folder.
  3. 3 Import the file you downloaded

    Click the import icon and upload the JSON file.

    Elementor "Import Template to Your Library" panel with a green SELECT FILE button; arrows point to it and to the upload icon in the top toolbar.
  4. 4 Search for it and add it

    Find the template in the list and insert it.

    Template library search results showing the New Homepage row with a green Insert button highlighted by an arrow.
  5. 5 Apply the page settings if asked

    If this kind of window shows, click Apply.

    Elementor dialog "Apply the settings of this Page too?" offering "Don't apply" and "Apply"; the cursor is on Apply.

Your page is imported. Bear in mind that it will use your Global Design colors — in the example below we imported it into the orange "Modern" demo, so it automatically adapted its fonts and colors to match that style.

The imported homepage open in the Elementor editor, rendered with orange buttons and search bar instead of the original demo colors.

Keep reading

Overview of Elementor Page Builder: editing pages, layouts, and templates Installing demo content on your website: easy steps to follow

Ask the people who build Listivo

We answer by email from support@tangiblewp.com. With Premium Support, we also fix your site when something breaks.

Send us a message What Premium Support covers 

We can also run your site for you, or build a new one.

Was this guide helpful?