ADELLA- Wordpress theme

Installation and Quick Start Guide    -     Thank you for your purchasing

  1. WordPress information
  2. Requirements For ADELLA
  1. Automatic Installation
  2. Install Needed Plugins
  3. Importing Demo Data.
  1. Menu setting
  2. Homepage & Blog page setting.
  1. General settings
  2. Header Setting
  3. Footer Settings
  4. Blog Setting
  5. Woocommerce Setting

1. KT Single banner

2. KT Banner

3. KT Banner Carousel

4. KT Categories

5. KT Menu

6. Blog

7. KT Tab

8. Woocommerce

9. KT Newsletter

10. KT Social

11. KT Heading

12. KT Instagram

13. KT Twitter

14. KT Container

Frequently Asked Questions

Thank you!

 

General

We would like to thank you for purchasing ADELLA WordPress theme! We are very pleased that you have chosen ADELLA  for your website, you will not be disappointed! Before you get started, please be sure to always search our Documentation and Knowledgebase, and also watch our Video Tutorials. The large search field in the left sidebar allows you to quickly and easily search through our resources to find answers. We outline all kinds of good information, and provide you with all the details you need to use ADELLA ADELLA  can only be used with WordPress and we assume that you already have WordPress installed and ready to go. If you do not, please see our section on WordPress to help you get started.

1. WordPress Information

To install this theme you must have a working version of WordPress already installed. If you need help installing WordPress, follow the instructions in WordPress Codex.

 

2. Requirements For ADELLA

Before you begin the install, checking to ensure that you have the minimum requirements for ADELLA is WordPress 4.4.0 or highter, PHP 5.4 or highter and MySQL 5.4 or highter.

Recommended PHP Configuration Limits

Many issues that you may run into such as; white screen, demo content fails when importing, empty page content with Fusion Builder and other similar issues are all related to low PHP configuration limits. The solution is to increase the PHP limits. You can do this on your own, or contact your web host and ask them to increase those limits to a minimum as follows:

  • max_execution_time 180
  • memory_limit 128M
  • post_max_size 32M
  • upload_max_filesize 32M

 

Installation

1. Automatic Installation

Feel free to watch this video to know the full-theme installation.

Step 1. Download ZIP package from Themeforest and then unzip it.

Step 2. In unzipped folder you will find a folder named "ADELLA" and "Sample Data" (from Demo 1 to Demo 13).

Step 3. In your Wordpress Dashboard, navigate to Appearance=> Themes.

Step 4. Click on Add New, then click on Upload Theme and browse the Adella-vx.x.x.zip file in unziped folder, finally click Install Now.

Step 5. Wait for a while until the installation complete then select Activate link  to activate theme. Theme has been installed and actived. Beside that you can also click to Live Preview to view this theme.

 

2. Install Needed Plugins:

ADELLA Theme recommended you use the following plugins:

After installed ADELLA theme sucessfully, you will be noticed to install required plugins, just following the instruction you will get all settings.

After click on "Begin installing plugins", you will see the box below:

The installation process may take few minutes, so please be patience. All installations have been completed.

Scrolling down and click on the link "Return to the Dashboard" to go back your Dashboard.

Following next steps if you want to install sample data like our demo website.

 

3. Importing Demo Data.

3.1 Import Demo content.

If you`re using the theme to build a new website which doesn`t have the content yet, I strongly recommend you to use the demo content files. This theme includes xml data files which allows you to upload the demo content to your website. The content is the same as in the Live Demo Preview.

You can follow these step below to import the Sample data:

Step 1: Go to Dashboard =>Tool=> Import

Step 2: Install plugin WordPress Importer

Step 3: Run Importer

 

Step 4: Click on Choose File button and go to the folder that you save the file. Find the filename.xml of the Demo you want to display on your site then click Upload file and import button.

 

Step 5: Check Download and import file attachments checkbox and select user for post's author before submit to starts import sample data:

