WP Carousel Pro

  1. Home
  2. Docs
  3. WP Carousel Pro
  4. Shortcode Generator Settings
  5. Style Settings (Post Source)

Style Settings (Post Source)

Style Settings (Post Source)

(1)  Post Type: Select a Post Type to display your posts as a carousel. You can choose among:

  • Posts: If you choose this option, All posts will be displayed as a Carousel.
  • Pages: If you choose this option, All the page content will be displayed as Carousel.
  • Products: If you choose this option, All the product’s content will be displayed as Carousel.
  • Multiple Post Types: If you have a Custom Post type you can find your custom field below the post, page, and Attachment option.

(2) Filter Posts: Select one for Filter Posts. You can choose among:

  • Latest: If you choose this option, All the latest posts will be displayed in the Carousel.
  • Taxonomy: Taxonomy is the way to organize your posts into categories and Subcategories. After Selecting the Taxonomy filter, some new options will be added.
  • Specific Posts: When you select this option Only your selected post will be displayed in the carousel. Set Posts in the Select Posts option that you want to show in the Carousel.

(3) Select Taxonomy: Select one to display your posts in the carousel. Options are:

  • Category
  • Post_tag
  • Post_format

(4) Choose Term(s): Select Taxonomy terms to display your post in the Carousel.

(5) Operator: Select the Taxonomy Terms Operator to show the post. Options are:

  • IN: Show Posts that associate with one or more terms.
  • AND: Show Posts that match all terms.
  • NOT IN: Show Posts that don’t match the terms.

(6) Limit: Set the Number of Total posts to show in the carousel. The default value is 10.

(7) Sectional Title: Show or hide the carousel section title.

(8) Space Between: Set space or gap between the slider items inside the carousel. Default value is 20px.  You can set the value as you wish.

(9) Content Position: Content position is where you want to display your carousel item contents. Select a position for the content title, description, meta, etc. 

Options are the following:

    A. Bottom: Post Content will display Below the image.

    B. Top: Post Content will display Above the image.

    C. Right: Post Content will display at the Right of the image.

    D. Left: Post Content will display at the Left of the image.

    E. Overlay: Post Content will display when users hover over an image.

A. Bottom Content Top Image:

Bottom Content Top Image
Bottom Content Top Image

B. Top Content Below Image:

Top Content Below Image
Top Content Below Image

C. Right Content Left Image:

Right Content Left Image
Right Content Left Image

D. Left Content Right Image:

Left Content Right Image
Left Content Right Image

E. Overlay Content:

Overlay Content
Overlay Content

(10) Same Height: Check the box to make all the items/slides the same height as the tallest one.

(11) Slider Border: Set border around the carousel Item. There are 9 different border styles. You can also set your desired border color.
Border Styles are:

  • Solid
  • Dashed
  • Dotted
  • Double
  • Inset
  • Outset
  • Groove
  • Ridge
  • None

(12) Inner Padding: Inner Padding is the space that’s inside the carousel item between the item and the border. The default value is 0px. 

(13) Slider Background: Set a background color for the slider item with this option.

(14) Post Title: You can Show/Hide Post Title by this option. By default, the value is Show.

(15) Length: Set post title length as per your need. Leave it empty if you want to show the full post title.

(16) Post Content: This is the option you can Show/Hide the Post Content as you wish. By default, Post Content is Shown.

(17) Content Display Type:  The Content Display Type specifies how the post content (description) will be displayed in the carousel. Options are the following:

  • Excerpt: An excerpt in WordPress is a term used for an article summary with a link to the whole entry. An excerpt can be auto-generated by a WordPress theme or by using the <!–more–> tag inside the post content. Another way to create excerpts for a WordPress post is by entering the summary of an article in the Excerpt field on the Post Edit screen. This field is not displayed in the post edit screen by default. To enable it a user needs to click on the Screen Options button on the top right corner of the post edit screen and then enable it.
  • Full Content: By this option, the user can display the full content of the posts. 
  • Content with Limit: Users can set Word limitations in terms of showing a post’s content

