Category Designer PRO WordPress Plugin Help Document

Please extract that codecanyon downloaded zip in your local PC. There are 2 items inside it.

1. 1) category-designer-pro-document.zip
2. 2) category-designer-pro.zip

You need to select that category-designer-pro.zip

1. Installation via WordPress Admin area

1. Step 1. Login into your WordPress admin area.
2. Step 2. Click on the left side plugin menu.
3. Step 3. Now at top of the page, you can see Add New button, click on that button.
4. Step 4. Again at top of the page, you can see/view Upload Plugin button, click on that button for next process.
5. Step 5. Now upload the plugin zip file (category-designer-pro.zip) via drag and drop or direct file upload selection. After file selection, click on Install Now button and then click on Activate Plugin link.

2. Installation Via FTP

1. Step 1. Extract the above selected zip file (category-designer-pro.zip). It will create 'category-designer-pro' folder with all plugin files & folder inside it. (Remember this extracted folder path)
2. Step 2. Using your FTP program like Filezilla or cPanel, upload the non-zipped plugin folder into the /wp-content/plugins/ folder on your server.
3. Step 3. Go to Dashboard » Plugins » Installed Plugins page and find 'Category Designer PRO' from plugin list.
4. Step 4. Click on Activate to activate Category Designer PRO plugin.

Please follow below quick steps.

Create a new Category Layout

1. 
   1. Create New page from Pages section and give title like Blog Page.
   2. Click on Publish button to publish new page.
   3. Right Click on Permalink URL and open it in new tab of browser. (It will be useful to check page view from front end.)
   
   Please see below image for more detail.

Create a new category layout

1. 1. Go to Dashboard » Category Designer » Create New Layout
3. 2. Select any one category layout that you want to set for your category from the given list and follow next instructions.
5. 3. Select Layout Type and Enter Layout Name
6. - Select Layout Type (Select the layout type from list of existing layout types.)
7. - Add Layout Name (Give name to your category layout. So, easily you can understand for your future reference.)


8. 4. Select Page for layout (Your layout design will display with that page)
   Click on Drop down list and select page name that we have created in Step 1, in our case it's Blog Page page.
   
   
   NOTE: In Select Page for Category option list if you select any page to display your taxonomies, then you will lose all the content of that selected page (if any content already exists within the page, please keep backup of it OR user other blank page).
   
10. You have done with Quick step settings. (For all other layout options setting click here)
    
11. Go to the Top of the page and click on Save Changes button.
12. Now refresh the page that we already have opened in another tab during step 1, in our case it's "Blog Page" page OR open URL of your page that you have selected for your category page at "Select page for category" option in above step.
13. 
    Congratulations..!! you have configured Category Designer PRO plugin correctly.
14. 
    
    What if any one wants to display Category or custom taxonomies within any page content? You can do it using Shortcode. To do it please follow instructions given in Step 3. Ignore Step 3 if you don't have such requirement.

Please follow below steps.

1. Quick guide will help you to easily setup your category page layout in 3 easy steps within 1 to 2 minutes. However, you can set it up in only 2 steps. 3rd step is required only in certain conditions like direct shortcode usage.
2. 1. Make sure you have already created Category layouts that you want to use within page content. If you haven't created any Category layout then go to Step 2.
3. 2. Go to Dashboard » Pages.
4. 3. Open the page in which you want to display category layouts.
5. 4. Just copy the shortcode and paste it into out layout page.

6. Click on "Update" and Right Click on Permalink URL and open it in new tab of browser.

   You will get your layout on that page.

1. Step 1. Go to Dashboard » Category Designer
2. Step 2. Click on "Create New Layout" Button.
4. Step 3. Fill all the settings as per your preferences.
5. Step 4. Click on "Save Changes" button at the top of page and enjoy the Category Layout.

1. Category Template Designs

Template design option to select the template for creating the category layout.

2. Template Color Preset

Color preset to add the color combination to your selected template.

3. Layout Type

Unique layout type for your layout display.

4. Apply Same Height For Category Block?

Same Height For all block in your layout.

5. Layout Name

Unique layout name to identify your category layout on listing page.

6. Select Page for category

Page selection option will allow you to display your taxonomies on the selected page.

7. Select Taxonomy

Taxonomy selection option will allows you to display taxonomies.

8. Select Parent Category

Parent category selection option will allows you to select multiple parent terms from taxonomies.

9. Hide Parent Category?