Wait for the importer working until this pop up appear that meant your import completed.

 

3.2 Import Layer Slider data.

Step1: Go to Dashboard=> Revolution Slider

Step 2: Import sliders

 

The Import Slider popup will appears, click Choose File button then go to the folder that you save the file, for example "ADELLA-opt1.zip" in the Sample Data file then click to Import button:

The slider has been imported successfully.

 

 

Manipulate the similar steps to import the other sliders to your site.

 

3.3 Import Theme Option

- In case you would like to use our available configurations such as Logo, theme color, sidebars, header, footer, blog...You just navigate to Kutethemes >> Kutethemes.

- Click on "Import theme options"

 

- Select any theme options that you would like to install.

 

 

 

After Installation

You have to go to Dashboard =>Appearance =>Menus to set menu like our demo menu.

 

- Select "Manage Location" tab to set theme Location and Assigned some availabled menus:

 

- Select "Edit Menu" tab to edit menu.

[2]: Select a menu to edit

[3]: Click on "Select" button

[4]: Name of menu & Menu structure: you can change menu name and menu structure that you have created before.

[5]: Theme locations: Set the position of menu

[5]: Click Save Menu to save the setting.

- Click on "Delete Menu" button [6] to delete your current menu.

- Click on "Create a new menu" button [7] to creat your own menu.

 

2. Setting Homepage and Blog page

- Go to Dashboard => Settings => Reading:

 

- It will takes you to the Reading Settings page, from this page you should care about some of the following selections:

In the "Front page displays" section, check on the button list "A static page"[1], then select Front page [2] and Post page[3] like the screenshot above if you want the front page display as our demo or you can also make your own front page displays.

Finally click on "Save Changes" button to save your settings.

 

Feel free to watch this video to know the full-theme installation.

 

THEME SETTINGS

This section will show you some general settings of your site.

1. General settings

1.1 Adding Logo and Favicon

Go to Your Dashboard => Kutethemes ==> Theme Options

Click on "General" menu on the left sidebar. There will be some tab displaying such as Logo; Theme Color; Sidebars; 404 Page. Step by step to click on those tabs to configure some settings for your site.

 

- You can upload your site's Logo as you want. Do not forget clicking on the "Save" button to save the information. Logo on your site after uploading:

 

- Favicon for WordPress Version 4.3 or later

WordPress Version 4.3 implemented Site Icon feature that enables favicon in your web site. It is recommended that you use the Site Icon feature, instead of following the guidance below. When you use it, you don't need to prepare the favicon.ico file by yourself or modify your template file, just specifying square image that has at least 512 pixels wide and tall from Customizer screen.

Follow the below steps to set favicon in your site.

  1. Prepare image file. It must be square, and at least 512 pixels wide and tall.
  2. Go to Administration Screen > Appearance > Customize
  3. Click Site Identify
  4. Click Select Image at Site Icon section, upload the image file you prepared in the above step from Upload Files tab screen, and click Select.

 

1.2 Theme color

Firstly, about the Theme color, you just click on this Tab and select the main color for your site as the image below:

 

1.3 Sidebar configuration

You can create the Sidebar name and the Description as this image:

 

1.4 Page 404

 

 

2. Header

Go to ADELLA=>Theme Options => Header and choose the Header option that you want to display on your Homepage.

From the form above:

+ You can Enable or Disable the Header Sticky on your site.

+ Select the Header Style you want to display on your site, there are  7 Unique header layouts from version 1.0.0, once you select the Style, you will see the image preview of this and all the attributes related to that Header. We will update other Header style in the future.

 

3. Footer Setting.

Go to ADELLA =>Theme option =>Footer, you can select the Footer Style display on your site:

In the current version, we got 10 Footer style, you may see an example of our demo Footer:

Beside that, if you do not want to use any Footer Template like our Demo, you can also build your own Footer Style.

How to build the Footer?

