Documentation

Introduction

Before using the product it’s neccessary to have WordPress installed and Divi Theme activated. It is a main requirement for our product to work properly. *(Divi Theme is not included at product)

The whole process of preparing to use the ui kit takes approximately 5-10 minutes.

After downloading the product you will get the The-Basic-Package-Valaska-Studio.zip folder with all product files. You must first unpack this package to your computer.**

The package includes Demo Content folder, Divi Library Files folder, Drag And Drop Files folder, Preview folder, license.txt file, style.css file and thebasic_divi_child.zip.

*Note: We recommend a clean install of Divi and WordPress when using this product.

**IMPORTANT: If you purchase our product on the Divi Marketplace, it is necessary to download main product and also Supplementary Files with Demo Content and Child Theme!!!

If you will have any questions about usage or need to clarify something, please contact us at info@valaskastudio.com. Thank you.

Demo Content

(optional – if you have your own content, you can skip this step)

If you haven’t created your own content (posts, projects or menu items) yet, some UI kit sections such as blog, portfolio, or menu, may not display properly like in our demo. (For example, you don’t have blog posts on your website yet and you use the ui kit section with a blog – you won’t see blog posts in the section. Or you haven’t created a menu for the website yet – you won’t see menu items in our ui kit menu section, etc.)

For this reason there is a possibility to import demo content from our UI kit to your website.

All files can be found in the downloaded package in the Demo Content folder. You can import individual content via WordPress Importer.

Go to Dashboard > Tools > Import and click Install Now at WordPress importer. After installation click Run Importer.

Now choose .xml file with demo content you would like to import from Demo Content folder and click Upload file and import.

Select user, check Download and import file attachments and Submit.

The similar way you can upload all demo content as menu, posts and projects.

Preparation For Usage

(use only method 1 or method 2)

After downloading and unpacking the package and before using the product, it is necessary to import the UI Kit css styles into your Divi Theme. There are two ways you can do this.

If you use a commercial child theme or your own child theme – we recommend using method 1.

If you don’t have a child theme on your website – you can use method 1 or method 2 – it’s up to you.

Always use only one method.

Method 1 – Import UI Kit CSS styles manually

Go to Dashboard > Divi > Theme Options > General and scroll down to Custom CSS tab. Open style.css file from downloaded package and copy all code from file and paste it to Custom CSS tab. After you paste all css code don´t forget to Save Changes.

Method 2 – Use premade Divi Child Theme

You can use our premade blank The Basic Child Theme for Divi. The child theme already contains the necessary styles.css. You need only to install Child Theme from downloaded package – thebasic_divi_child.zip.

Go to Dashboard > Appearance > Themes > Add New Theme.

Click Upload Theme, Choose File and select child theme file thebasic_divi_child.zip from the downloaded package. Then click the Install Now button.

After a successful installation click on the theme Activate button.

UI Kit Preview

(just for your information)

All UI Kit premade sections and layouts you can preview directly at downloaded package. At Preview folder you can find 3 preview files Light Sections Preview.html, Dark Sections Preview.html, Layouts Preview.html.

You need to just open preview file at your browser.

All sections and layouts are marked in the preview and this label is unique for each component in the UI Kit.

UI Kit Usage

(the way you use the ui kit is up to you)

Now The Basic Wireframe UI Kit is ready to use.

The UI Kit can be used by two ways.

All components can be uploaded to Divi Library and used by uploading sections and layouts to custom pages from the Library.

Or you can use Drag And Drop components via Divi Builder Portability function.

Usage via Drag & Drop

We recommend to use UI Kit by this way.

All UI Kit sections and layouts prepared for usage via Drag & Drop (Divi Portability Function) are saved in Drag & Drop Files folder at downloaded package.

In the folder you can find individually packaged sections and layouts divided by category.

Uploading Sections / Layouts via Portability button

Go to page where you need to upload section/layout from UI Kit. Open Divi Builder and click to Portability.

Now at Portability Tab click to Import and choose file with the section/layout you need to upload to your page from Drag & Drop Files folder.

By similar way you can build all your page layout with a few clicks.

*Please be patient and control if you have checked Replace existing content at Options. If you don´t want to replace your page existing content uncheck this option.

Uploading Sections / Layouts via Drag & Drop

Go to page where you need to upload section/layout from UI Kit. Open Divi Builder and easy Drag & Drop individual section/layout to your page from Drag & Drop Files folder.

By similar way you can build all your page layout with a few clicks.

Usage via Divi Library

All UI Kit sections and layouts prepared for usage via Divi Library are saved at Divi Library Files folder at downloaded package. In the folder you can find ready to use .json files for importing to Divi Library.

All Sections (The Basic).json file can be used for importing all UI Kit premade sections. All Layouts (The Basic).json file can be used for importing all UI Kit premade layouts.

If you need to import only light or dark sections you can use Light Sections (The Basic).json file or Dark Sections (The Basic).json file.

The same way you can find individual sections by category stored in a Sections folder.

Import to Divi Library

Go to Dashboard > Divi > Divi Library > Import & Export > Import and select .json file as you need from Divi Library Files folder. Now click Import Divi Builder Layouts.

Please be patient, because this process may take several minutes depending on the size (content) of the imported .json file and the speed of your hosting.

For example All Companies Sections (The Basic).json file can be imported in 1-2 minutes, All Sections (The Basic).json file can take 15 – 30 minutes.

Uploading SECTION from Library to page

Go to page where you need to upload section from UI Kit. Open Divi Builder and click to Add New Section.

Now at Insert Section Tab click to Add From Library and select the section you need to upload to your page. Also you can use Search bar.

By similar way you can build all your page layout with a few clicks.

*Please be patient during loading sections process in Insert Section Tab. It may take some time depending on how many sections you uploaded to Divi Library.