Hide Parent Category will allows you to hide parent terms on frontend.

10. Hide Child Category?

Hide Child Category will allows you to hide child terms on frontend.

11. Select Child Category

Child category selection option will allows you to select multiple child terms as per parent term choosen from taxonomies.

12. Number Of Categories To Display

Manage the Number Of Categories To Display on a single page.

14. Custom CSS

To apply own css to specific content.

Example: If you want dark background in Easy Timeline template same like our live demo then add your css in custom css settings.

Here 'site-main' is the upper level wrapper class of the category template.
You have to add your category template's wrapper class to set the background.

1. Main Container Class Name

Enter main category container class name.

2. Set Grid Columns (Desktop - Above 980px)

This option provides 4 different values for templates in Desktop view:

• 1 Column: Display categories in 1 column .
• 2 Columns: Display categories in 2 columns.
• 3 Columns: Display categories in 3 columns.
• 4 Columns: Display categories in 4 columns.

3. Set Grid Columns (iPad - 720px - 980px)

This option provides 3 different values for templates in iPad view:

• 1 Column: Display categories in 1 column.
• 2 Columns: Display categories in 2 columns.
• 3 Columns: Display categories in 3 columns.

4. Set Grid Columns (Tablet - 480px - 720px)

This option provides 3 different values for templates in Tablet view:

• 1 Column: Display categories in 1 column.
• 2 Columns: Display categories in 2 columns.
• 3 Columns: Display categories in 3 columns.

5. Set Grid Columns (Mobile - Smaller Than 480px)

This option provides 3 different values for templates in Mobile view:

• 1 Column: Display categories in 1 column.
• 2 Columns: Display categories in 2 columns.
• 3 Columns: Display categories in 3 columns.

6. Arrow Template Color

To set template arrow color.

7. Categories Template Color

To set template color of category.

8. Choose Template Border

To set the border color template.

9. Image Corner Selection

To set the image corner in specific template.

10. Enter Background Border Radius (%)

To set the background border radius of specific div in template.

11. Choose Arrow Color

To set template arrow color.

12. Choose Arrow Hover Color

To set template arrow hover color.

13. Category Hover Background Color

To set background hover color.

14. Background Color For Categories

To set the category background color using the color picker.

15. Repetative Background Color 1

To set the repetative background color on specific first div based on template.

16. Repetative Background Color 2

To set the repetative background color on specific second div based on template.

17. Repetative Background Color 3

To set the repetative background color on specific third div based on template.

18. Repetative Background Color 4

To set the repetative background color on specific forth div based on template.

19. Repetative Background Color 5

To set the repetative background color on specific fifth div based on template.

20. Display Post Count

To show post count on template.

21. Alignment of post count.

To set Alignment of post count.

22. Post Count Text

To set the text after post count.

23. Text Color

To set the color of post post count.

24. Background Color

To set background color of post count.

25. Angle(0-360 Deg)

To set angle of post count display.

26. Border Radius(%)

To set post count border radius.

27. Padding

To set the padding for post count.

28. Margin

To set the margin for post count.

29. Typography Settings

• Post Count Font Family: To select the Post count font family from available font family options.
• Post Count Font Size: To select the post count font size from available font size options.
• Font Weight: To select the post count font weight from available font weight options.
• Line Height: Add line height to the post count.
• Italic Font Style: To apply italic font style to the post count.
• Text Transform: To select the post count font transform from available font transform options.
• Text Decoration: To select the post count font decoration from available font decoration options.
• Letter Spacing: Add letter spacing in pixels to the post count.

1. Category Title Link

To enable and disable the link from category title.

2. Category Title Alignment

To select the category title alignment like left,right and center.

3. Category Title Color

To select the category title color using the color picker.

4. Category Title Link Hover Color

To select the category title hover color using the color picker.

5. Category Title Background Color

To select the category title background color using the color picker.

6. Category Title Hover Background Color

To select the category title hover background color using the color picker.

7. Box Shadow Settings

To set the box shadow for category title text.

8. Typography Settings

• Category Title Font Family: To select the Category title font family from available font family options.
• Category Title Font Size: To select the category title font size from available font size options.
• Font Weight: To select the category title font weight from available font weight options.
• Line Height: Add line height to the category title.
• Italic Font Style: To apply italic font style to the category title.
• Text Transform: To select the category title font transform from available font transform options.
• Text Decoration: To select the category title font decoration from available font decoration options.
• Letter Spacing: Add letter spacing in pixels to the category title.