(18) Post Content Words Limit: Set post content word limit. The default value is 30 words.

(19) Read More Button: User can Show/Hide Read More Button. 

(20) Read More Button Level: The user is allowed to change the read more button label text as they like.

(21) Read More Color: Set the Read More button Color, Hover Color, Background, Hover Background, Border, Hover Border as you want.

(22) Category: Show/Hide Post category name. The default value is Show.

(23) Date: Show/Hide Post Date. The default value is Show.

(24) Author: Show/Hide Post Author name. The default value is Show.

(25) Tag: Show/Hide Post tags. The default value is Show.

(26) Comment: Show/Hide Post Comment Count. The default value is Show.

(27) Image: Show/Hide Post Images from the carousel. The default value is Show.

(28) Image Sizes: Image Size is the term given to describe the height and width of an image in pixels. It will determine how big or small the image is on a page of your site. This option will automatically include all the image size your site has. For instance, we are using the twenty-twelve theme that’s why you can see it in the options. You can set a custom image size also. The default value is the original uploaded image.

There will show different image cropping sizes available in the selection option (including, Original uploaded image and Set custom size): 

  • Thumbnail – hard: 150 X 150 
  • Medium – soft: 300 X 300
  • Medium_large – soft: 768 X 0
  • Large – soft: 1020 X 1024
  • Twentyseventeen-featured-image – hard: 2000 X 1200
  • Twentyseventeen-thumbnail-avatar – hard: 100 X 100
  • Original uploaded image
  • Set custom size

(29) Custom Size: This feature allows you to set a custom height and width for your image as you like. You can also select Soft-crop and Hard-crop.

  • Soft-crop: The Soft Crop in WordPress is the same as what’s commonly known as a Fit crop and is what we’d normally think of as a pure resize. It’s proportional, so the entire area of the image is retained. The entire image will be fit in a box of the dimensions you specify without cutting any of the images. So if the shape of the image is not exactly the same as the shape of the box, you’ll end up with blank space.
  • Hard-crop: The hard crop will fill a box of whatever dimensions you specify and cut out any other parts of the image that don’t fit in that box. If you want to create square thumbnails from rectangular images, make the width and height the same. You can set different types of square and rectangular hard crops. It has the property of making sure all the thumbnails are the same shape, which I prefer for its tidiness.

(30) Image Height CSS: The Image Height is one part of the information that determines a picture, photo, or other image’s dimensions. You can set Image height for different screen sizes to make your site responsive.

(31) Border Radius: Set a Border-Radius for the post carousel image. Border fits well in a square size image.

(32) Variable Width: Variable Width specifies the column width for the display of images in the post carousel. It has no effect on the resolution of the image. If this option is  ON the number of the column will be set depending on the column width.

(33) Lazy Load: Lazy loading (also called on-demand loading) is an optimization technique for online content like a website or a web app. Instead of loading the entire web page and rendering it to the user in one go as in bulk loading, the content of the web page is loaded as and when the user scrolls down the page.

(34) Zoom: This option allows you to move your mouse over a small picture and instantly magnify it, without clicking or opening anything. Available options are:

  • Off
  • Zoom In
  • Zoom Out

(35) Image Mode: Select an image mode from 4 different options. They are:

  • Normal: No grayscale effect.
  • Grayscale and normal on hover: The image becomes gray but when you hover the image color becomes normal.
  • Grayscale on hover: When you hover an image the image will turn gray.
  • Always grayscale: The images will be gray all the time.

(36) Image Attribute: It is used to provide a title for your image. The text you enter inside the title tag will not be shown to the user when an image cannot be displayed. Instead, it is displayed in a popup when a user takes their mouse over to an image.

Watch the Video: How to Create Post Carousel from Taxonomy