How to Import a Style Kit

Tutorials  Last Updated: Time to Read: 3 minutes

The following guide will walk you through the import of the following main parts of your style kit:

  • WordPress content export in the form of an .xml file
  • Layers page presets in the form of .json file(s)
  • Custom CSS in the form of a .txt file

stylekit

 

Note: If you only have a zip file, you must unzip your style kit to an easy-to-find location, such as your desktop, before continuing.

 

  1.  From your WordPress admin panel, click on Tools  Import
    • If you are prompted to install the WordPress Importer, go ahead and install/activate it.
  2. Choose WordPress from the Import screen
  3. Browse to the location of your style-kit files and select the content.xml file and click Open
  4. Click Upload File and Import
  5. Select your name from the Assign Authors drop-down, and check “Download and import file attachments”! If you get an error on the image import, we’ll address that in step 8
  6. Click Submit
    • The import will begin and may take a few minutes. If you see several failure messages on importing media, this is normal and can be ignored.
  7. When complete, you will see a success message.
  8. Click on Media in your admin menu and check for the demo images. If they are not there, click on Add New
  9. Browse to your Style Kit’s folder and open the image folder. Select all the images and click Open to upload them manually.

 If your kit did not come with an XML file, go to PagesAdd New, name your page and select the Layers template from the Page Template drop-down. Save your page and continue.

  1. Go to Layers → Layers Pages and locate the page you want to work on first. Click its title to enter the editor.
  2. Click on the Upload & Import button in the Import Layout box, located in the center column under the Build Page button
    • page-import
  3. The Media Library will open. Click the Upload Files tab, then either browse to the page’s preset.json file, or drag and drop it into the window
    • upload-files-media-library
  4. When complete, click the Upload & Import button in the lower-right
    • You may need to wait several seconds for the import to complete. While the file uploads, nothing may appear to be happening in the editor – be patient! This should not take longer than a minute.
  5. When the upload is complete, the box will refresh with a green border and a success message.
    • import-complete
  6. Click Build Your Page
  7. Your preset layout should appear, complete with images and all widgets set. You will need to configure your global settings and save some of your widgets to finalize the design:

Your style kit likely comes with some custom styling in the form of a txt file. The code in this file is added to your main Layers setup and helps add final touches. Importing this code is not required for the style kit to work, but is most likely the core component of what makes the style kit look the way it does.

  1. On your computer, browse to the location of your Style Kit files and open the css.txt file
  2. Copy the contents
    • copy-css
    • Important note for Mac users: TextEdit opens a new document in rich text mode by default, but you can easily convert it to plain text by going to Format > Make Plain Text in the TextEdit menu bar. Alternatively, you can use the keyboard shortcut Shift-Command-T.
  3. Back in WordPress, you should be at the main Visual Customizer screen. If you already clicked Edit Layout, simply click the back arrow at top-left.
  4. Click the CSS tab near the bottom to expand the Custom CSS field
  5. Paste in the copied code.
    • vc-global-custom-css
  6. If you haven’t set up the rest of your site options yet, now is a good time to choose your Header, Navigation, Content and Footer options. For detailed help on these sections, see the Layers Setup Guide.
  7. Expand the Font section and set any recommended fonts specified in your Style Kit’s readme.txt file, or choose your own!
  8. Finally, click on Edit Layout and expand the page’s Body panel at the top.
  9. Customize the widget text as desired, then click Save & Publish

Note: If you do not edit the widgets or change settings in a widget preset that is using the Masonry layout, the layout may appear different from the Style Kit demo until you customize and Save.