9. Category Title Margin

To set the margin for Category title.

10. Category Title Padding

To set the padding for Category title.

1. Category Content Alignment.

Set Content Alignment.

2. First Letter As Dropcap.

Set First letter of category content large size.

3. First letter of Category Content Font Family.

Select First letter of category content font family.

4. First letter of Category Content Font Size.

Select First letter of category content font size.

5. First letter of Category Content Color.

Select First letter of category content font color.

6. Enter Category Content Length (Words)

To Manage your category content length, in words.

7. Category Content Color

To select the category content color using the color picker.

8. Box Shadow Settings

To set the box shadow for category content text.

9. Category Content Typography Settings

• Category Content Font Family: To select the Category Content font family from available font family options.
• Category Content Font Size: To select the category content font size from available font size options.
• Font Weight: To select the category contents font weight from available font weight options.
• Line Height: Add line height to the category contents
• Italic Font Style: To apply italic font style to the category contents.
• Text Transform: To select the category contents font transform from available font transform options.
• Text Decoration: To select the category contents font decoration from available font decoration options.
• Letter Spacing: Add letter spacing in pixels to the category contents.

10. Category content Margin

To set the margin for Category content.

11. Category content Padding

To set the padding for Category content.

12. Display Read More Link

To display single category link on Readmore button.

13. Display Read More On

To display Readmore button on same line or next line.

14. Read More Text

To Manage your “Read More” text for category.

15. Read More Link

To set read more link or custom link.

16. Link Behavior

To set read more link behavior (new tab or same tab).

17. Read More Text Color

To set the text color for “Read More” text using the color picker.

18. Read More Text Background Color

To set the background color for “Read More” text using the color picker.

19. Read More Hover Text Color

To set the text hover color for “Read More” text using the color picker.

20. Read More Text Hover Background Color

To set hover background color for “Read More” text using the color picker.

21. Read More Button Border Style

Select border style of read more button.

22. Read More Button Border Radius(px)

Add border radius to the read more button.

23. Read More Button Border

Add left, right, top, bottom border width and left, right, top, bottom border color to the read more button.

24. Read More Button Hover Border Style

Select hover border style of read more button.

25. Read More Button Hover Border Radius(px)

Add hover border radius to the read more button.

26. Read More Button Hover Border

Add left, right, top, bottom hover border width and left, right, top, bottom hover border color to the read more button.

27. Read More Button Alignment

To select the read more button alignment like left,right and center.

28. Read More Button Padding

Add left, right, top, bottom padding to the read more button.

29. Read More Button Margin

Add left, right, top, bottom margin to the read more button.

30. Read More Button Typography Settings

• Read More Button Font Family: To select the Read More Button font family from available font family options.
• Read More Button Font Size: To select the Read More Button font size from available font size options.
• Font Weight: To select the Read More Button font weight from available font weight options.
• Line Height: Add line height to the Read More Button
• Italic Font Style: To apply italic font style to the Read More Button.
• Text Transform: To select the Read More Button font transform from available font transform options.
• Text Decoration: To select the Read More Button font decoration from available font decoration options.
• Letter Spacing: Add letter spacing in pixels to the Read More Button.

1. Categories Effect

To apply effect from available options.

2.Grid Column Space (Px)

To select Grid column space or add space in input box in pixels.

3. Category Image Link

To display category image as link use post image link option.

4. Category Image Effect

To apply category image hover effect.

5. Select Category Hover Effect

Select image hover effect type from list.

• Blur
• Flashing
• Gray Scale
• Opacity
• Sepia
• Slide
• Shine Circle
• Zoom In
• Zoom Out

6. Enter Image Border Radius (%)

To apply border to category image.

7. Select Category Default Image

Select default category image for all Taxonomy terms.

8. Enable Lazy Load?

To apply lazy load on category image.

9. Enable Lazy Load Blurred Image?

To make category image blur on page load.

10. Lazy Load Color

To apply color on category image.

1. Slider Effect

Set Slider animation Effect like slide and fade.

2. Number Of Navigation Item

Select slide scroll limit.

3. Display Slider Navigation

Display Slider navigations.

4. Slider Navigation

Select slider navigation buttons layout.

5. Display Slider Controls

Display sliders controls.

6. Select Slider Arrow

Select sliders controls arrows.

7. Slider Autoplay

Select slider autoplay mode.