You can go to Header/ Footer and built the Footer as you want by using Visual Composer.

You may see our demo structure:

We use some shortcodes to build this footer such as: KT Heading, KT menu, KT Instagram.....you can see more about those shortcodes in ADELLA short code.

 

4. Blog Setting

Go to ADELLA =>Theme options =>Blog setting, you will see all the settings for your Blog page and Blog single page.:

- Click on "Blog page" tab to set some configurations for blog page such as: Blog layout; sidebar for blog...

 

- Select "Single Page" tab to set some configurations for the single blog page.

 

5. Woocommerce Setting

Go to ADELLA=>Theme options => Woocommerce.

5.1. In the General Tab:

You can see our demo Woocommerce setting:

Look at the picture above, you will see General settings of Woocommerce:

[1]: Set the number of day to treat the product as a new product.

[2]: You can tick on Yes if you want to use the secondary image for your product and select No if you do not want.

[3]: Enable or not use the Short name of product, if you tick Yes, the product will have a shortname as you set (if it has a long name, it will be cut follow the character that already set)

If you tick on No, the Title will be show on Full name (it may be very long, it depend on your setting)

[4]: Select Style of Grid Product: you can choose 1 of 5 Styles for your Grid product style.

You may also select 1 of 2 Single product style you want to display on your site.

 

5.2. In the Shop page Tab: you may set the features for your shop page as the image below:

[S1]: Setting Shopage layout, it can be Full width, Left or Right.

[S2]: When you select the Left or Right layout for the Shop, you may also select the sidebar for it.

[S3]: Set the number of product will show on 1 shop page.

[S4]: Select Default shop style will display on your site.

[S5]: Set the number of Items show on the screen size >= 1200 px

[S6]: Set Items on Screen resolution of device >=992px and < 1200px

[S7]: Choose the Item will be show on portrait Tablet.

[S8]: Set Items per row on the screen size >=480 px and < 768 px.

[S9]: Select the Item show on the screen size < 480 px.

 

5.3. Single Product Tab:

You can configure the attribute for your Single product page like the picture above especially the Use Thumbnail Slide, if you select Yes, it will show on your page like our demo:

 

5.4. Related product: you can set the number of Related product wil be show on your Single Product page and select the column as you want:

 

You can see that, you can set the Title and other setting for this section as you want. You can look at our demo:

 

5.5. Upsell and Cross sells product:

 

Remember to save all your changes.

 

ADELLA SHORTCODES

1. KT Single Banner: Display a single banner.

Setting this shortcode, you can go to Page/ All Pages/ Home page Edit, add the KT Single Banner shortcode to your Homepage structure:

now you will see this setting:

From the image above:

[1]: Choose the criteriafor your banner, it can be the product or enter the custom link.

[2]: Select back-ground color for your banner.

[3]: Upload the banner image.

[4]: Set the general height of your banner. If you want to set the separate height on specific device, you can go to the Reponsive tab and configure it in the form as this image:

 

You can see our demo Single Banner:

 

2. KT Banner: show a banner.

The different from the KT Single banner is this shortcode can be built.

It is very simple to configure this shortcode, you just need to add the KT Banner shortcode to your page structure then set it like this form:

From this picture, you can see that, you can set the Title, the back-ground, upload the banner....notice that the Title just show when you built page to help you realize your setting, it will not show on your front-end.

You can see on our demo, the banner got the special effect, if you want to add it, you just need add the Extra class name "bannereffect-1" for your banner:

 

As the KT Single banner, you can also set the height of banner on the specific device by go to the Reponsive tab:

If you do not set the value in this section, it will display the height that you set on your General tab.

With the Banner shortcode, you can add the other shortcodes you want to build your banner such as KT Heading.....

3. KT Banner Carousel

To configure this short code, you can follow these steps:

Step 1: Add the KT Banner Carousel short code to your Home page structure and configure the General tab:

 

Step 2: Configure all the short code attributes:

Firstly, In the Carousel setting Tab: you may set the navigation for the banner, the slide speed....

 

Secondly, in the Carousel Reponsive tab: you can set the number of items you want to show on the specific device:

 

You can also set some space value in the Design option tab.

After saving all your settings, it will display on your site like this:

 

4. KT Categories: show the Categories on your site

Setting this short code, you need to complete the form as this image:

[1]: Fill in the name of your tab.

[2]: Select style for your Category. In the currently version, we have 1 styles for this shortcode.

[3]: Choose the criteria that you want to show on your front-end, it can be the Category or the custom menu.

If you select Category, you just need to choose the Category you want to display, it will show the thumbnail of your Category:

Let see our demo:

Style 1:

To upload the thumbnail of Category, you just need go to WP-admin/ Product/ Categories/ you can add new or select a Category to edit then upload the image you want to show:

In the KT Categories shortcode, you may also configure some attributes for the Carousel setting as the image below:

If you want to set the number of item will be show on specific device, you should go to Carousel Responsive section:

5. KT Menu

It's very simple to configure this shortcode.

Firstly, you need to add the KT Menu shortcode to your Homepage structure:

Secondly, configure all the needed information as this image:

After complete the setting, it will show on your site like our demo:

6. Blog:  display all of your blog post on your site.

To set your blog looks like our demo, you can following these steps:

Step 1: Go to Dashboard=>Post=>Add new to create your post: title, content, select categories and set the featured image.

Step 2: Add Blog shortcode to your Home page structure, you will see Blogs settings, you need to complete the information follow this form:

How many style of Blog?

As we mentioned above in Blog setting section, we have 3 Styles of General Blog: Full, Grid and Massonry. It's setting for the Blog page. If you add the Blog shortcode to your Homepage structure and configure it, you may select the Display Style you want to show on your Front-end by clicking on the arrow down on the right side of Style part and select the 1 of 5 Styles you want:

Here is an example about the Default Style:

and here is Style 1:

 

 

7. KT Tab: show the Tab on your site.

 

Setting this shortcode, you can follow some steps below:

Step 1: Add the KT Tab shortcode to your page structure and complete the needed information for it:

 

From the image above:

[1]: Choose the Tab display style.

[2]: Fill in the Title for your Tab.

[3]: Choose the position for your Tab, it can be on the Top or at the bottom.

[4]: Select Tab animation, there are many type of animation that you can use for your site, you just need to click on the arrow down on the right side of this section and select it.

[5]: Decide what section will be activate first, that mean if you enter the number of section here, it will show first on your Tab.

After added the KT Tab, you should add the section tab to make your Tab look like our demo, you can see our section tab:

 

Let's see some styles of this shortcode:

Style 1:

 

Style 2:

 

 

8. Woocommerce: show the product.

After adding this shortcode to your page, you will see the setting like this image:

[P1]: Choose the category to show on your site.

[P2]: There are 3 templates: Grid Product, Product per Carousel item, Masonry.

Masonry:

 

Product per Carousel item:

 

Grid Product:

 

[P3]: Upload the photo you want to show on this section.

[P4]: Select the size for your product, after you select a size, all the product belong to this section will be regenerate automatically.

[P5]: set the number of product will be show on each Carousel items.

Beside that, if you scrolling down on the setting box, you can set other features such as: choose the Target for filter produc (it can be: Best Selling, Featured product, Product.....), set the amount of product will show on your page, select the product style as you want from Style 1 to Style 5 (you can see more about the preview image of the style by click on the Style you want).

In this shortcode, you can also configure the Carousel setting Tab as this image:

9. Newsletter: Show the newsletter on the Footer (display bestl on Footer)

This is a very useful shortcode using MailChimp that helps you to email the right people at the right time. You can send automated emails based on customer behavior and preferences, it will help the customer to receive all the information from your online shop such as: sales, new products.....

