WordPress Carousel Pro

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

Style Settings (Post Carousel)

Style Settings (Post Carousel)
Style Settings (Post Carousel)

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

  • Post: If you choose this option, All posts will be displayed as a Carousel.
  • Page: If you choose this option, All the page content will be displayed as Carousel.
  • Attachment: The term attachment is used for files uploaded to WordPress from the post edit screen. When a file is uploaded using the Add Media button from the post edit screen, that file automatically becomes an attachment of that particular post. Files uploaded directly to the Media Library are not particularly attached to a post or page. An attachment can be any file that can be uploaded using the media upload. Choose this option to show your attachment as a carousel
  • If you have Custom Post type you can find your custom field below 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 which associate with one or more terms
  • AND: Show Posts which match all terms
  • NOT IN: Show Posts which don’t match the terms 

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

(7) 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.

(8) 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. Top: Post Content will display Above the image.

B. Bottom: Post Content will display Below 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. Top Content Below Image:

Top Content Below Image
Top Content Below Image

B. Bottom Content Top Image:

Bottom Content Top Image
Bottom Content Top 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

(8.1) Content position: When a user selects Content Position Overlay, some new options will appear. They are:

(8.2) Overlay Content Visibility: You can set Overlay Content visibility in two ways. They are: 

  • Always: Check Above E.Overlay content to see how it looks.
  • On Hover:  Check below to see how it display on the screen:

(8.3) Overlay Background Color: Set a background color for overlay as you wish.

(9) Slider Border: Set border around the carousel Item. The default value is 1.There are 9 different border styles. You can also set your desired border color. Border types are the following:

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

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

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

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

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

(14) 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 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: User can set Word limitation in terms of showing posts content

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

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

(17) Read More Button Level: User is allowed to change the read more button label text as you like.

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

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

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

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

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

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

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

(25) 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 in the options. You can set 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

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

(26) 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.

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

(28) 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 set depends on the column width.

(29) 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.

(30) 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

(31) GrayScale: Grayscale is a range of monochromatic shades from black to white. Therefore, a grayscale image contains only shades of gray and no color. There are  4 Options:

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

(32) 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.

How to Create Post Carousel from Taxonomy