8. Slider Scroll Speed(Ms)

Enter slider speed in microseconds.

9. Enable Navigate To Scroll

To Scroll slider with Mouse Wheel.

1. Category Order By

Select category display order type from list.

• Category ID: Order all category using it's ID Ascending or Descending.
• Category Slug: Order all category using slug Ascending or Descending.
• Category Name: Order all category based on category like Ascending or Descending.

2. Display Isotop Filter

Click to enable display isotop filter for Category.

3. Isotop Filter Settings

To set isotop filter settings.

1. Social Share

Click enable to show social icon on category layout page.

2. Social Share Style

Default and Custom social share button option.

3. Available Icon Themes

Show 10 predefined different social sharing icons for layouts.

4. Shape of Social Icon

To display a social icon in a circle or square shape.

5. Size of Social Icon

To manage the size of a social icon as large or small or extra small.

6. Social Share Link Color

To apply color on default social icon.

7. Social Share Link Hover Color

To apply hover color on default social icon.

8. Facebook Share Link

To display a Facebook share option in the terms.To hide Facebook share count, hide Facebook share count option is also available.

9. Linkedin Share Link

To display a Linkedin share option in the terms.To hide Linkedin share count, hide Linkedin share count option is also available.

10. Pinterest Share link

To display a Linkedin share option in the terms.To hide Pinterest share count, hide Pinterest share count option is also available.

11. Pinterest Share Button with Featured Image

To display an pinterest share button with featured image in the terms.

12. Twitter Share Link

To display a twitter share option in the terms.

13. Pocket Share Link

To display a pocket share option in the terms.

14. Telegram Share Link

To display a telegram share option in the terms.

15. WhatsApp Share Link

To display whatsApp share option in the terms.

16. Reddit Share Link

To display reddit share option in the terms.

17. Digg Share Link

To display digg share option in the terms.

18. Tumblr Share Link

To display Tumblr share option in the terms.

19. Skype Share Share Link

To display Skype share option in the terms.

20. WordPress Share Link

To display WordPress share option in the terms.

21. Share Via Mail

To display a share via mail option in the terms.

22. Mail Share Content

To create custom Email message format for mail sharing option.

• [post_title]: To display post title in Email body
• [post_link]: To display post URL in Email body
• [post_thumbnail]: To display post Features image in Email body
• [sender_name]: To display post Email sender name in Email body
• [sender_email]: To display post Email sender Email id in Email body

23. Social Share Count Position

This option provides 3 different values:

• Bottom: Display share count on the bottom of the icon.
• Right: Display share count on the right side of the icon.
• Top: Display share count on the top of the icon.

24. Social Share Position

This option provides 3 different values:

• Right: Display share on the Right side.
• Center: Display share in the Center.
• Left: Display share on the Left side.

1. Does plugin support custom post type taxonomy?

Yes, the plugin supports all custom post type taxonomy.

2. Is category template layout responsive?

Yes, all layouts are fully device ready and no need worry about responsiveness.

3. How to add a social share icon in any category layouts ?

The plugin has an option for social share icons where you enable/disable icons to show on front. You also set up the size of icons, type and style of icons.

4. Can I control my content length on category layout page?

Yes, you can. “Category Content Length” option will give you ability to control your content words on category layout page.

5. Can I manage my “Read More” text on category layout page?

Yes, you can change the text like View More, Continue Reading and you can decorate it also. i.e. font-size, background color, etc.

6. Can I display Post count in my category template?

Yes, you can. Just enable post count option from standard settings and decorate it.

7. Can I switch my templates in different layouts?

Yes, the plugin has an option to change the layout to grid, slider or masonry.

8. How to show same layout on multiple pages as well as on a specific portion of my layout?

You can copy shortcode of layout and paste of in any page or inside page template content. You can use same shortcode multiple time.

9. How to show limited categories in category layouts?

There is an option under general tab to limited categories or product's categories.

10. Is there an option to customize design other than inbuilt options?

Yes, you can also customize design using custom CSS or you can add CSS in your own theme using template classes.

Here We provide you some useful links for more help to improve plugin use in your website.

• Category Designer PRO Demo

We would like to thank you for using our Category Designer PRO Plugin! If you have any difficulties with Category Designer PRO Plugin or need any additional service, do not hesitate to contact us. We provide priority support with all our premium WordPress themes and plugins.

Just contact us on support.solwininfotech.com

We will be happy to assist you!