Blog Designer PRO WordPress Plugin Help Document

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

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

You need to select that blog-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 (blog-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 (blog-designer-pro.zip). It will create 'blog-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 'Blog Designer PRO' from plugin list.
4. Step 4. Click on Activate to activate Blog Designer PRO plugin.

Quick guide will help you to easily setup your blog 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 or if you're using page builders like Visual Composer, Beaver Builder, Elementor, etc.

Please follow below quick steps.

Create a new Blog Layout

1. Instead of trying on your original or live 'Blog page' or any another live pages, we suggest that first test with new test page for your blog. (Keep in mind, if you already tried One Click Blog method from your end then one new test blog page already created for you with the page title 'Sample Blog'.)
   
   1. Create New page from Pages section and give title like My blog.
   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 blog layout

1. 1. Go to Dashboard » Blog Designer » Blog Layout » Create New Layout
   You will get a page as shown below.
   Now, click on Select Other Template button to get the entire list of blog templates available for you to choose from.
   
2. 
3. 2. Select any one blog layout that you want to set for your blog from the given list and follow next instructions.
4. 
5. NOTE: Blog Designer PRO provides you 'search box' to find Blog Template by it's name. You can search any existing blog template via typing template name within right side of input search field.
   
   
6. 3. Enter Layout Name and Select Post Type
7. - Add Layout Name (Give name to your blog layout. So, easily you can understand for your future reference.)
8. - Select Post Type (Select the post type from list of existing post types.)
9. 
10. 4. Select Page for Blog (Your blog 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 My Blog page.
    
    
    NOTE: In Select Page for Blog option list if you select any page to display your posts, 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).
    
11. 
12. You have done with Quick step settings. (For all other layout options setting click here)
    
13. Go to the end of the page and click on Save Settings button.
14. Now refresh the page that we already have opened in another tab during step 1, in our case it's "My Blog" page OR open URL of your page that you have selected for your blog page at "Select page for blog" option in above step.
15. 
    Congratulations..!! you have configured Blog Designer PRO plugin correctly.
16. 
    
    What if any one wants to display Blog posts or custom post type posts within any page content? You can do it via Blog Designer 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 blog 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 blog layouts that you want to use within page content. If you haven't created any Blog layout then go to Step 2.
3. 2. Go to Dashboard » Pages.
4. 3. Open the page in which you want to display blog layouts.
5. 4. Click on the Add Blog designer shortcode it will pop up Select Blog Designer Shortcode window as per shown bellow.

   5. Select the layout name from the list that you want to display in this page and click on Insert shortcode Button.

6. 6. Now you will see that your selected Blog layout's Short code inserted in page content.
7. 

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

1. 
   
   

   Preview Blog Page

   ---

   

   To display Blog layout as above select "Classical Template"

1. Step 1: Go to Dashboard » Blog Designer » Archive Layouts
   Step 2: Click on Create New Archive Layout Button.
   Step 3: Click on Save Changes button at bottom of page. And Enjoy the Blog Archive Layout.
   
   Click here for more details about Archive Post Layout

1. Step 1: Go to Dashboard » Blog Designer » Product Archive Layouts
   Step 2: Click on Create New Archive Layout Button.
   Step 3: Click on Save Changes button at bottom of page. And Enjoy the Product Archive Layout.
   
   Click here for more details about Product Archive Post Layout

1. Step 1: Go to Dashboard » Blog Designer » Download Archive Layouts
   Step 2: Click on Create New Download Post Archive Layout Button.
   Step 3: Click on Save Changes button at bottom of page. And Enjoy the Download Post Archive Layout.
   
   Click here for more details about Download post Archive Post Layout

1. Step 1: To set the Single post Layout in your website.
   Step 2: Go to Dashboard » Blog Designer » Add Single Layout
   Step 3: In that page see the option Override Single Post Design
   Step 4: Check the option Override Single Post Design
   Step 5: Click on "Save Settings" button at bottom of page.
   
   Click here for more details about "Add Single Layout"

1. Step 1: To set the Single product Layout in your website.
   Step 2: Go to Dashboard » Blog Designer » Add Single Product Layout
   Step 3: In that page see the option Override Single Product Design
   Step 4: Check the option Override Single Product Design
   Step 5: Click on "Save Settings" button at bottom of page.
   
   Click here for more details about "Add Single Product Layout"

1. Step 1: To set the Single Download Layout in your website.
   Step 2: Go to Dashboard » Blog Designer » Add Single download Layout
   Step 3: In that page see the option Override Single Download Post Design
   Step 4: Check the option Override Single Product Design
   Step 5: Click on "Save Settings" button at bottom of page.
   
   Click here for more details about "Add Single Download Layout"

1. Getting Started

Once you activate the plugin, it will redirect to getting Started page for initial setup.

2. Reading Settings

To check the reading settings, click Settings > Reading in the WordPress admin menu. Please make sure your Posts page selection to default one.

3. Shortcode Support

Copy and paste a shortcode [wp_blog_designer id="xx"] in any WordPress post or page.

Copy and paste a PHP code <?php echo do_shortcode("[wp_blog_designer id='xx']");?> into a template file within your theme.

4. Setup Blog with Dummy Posts

• Import post section can be found under Tools > Import.
• While you will get a list of options from where you want to import data.
• Select WordPress option (at last) and click on Install Now if plugin not installed and activated with the site. Once it done (after plugin activation), repeat both previous steps and you will get the link for Run Importer.
• You will be redirected on Import WordPress where we need to select actual sample posts XML file.
• Please extract downloaded blog-designer-pro.zip plugin file with your PC or system. Once it done, please go to folder location 'blog-designer-pro > admin > dummy-data' and then select import-sample_posts.xml file for upload in WordPress Import page via file Drag & Drop or direct file selection.
• Click on Upload file and import button and do the next steps.
• Make sure you have selected Download and import file attachments checkbox on next steps.
• All done! Your WordPress blog is ready with sample blog posts.

1. Register your plugin copy

• Once you activate the plugin you must have to verify your plugin license key.
• After verifying your codecanyon item purchase key you'll get automatic updates, notifications on your WordPress dashboard.

2. Update History

• In this section you can show the update history of Blog Designer PRO Plugin with all the changes and update.

Delete data on deletion of plugin.

• Set 'Delete data on deletion of plugin.' option

1. Documentation

• Blog Desigenr PRO Plugin Documentation link.

2. FAQ

• Frequently Ask Questions and answers for user.

3. Ask our experts

• Create support ticket and get help from support team.

4. Customize The Plugin

• Add some more feature related to your site with Blog Designer PRO plugin withour dedicated development team.

1. Create New Sample Blog layout

• Click on create layout button to add make sample blog ayout.

2. Single file Override

• To override or edit single template file according to your active theme requirements then please copy this file.

We also suggest some plugin to make your site more strong using it with Blog Desigenr PRO Plugin.

Here you can get all the details about your server information and your WordPress site details like below.

• WordPress Environment: All details about your WordPress site.
• Server Environment: All details about your wordpres hosting server.
• Active Plugins: Display all activated pluign name.
• Theme Info: Display activated theme name in your site.
• Templates Status: Display activated theme patch status here.

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

1. Blog Designs

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

2. Template Color Preset

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

3. Layout Name

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

4. Display Timeline Layout

This option provides 4 different values:

• Default Layout: This option displays the timeline layout in 2 columns on the left and right side.
• Left Side: This option displays the timeline layout in 1 column on the left side.
• Right Side: This option displays the timeline layout in 1 column on the right side.
• Center: This option displays the timeline layout in 1 column in the center.

5. Select Post type

The post type selection option will allow you to display your custom post type posts on your page.

6. Select Page for Blog

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

7. Number of Posts

Manage the number of posts to display on a single page.

8. Display Tabbed Layout

This option provides 2 different values:

• Left Post and Right Side Post Lists: This option displays the tabbed layout in left side post and right side post lists.
• Right Post and Left Side Post Lists: This option displays the tabbed layout in right side post and left side post lists.

9. Display Tabbed layout Filter by

Select the tabbed layout filter for blog layout.

10. Display Post Category

To display post category, simply select the yes option otherwise no.

11. Select tabbed layout Categories

Select tabbed layout categories on blog page.

• Disable Link for Categories: Select checkbox to disable link of category in blog layout
• Display Filter for Categories: Select checkbox to display filter by category option in blog page
  
  
  NOTE: 'Display Filter by Categories' option displays only in Boxy, Boxy-Clean, Media-Grid, News, Invert-grid, Brit-co, Overlay Horizontal layout and Cool Horizontal layout template.

9. Display Post Tag

To display post tag, simply select the yes option otherwise no.

• Disable Link for Tags: Select checkbox to disable link of post tag in blog layout
• Display Filter for Tags: Select checkbox to display filter by tag option in blog page
  
  
  NOTE: 'Display Filter by Tags' option displays only in Boxy, Boxy-Clean, Media-Grid, News, Invert-grid, Brit-co, Overlay Horizontal layout and Cool Horizontal layout template.

10. Display Author

To display author of post, simply select the yes option otherwise no.

• Disable Link for Author: Select checkbox to disable link of Author in blog layout

11. Display Date

To display date, simply select the yes option otherwise no.

• Disable Link for Publish Date: Select checkbox to disable link of date in blog layout
• Display Filter for Date: Select checkbox to display filter by date option in blog page

12. Display Comment Count

To display total number of comments according to posts, simply select the 'yes' option otherwise select 'no'.

• Disable Link for Comments Form: Select checkbox to disable link of comment in blog layout

13. Display Post Like

To display total number of post like according to posts.

14. Custom CSS

To apply own css to specific content.

Example: If you want dark background in story 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 blog template.
You have to add your blog template's wrapper class to set the background.

1. Main Container Class Name

Enter main blog container class name.

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

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

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

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

This option provides 4 different values for grid templates in iPad view:

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

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

This option provides 4 different values for grid templates in Tablet view:

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

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

This option provides 4 different values for grid templates in Mobile view:

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

6. Blog Unique Design

It will show unique design for first post of your blog page.

7. Select Unique Design for first post or Featured posts

Select post option to select unique design as first post or featured post.

8. Select Background Image

To set the layout image.

9. Blog Posts hover Background Color

To set the color of post hover background color.

10. Blog Posts Template Color

To set the color on specific div based on template.

11. Blog Posts Alternative Template Color

To set the alternative color on specific div based on template.

12. Story Border Color

To set border color for story template.

13. Background Color for Blog Posts

To set the post background color using the color picker.

14. Repetative Blog Background Color 1

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

15. Repetative Blog Background Color 2

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

16. Repetative Blog Background Color 3

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

17. Repetative Blog Background Color 4

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

18. Repetative Blog Background Color 5

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

19. Repetative Blog Background Color 6

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

20. Blog Post Feature Image set as Background Image

To set blog post feature image set as background image

21. Blog Post Background Image Style

To set the post background image style Normal and Parallax

22. Background Hover Color for Blog Posts

To set the color of post hover background color.

23. Alternative Background Color

To set the alternative post background color, simply select the yes option otherwise no.

24. Choose Alternative Background Color

To set the alternative post background color using the color picker.

25. Story Startup Text

To write Story Startup Text.

26. Story Startup Background Color

To select the startup Background color using the color picker.

27. Story Startup Text Color

To select the startup text color using the color picker.

28. Story Ending Text

To Write Story Ending Text.

29. Story Ending Link

To Add Story Ending Link.

30. Story Ending Background Color

To select the story ending background color using the color picker.

31. Story Ending Text Color

To select the story ending text color using the color picker.

32. Story Post Loop Alignment

To select story post alignment from available options

• Default
• Left
• Right

33. Choose Link Color

To select the link color using the color picker.

34. Choose Link Hover Color

To select the link hover color using the color picker.

35. Choose Dash Color

To select dash color using color picker.

36. Choose Category Background Color

To select the category background color using the color picker.

37. Number of Post offset

To select the number of post offset using the starting point to return post from a result all post.

38. Select Accordion Template

To select the accordion template like as accordion template 1, accordion template 2, etc.

39. Set Icon Border Radius(px)

To set icon border radius in px.

40. Choose Icon Color

To select the icon color using the color picker.

41. Choose Icon Background Color

To select the icon background color using the color picker.

42. Choose Icon Hover Color

To select the icon hover color using the color picker.

43. Repetative Icon Color 1

To select the repetative icon color using the color picker.

44. Repetative Icon Color 2

To select the repetative icon color using the color picker.

45. Repetative Icon Color 3

To select the repetative icon color using the color picker.

46. Choose Icon

To select the icon style like as plus-minus, single arrow, double arrow, hands, solid arrows style.

47.Choose Active Header Color

To select the active header color using the color picker.

48.Choose Icon Background Color

To select the icoon background color using the color picker.

49. Choose Icon Alignment

To select the icon alignment.

50. Set Icon Font Size (px)

To set icon font size in px.

51. Set Icon padding

To set icon padding in px.

1. Post Title Link

To enable and disable the link from post title.

2. Post Title Alignment

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

3. Post Title Color

To select the post title color using the color picker.

4. Post Title Link Hover Color

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

5. Post Title Background Color

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

6. Extra Post Title Color

To select the extra post title color using the color picker.

7. Extra Post Title Link Hover Color

To select the extra post title hover color using the color picker.

8. Typography Settings

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

9. Extra Title Typography Settings

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

1. For each Article in a Feed, Show

To display full text for each post, select full text option, otherwise select the summary option.

2. Show Content From

To display text from post content or from post excerpt.

3. Display HTML tags with Summary

To display HTML tags output with the post content.

4. First letter of post content as drop cap.

Set First letter of post content large size.

5. First letter of Post Content Font Size.

Select First letter of post content font size.

6. First letter of Post Content Font Family.

Select First letter of post content font family.

7. First letter of Post Content Color.

Select First letter of post content font color.

8. Post Content Length

To Manage your post content length, in words.

9. Advance Post Contents

To set advance post content.

10. Stopage From

Set Stopage condition from dropdown box.

11. Stopage

To set post content last paragraph of after some or before some selected characters like . | ? | , | ; and : etc...

12. Post Content Color

To select the post content color using the color picker.

13. Display Read More Link

To display single post link on Readmore button.

14. Display Read More On

To display Readmore button on same line or next line.

15. Read More Text

To Manage your “Read More” text for posts.

16. Read More Link

To set read more link or custom post link.

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. This option updated with Google Font Family Option.
• 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.

31. Post Content Typography Settings

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

1. Display Post Feature Image

To display post feature image on post use display post feature image option.

2. Posts Effect

To apply effect from available options.

3. Post Thumbnail Skin

To select Post Thumbnail Skin from square or circle.

4. Blog Grid Height

To set Grid height on specific div on template.

5. Blog Grid Skin

To select Grid skin from available options

• Default Skin
• Repeat Skin
• Reverse Skin

6. Blog Grid column space

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

7. Post Image Link

To display blog post feature image as link use post image link option.

8. Post Image Effect

To apply post image hover effect.

9. Select Post Hover Effect

Select image hover effect type from list.

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

10. Select Post Default Image

Select default post image for all post.

11. Select Post Media Size

Set the size of Blog Post featured image

Blog Designer PRO provide below types of featured image size for blog layout.

• Original Resolution
• thumbnail (150x150)
• medium (300x300)
• large (1024x1024)
• news-thumb (300x300)
• related-post-thumb (640x300)
• invert-grid-thumb (640x320)
• deport-thumb (640x520)
• deport-thumbnail (640x640)
• brit_co_img (580x255)
• easy_timeline_img (500x300)
• Custom Size

12. Add Custom Size

Add the custom height and width of Blog Post featured image

1. Hide Timeline Bar

To display Timeline Bar in timeline template, simply select the yes option otherwise no.

2. Active Post

To start timeline layout with some specific post, select that post using Active post.

3. Posts Effect

To set the transition effect in blog layout, select the effect from the already available effects.

4. Item Width

To set the width of the post, use item width option.

5. Image Height

To set the height of the image, use image height option.

6. Margin between Blog Post (px)

To set margin between timeline and blogpost, use margin between blog post option.

7. Enable Autoslide

To slide posts automatic in timeline template, simply select the yes option otherwise no.

8. Scrolling Speed

To set the slide speed use scrolling speed option.

1. Slider Effect

Set Slider animation Effect like slide and fade.

2. Slider Columns (Desktop - Above 980px)

Set Slider column layout for Desktop screen.

• 1 Column: Display posts in 1 column grid.
• 2 Columns: Display posts in 2 columns grid.
• 3 Columns: Display posts in 3 columns grid.
• 4 Columns: Display posts in 4 columns grid.
• 5 Columns: Display posts in 5 columns grid.
• 6 Columns: Display posts in 6 columns grid.

3. Slider Columns (iPad - 720px - 980px)

Set Slider column layout for iPad screen.

• 1 Column: Display posts in 1 column grid.
• 2 Columns: Display posts in 2 columns grid.
• 3 Columns: Display posts in 3 columns grid.
• 4 Columns: Display posts in 4 columns grid.
• 5 Columns: Display posts in 5 columns grid.
• 6 Columns: Display posts in 6 columns grid.

4. Slider Columns (Tablet - 480px - 720px)

Set Slider column layout for Tablet screen.

• 1 Column: Display posts in 1 column grid.
• 2 Columns: Display posts in 2 columns grid.
• 3 Columns: Display posts in 3 columns grid.
• 4 Columns: Display posts in 4 columns grid.
• 5 Columns: Display posts in 5 columns grid.
• 6 Columns: Display posts in 6 columns grid.

5. Slider Columns (Mobile - Smaller Than 480px)

Set Slider column layout for Mobile screen.

• 1 Column: Display posts in 1 column grid.
• 2 Columns: Display posts in 2 columns grid.
• 3 Columns: Display posts in 3 columns grid.
• 4 Columns: Display posts in 4 columns grid.
• 5 Columns: Display posts in 5 columns grid.
• 6 Columns: Display posts in 6 columns grid.

6. Slider to Scroll

Select slide scroll limit.

7. Display Slider Navigation

Display Slider navigations.

8. Slider Navigation

Select slider navigation buttons layout.

• 

9. Display Slider Controls

Display sliders controls.

10. Select Slider Arrow

Select sliders controls arrows.

• 

11. Slider Autoplay

Select slider autoplay mode.

12. Enter slider autoplay intervals(ms)

Enter autoplay intervals in microseconds. (i.e. 3000).

13. Slider Speed(ms)

Enter slider speed in microseconds.

1. Blog Posts within Time Period

Select Blog post display filer by time like below.

• All Dates - Display posts from all dates
• Today - Display posts of today
• Tomorrow - Display all pending to upload post by next day date.
  
  
  NOTE: Using this option only login authors can view the blog post.
  
  
• This Week - Display all posts which published on current week.
• Last Week - Display all posts which published last week.
• Next Week - Display all posts which will be published next week.
  
  
  NOTE: Using this option only login authors can view the blog post.
  
  
• This Month - Display all posts which published in current month.
• Last Month - Display all posts which published in last month.
• Between Two Dates - Display all posts of selected two dates.
• Last N Days - Display posts of selected last days.
• Next N Days - Display posts of selected next days.
  
  
  NOTE: Using this option only login authors can view the blog post.
  
  

2. Post Display Year Or Months Wise

This option displays If you select 'Order By' Publish Date or Modified Date provides 3 different values:

• Select Option: This option displays default design of blog if order by Publish Date or Modified Date.
• Display Months: This option displays the timeline layout Month Wise.
• Display Years: This option displays the timeline layout Year Wise.

3. Year Or Month Display BackGround Color

This option Display If you select Order By Publish Date or Modified Date and you select Post Display Year Or Months Wise Display Year or Display Months

4. Display Date

Select blog display order type from date.

• Publish Date: Display all post by it's publish date.
• Last Modify Date: Display all post by last modification date.

5. Date Format

Select date format for blog psot from below option.

• Default
• January 13, 2016 9:38 am
• January 13, 2016
• January, 2016
• 13 January 2016
• 9:38 am
• 9:38:44 am
• Wednesday, January 13th, 2016
• Jan 13, 2016 @ 9:38
• 2016/01/13 9:38:44 AM
• 2016/01/13
• 13.01.2016
• 13-01-2016

6. Blog Order By

Select blog display order type from list.

• Default Sorting: Order all posts by default provide by WordPress in Ascending or Descending.
• Random: Order all posts randomly after page load in Ascending or Descending.
• Post ID: Order all post using it's ID Ascending or Descending.
• Author: Order all post using by it's author Ascending or Descending.
• Post Title: Order all post using it's title Ascending or Descending.
• Post Slug: Order all post using slug Ascending or Descending.
• Publish Date: Order all post by published date Ascending or Descending.
• Modified Date: Order all post by it's modified date Ascending or Descending.
• Post Likes: Order all post based on post like Ascending or Descending.

7. Post Status

Select option for display post status.

• Publish: Display all published posts.
• Pending: Display all pending to publish posts.
• Draft: Display all draft posts.
• Auto Draft: Display all auto draft posts.
• Future: Display all future posts.
• Private: Display all private posts.
• Inherit: Display all inherit post.
• Trash: Display all trash post.

8. Select Post Categories

Select post category or custom taxonomy to display category wise posts on a page.

If you don't check the "Exclude Selected Category" checkbox, it will display only the list of posts that are contained the selected category from the list.

If you check the "Exclude Selected Category" checkbox, it will display only the list of posts that are not contain the selected category from the list.

9. Select Post Tags

Select tags to display tag wise posts on a page.

If you don't check the "Exclude Selected Tag" checkbox, it will display only the list of posts that are contained the selected tags from the list.

If you check the "Exclude Selected Tag" checkbox, it will display only the list of posts that are not contain the selected tags from the list.

10. Select Posts

Select posts to display selected posts on a page.

If you don't check the "Exclude Selected Post" checkbox, it will display only the list of posts that are contained the selected posts from the list.

If you check the "Exclude Selected Post" checkbox, it will display only the list of posts that are not contain the selected posts from the list.

11. Select Post Authors

Select multiple authors to display author wise posts on a page.

If you don't check the "Exclude Selected Author" checkbox, it will display only the list of posts that are contained the selected authors from the list.

If you check the "Exclude Selected Author" checkbox, it will display only the list of posts that are not contain the selected authors from the list.

12. Advance Filter?

Click to enable advance filter for post.

13. Filter between Post Categories and Post Tags

Click "Categories OR Tags" to show any one selected category or tag related post.

Click "Categories AND Tags" to show only that selected category or tag related post.

14. Filter Author Post

Click "OR Author" to show any one selected author related post.

Click "AND Author" to show only that selected author related post.

15. Display Sort-by New!

Click to enable display sort-by option in front side.

16. Select Sort By New!

Select blog display sort type from Sort By on front side.

• Publish: Display all published posts.
• Pending: Display all pending to publish posts.
• Draft: Display all draft posts.
• Auto Draft: Display all auto draft posts.
• Future: Display all future posts.
• Private: Display all private posts.
• Inherit: Display all inherit post.
• Trash: Display all trash post.

17. Display Isotop Filter

Click to enable display isotop filter for post.

18. Display Isotop Filter by

To select the display isotop filer by taxonomy.

19. Isotop Filter Settings

To set isotop filter settings.

20. Show Sticky Post

Click "Yes" to show sticky posts.

21. Label for featured posts

Set label for featured post.

1. Pagination Type

This option provides 4 different values:

• No Pagination: This option does not display pagination on the page.
• Paged: This option display pagination on the page.
• Load More: This option adds load more button and via Ajax add more posts on the same page.
• Load On Scroll: This option adds load posts on page Scroll via Ajax on the same page.

2. Pagination Template

Select pagination layout from dropdown.

• Pagination Template 1:
• Pagination Template 2:
• Pagination Template 3:
• Pagination Template 4:

3. Pagination Color Settings

• Text Color: Select color for pagination text color.
• Background Color: Select color for pagination background color.
• Text Hover Color: Select color for pagination hover text color.
• Hover Background Color: Select color for pagination hover background color.
• Active Text Color: Select color for active page text color.
• Active Background Color: Select color for active page background color.
• Border Color: Select color for pagination border color.
• Active Border Color: Select color for active page border color.

3. Button Template

Select Load more button layout from given template.

• 
• 
• 

4. Loader Style

Select Loader style from loaders library by clicking on "Select Loader" button.

• 

1. Display Custom Read More

Display custom read more text before loop or after loop.

2. Custom Read More Text

Enter custom read more text to show in front.

3. Custom Read More Text Link

Provide link to custom read more text.

4. Open Link

Open custom read more link in new tab or in same tab.

5. Custom Read More Text Color

Apply color to read more text.

6. Custom Read More Text Background Color

Apply background color to read more text.

7. Custom Read More Text Hover Color

Apply hover color to read more text.

8. Custom Read More Text Hover Background Color

Apply hover background color to read more text.

9. Custom Read More Text Font Family

Apply custom read more text font family.

10. Custom Read More Text Font Size

Apply text font size of custom read more text.

11. Custom Read More Text Style Options

Custom read more text style options like font-weight, line height etc.

1. Display Price

To display price for product type layout.

2. Price Text Color

To set the price text color using the color picker.

3. Price Text Alignment

To select the price text alignment.

4. Price Text Padding

Add left, right, top, bottom padding to the price text.

5. Price Text Typography Settings

• Price Text Font Family: To select the Price Text font family from available font family options. This option updated with Google Font Family Option.
• Price Text Font Size: To select the Price Text font size from available font size options.
• Font Weight: To select the Price Text font weight from available font weight options.
• Line Height: Add line height to the Price Text
• Italic Font Style: To apply italic font style to the Price Text.
• Text Transform: To select the Price Text font transform from available font transform options.
• Text Decoration: To select the Price Text font decoration from available font decoration options.
• Letter Spacing: Add letter spacing in pixels to the Price Text.

6. Display Purchase Button

To display purchase button for product page Layout.

7. Purchase Button Alignment

To select the purchase button alignment.

8. Purchase Button Color

To set the purchase button color using the color picker.

9. Purchase Button Hover Text Color

To set the purchase button hover color using the color picker.

10. Purchase Button Background Color

To set the purchase button background color using the color picker.

11. Purchase Button Hover Background Color

To set the purchase button hover background color using the color picker.

12. Purchase Button Typography Settings

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

13. Purchase Button Border Radius(px)

Add border radius to the purchase button.

14. Purchase Button Border

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

15. Purchase Button Box Shadow Settings

Add H-offset, V-offset, Blur, Spread and To set the color to the purchase button box shadow.

16. Purchase Button Hover Border Radius(px)

Add hover border radius to the purchase button.

17. Purchase Button Border

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

18. Purchase Button Hover Box Shadow Settings

Add H-offset, V-offset, Blur, Spread and To set the color to the purchase button box hover shadow.

19. Purchase Button Padding

Add left, right, top, bottom padding to the purchase button.

20. Purchase Button Margin

Add left, right, top, bottom margin to the purchase button.

1. Display Sale Tag

To display Sale tags for Product page Layout.

2. Sale Tag Text Color

To set the sale tag text color using the color picker.

3. Sale Tag Background Color

To set the sale tag background color using the color picker.

4. Sale Tag Alignment

To select the sale tag alignment.

5. Sale Tag Angle(0-360 deg)

Add angle in deg to the sale tag.

6. Sale Tag Border Radius(%)

Add border radius in percentage to the sale tag.

7. Sale Tag Typography Settings

• Sale Tag Font Family: To select the Sale Tag font family from available font family options. This option updated with Google Font Family Option.
• Sale Tag Font Size: To select the Sale Tag font size from available font size options.
• Font Weight: To select the Sale Tag font weight from available font weight options.
• Line Height: Add line height to the Sale Tag
• Italic Font Style: To apply italic font style to the Sale Tag.
• Text Transform: To select the Sale Tag font transform from available font transform options.
• Text Decoration: To select the Sale Tag font decoration from available font decoration options.
• Letter Spacing: Add letter spacing in pixels to the Sale Tag.

8. Sale Tag Padding

Add left, right, top, bottom padding to the sale tag.

9. Sale Tag Margin

Add left, right, top, bottom margin to the sale tag.

10. Display Product Rating

To display product rating for Product page Layout.

11. Star Rating Color

To set the star rating color using the color picker.

12. Star Rating Background Color

To set the star rating background color using the color picker.

13. Star Rating Alignment

To select the star rating alignment.

14. Star Rating Padding

Add left, right, top, bottom padding to the star rating.

15. Star Rating Margin

Add left, right, top, bottom margin to the star rating.

16. Display Price

To display product price for Product page Layout.

17. Price Text Color

To set the price text color using the color picker.

18. Price Text Alignment

To select the price text alignment.

19. Price Text Padding

Add left, right, top, bottom padding to the price text.

20. Price Text Margin

Add left, right, top, bottom margin to the price text.

21. Price Text Typography Settings

• Price Text Font Family: To select the Price Text font family from available font family options. This option updated with Google Font Family Option.
• Price Text Font Size: To select the Price Text font size from available font size options.
• Font Weight: To select the Price Text font weight from available font weight options.
• Line Height: Add line height to the Price Text
• Italic Font Style: To apply italic font style to the Price Text.
• Text Transform: To select the Price Text font transform from available font transform options.
• Text Decoration: To select the Price Text font decoration from available font decoration options.
• Letter Spacing: Add letter spacing in pixels to the Price Text.

22. Display Add To Cart Button

To display add to cart button for Product page Layout.

23. Cart Button Alignment

To select the cart button alignment.

24. Cart Button Color

To set the cart button color using the color picker.

25. Cart Button Hover Text Color

To set the cart button hover color using the color picker.

26. Cart Button Background Color

To set the cart button background color using the color picker.

27. Cart Button Hover Background Color

To set the cart button hover background color using the color picker.

28. Cart Button Typography Settings

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

29. Cart Button Border Radius(px)

Add border radius to the cart button.

30. Cart Button Border

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

31. Cart Button Box Shadow Settings

Add H-offset, V-offset, Blur, Spread and To set the color to the cart button box shadow.

32. Cart Button Hover Border Radius(px)

Add hover border radius to the cart button.

33. Cart Button Border

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

34. Cart Button Hover Box Shadow Settings

Add H-offset, V-offset, Blur, Spread and To set the color to the cart button box hover shadow.

35. Cart Button Padding

Add left, right, top, bottom padding to the cart button.

36. Cart Button Margin

Add left, right, top, bottom margin to the cart button.

37. Display Add To Wishlist Button

To display add to wishlist button for Product page Layout.

37. Display Wishlist Button on

To display wishlist button on same line or next line in cart button.

38. Cart Button & Wishlist Button Wrapper Alignment

To select the cart button and wishlist button alignment like left, right and center

39. Wishlist Button Alignment

To select the wishlist button alignment.

40. Wishlist Button Color

To set the wishlist button color using the color picker.

41. Wishlist Button Hover Text Color

To set the wishlist button hover color using the color picker.

42. Wishlist Button Background Color

To set the wishlist button background color using the color picker.

43. Wishlist Button Hover Background Color

To set the wishlist button hover background color using the color picker.

44. Wishlist Button Typography Settings

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

45. Wishlist Button Border Radius(px)

Add border radius to the wishlist button.

46. Wishlist Button Border

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

47. Wishlist Button Box Shadow Settings

Add H-offset, V-offset, Blur, Spread and To set the color to the wishlist button box shadow.

48. Wishlist Button Hover Border Radius(px)

Add hover border radius to the wishlist button.

49. Wishlist Button Border

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

50. Wishlist Button Hover Box Shadow Settings

Add H-offset, V-offset, Blur, Spread and To set the color to the wishlist button box hover shadow.

51. Wishlist Button Padding

Add left, right, top, bottom padding to the wishlist button.

52. Wishlist Button Margin

Add left, right, top, bottom margin to the wishlist button.

1. Social Share Style

Click enable to show social icon on blog post.

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. Facebook Share Link

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

8. Linkedin Share Link

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

9. Pinterest Share link

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

10. Pinterest Share Button with Featured Image

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

11. Twitter Share Link

To display a twitter share option in the posts.

12. Pocket Share Link

To display a pocket share option in the posts.

13. Telegram Share Link

To display a telegram share option in the posts.

14. WhatsApp Share Link

To display whatsApp share option in the posts.

15. Reddit Share Link

To display reddit share option in the posts.

16. Digg Share Link

To display digg share option in the posts.

17. Tumblr Share Link

To display Tumblr share option in the posts.

18. Skype Share Share Link

To display Skype share option in the posts.

19. WordPress Share Link

To display WordPress share option in the posts.

20. Share Via Mail

To display a share via mail option in the posts.

21. 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

22. 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.

You can preview each and every post layout at the time of creation and modify it and save valuable time.

Step 1. Go to Dashboard » Blog Designer » Archive Layouts

Step 2. Click on "Create New Archive Layout" Button. Step 3. Fill all the settings as per your preferences.

Step 4. Click on "Save Changes" button at bottom of page. And Enjoy the Blog Archive Layout.

1. Archive Designs

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

2. Template Color Preset

Color preset to add color combination to your selected template.

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

3. Archive Layout Name

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

4. Display Timeline Layout

This option provides 4 different values:

• Default Layout: This option displays the timeline layout in 2 columns on the left and right side.
• Left Side: This option displays the timeline layout in 1 column on the left side.
• Right Side: This option displays the timeline layout in 1 column on the right side.
• Center: This option displays the timeline layout in 1 column in the center.

7. Select Archive Type

Select Archive Type option allows you to select Archive Type like Category page, Tag page, Author page, Date page, and Search page.

You can make 45+ different archive page layout design of above 4 different pages. It's amazing!

9. Select Post Tags

Select tags to display tag wise posts on archive page. If Select Archive Type select as Tag.

Select post category to display category wise posts on archive page. If Select Archive Type select as Category.

8. Number of Posts to Display

Manage the number of posts to display on archive pages.

10. Display Post Category

To display post category, simply select the Yes option otherwise No.

• Disable Link for Categories: Select checkbox to disable link of category in archive layout

11. Display Post Tag

To display post tag, simply select the Yes option otherwise No.

• Disable Link for Tags: Select checkbox to disable link of post tag in archive layout

12. Display Author

To display author of post, simply select the Yes option otherwise No.

• Disable Link for Author: Select checkbox to disable link of Author in archive layout

13. Display Post Published Year

To display Post Published Year, simply select the Yes option otherwise No.

14. Display Post Published Date

To display post published date, simply select the Yes option otherwise No.

• Disable Link for Publish Date: Select checkbox to disable link of date in archive layout

15. Display Comment Count

To display total no. of comment according to posts, simply select the Yes option otherwise No.

• Disable Link for Comments Form: Select checkbox to disable link of comment in archive layout

16. Display Post Like

To display total no. of like according to posts, simply select the yes option otherwise no.

17. Custom CSS

To apply own CSS to specific content.

1. Main Container Class Name

Enter main archive container class name.

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

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

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

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

This option provides 4 different values for grid templates in iPad view:

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

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

This option provides 4 different values for grid templates in Tablet view:

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

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

This option provides 4 different values for grid templates in Mobile view:

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

6. Archive Unique Design

It will show unique design for first post of your archive page.

7. Select Unique Design for first post or Featured posts

Select post option to select unique design as first post or featured post.

8. Select Background Image

To set the layout image.

9. Blog Posts hover Background Color

To set the color of post hover background color.

10. Blog Posts Template Color

To set the color on specific div based on template.

11. Blog Posts Alternative Template Color

To set the alternative color on specific div based on template.

12. Story Border Color

To set border color for story template.

13. Background Color for Blog Posts

To set the post background color using the color picker.

14. Repetative Blog Background Color 1

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

15. Repetative Blog Background Color 2

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

16. Repetative Blog Background Color 3

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

17. Repetative Blog Background Color 4

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

18. Repetative Blog Background Color 5

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

19. Repetative Blog Background Color 6

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

20. Blog Post Feature Image set as Background Image

To set blog post feature image set as background image

21. Blog Post Background Image Style

To set the post background image style Normal and Parallax

22. Background Hover Color for Blog Posts

To set the color of post hover background color.

23. Alternative Background Color

To set the alternative post background color, simply select the yes option otherwise no.

24. Choose Alternative Background Color

To set the alternative post background color using the color picker.

25. Story Startup Text

To write Story Startup Text.

26. Story Startup Background Color

To select the startup Background color using the color picker.

27. Story Startup Text Color

To select the startup text color using the color picker.

28. Story Ending Text

To Write Story Ending Text.

29. Story Ending Link

To Add Story Ending Link.

30. Story Ending Background Color

To select the story ending background color using the color picker.

31. Story Ending Text Color

To select the story ending text color using the color picker.

32. Story Post Loop Alignment

To select story post alignment from available options

• Default
• Left
• Right

33. Choose Link Color

To select the link color using the color picker.

34. Choose Link Hover Color

To select the link hover color using the color picker.

35. Choose Dash Color

To select dash color using color picker.

36. Choose Category Background Color

To select the category background color using the color picker.

37. Select Accordion Template

To select the accordion template like as accordion template 1, accordion template 2, etc.

38. Set Icon Border Radius(px)

To set icon border radius in px.

39. Choose Icon Color

To select the icon color using the color picker.

40. Choose Icon Background Color

To select the icon background color using the color picker.

41. Choose Icon Hover Color

To select the icon hover color using the color picker.

42. Repetative Icon Color 1

To select the repetative icon color using the color picker.

43. Repetative Icon Color 2

To select the repetative icon color using the color picker.

44. Repetative Icon Color 3

To select the repetative icon color using the color picker.

45. Choose Icon

To select the icon style like as plus-minus, single arrow, double arrow, hands, solid arrows style.

46.Choose Active Header Color

To select the active header color using the color picker.

47.Choose Icon Background Color

To select the icoon background color using the color picker.

48. Choose Icon Alignment

To select the icon alignment.

49. Set Icon Font Size (px)

To set icon font size in px.

50. Set Icon padding

To set icon padding in px.

1. Display Author Data

To display author data at the top of the author archive page, simply select the Yes option otherwise No.

2. Author Box Background Color

Set author box background color using color picker.

3. Display Author Title

If you want to add prefix or suffix or both to the author name, simply write the text here.

4. Author Title Color

Set author title color using color picker.

5. Typography Settings For Author Title

• Post Title Font Family: To select the Post title font family from available font family options. This option updated with Google Font Family Option.
• Post Title Font Size: To select the post title font size from available font size options.
• Font Weight: To select the post title font weight from available font weight options.
• Line Height: Add line height to the post contents
• Italic Font Style: To apply italic font style to the post title.
• Text Transform: To select the post title font transform from available font transform options.
• Text Decoration: To select the post title font decoration from available font decoration options.
• Letter Spacing: Add letter spacing in pixels to the post title.

6. Display Author Biography

Enable to show author's biography(info).

7. Author Content Color

Set author biography content color.

8. Typography Settings For Author Content

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

9. Display Author Social LinksDisplay Author Social Links

Display post author socical setting details on author archive page.

10. Email Link

To show user email link.

11. Website Link

To show user website link.

12. Facebook Link

To show user facebook link.

13. Twitter Link

To show user twitter link.

14. LinkedIn Link

To show user linkedin link.

15. YouTube Link

To show user youtube link.

16. Pinterest Link

To show user pinterest link.

17. Instagram Link

To show user instagram link.

18. Reddit Link

To show user reddit link.

19. Pocket Link

To show user pocket link.

20. Skype Link

To show user skype link.

21. WordPress Link

To show user wordpress link.

22. Snapchat Link

To show user snapchat link.

23. Vine Link

To show user Vine link.

24. Tumblr Link

To show user tumblr link.

1. Post Title Link

Posts title will display with link(permalink) if enabled otherwise display title without link(permalink).

2. Post Title Alignment

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

3. Post Title Color

To select the post title color using the color picker.

4. Post Title Link Hover Color

To select the post title link hover color using the color picker.

5. Post Title Background Color

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

6. Typography Settings

• Post Title Font Family: To select the Post title font family from available font family options. This option updated with Google Font Family Option.
• Post Title Font Size: To select the post title font size from available font size options.
• Font Weight: To select the post title font weight from available font weight options.
• Line Height: Add line height to the post contents
• Italic Font Style: To apply italic font style to the post title.
• Text Transform: To select the post title font transform from available font transform options.
• Text Decoration: To select the post title font decoration from available font decoration options.
• Letter Spacing: Add letter spacing in pixels to the post title.

1. For each Article in a Feed, Show

To display full text for each post, select full text option, otherwise select the summary option.

2. Show Content From

To display text from post content or from post excerpt.

3. Display HTML tags with Summary

To display HTML tags output with the post content.

4. First letter of post content as drop cap.

Set First letter of post content large size.

5. First letter of Post Content Font Size.

Select First letter of post content font size.

6. First letter of Post Content Font Family.

Select First letter of post content font family.

7. First letter of Post Content Color.

Select First letter of post content font color.

8. Post Content Length

To Manage your post content length, in words.

9. Advance Post Contents

To set advance post content.

10. Stopage From

Set Stopage condition from dropdown box.

11. Stopage

To set post content last paragraph of after some or before some selected characters like . | ? | , | ; and : etc...

12. Post Content Color

To select the post content color using the color picker.

13. Display Read More Link

To display single post link on Readmore button.

14. Display Read More On

To display Readmore button on same line or next line.

15. Read More Text

To Manage your “Read More” text for posts.

16. Read More Link

To set read more link or custom post link.

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. This option updated with Google Font Family Option.
• 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.

31. Post Content Typography Settings

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

1. Display Post Feature Image

To display post feature image on post use display post feature image option.

2. Post Image Effect

To apply effect from available options.

3. Post Thumbnail Skin

To select Post Thumbnail Skin from square or circle.

4. Blog Grid Height

To set Grid height on specific div on template.

5. Blog Grid Skin

To select Grid skin from available options

• Default Skin
• Repeat Skin
• Reverse Skin

6. Post Image Link

To display archive post feature image as link use post image link option.

7. Blog Grid column space

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

8. Post Image Effect

To apply post image hover effect.

9. Select Post Hover Effect

Select image hover effect type from list.

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

10. Select Post Default Image

Select default post image for all post.

11. Select Post Media Size

Set the size of Archive Post featured image

• Original Resolution
• thumbnail (150x150)
• medium (300x300)
• large (1024x1024)
• news-thumb (300x300)
• related-post-thumb (640x300)
• invert-grid-thumb (640x320)
• deport-thumb (640x520)
• deport-thumbnail (640x640)
• brit_co_img (580x255)
• easy_timeline_img (500x300)
• Custom Size

12. Add Custom Size

Add the custom height and width of Archive Post featured image

1. Hide Timeline Bar

To display Timeline Bar in timeline template, simply select the yes option otherwise no.

2. Active Post

To start timeline layout with some specific post, select that post using Active post.

3. Posts Effect

To set the transition effect in archive layout, select the effect from the already available effects.

4. Post Width (px)

To set the width of the post, use item width option.

5. Item Height (px)

To set the height of the image, use image height option.

6. Margin between Blog Post (px)

To set margin between timeline and blogpost, use margin between blog post option.

7. Enable Autoslide

To slide posts automatic in timeline template, simply select the yes option otherwise no.

8. Scrolling Speed

To set the slide speed use scrolling speed option.

1. Slider Effect

Set Slider animation Effect like slide and fade.

2. Slider Columns (Desktop - Above 980px)

Set Slider column layout for Desktop screen.

• 1 Column: Display posts in 1 column grid.
• 2 Columns: Display posts in 2 columns grid.
• 3 Columns: Display posts in 3 columns grid.
• 4 Columns: Display posts in 4 columns grid.
• 5 Columns: Display posts in 5 columns grid.
• 6 Columns: Display posts in 6 columns grid.

3. Slider Columns (iPad - 720px - 980px)

Set Slider column layout for Desktop screen.

• 1 Column: Display posts in 1 column grid.
• 2 Columns: Display posts in 2 columns grid.
• 3 Columns: Display posts in 3 columns grid.
• 4 Columns: Display posts in 4 columns grid.
• 5 Columns: Display posts in 5 columns grid.
• 6 Columns: Display posts in 6 columns grid.

4. Slider Columns (Tablet - 480px - 720px)

Set Slider column layout for Desktop screen.

• 1 Column: Display posts in 1 column grid.
• 2 Columns: Display posts in 2 columns grid.
• 3 Columns: Display posts in 3 columns grid.
• 4 Columns: Display posts in 4 columns grid.
• 5 Columns: Display posts in 5 columns grid.
• 6 Columns: Display posts in 6 columns grid.

5. Slider Columns (Mobile - Smaller Than 480px)

Set Slider column layout for Desktop screen.

• 1 Column: Display posts in 1 column grid.
• 2 Columns: Display posts in 2 columns grid.
• 3 Columns: Display posts in 3 columns grid.
• 4 Columns: Display posts in 4 columns grid.
• 5 Columns: Display posts in 5 columns grid.
• 6 Columns: Display posts in 6 columns grid.

6. Slider to Scroll

Select how many slide scroll.

7. Display Slider Navigation

Display Slider navigations.

8. Slider Navigation

Select slider navigation buttons layout.

• 

9. Display Slider Controls

Display sliders controls.

10. Select Slider Controls

Select sliders controls arrows.

• 

11. Slider Autoplay

Select slider autoplay mode.

12. Slider Autoplay Intervals

Enter autoplay intervals in microseconds. (i.e. 3000).

13. Slider Speed

Enter slider speed in microseconds.

1. Display Date

Select date type to show it blog post.

• Published Date: Display post published date.
• Last Modify Date: Display post last modified date.

2. Date Format

Select date display format for blog post like below.

• Default
• December 19, 2017 3:39 am
• December 19, 2017
• December, 2017
• 19 December 2017
• 3:39 am
• 3:39:51 am
• Tuesday, December 19th, 2017
• Dec 19, 2017 @ 3:39
• 2017/12/19 at 3:39 AM
• 2017/12/19 3:39:51 AM
• 2017/12/19
• 19.12.2017
• 19-12-2017

3. Blog Order by

Select archive display order type from list.

• Default Sorting: Order all posts by default provide by WordPress.
• Random: Order all posts randomly after page load.
• Post ID: Order all post using it's ID.
• Author: Order all post using by it's author.
• Post Title: Order all post using it's title.
• Post Slug: Order all post using slug.
• Publish Date: Order all post by published date.
• Modified Date: Order all post by it's modified date.
• Post Likes: Order all post based on post like.

Select blog order type ascending or descending.

• Ascending: Order all posts by Ascending.
• Descending: Order all posts by Descending.

4. Post Display Year Or Months Wise

Select option for display post to year or month wise.

• Display Year: Display all post year wise.
• Month Year: Display all post month wise.

5. Post Status

Select option for display post status.

• Publish: Display post by status.
• Pending: Display post by pending.
• Draft: Display post by draft.
• Auto Draft: Display post by auto draft.
• Future: Display post by feature.
• Private: Display post by private.
• Inherit: Display post by inherit.
• Trash: Display post by trash.

6. Year Or Month Display BackGround Color

Select color for year or month display background color.

7. Show Sticky Post

Select to display sticky posts.

1. Pagination Type

This option provides 4 different values:

• No Pagination: This option does not display pagination on the page.
• Paged: This option display pagination on the page.
• Load More: This option adds load more button and via Ajax add more posts on the same page.
• Load On Scroll: This option adds load posts on page Scroll via Ajax on the same page.

2. Pagination Template

Select pagination layout from dropdown.

• Pagination Template 1:
• Pagination Template 2:
• Pagination Template 3:
• Pagination Template 4:

3. Pagination Color Settings

• Text Color: Select color for pagination text color.
• Background Color: Select color for pagination background color.
• Text Hover Color: Select color for pagination hover text color.
• Hover Background Color: Select color for pagination hover background color.
• Active Text Color: Select color for active page text color.
• Active Background Color: Select color for active page background color.
• Border Color: Select color for pagination border color.
• Active Border Color: Select color for active page border color.

3. Button Template

Select Load more button layout from given template.

• 
• 
• 

4. Loader Style

Select Loader style from loaders library by clicking on "Select Loader" button.

• 

1. Social Share Style

Click enable to show social icon on blog post.

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. Facebook Share Link

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

8. Linkedin Share Link

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

9. Pinterest Share link

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

10. Pinterest Share Button with Featured Image

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

11. Twitter Share Link

To display a twitter share option in the posts.

12. Pocket Share Link

To display a pocket share option in the posts.

13. Telegram Share Link

To display a telegram share option in the posts.

14. WhatsApp Share Link

To display whatsApp share option in the posts.

15. Reddit Share Link

To display reddit share option in the posts.

16. Digg Share Link

To display digg share option in the posts.

17. Tumblr Share Link

To display Tumblr share option in the posts.

18. Skype Share Share Link

To display Skype share option in the posts.

19. WordPress Share Link

To display WordPress share option in the posts.

20. Share Via Mail

To display a share via mail option in the posts.

21. Mail Share Content

To crate 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

22. 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.

Step 1. Go to Dashboard » Blog Designer » Product Archive Layouts

Step 2. Click on "Create New Archive Layout" Button. Step 3. Fill all the settings as per your preferences.

Step 4. Click on "Save Changes" button at bottom of page. And Enjoy the Blog Archive Layout.

1. Archive Designs

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

2. Template Color Preset

Color preset to add color combination to your selected template.

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

3. Archive Layout Name

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

4. Display Timeline Layout

This option provides 4 different values:

• Default Layout: This option displays the timeline layout in 2 columns on the left and right side.
• Left Side: This option displays the timeline layout in 1 column on the left side.
• Right Side: This option displays the timeline layout in 1 column on the right side.
• Center: This option displays the timeline layout in 1 column in the center.

5. Product Display Year Or Months Wise

This option Display If you select Order By Publish Date or Modified Date provides 3 different values:

• Select Option: This option displays default design of archive if order by Publish Date or Modified Date.
• Display Months: This option displays the timeline layout with Month Wise.
• Display Years: This option displays the timeline layout with Year Wise.

6. Year Or Month Display BackGround Color

This option Display If you select Order By Publish Date or Modified Date and you select Product Display Year Or Months Wise Display Year or Display Months

7. Select Archive Type

Select Archive Type option allows you to select Archive Type like Category page, Tag page.

You can make 45+ different archive page layout design of above 2 different pages. It's amazing!

8. Number of Products

Manage the number of Products to display on archive pages.

9. Select Product Tags

Select tags to display tag wise Products on archive page. If Select Archive Type select as Tag.

Select Product category to display category wise Products on archive page. If Select Archive Type select as Category.

10. Display Product Category

To display Product category, simply select the Yes option otherwise No.

• Disable Link for Categories: Select checkbox to disable link of category in archive layout

11. Display Product Tag

To display Product tag, simply select the Yes option otherwise No.

• Disable Link for Tags: Select checkbox to disable link of Product tag in archive layout

12. Display Author

To display author of Product, simply select the Yes option otherwise No.

• Disable Link for Author: Select checkbox to disable link of Author in archive layout

13. Display Product Published Year

To display Product Published Year, simply select the Yes option otherwise No.

14. Display Product Published Date

To display Product published date, simply select the Yes option otherwise No.

• Disable Link for Publish Date: Select checkbox to disable link of date in archive layout

15. Display Comment Count

To display total no. of comment according to Products, simply select the Yes option otherwise No.

• Disable Link for Comments Form: Select checkbox to disable link of comment in archive layout

16. Display Product Like

To display total no. of like according to Products, simply select the yes option otherwise no.

17. Custom CSS

To apply own CSS to specific content.

1. Main Container Class Name

Enter main archive container class name.

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

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

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

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

This option provides 4 different values for grid templates in iPad view:

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

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

This option provides 4 different values for grid templates in Tablet view:

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

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

This option provides 4 different values for grid templates in Mobile view:

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

6. Archive Products Template Color

To set the color on specific div based on template.

7. Background Color for Archive Products

To set the product background color using the color picker.

8. Alternative Background Color

To set the alternative product background color, simply select the yes option otherwise no.

9. Choose Alternative Background Color

To set the alternative product background color using the color picker.

10. Story Startup Text

To write Story Startup Text.

11. Story Startup Background Color

To select the startup Background color using the color picker.

12. Story Startup Text Color

To select the startup text color using the color picker.

13. Story Ending Text

To Write Story Ending Text.

14. Story Ending Link

To Add Story Ending Link.

15. Story Ending Background Color

To select the story ending background color using the color picker.

16. Story Ending Text Color

To select the story ending text color using the color picker.

17. Choose Link Color

To select the link color using the color picker.

18. Choose Link Hover Color

To select the link hover color using the color picker.

19. Archive Unique Design

It will show unique design for first product of your archive page.

20. Select Unique Design for first product or Featured products

Select product option to select unique design as first product or featured product.

21. Archive Grid Height

To set Grid height on specific div on template.

22. Archive Grid Skin

To select Grid skin from available options.

23. Archive Grid column space

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

24. Archive Products hover Background Color

To set the color of product hover background color.

25. Background Hover Color for Archive Products

To set the color of product hover background color.

26. Choose Dash Color

To select dash color using color picker.

27. Choose Category Background Color

To select the category background color using the color picker.

1. Product Title Link

Products title will display with link(permalink) if enabled otherwise display title without link(permalink).

2. Product Title Alignment

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

3. Product Title Color

To select the product title color using the color picker.

4. Product Title Link Hover Color

To select the product title link hover color using the color picker.

5. Product Title Background Color

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

6. Typography Settings

• Product Title Font Family: To select the Product title font family from available font family options. This option updated with Google Font Family Option.
• Product Title Font Size: To select the product title font size from available font size options.
• Font Weight: To select the product title font weight from available font weight options.
• Line Height: Add line height to the product contents
• Italic Font Style: To apply italic font style to the product title.
• Text Transform: To select the product title font transform from available font transform options.
• Text Decoration: To select the product title font decoration from available font decoration options.
• Letter Spacing: Add letter spacing in pixels to the product title.

1. For each Article in a Feed, Show

To display full text for each product, select full text option, otherwise select the summary option.

2. Show Content From

To display text from product content or from product excerpt.

3. Display HTML tags with Summary

To display HTML tags output with the product content.

4. First letter of product content as drop cap.

Set First letter of product content large size.

5. First letter of Product Content Font Size.

Select First letter of product content font size.

6. First letter of Product Content Font Family.

Select First letter of product content font family.

7. First letter of Product Content Color.

Select First letter of product content font color.

8. Product Content Length

To Manage your product content length, in words.

9. Advance Product Contents

To set advance product content.

10. Stopage From

Set Stopage condition from dropdown box.

11. Stopage

To set product content last paragraph of after some or before some selected characters like . | ? | , | ; and : etc...

12. Product Content Color

To select the product content color using the color picker.

13. Display Read More Link

To display single product link on Readmore button.

14. Display Read More On

To display Readmore button on same line or next line.

15. Read More Text

To Manage your “Read More” text for products.

16. Read More Link

To set read more link or custom product link.

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. This option updated with Google Font Family Option.
• 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.

31. Product Content Typography Settings

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

1. Display Product Feature Image

To display product feature image on product use display product feature image option.

2. Product Image Effect

To apply effect from available options.

3. Product Thumbnail Skin

To select Product Thumbnail Skin from square or circle.

4. Product Image Link

To display archive product feature image as link use Product image link option.

5. Select Product Default Image

Select default product image for all product.

6. Select Product Media Size

Set the size of Archive Product featured image

• Original Resolution
• thumbnail (150x150)
• medium (300x300)
• large (1024x1024)
• news-thumb (300x300)
• related-post-thumb (640x300)
• invert-grid-thumb (640x320)
• deport-thumb (640x520)
• deport-thumbnail (640x640)
• brit_co_img (580x255)
• easy_timeline_img (500x300)
• Custom Size

7. Add Custom Size

Add the custom height and width of Archive Product featured image

1. Display Sale Tag

To display Sale tags for Product page Layout.

2. Sale Tag Text Color

To set the sale tag text color using the color picker.

3. Sale Tag Background Color

To set the sale tag background color using the color picker.

4. Sale Tag Alignment

To select the sale tag alignment.

5. Sale Tag Angle(0-360 deg)

Add angle in deg to the sale tag.

6. Sale Tag Border Radius(%)

Add border radius in percentage to the sale tag.

7. Sale Tag Typography Settings

• Sale Tag Font Family: To select the Sale Tag font family from available font family options. This option updated with Google Font Family Option.
• Sale Tag Font Size: To select the Sale Tag font size from available font size options.
• Font Weight: To select the Sale Tag font weight from available font weight options.
• Line Height: Add line height to the Sale Tag
• Italic Font Style: To apply italic font style to the Sale Tag.
• Text Transform: To select the Sale Tag font transform from available font transform options.
• Text Decoration: To select the Sale Tag font decoration from available font decoration options.
• Letter Spacing: Add letter spacing in pixels to the Sale Tag.

8. Sale Tag Padding

Add left, right, top, bottom padding to the sale tag.

9. Sale Tag Margin

Add left, right, top, bottom margin to the sale tag.

10. Display Product Rating

To display product rating for Product page Layout.

11. Star Rating Color

To set the star rating color using the color picker.

12. Star Rating Background Color

To set the star rating background color using the color picker.

13. Star Rating Alignment

To select the star rating alignment.

14. Star Rating Padding

Add left, right, top, bottom padding to the star rating.

15. Star Rating Margin

Add left, right, top, bottom margin to the star rating.

16. Display Price

To display product price for Product page Layout.

17. Price Text Color

To set the price text color using the color picker.

18. Price Text Alignment

To select the price text alignment.

19. Price Text Padding

Add left, right, top, bottom padding to the price text.

20. Price Text Margin

Add left, right, top, bottom margin to the price text.

21. Price Text Typography Settings

• Price Text Font Family: To select the Price Text font family from available font family options. This option updated with Google Font Family Option.
• Price Text Font Size: To select the Price Text font size from available font size options.
• Font Weight: To select the Price Text font weight from available font weight options.
• Line Height: Add line height to the Price Text
• Italic Font Style: To apply italic font style to the Price Text.
• Text Transform: To select the Price Text font transform from available font transform options.
• Text Decoration: To select the Price Text font decoration from available font decoration options.
• Letter Spacing: Add letter spacing in pixels to the Price Text.

22. Display Add To Cart Button

To display add to cart button for Product page Layout.

23. Cart Button Alignment

To select the cart button alignment.

24. Cart Button Color

To set the cart button color using the color picker.

25. Cart Button Hover Text Color

To set the cart button hover color using the color picker.

26. Cart Button Background Color

To set the cart button background color using the color picker.

27. Cart Button Hover Background Color

To set the cart button hover background color using the color picker.

28. Cart Button Typography Settings

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

29. Cart Button Border Radius(px)

Add border radius to the cart button.

30. Cart Button Border

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

31. Cart Button Box Shadow Settings

Add H-offset, V-offset, Blur, Spread and To set the color to the cart button box shadow.

32. Cart Button Hover Border Radius(px)

Add hover border radius to the cart button.

33. Cart Button Border

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

34. Cart Button Hover Box Shadow Settings

Add H-offset, V-offset, Blur, Spread and To set the color to the cart button box hover shadow.

35. Cart Button Padding

Add left, right, top, bottom padding to the cart button.

36. Cart Button Margin

Add left, right, top, bottom margin to the cart button.

37. Display Add To Wishlist Button

To display add to wishlist button for Product page Layout.

37. Display Wishlist Button on

To display wishlist button on same line or next line in cart button.

38. Cart Button & Wishlist Button Wrapper Alignment

To select the cart button and wishlist button alignment like left, right and center

39. Wishlist Button Alignment

To select the wishlist button alignment.

40. Wishlist Button Color

To set the wishlist button color using the color picker.

41. Wishlist Button Hover Text Color

To set the wishlist button hover color using the color picker.

42. Wishlist Button Background Color

To set the wishlist button background color using the color picker.

43. Wishlist Button Hover Background Color

To set the wishlist button hover background color using the color picker.

44. Wishlist Button Typography Settings

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

45. Wishlist Button Border Radius(px)

Add border radius to the wishlist button.

46. Wishlist Button Border

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

47. Wishlist Button Box Shadow Settings

Add H-offset, V-offset, Blur, Spread and To set the color to the wishlist button box shadow.

48. Wishlist Button Hover Border Radius(px)

Add hover border radius to the wishlist button.

49. Wishlist Button Border

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

50. Wishlist Button Hover Box Shadow Settings

Add H-offset, V-offset, Blur, Spread and To set the color to the wishlist button box hover shadow.

51. Wishlist Button Padding

Add left, right, top, bottom padding to the wishlist button.

52. Wishlist Button Margin

Add left, right, top, bottom margin to the wishlist button.

1. Hide Timeline Bar

To display Timeline Bar in timeline template, simply select the yes option otherwise no.

2. Active Product

To start timeline layout with some specific product, select that product using Active product.

3. Effect

To set the transition effect in archive layout, select the effect from the already available effects.

4. Product Width

To set the width of the product, use item width option.

5. Image Height

To set the height of the image, use image height option.

6. Enable Autoslide

To slide products automatic in timeline template, simply select the yes option otherwise no.

7. Scrolling Speed

To set the slide speed use scrolling speed option.

1. Slider Effect

Set Slider animation Effect like slide and fade.

2. Slider Columns (Desktop - Above 980px)

Set Slider column layout for Desktop screen.

• 1 Column: Display products in 1 column grid.
• 2 Columns: Display products in 2 columns grid.
• 3 Columns: Display products in 3 columns grid.
• 4 Columns: Display products in 4 columns grid.
• 5 Columns: Display products in 5 columns grid.
• 6 Columns: Display products in 6 columns grid.

3. Slider Columns (iPad - 720px - 980px)

Set Slider column layout for Desktop screen.

• 1 Column: Display products in 1 column grid.
• 2 Columns: Display products in 2 columns grid.
• 3 Columns: Display products in 3 columns grid.
• 4 Columns: Display products in 4 columns grid.
• 5 Columns: Display products in 5 columns grid.
• 6 Columns: Display products in 6 columns grid.

4. Slider Columns (Tablet - 480px - 720px)

Set Slider column layout for Desktop screen.

• 1 Column: Display products in 1 column grid.
• 2 Columns: Display products in 2 columns grid.
• 3 Columns: Display products in 3 columns grid.
• 4 Columns: Display products in 4 columns grid.
• 5 Columns: Display products in 5 columns grid.
• 6 Columns: Display products in 6 columns grid.

5. Slider Columns (Mobile - Smaller Than 480px)

Set Slider column layout for Desktop screen.

• 1 Column: Display products in 1 column grid.
• 2 Columns: Display products in 2 columns grid.
• 3 Columns: Display products in 3 columns grid.
• 4 Columns: Display products in 4 columns grid.
• 5 Columns: Display products in 5 columns grid.
• 6 Columns: Display products in 6 columns grid.

6. Slider to Scroll

Select how many slide scroll.

7. Display Slider Navigation

Display Slider navigations.

8. Slider Navigation

Select slider navigation buttons layout.

• 

9. Display Slider Controls

Display sliders controls.

10. Select Slider Controls

Select sliders controls arrows.

• 

11. Slider Autoplay

Select slider autoplay mode.

12. Slider Autoplay Intervals

Enter autoplay intervals in microseconds. (i.e. 3000).

13. Slider Speed

Enter slider speed in microseconds.

1. Display Date

Select date type to show it blog product.

• Published Date: Display Product published date.
• Last Modify Date: Display product last modified date.

2. Date Format

Select date display format for blog product like below.

• Default
• December 19, 2017 3:39 am
• December 19, 2017
• December, 2017
• 19 December 2017
• 3:39 am
• 3:39:51 am
• Tuesday, December 19th, 2017
• Dec 19, 2017 @ 3:39
• 2017/12/19 at 3:39 AM
• 2017/12/19 3:39:51 AM
• 2017/12/19
• 19.12.2017
• 19-12-2017

3. Blog Order by

Select archive display order type from list.

• Default Sorting: Order all products by default provide by WordPress.
• Random: Order all products randomly after page load.
• Product ID: Order all product using it's ID.
• Author: Order all product using by it's author.
• Product Title: Order all product using it's title.
• Product Slug: Order all product using slug.
• Publish Date: Order all product by published date.
• Modified Date: Order all product by it's modified date.
• Product Likes: Order all product based on product like.

Select blog order type ascending or descending.

• Ascending: Order all products by Ascending.
• Descending: Order all products by Descending.

4. Product Display Year Or Months Wise

Select option for display product to year or month wise.

• Display Year: Display all product year wise.
• Month Year: Display all product month wise.

5. Product Status

Select option for display product status wise.

• Publish: Display product by status.
• Pending: Display product by pending.
• Draft: Display product by draft.
• Auto Draft: Display product by auto draft.
• Future: Display product by feature.
• Private: Display product by private.
• Inherit: Display product by inherit.
• Trash: Display product by trash.

6. Year Or Month Display BackGround Color

Select color for year or month display background color.

7. Show Sticky Product

Select to display sticky products.

1. Pagination Type

This option provides 4 different values:

• No Pagination: This option does not display pagination on the page.
• Paged: This option display pagination on the page.
• Load More: This option adds load more button and via Ajax add more products on the same page.
• Load On Scroll: This option adds load products on page Scroll via Ajax on the same page.

2. Pagination Template

Select pagination layout from dropdown.

• Pagination Template 1:
• Pagination Template 2:
• Pagination Template 3:
• Pagination Template 4:

3. Pagination Color Settings

• Text Color: Select color for pagination text color.
• Background Color: Select color for pagination background color.
• Text Hover Color: Select color for pagination hover text color.
• Hover Background Color: Select color for pagination hover background color.
• Active Text Color: Select color for active page text color.
• Active Background Color: Select color for active page background color.
• Border Color: Select color for pagination border color.
• Active Border Color: Select color for active page border color.

4. Button Template

Select Load more button layout from given template.

• 
• 
• 

5. Loader Style

Select Loader style from loaders library by clicking on "Select Loader" button.

• 

1. Social Share Style

Click enable to show social icon on blog product.

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. Facebook Share Link

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

7. Linkedin Share Link

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

8. Pinterest Share link

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

9. Pinterest Share Button with Featured Image

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

10. Twitter Share Link

To display a twitter share option in the products.

11. Pocket Share Link

To display a pocket share option in the products.

12. Telegram Share Link

To display a telegram share option in the products.

13. WhatsApp Share Link

To display whatsApp share option in the products.

14. Reddit Share Link

To display reddit share option in the products.

15. Digg Share Link

To display digg share option in the products.

16. Tumblr Share Link

To display Tumblr share option in the products.

17. Skype Share Share Link

To display Skype share option in the products.

18. WordPress Share Link

To display WordPress share option in the products.

19. Share Via Mail

To display a share via mail option in the products.

20. Mail Share Content

To crate create custom Email message format for mail sharing option.

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

21. 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.

Show preview also available in archive pages. Click here to Show Preview

Step 1. Go to Dashboard » Blog Designer » Archive Layouts

Step 2. Click on "Create New Download Archive Layout" Button. Step 3. Fill all the settings as per your preferences.

Step 4. Click on "Save Changes" button at bottom of page. And Enjoy the Blog Archive Layout.

1. Archive Designs

Template design option to select the template for creating the products archive layout.

2. Template Color Preset

Color preset to add color combination to your selected template.

Unique layout name to identify your products archive layout on listing page.

3. Archive Layout Name

Unique layout name to identify your products archive layout on listing page.

4. Display Timeline Layout

This option provides 4 different values:

• Default Layout: This option displays the timeline layout in 2 columns on the left and right side.
• Left Side: This option displays the timeline layout in 1 column on the left side.
• Right Side: This option displays the timeline layout in 1 column on the right side.
• Center: This option displays the timeline layout in 1 column in the center.

5. Select Archive Type

Select Archive Type option allows you to select Archive Type like Category page, Tag page.

You can make 45+ different archive page layout design of above 2 different pages. It's amazing!

6. Select Download Tags

Select tags to display tag wise products on archive page. If Select Archive Type select as Tag.

Select post category to display category wise products on archive page. If Select Archive Type select as Category.

7. Number of Product to Display

Manage the number of product to display on product archive pages.

8. Display Download Category

To display products category, simply select the Yes option otherwise No.

• Disable Link for Categories: Select checkbox to disable link of category in archive layout

9. Display Download Tag

To display products tag, simply select the Yes option otherwise No.

• Disable Link for Tags: Select checkbox to disable link of download tag in products archive layout

10. Display Author

To display author of product, simply select the Yes option otherwise No.

• Disable Link for Author: Select checkbox to disable link of Author in archive layout

11. Display Product Published Year

To display Product Published Year, simply select the Yes option otherwise No.

12. Display Product Published Date

To display product published date, simply select the Yes option otherwise No.

• Disable Link for Publish Date: Select checkbox to disable link of date in archive layout

13. Display Comment Count

To display total no. of comment according to posts, simply select the Yes option otherwise No.

• Disable Link for Comments Form: Select checkbox to disable link of comment in archive layout

14. Display Post Like

To display total no. of like according to posts, simply select the yes option otherwise no.

15. Custom CSS

To apply own CSS to specific content.

1. Main Container Class Name

Enter main archive container class name.

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

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

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

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

This option provides 4 different values for grid templates in iPad view:

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

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

This option provides 4 different values for grid templates in Tablet view:

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

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

This option provides 4 different values for grid templates in Mobile view:

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

6. Archive Unique Design

It will show unique design for first product of your archive page.

7. Select Unique Design for first product or Featured posts

Select product option to select unique design as first product or featured product.

8. Select Background Image

To set the layout image.

9. Blog Posts hover Background Color

To set the color of product hover background color.

10. Blog Posts Template Color

To set the color on specific div based on template.

11. Blog Posts Alternative Template Color

To set the alternative color on specific div based on template.

12. Story Border Color

To set border color for story template.

13. Background Color for Blog Posts

To set the product background color using the color picker.

14. Repetative Blog Background Color 1

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

15. Repetative Blog Background Color 2

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

16. Repetative Blog Background Color 3

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

17. Repetative Blog Background Color 4

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

18. Repetative Blog Background Color 5

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

19. Repetative Blog Background Color 6

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

20. Blog Post Feature Image set as Background Image

To set blog product feature image set as background image

21. Blog Post Background Image Style

To set the product background image style Normal and Parallax

22. Background Hover Color for Blog Posts

To set the color of product hover background color.

23. Alternative Background Color

To set the alternative product background color, simply select the yes option otherwise no.

24. Choose Alternative Background Color

To set the alternative product background color using the color picker.

25. Story Startup Text

To write Story Startup Text.

26. Story Startup Background Color

To select the startup Background color using the color picker.

27. Story Startup Text Color

To select the startup text color using the color picker.

28. Story Ending Text

To Write Story Ending Text.

29. Story Ending Link

To Add Story Ending Link.

30. Story Ending Background Color

To select the story ending background color using the color picker.

31. Story Ending Text Color

To select the story ending text color using the color picker.

32. Story Post Loop Alignment

To select story product alignment from available options

• Default
• Left
• Right

33. Choose Link Color

To select the link color using the color picker.

34. Choose Link Hover Color

To select the link hover color using the color picker.

35. Choose Dash Color

To select dash color using color picker.

36. Choose Category Background Color

To select the category background color using the color picker.

37. Choose Icon Color

To select the icon color using the color picker.

38. Choose Icon Background Color

To select the icon background color using the color picker.

39. Choose Icon Alignment

To select the icon alignment.

40. Set Icon Border Radius(px)

To set icon border radius in px.

41. Set Icon Font Size (px)

To set icon font size in px.

42. Set Icon padding

To set icon padding in px.

1. Product Title Link

Posts title will display with link(permalink) if enabled otherwise display title without link(permalink).

2. Product Title Alignment

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

3. Product Title Color

To select the product title color using the color picker.

4.Product Title Link Hover Color

To select the product title link hover color using the color picker.

5. Product Title Background Color

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

6. Typography Settings

• Product Title Font Family: To select the Product title font family from available font family options. This option updated with Google Font Family Option.
• Product Title Font Size: To select the product title font size from available font size options.
• Font Weight: To select the product title font weight from available font weight options.
• Line Height: Add line height to the product contents
• Italic Font Style: To apply italic font style to the product title.
• Text Transform: To select the product title font transform from available font transform options.
• Text Decoration: To select the product title font decoration from available font decoration options.
• Letter Spacing: Add letter spacing in pixels to the product title.

1. For each Article in a Feed, Show

To display full text for each product, select full text option, otherwise select the summary option.

2. Show Content From

To display text from product content or from product excerpt.

3. Display HTML tags with Summary

To display HTML tags output with the product content.

4. First letter of product content as drop cap.

Set First letter of product content large size.

5. First letter of Product Content Font Size.

Select First letter of product content font size.

6. First letter of Product Content Font Family.

Select First letter of product content font family.

7. First letter of Product Content Color.

Select First letter of product content font color.

8. Post Content Length

To Manage your product content length, in words.

9. Product Content Color

To select the product content color using the color picker.

10. Display Read More Link

To display single product link on Readmore button.

11. Display Read More On

To display Readmore button on same line or next line.

12. Read More Text

To Manage your “Read More” text for products.

13. Read More Link

To set read more link or custom product link.

14. Read More Text Color

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

15. Read More Text Background Color

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

16. Read More Hover Text Color

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

17. Read More Text Hover Background Color

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

18. Read More Button Border Style

Select border style of read more button.

19. Read More Button Border Radius(px)

Add border radius to the read more button.

20. Read More Button Border

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

21. Read More Button Hover Border Style

Select hover border style of read more button.

22. Read More Button Hover Border Radius(px)

Add hover border radius to the read more button.

23. 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.

24. Read More Button Alignment

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

25. Read More Button Padding

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

26. Read More Button Margin

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

27. Read More Button Typography Settings

• Read More Button Font Family: To select the Read More Button font family from available font family options. This option updated with Google Font Family Option.
• 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.

28. Product Content Typography Settings

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

1. Display Product Feature Image

To display product feature image on product use display product feature image option.

2. Download Product Image Effect

To apply effect from available options.

3. Product Thumbnail Skin

To select Product Thumbnail Skin from square or circle.

4. Blog Grid Height

To set Grid height on specific div on template.

5. Blog Grid Skin

To select Grid skin from available options

• Default Skin
• Repeat Skin
• Reverse Skin

6. Product Image Link

To display archive product feature image as link use product image link option.

7. Blog Grid column space

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

8. Product Image Effect

To apply product image hover effect.

9. Select Product Hover Effect

Select image hover effect type from list.

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

10. Select Product Default Image

Select default product image for all product.

11. Select Product Media Size

Set the size of Archive Product featured image

• Original Resolution
• thumbnail (150x150)
• medium (300x300)
• large (1024x1024)
• news-thumb (300x300)
• related-post-thumb (640x300)
• invert-grid-thumb (640x320)
• deport-thumb (640x520)
• deport-thumbnail (640x640)
• brit_co_img (580x255)
• easy_timeline_img (500x300)
• Custom Size

12. Add Custom Size

Add the custom height and width of Archive Product featured image

1. Hide Timeline Bar

To display Timeline Bar in timeline template, simply select the yes option otherwise no.

2. Active Product

To start timeline layout with some specific product, select that product using Active product.

3. Products Effect

To set the transition effect in archive layout, select the effect from the already available effects.

4. Product Width (px)

To set the width of the product, use item width option.

5. Item Height (px)

To set the height of the image, use image height option.

6. Margin between Blog download Post (px)

To set margin between timeline and product, use margin between product option.

7. Enable Autoslide

To slide products automatic in timeline template, simply select the yes option otherwise no.

8. Scrolling Speed

To set the slide speed use scrolling speed option.

1. Slider Effect

Set Slider animation Effect like slide and fade.

2. Slider Columns (Desktop - Above 980px)

Set Slider column layout for Desktop screen.

• 1 Column: Display posts in 1 column grid.
• 2 Columns: Display posts in 2 columns grid.
• 3 Columns: Display posts in 3 columns grid.
• 4 Columns: Display posts in 4 columns grid.
• 5 Columns: Display posts in 5 columns grid.
• 6 Columns: Display posts in 6 columns grid.

3. Slider Columns (iPad - 720px - 980px)

Set Slider column layout for Desktop screen.

• 1 Column: Display posts in 1 column grid.
• 2 Columns: Display posts in 2 columns grid.
• 3 Columns: Display posts in 3 columns grid.
• 4 Columns: Display posts in 4 columns grid.
• 5 Columns: Display posts in 5 columns grid.
• 6 Columns: Display posts in 6 columns grid.

4. Slider Columns (Tablet - 480px - 720px)

Set Slider column layout for Desktop screen.

• 1 Column: Display posts in 1 column grid.
• 2 Columns: Display posts in 2 columns grid.
• 3 Columns: Display posts in 3 columns grid.
• 4 Columns: Display posts in 4 columns grid.
• 5 Columns: Display posts in 5 columns grid.
• 6 Columns: Display posts in 6 columns grid.

5. Slider Columns (Mobile - Smaller Than 480px)

Set Slider column layout for Desktop screen.

• 1 Column: Display posts in 1 column grid.
• 2 Columns: Display posts in 2 columns grid.
• 3 Columns: Display posts in 3 columns grid.
• 4 Columns: Display posts in 4 columns grid.
• 5 Columns: Display posts in 5 columns grid.
• 6 Columns: Display posts in 6 columns grid.

6. Slider to Scroll

Select how many slide scroll.

7. Display Slider Navigation

Display Slider navigations.

8. Slider Navigation

Select slider navigation buttons layout.

• 

9. Display Slider Controls

Display sliders controls.

10. Select Slider Controls

Select sliders controls arrows.

• 

11. Slider Autoplay

Select slider autoplay mode.

12. Slider Autoplay Intervals

Enter autoplay intervals in microseconds. (i.e. 3000).

13. Slider Speed

Enter slider speed in microseconds.

1. Display Price

To display product price for Product page Layout.

2. Price Text Color

To set the price text color using the color picker.

3. Price Text Alignment

To select the price text alignment.

4. Price Text Padding

Add left, right, top, bottom padding to the price text.

5. Price Text Margin

Add left, right, top, bottom margin to the price text.

6. Price Text Typography Settings

• Price Text Font Family: To select the Price Text font family from available font family options. This option updated with Google Font Family Option.
• Price Text Font Size: To select the Price Text font size from available font size options.
• Font Weight: To select the Price Text font weight from available font weight options.
• Line Height: Add line height to the Price Text
• Italic Font Style: To apply italic font style to the Price Text.
• Text Transform: To select the Price Text font transform from available font transform options.
• Text Decoration: To select the Price Text font decoration from available font decoration options.
• Letter Spacing: Add letter spacing in pixels to the Price Text.

7. Display Purchase Button

To display purchase button for Product page Layout.

8. Purchase Button Alignment

To select the purchase button alignment.

9. Purchase Button Color

To set the purchase button color using the color picker.

10. Purchase Button Hover Text Color

To set the purchase button hover color using the color picker.

11. Purchase Button Background Color

To set the purchase button background color using the color picker.

12. Purchase Button Hover Background Color

To set the purchase button hover background color using the color picker.

13. Purchase Button Typography Settings

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

14. Purchase Button Border Radius(px)

Add border radius to the purchase button.

15. Purchase Button Border

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

16. Purchase Button Box Shadow Settings

Add H-offset, V-offset, Blur, Spread and To set the color to the purchase button box shadow.

17. Purchase Button Hover Border Radius(px)

Add hover border radius to the purchase button.

18. Purchase Button Border

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

19. Purchase Button Hover Box Shadow Settings

Add H-offset, V-offset, Blur, Spread and To set the color to the purchase button box hover shadow.

20. Purchase Button Padding

Add left, right, top, bottom padding to the purchase button.

21. Purchase Button Margin

Add left, right, top, bottom margin to the purchase button.

1. Display Date

Select date type to show it archive layout.

• Published Date: Display product published date.
• Last Modify Date: Display product last modified date.

2. Date Format

Select date display format for blog product like below.

• Default
• December 19, 2017 3:39 am
• December 19, 2017
• December, 2017
• 19 December 2017
• 3:39 am
• 3:39:51 am
• Tuesday, December 19th, 2017
• Dec 19, 2017 @ 3:39
• 2017/12/19 at 3:39 AM
• 2017/12/19 3:39:51 AM
• 2017/12/19
• 19.12.2017
• 19-12-2017

3. Blog Order by

Select archive display order type from list.

• Default Sorting: Order all posts by default provide by WordPress.
• Random: Order all posts randomly after page load.
• Post ID: Order all post using it's ID.
• Author: Order all post using by it's author.
• Post Title: Order all post using it's title.
• Post Slug: Order all post using slug.
• Publish Date: Order all post by published date.
• Modified Date: Order all post by it's modified date.
• Post Likes: Order all post based on post like.

Select blog order type ascending or descending.

• Ascending: Order all posts by Ascending.
• Descending: Order all posts by Descending.

4. Post Status

Select option for display post status.

• Publish: Display post by status.
• Pending: Display post by pending.
• Draft: Display post by draft.
• Auto Draft: Display post by auto draft.
• Future: Display post by feature.
• Private: Display post by private.
• Inherit: Display post by inherit.
• Trash: Display post by trash.

1. Pagination Type

This option provides 4 different values:

• No Pagination: This option does not display pagination on the page.
• Paged: This option display pagination on the page.
• Load More: This option adds load more button and via Ajax add more posts on the same page.
• Load On Scroll: This option adds load posts on page Scroll via Ajax on the same page.

2. Pagination Template

Select pagination layout from dropdown.

• Pagination Template 1:
• Pagination Template 2:
• Pagination Template 3:
• Pagination Template 4:

3. Pagination Color Settings

• Text Color: Select color for pagination text color.
• Background Color: Select color for pagination background color.
• Text Hover Color: Select color for pagination hover text color.
• Hover Background Color: Select color for pagination hover background color.
• Active Text Color: Select color for active page text color.
• Active Background Color: Select color for active page background color.
• Border Color: Select color for pagination border color.
• Active Border Color: Select color for active page border color.

4. Button Template

Select Load more button layout from given template.

• 
• 
• 

5. Loader Style

Select Loader style from loaders library by clicking on "Select Loader" button.

• 

1. Social Share Style

Click enable to show social icon on product archive layout.

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. Facebook Share Link

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

8. Linkedin Share Link

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

9. Pinterest Share link

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

10. Pinterest Share Button with Featured Image

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

11. Twitter Share Link

To display a twitter share option in the products.

12. Pocket Share Link

To display a pocket share option in the products.

13. Telegram Share Link

To display a telegram share option in the products.

14. WhatsApp Share Link

To display whatsApp share option in the products.

15. Reddit Share Link

To display reddit share option in the products.

16. Digg Share Link

To display digg share option in the products.

17. Tumblr Share Link

To display Tumblr share option in the products.

18. Skype Share Share Link

To display Skype share option in the products.

19. WordPress Share Link

To display WordPress share option in the products.

20. Share Via Mail

To display a share via mail option in the products.

21. Mail Share Content

To crate 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

22. 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.

Step 1. Go to Dashboard » Blog Designer » Single Layouts

Step 2. Click on "Create New Single Layout" Button.
Step 3. Fill all the settings as per your preferences.

Step 4. Click on "Save Changes" button at bottom of page. And Enjoy the Blog Single Layout.

1. Single Post Designs

Single Post design option to select the template for creating the single post layout.

2. Template Color Preset

Color preset to add color combination to your selected template.

3. Single Layout Name

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

4. Override Single Page Design

To Override the design of Single Page.

5. Select Single Page Override Type

This option allow you to select single page override type based on category, tag.

• All Posts: Common setting for all posts.
• Category Wise: Single post setting based category selection.
• Tag Wise: Single post setting based on tag selection.

6. Display Post Title

To display post title on single post page.

7. Display Post Category

To display post categories on single post page.

• Disable Link for Categories: Select checkbox to disable link of post category in single layout

7. Display Post Tag

To display post tags on single post page.

• Disable Link for Tags: Select checkbox to disable link of post tag in single layout

8. Display Post Author

To display Author name on single post page.

• Disable Link for Author: Select checkbox to disable link of post author in single layout.

9. Display Post Date

To display date on single post page.

10. Display Date

To display date, simply select the yes option otherwise no.

• Disable Link for Publish Date: Select checkbox to disable link of date in single layout
• Display Filter for Date: Select checkbox to display filter by date option in single page

11. Date Format

Select date display format for single post like below.

• Default
• December 19, 2017 3:39 am
• December 19, 2017
• December, 2017
• 19 December 2017
• 3:39 am
• 3:39:51 am
• Tuesday, December 19th, 2017
• Dec 19, 2017 @ 3:39
• 2017/12/19 at 3:39 AM
• 2017/12/19 3:39:51 AM
• 2017/12/19
• 19.12.2017
• 19-12-2017

12. Display Comments

To display post comments count on single post page.

• Disable Link for Comments Form: Select checkbox to disable link of post comment in single layout

13. Display Post Like

To display total no. of like according to posts, simply select the yes option otherwise no.

14. Display Post Views

Display post views in single post layouts, Show Today's view or all views in single layout.

15. Custom CSS

Add your own css for specific content.

1. Background Color for Single Posts

To select the single post's background color using the color picker.

2. Single Post Template Color

To set the color on specific div based on single post template.

3. Choose Link Color

To select the link color using the color picker.

4. Choose Link Hover Color

To select the link hover color using the color picker.

5. Choose Category Background Color

To select the category background color using the color picker. This option is available only in Winter Template.

6. Story Startup Text

To write Story Startup Text.

7. Story Startup Background Color

To select the startup Background color using the color picker.

8. Story Startup Text Color

To select the startup text color using the color picker.

1. Post Title Color

To select single post title color using the color picker.

2. Typography Settings

• Post Title Font Family: To select the Post title font family from available font family options. This option updated with Google Font Family Option.
• Post Title Font Size: To select the post title font size from available font size options.
• Font Weight: To select the post title font weight from available font weight options.
• Line Height: Add line height to the post contents
• Italic Font Style: To apply italic font style to the post title.
• Text Transform: To select the post title font transform from available font transform options.
• Text Decoration: To select the post title font decoration from available font decoration options.
• Letter Spacing: Add letter spacing in pixels to the post title.

1. First letter of post content as big one.

To display First letter of post content large size.

2. First letter of Post Content Font Size

To Select font size of First letter of post content from available font size options.

3. First letter of Post Content Font Family

To select the First letter of Post Content font family from available font family options. This option updated with Google Font Family Option.

4. First letter of Post Content Color

To select color of First letter of post content using color picker.

5. Post Content Color

To select single post content color using the color picker.

6. Typography Settings

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

1. Display Post Featured Image

Click to show post feature image in single post page.

2. Select Post Media Size

Set the size of single single post featured image

Blog Designer PRO provide below types of featured image size for single post layout.

• Original Resolution
• thumbnail (150x150)
• medium (300x300)
• large (1024x1024)
• news-thumb (300x300)
• related-post-thumb (640x300)
• invert-grid-thumb (640x320)
• deport-thumb (640x520)
• deport-thumbnail (640x640)
• brit_co_img (580x255)
• easy_timeline_img (500x300)
• Custom Size (Set your own media size for single post layout.)

1. Display Post Next/Previous Navigation

To display navigation(Next/Previous) section in single post, simply check "Yes" option otherwise "No".

2. Apply filter on Post Navigation

To apply filter on post navigation.

3. Display Post Navigation Title

To display navigation post's title in single post, simply check "Yes" option otherwise "No".

4. Display Post Navigation Feature Image

To display post navigation featured image, simply check "Yes" option otherwise "No".

5. Display Post Navigation Date

To display post navigation date, simply check "Yes" option otherwise "No".

To change date format go to Dashboard » Settings » General » Date Format.

1. Display Author Data

To display author data at the top of the author archive page, simply select the Yes option otherwise No.

2. Display Author Biography

To display author biography(Author Information) in post page.

3. Display Author Title

To display author title in post page.

• Disable Link for Author: Select checkbox to disable link of post author in single layout.

4. Author Title Font Size

Select author title font size.

5. Author Title Font Family

Select author title font family.

1. Display Related Post On Single Page

Enable if display Related Post On Single Page.

2. Related Post Display Position

Display related post on single page and options are left side, right side and bottom side

3. Display Number Of Column Related Posts

Display Number Of Column Related Posts on single page and options are 2 post,3 post, or 4 post.

4. Select Post Media Size

Set the size related post featured image.

Blog Designer PRO provide below types of featured image size for single layout.

• Original Resolution
• thumbnail (150x150)
• medium (300x300)
• large (1024x1024)
• news-thumb (300x300)
• related-post-thumb (640x300)
• invert-grid-thumb (640x320)
• deport-thumb (640x520)
• deport-thumbnail (640x640)
• brit_co_img (580x255)
• easy_timeline_img (500x300)
• Custom Size

5. Add custom Size

To set custom(random) size to show feature image for Related Post Section

6. Related Post Title

Customize your related post title.

7. Related Post Title Font Size

Select font size to change related post title size.

8. Related Post Title Font Family

Select font family to change related post title font. This option updated with Google Font Family Option.

9. Related Post Title Color

Select related post title color.

10. Show Related Posts By

Display Related Posts By Tag or category wise.

11. Show Related Posts Order By

Display Related Posts By below order.

• Default Sorting: Order all posts by default provide by WordPress in Ascending or Descending.
• Random: Order all posts randomly after page load in Ascending or Descending.
• Post ID: Order all post using it's ID Ascending or Descending.
• Author: Order all post using by it's author Ascending or Descending.
• Post Title: Order all post using it's title Ascending or Descending.
• Post Slug: Order all post using slug Ascending or Descending.
• Publish Date: Order all post by published date Ascending or Descending.
• Modified Date: Order all post by it's modified date Ascending or Descending.
• Post Likes: Order all post based on post like Ascending or Descending.

12. Number Of Related Posts

Display Number Of Related Posts on single page and options are 2 post,3 post, or 4 post.

13. Show Content From

To display text from post content or from post excerpt.

14. Post Content Length

Display number of words display in post content.

15. Display Related Post Date

Display related post date in single post page.

16. Display Related Post Comment

Display related post comment count in single post page.

1. Social Share Style

Click enable to show social icon on single post.

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. Facebook Share Link

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

8. Linkedin Share Link

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

9. Pinterest Share link

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

10. Pinterest Share Button with Featured Image

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

11. Twitter Share Link

To display a twitter share option in the posts.

12. Pocket Share Link

To display a pocket share option in the posts.

13. Telegram Share Link

To display a telegram share option in the posts.

14. WhatsApp Share Link

To display whatsApp share option in the posts.

15. Reddit Share Link

To display reddit share option in the posts.

16. Digg Share Link

To display digg share option in the posts.

17. Tumblr Share Link

To display Tumblr share option in the posts.

18. Skype Share Share Link

To display Skype share option in the posts.

19. WordPress Share Link

To display WordPress share option in the posts.

20. Share Via Mail

To display a share via mail option in the posts.

21. Mail Share Content

To crate 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

22. 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.

Step 1. Go to Dashboard » Blog Designer » Single Layouts

Step 2. Click on "Create New Single Product Layout" Button.
Step 3. Fill all the settings as per your preferences.

Step 4. Click on "Save Changes" button at bottom of page. And Enjoy the Blog Single Layout.

1. Single Product Designs

Single Product design option to select the template for creating the single product layout.

2. Template Color Preset

Color preset to add color combination to your selected template.

3. Single Layout Name

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

4. Override Single Page Design

To Override the design of Single Page.

5. Select Single Page Override Type

This option allow you to select single page override type based on category, tag.

• All Products: Common setting for all products.
• Category Wise: Single product setting based category selection.
• Tag Wise: Single product setting based on tag selection.

6. Display Product Title

To display product title on single product page.

7. Display Product Category

To display product categories on single product page.

• Disable Link for Categories: Select checkbox to disable link of product category in single layout

7. Display Product Tag

To display product tags on single product page.

• Disable Link for Tags: Select checkbox to disable link of product tag in single layout

8. Display Product Author

To display Author name on single product page.

• Disable Link for Author: Select checkbox to disable link of product author in single layout.

9. Display Product Date

To display date on single product page.

10. Display Date

To display date, simply select the yes option otherwise no.

• Disable Link for Publish Date: Select checkbox to disable link of date in single product layout
• Display Filter for Date: Select checkbox to display filter by date option in single product page

11. Date Format

Select date display format for single product like below.

• Default
• December 19, 2017 3:39 am
• December 19, 2017
• December, 2017
• 19 December 2017
• 3:39 am
• 3:39:51 am
• Tuesday, December 19th, 2017
• Dec 19, 2017 @ 3:39
• 2017/12/19 at 3:39 AM
• 2017/12/19 3:39:51 AM
• 2017/12/19
• 19.12.2017
• 19-12-2017

12. Display Comments

To display product comments count on single product page.

• Disable Link for Comments Form: Select checkbox to disable link of product comment in single layout

13. Display Product Like

To display total no. of like according to products, simply select the yes option otherwise no.

14. Display Product Views

Display product views in single product layouts, Show Today's view or all views in single layout.

15. Custom CSS

Add your own css for specific content.

1. Background Color for Single Products

To select the single product's background color using the color picker.

2. Single Product Template Color

To set the color on specific div based on single product template.

3. Choose Link Color

To select the link color using the color picker.

4. Choose Link Hover Color

To select the link hover color using the color picker.

5. Choose Category Background Color

To select the category background color using the color picker. This option is available only in Winter Template.

6. Story Startup Text

To write Story Startup Text.

7. Story Startup Background Color

To select the startup Background color using the color picker.

8. Story Startup Text Color

To select the startup text color using the color picker.

1. Product Title Color

To select single product title color using the color picker.

2. Typography Settings

• Product Title Font Family: To select the Product title font family from available font family options. This option updated with Google Font Family Option.
• Product Title Font Size: To select the product title font size from available font size options.
• Font Weight: To select the product title font weight from available font weight options.
• Line Height: Add line height to the product contents
• Italic Font Style: To apply italic font style to the product title.
• Text Transform: To select the product title font transform from available font transform options.
• Text Decoration: To select the product title font decoration from available font decoration options.
• Letter Spacing: Add letter spacing in pixels to the product title.

1. First letter of product content as big one.

To display First letter of product content large size.

2. First letter of Product Content Font Size

To Select font size of First letter of product content from available font size options.

3. First letter of Product Content Font Family

To select the First letter of Product Content font family from available font family options. This option updated with Google Font Family Option.

4. First letter of Product Content Color

To select color of First letter of product content using color picker.

5. Product Content Color

To select single product content color using the color picker.

6. Typography Settings

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

1. Display Sale Tag

To display Sale tags for Product page Layout.

2. Sale Tag Text Color

To set the sale tag text color using the color picker.

3. Sale Tag Background Color

To set the sale tag background color using the color picker.

4. Sale Tag Alignment

To select the sale tag alignment.

5. Sale Tag Angle(0-360 deg)

Add angle in deg to the sale tag.

6. Sale Tag Border Radius(%)

Add border radius in percentage to the sale tag.

7. Sale Tag Typography Settings

• Sale Tag Font Family: To select the Sale Tag font family from available font family options. This option updated with Google Font Family Option.
• Sale Tag Font Size: To select the Sale Tag font size from available font size options.
• Font Weight: To select the Sale Tag font weight from available font weight options.
• Line Height: Add line height to the Sale Tag
• Italic Font Style: To apply italic font style to the Sale Tag.
• Text Transform: To select the Sale Tag font transform from available font transform options.
• Text Decoration: To select the Sale Tag font decoration from available font decoration options.
• Letter Spacing: Add letter spacing in pixels to the Sale Tag.

8. Sale Tag Padding

Add left, right, top, bottom padding to the sale tag.

9. Sale Tag Margin

Add left, right, top, bottom margin to the sale tag.

10. Display Product Rating

To display product rating for Product page Layout.

11. Star Rating Color

To set the star rating color using the color picker.

12. Star Rating Background Color

To set the star rating background color using the color picker.

13. Star Rating Alignment

To select the star rating alignment.

14. Star Rating Padding

Add left, right, top, bottom padding to the star rating.

15. Star Rating Margin

Add left, right, top, bottom margin to the star rating.

16. Display Price

To display product price for Product page Layout.

17. Price Text Color

To set the price text color using the color picker.

18. Price Text Alignment

To select the price text alignment.

19. Price Text Padding

Add left, right, top, bottom padding to the price text.

20. Price Text Margin

Add left, right, top, bottom margin to the price text.

21. Price Text Typography Settings

• Price Text Font Family: To select the Price Text font family from available font family options. This option updated with Google Font Family Option.
• Price Text Font Size: To select the Price Text font size from available font size options.
• Font Weight: To select the Price Text font weight from available font weight options.
• Line Height: Add line height to the Price Text
• Italic Font Style: To apply italic font style to the Price Text.
• Text Transform: To select the Price Text font transform from available font transform options.
• Text Decoration: To select the Price Text font decoration from available font decoration options.
• Letter Spacing: Add letter spacing in pixels to the Price Text.

22. Display Add To Cart Button

To display add to cart button for Product page Layout.

23. Cart Button Alignment

To select the cart button alignment.

24. Cart Button Color

To set the cart button color using the color picker.

25. Cart Button Hover Text Color

To set the cart button hover color using the color picker.

26. Cart Button Background Color

To set the cart button background color using the color picker.

27. Cart Button Hover Background Color

To set the cart button hover background color using the color picker.

28. Cart Button Typography Settings

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

29. Cart Button Border Radius(px)

Add border radius to the cart button.

30. Cart Button Border

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

31. Cart Button Box Shadow Settings

Add H-offset, V-offset, Blur, Spread and To set the color to the cart button box shadow.

32. Cart Button Hover Border Radius(px)

Add hover border radius to the cart button.

33. Cart Button Border

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

34. Cart Button Hover Box Shadow Settings

Add H-offset, V-offset, Blur, Spread and To set the color to the cart button box hover shadow.

35. Cart Button Padding

Add left, right, top, bottom padding to the cart button.

36. Cart Button Margin

Add left, right, top, bottom margin to the cart button.

37. Display Add To Wishlist Button

To display add to wishlist button for Product page Layout.

37. Display Wishlist Button on

To display wishlist button on same line or next line in cart button.

38. Cart Button & Wishlist Button Wrapper Alignment

To select the cart button and wishlist button alignment like left, right and center

39. Wishlist Button Alignment

To select the wishlist button alignment.

40. Wishlist Button Color

To set the wishlist button color using the color picker.

41. Wishlist Button Hover Text Color

To set the wishlist button hover color using the color picker.

42. Wishlist Button Background Color

To set the wishlist button background color using the color picker.

43. Wishlist Button Hover Background Color

To set the wishlist button hover background color using the color picker.

44. Wishlist Button Typography Settings

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

45. Wishlist Button Border Radius(px)

Add border radius to the wishlist button.

46. Wishlist Button Border

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

47. Wishlist Button Box Shadow Settings

Add H-offset, V-offset, Blur, Spread and To set the color to the wishlist button box shadow.

48. Wishlist Button Hover Border Radius(px)

Add hover border radius to the wishlist button.

49. Wishlist Button Border

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

50. Wishlist Button Hover Box Shadow Settings

Add H-offset, V-offset, Blur, Spread and To set the color to the wishlist button box hover shadow.

51. Wishlist Button Padding

Add left, right, top, bottom padding to the wishlist button.

52. Wishlist Button Margin

Add left, right, top, bottom margin to the wishlist button.

1. Display Product Next/Previous Navigation

To display navigation(Next/Previous) section in single product, simply check "Yes" option otherwise "No".

2. Apply filter on Product Navigation

To apply filter on product navigation.

3. Display Product Navigation Title

To display navigation product's title in single product, simply check "Yes" option otherwise "No".

4. Display Product Navigation Feature Image

To display product navigation featured image, simply check "Yes" option otherwise "No".

5. Display Product Navigation Date

To display product navigation date, simply check "Yes" option otherwise "No".

To change date format go to Dashboard » Settings » General » Date Format.

1. Display Author Data

To display author data at the top of the author archive page, simply select the Yes option otherwise No.

2. Display Author Biography

To display author biography(Author Information) in product page.

3. Display Author Title

To display author title in product page.

• Disable Link for Author: Select checkbox to disable link of product author in single layout.

4. Author Title Font Size

Select author title font size.

5. Author Title Font Family

Select author title font family.

1. Display Related Product On Single Page

Enable if display Related Product On Single Page.

2. Related Product Display Position

Display related product on single page and options are left side, right side and bottom side

3. Display Number Of Column Related Products

Display Number Of Column Related Product on single product page and options are 2 post,3 post, or 4 post.

4. Select Product Media Size

Set the size related product featured image.

Blog Designer PRO provide below types of featured image size for single product layout.

• Original Resolution
• thumbnail (150x150)
• medium (300x300)
• large (1024x1024)
• news-thumb (300x300)
• related-post-thumb (640x300)
• invert-grid-thumb (640x320)
• deport-thumb (640x520)
• deport-thumbnail (640x640)
• brit_co_img (580x255)
• easy_timeline_img (500x300)
• Custom Size

5. Add custom Size

To set custom(random) size to show feature image for Related Product Section

6. Related Product Title

Customize your related product title.

7. Related Product Title Font Size

Select font size to change related product title size.

8. Related Product Title Font Family

Select font family to change related product title font. This option updated with Google Font Family Option.

9. Related Product Title Color

Select related product title color.

10. Show Related Products By

Display Related Products By Tag or category wise.

11. Show Related Products Order By

Display Related Products By below order.

• Default Sorting: Order all products by default provide by WordPress in Ascending or Descending.
• Random: Order all products randomly after page load in Ascending or Descending.
• Product ID: Order all product using it's ID Ascending or Descending.
• Author: Order all product using by it's author Ascending or Descending.
• Product Title: Order all product using it's title Ascending or Descending.
• Product Slug: Order all product using slug Ascending or Descending.
• Publish Date: Order all product by published date Ascending or Descending.
• Modified Date: Order all product by it's modified date Ascending or Descending.
• Product Likes: Order all product based on product like Ascending or Descending.

12. Number Of Related Products

Display Number Of Related Products on single page and options are 2 product,3 product, or 4 product.

13. Show Content From

To display text from product content or from product excerpt.

14. Product Content Length

Display number of words display in product content.

15. Display Product Price

Display Product Price in related product.

16. Display Add To Cart Button

Display Add To Cart Button in related product.

17. Display Sale tag

Display sale tag in related product.

1. Social Share Style

Click enable to show social icon on single product layout.

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. Facebook Share Link

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

8. Linkedin Share Link

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

9. Pinterest Share link

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

10. Pinterest Share Button with Featured Image

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

11. Twitter Share Link

To display a twitter share option in the products.

12. Pocket Share Link

To display a pocket share option in the products.

13. Telegram Share Link

To display a telegram share option in the products.

14. WhatsApp Share Link

To display whatsApp share option in the products.

15. Reddit Share Link

To display reddit share option in the products.

16. Digg Share Link

To display digg share option in the products.

17. Tumblr Share Link

To display Tumblr share option in the products.

18. Skype Share Share Link

To display Skype share option in the products.

19. WordPress Share Link

To display WordPress share option in the products.

20. Share Via Mail

To display a share via mail option in the products.

21. Mail Share Content

To crate create custom Email message format for mail sharing option.

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

22. 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.

Step 1. Go to Dashboard » Blog Designer » Single Layouts

Step 2. Click on "Create New Download Single Layout" Button.
Step 3. Fill all the settings as per your preferences.

Step 4. Click on "Save Changes" button at bottom of page. And Enjoy the Single Download Product Layout.

1. Single Product Designs

Single product design option to select the template for creating the single product layout.

2. Template Color Preset

Color preset to add color combination to your selected template.

3. Single Layout Name

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

4. Override Single Page Design

To Override the design of Single Page.

5. Select Single Page Override Type

This option allow you to select single page override type based on category, tag.

• All Downloads: Common setting for all products.
• Category Wise: Single product setting based category selection.
• Tag Wise: Single product setting based on tag selection.

6. Display Product Title

To display post title on single product page.

7. Display Product Categories

To display post categories on single product page.

• Disable Link for Categories: Select checkbox to disable link of product category in single layout

7. Display Product Tag

To display post tags on single product page.

• Disable Link for Tags: Select checkbox to disable link of download tag in single layout

8. Display Product Author

To display Author name on single product page.

• Disable Link for Author: Select checkbox to disable link of product author in single layout.

9. Display Product Date

To display date on single product page.

10. Display Date

To display date, simply select the yes option otherwise no.

• Disable Link for Publish Date: Select checkbox to disable link of date in single product layout
• Display Filter for Date: Select checkbox to display filter by date option in single product page

11. Date Format

Select date display format for single product like below.

• Default
• December 19, 2017 3:39 am
• December 19, 2017
• December, 2017
• 19 December 2017
• 3:39 am
• 3:39:51 am
• Tuesday, December 19th, 2017
• Dec 19, 2017 @ 3:39
• 2017/12/19 at 3:39 AM
• 2017/12/19 3:39:51 AM
• 2017/12/19
• 19.12.2017
• 19-12-2017

12. Display Product Like

To display total no. of like according to product, simply select the yes option otherwise no.

13. Display Product Views

Display post views in single product layouts, Show Today's view or all views in single layout.

14. Custom CSS

Add your own css for specific content.

1. Background Color for Single Products

To select the single product's background color using the color picker.

2. Single Product Template Color

To set the color on specific div based on single product template.

3. Choose Link Color

To select the link color using the color picker.

4. Choose Link Hover Color

To select the link hover color using the color picker.

5. Choose Category Background Color

To select the category background color using the color picker. This option is available only in Winter Template.

6. Story Startup Text

To write Story Startup Text.

7. Story Startup Background Color

To select the startup Background color using the color picker.

8. Story Startup Text Color

To select the startup text color using the color picker.

1. Product Title Color

To select single product title color using the color picker.

2. Typography Settings

• Product Title Font Family: To select the product title font family from available font family options. This option updated with Google Font Family Option.
• Product Title Font Size: To select the Product title font size from available font size options.
• Font Weight: To select the product title font weight from available font weight options.
• Line Height: Add line height to the product contents
• Italic Font Style: To apply italic font style to the product title.
• Text Transform: To select the product title font transform from available font transform options.
• Text Decoration: To select the product title font decoration from available font decoration options.
• Letter Spacing: Add letter spacing in pixels to the product title.

1. First letter of product content as big one.

To display First letter of product content large size.

2. First letter of Product Content Font Size

To Select font size of First letter of product content from available font size options.

3. First letter of Product Content Font Family

To select the First letter of product content font family from available font family options. This option updated with Google Font Family Option.

4. First letter of Product Content Color

To select color of First letter of product content using color picker.

5. Product Content Color

To select single product content color using the color picker.

6. Typography Settings

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

1. Display Product Featured Image

Click to show post feature image in single post page.

2. Select Post Media Size

Set the size of single product featured image

Blog Designer PRO provide below types of featured image size for single download layout.

• Original Resolution
• thumbnail (150x150)
• medium (300x300)
• large (1024x1024)
• news-thumb (300x300)
• related-post-thumb (640x300)
• invert-grid-thumb (640x320)
• deport-thumb (640x520)
• deport-thumbnail (640x640)
• brit_co_img (580x255)
• easy_timeline_img (500x300)
• Custom Size (Set your own media size for single download layout.)

1. Display Price

To display price for product type layout.

2. Price Text Color

To set the price text color using the color picker.

3. Price Text Alignment

To select the price text alignment.

4. Price Text Padding

Add left, right, top, bottom padding to the price text.

5. Price Text Typography Settings

• Price Text Font Family: To select the Price Text font family from available font family options. This option updated with Google Font Family Option.
• Price Text Font Size: To select the Price Text font size from available font size options.
• Font Weight: To select the Price Text font weight from available font weight options.
• Line Height: Add line height to the Price Text
• Italic Font Style: To apply italic font style to the Price Text.
• Text Transform: To select the Price Text font transform from available font transform options.
• Text Decoration: To select the Price Text font decoration from available font decoration options.
• Letter Spacing: Add letter spacing in pixels to the Price Text.

6. Display Purchase Button

To display purchase button for product page Layout.

7. Purchase Button Alignment

To select the purchase button alignment.

8. Purchase Button Color

To set the purchase button color using the color picker.

9. Purchase Button Hover Text Color

To set the purchase button hover color using the color picker.

10. Purchase Button Background Color

To set the purchase button background color using the color picker.

11. Purchase Button Hover Background Color

To set the purchase button hover background color using the color picker.

12. Purchase Button Typography Settings

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

13. Purchase Button Border Radius(px)

Add border radius to the purchase button.

14. Purchase Button Border

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

15. Purchase Button Box Shadow Settings

Add H-offset, V-offset, Blur, Spread and To set the color to the purchase button box shadow.

16. Purchase Button Hover Border Radius(px)

Add hover border radius to the purchase button.

17. Purchase Button Border

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

18. Purchase Button Hover Box Shadow Settings

Add H-offset, V-offset, Blur, Spread and To set the color to the purchase button box hover shadow.

19. Purchase Button Padding

Add left, right, top, bottom padding to the purchase button.

20. Purchase Button Margin

Add left, right, top, bottom margin to the purchase button.

1. Display Product Next/Previous Navigation

To display navigation(Next/Previous) section in single product, simply check "Yes" option otherwise "No".

2. Apply filter on product Navigation

To apply filter on product navigation.

3. Display Product Navigation Title

To display navigation product's title in single product, simply check "Yes" option otherwise "No".

4. Display Product Navigation Feature Image

To display product navigation featured image, simply check "Yes" option otherwise "No".

5. Display Product Navigation Date

To display product navigation date, simply check "Yes" option otherwise "No".

To change date format go to Dashboard » Settings » General » Date Format.

1. Display Author Data

To display author data at the top of the author archive page, simply select the Yes option otherwise No.

2. Display Author Biography

To display author biography(Author Information) in product page.

3. Display Author Title

To display author title in product page.

• Disable Link for Author: Select checkbox to disable link of product author in single layout.

4. Author Title Font Size

Select author title font size.

5. Author Title Font Family

Select author title font family.

1. Display Related Product On Single Page

Enable if display Related Download On Single Page.

2. Related Product Display Position

Display related product on single page and options are left side, right side and bottom side

3. Display Number Of Column Related Products

Display Number Of Column Related Products on single page and options are 2 post,3 post, or 4 post.

2. Select Product Media Size

Set the size related product featured image.

Blog Designer PRO provide below types of featured image size for single product layout.

• Original Resolution
• thumbnail (150x150)
• medium (300x300)
• large (1024x1024)
• news-thumb (300x300)
• related-post-thumb (640x300)
• invert-grid-thumb (640x320)
• deport-thumb (640x520)
• deport-thumbnail (640x640)
• brit_co_img (580x255)
• easy_timeline_img (500x300)
• Custom Size

3. Add custom Size

To set custom(random) size to show feature image for Related Product Section

4. Related Product Title

Customize your related product title.

5. Related Product Title Font Size

Select font size to change related product title size.

6. Related Product Title Font Family

Select font family to change related product title font. This option updated with Google Font Family Option.

7. Related Product Title Color

Select related product title color.

8. Show Related Products By

Display Related Products By Tag or category wise.

9. Show Related Products Order By

Display Related Products By below order.

• Default Sorting: Order all products by default provide by WordPress in Ascending or Descending.
• Random: Order all product randomly after page load in Ascending or Descending.
• Product ID: Order all product using it's ID Ascending or Descending.
• Author: Order all product using by it's author Ascending or Descending.
• Product Title: Order all product using it's title Ascending or Descending.
• Product Slug: Order all product using slug Ascending or Descending.
• Publish Date: Order all product by published date Ascending or Descending.
• Modified Date: Order all product by it's modified date Ascending or Descending.
• Product Likes: Order all product based on post like Ascending or Descending.

10. Number Of Related Products

Display Number Of Related Products on single page and options are 2 posy,3 post, or 4 post.

11. Show Content From

To display text from Product content or from post excerpt.

12. Product Content Length

Display number of words display in product content.

13. Display Product Price

Display Donload Post Price in related post.

14. Display Add To Cart Button

Display Add To Cart Button in related product.

1. Social Share Style

Click enable to show social icon on product.

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. Facebook Share Link

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

8. Linkedin Share Link

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

9. Pinterest Share link

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

10. Pinterest Share Button with Featured Image

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

11. Twitter Share Link

To display a twitter share option in the products.

12. Pocket Share Link

To display a pocket share option in the products.

13. Telegram Share Link

To display a telegram share option in the products.

14. WhatsApp Share Link

To display whatsApp share option in the products.

15. Reddit Share Link

To display reddit share option in the products.

16. Digg Share Link

To display digg share option in the products.

17. Tumblr Share Link

To display Tumblr share option in the products.

18. Skype Share Share Link

To display Skype share option in the products.

19. WordPress Share Link

To display WordPress share option in the products.

20. Share Via Mail

To display a share via mail option in the products.

21. Mail Share Content

To crate create custom Email message format for mail sharing option.

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

22. 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.