Notice that, you need to have a Mailchimp account on the link: mailchimp, then follow their instruction to Create and Import your List.

After that, you can go to Dashboard=> Plugin=> Add new, fill in the key word " MailChimp for WordPress" and activate it.

Then go to Dashboard/ Mailchimp for WP and enter your mailChimp API key [1] to enable a newsletter signup option with the registration form. After that it will show the email list [2].

If you haven't been created the List, you need to go to http://mailchimp.com/ and create your List then go back to Mailchimp Setting, click on Renew Mailchimp lits[3], your List will be appeared.

How to configure the Form as our Demo?

Step 1: Go to Dashboard/ Mailchimp for WP/ Form and follow their instruction to create the form.

Step 2: Add the Newsletter shortcode to your page structure:

Step 3: After added successfully, you will see Newsletter setting and configure this shortcode as the image below:

Do not forget saving all your changes.

10. KT Social: show social icon on the Footer.

First you can go to WP-admin/ ADELLA/ Theme option/ Social and select the social you want:

Then you may add the KT Social shortcode to your page:

You may also add the extra class name to make your box more plentiful.

After saving your setting, it will show on your site like this:

 

11. KT Heading: display the Heading

To configure the Heading, you should care about some main features like this image:

From the form above:

[1]: Fill in the Title to show on your front-end.

[2]: Insert the custom link for the Heading, when you click on the Heading, it will redirect to the link that you added.

[3]: You may select the animation for the Heading or not.

[4]: Choose the element tag by click on the arrow down on the right side of this box.

[5]: Select text alignment.

Beside that, you can set the font-size and the text color if you want.

12. KT Instagram: Show the Instagram on your site:

 

To configure this shortcode, you can follow these steps:

Step 1: Add the KT Instagram to your page:

 

Step 2: Complete all the needed attributes for it:

 

Note that, you can select 1 of 3 style you want to show the post or the image on your site.

Beside that, you can take more the Access token by create and login your account at this link: https://www.instagram.com/ then follow their instruction to get the Access token.

13. KT Twitter

After adding the KT Twitter to your page builder, you will see this form:

 

You may take more the Access token by create and login your account at this link: https://twitter.com/ then follow their instruction to get the Access token.

You just need to fill in all the nedded information as the form above, once you complete your process and update setting, it will show on your site like our demo:

 

14. KT Container

You may be feel this shortcode is abstract, infact it is very simple, it just a frame that contain all the other items: you can divide the column suitable with your setting then add all the shortcodes to the container and configure it.

You can see that, whenever you want to build the group item, you need to add the KT Container first (it look like a frame) then add the other shortcodes as you want.

 

==================================================================================================================

Frequently Asked Question

1. How to activate the Visual Composer to build the item on your site?

You need to go to Visual Composer/ Role Manager, click on the arrow down on the rightside of Post Types box, select Custom then tick on the item you want as the image below:

Do not forget the Save button.

2.  How to add the left sidebar to your Shop page?

If you want to add the left sidebar to shop page like our demo site, you just following the instruction below: 
1. Go to Dashboard=> Appearance=> Widget and you can drag and drop some widgets as you want to the "Widget Shop Area".
2. Go to Dashboard=>ADELLA=>Theme Options=> Woocommerce/ Shopage and you can setting your Shop page sidebar as this image:

3. How to select the Page for Cart, Check out, My Account page?

You need go to Dashboard=> Woocommerce=> Settings=> Check out, scrolling down to the Check out page and select the Page you want to display as the Check out page:

You can also set Account Page by click on the Accounts Tab, now you may select the page display as My Account Page and you need to tick on the checkbox "Enable registration on the "My Account" page" to enable the Registration.

 

 

Thank you!

Once again, thank you so much for purchasing this template. If you have any questions relating to this template, you can submit a ticket on our support system: http://support.ovicsoft.com/support-system We'd be glad to help you.

 

 

 

 

 

 

 

Go to Top