1. Home
  2. Getting Started
  3. How to Import Demo Website Styles

How to Import Demo Website Styles

Here are the steps to follow to make your website look like one of the 9 demo websites.

9 Demo Websites

  1. Gold
  2. Blue
  3. Store
  4. Music Artist
  5. Personal
  6. Video Banner
  7. Speaker 
  8. Hello
  9. Chrome

Read Before Proceeding

Importing these files will overwrite all WordPress Customizer settings.

This means you will have to manually add back all Frontpage Sections text, images, and CSS.


Requirements

  • You should have already added your Frontpage Sections homepage.
  • This tutorial will only work on Music Maker version 3.0 and above.

1. Install Import/Export Plugin

Installing this plugin will allow you to import and export customizer settings.

  1. In WordPress click Add New under Plugins on the sidebar.
  2. Search for Customizer Export/Import
  3. Click Install Now
  4. Click Activate.

2. Back Up Customizer Info

New Website?

If you just imported the demo content, jump to “3. Import Demo Site Styling” below.

1. Back Up Customizer Settings
Exporting customizer settings if you decide to go back to previous settings.

    1. In WordPress click Customize under Appearance on the sidebar.
    2. Click Export/Import at the bottom of the WordPress Customizer.
    3. Click the Export button.
      • Give the file a name like Website Customizer Backup.
    4. You have backed up your customizer settings. 

2. Back Up Customizer Text

  1. Download this Text File – Right click and save to desktop.
  2. Open the Text document
  3. Open the WordPress Customizer
    • In WordPress click Customize under Appearance on the sidebar.
  4. Go through the document and copy and paste any important information you would like to copy over to the WordPress customizer after updating.
  5. Save the text document.

 3. Import Demo Site Styling

Download the source file to the website you would like to copy, and unzip the file.

Right-click the “Zip File” links and save the file to your desktop.

Once again, importing these files will overwrite your website to look exactly like the demo websites.

Import Customizer Settings

  1. Open the WordPress Customizer
    • In WordPress click Customize under Appearance on the sidebar.
  2. Click Export/Import at the bottom of the WordPress Customizer
  3. Click Browse
  4. Look in the folder you downloaded and select the Customizer.dat file
  5. Check Download and import image files? 
  6. Click Import

The demo site styling has been imported.


What to Do Next?

  • If the zip file includes a PSD file:
    • Update the Photoshop file.
    • Export the image as a PNG file.
      • PNG files are required for transparent backgrounds.
    • Upload the updated image to your website.
  • Add back any custom text and CSS that you saved in the text document.
  • Tutorial: How to Use the WordPress Customizer

Troubleshooting

  • Colors Not Updating

    • If you import different Customizer.dat files multiple times, some colors may not update, and you will have to manually change a background or font color.
    • Not all Frontpage Sections have had colors and images applied to match the demo site, you will have to pick some of the colors manually.
  • Switching Back to Old Design
    • If you decide you want to go back to your old design, follow the Import Demo Site Styling steps above, but upload the WordPress customizer file you backed up.
Updated on November 9, 2017

Was this article helpful?

Related Articles

Leave a Comment