WordPress Carousel Pro

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

Style Settings (Image Carousel)

Style Settings (Image Carousel)

(1) Section Title: Show or hide the carousel section title from here.

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

(3) 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 below:

      A. Bottom: Content will display Below the image.

      B. Top: Content will display Above the image.

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

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

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

A. Bottom:

Bottom Content Top Image
Bottom Content Top Image

B. Top:

Top Content Below Image
Top Content Below Image

C. Right:

Right Content Left Image
Right Content Left Image

D. Left:

Left Content Right Image
Left Content Right Image

E. Overlay Content:

Overlay Content
Overlay Content

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

(5) Overlay Content-Type: This option allows you to set how you want to show your carousel content on an overlay. Available options are below:

  • Fully Covered: If you choose the Fully Covered option,  it displays on the screen above: E. Overlay Content image.
  • Caption Style: If you choose this option, it displays like the below screen.
Caption Style
Caption Style

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

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

(7) Overlay Background: Set a background color for the overlay.

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

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

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

(11) Caption: You can Show/Hide image Caption by this option. By default, the value is Show.

(12) Description: This is the option you can Show/Hide the image Description as you wish. By default description is Hide.

(13) Image Size: 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 sizes also. The default value is the original uploaded image.

There will remain different cropping image sizes available in the option to choose, like below

  • 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

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

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

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

(17) Variable Width: Variable Width specifies the column width for the display of images in the carousel. It does not affect the resolution of the image. If this option is ON the number of the column will be set depending on the column width. The Variable Width Carousel example is given below.

Variable Width Image Carousel
Variable Width Image Carousel

(18) Lazy Load: Lazy loading images means loading images on websites asynchronously — that is, after the above-the-fold content is fully loaded, or even conditionally, only when they appear in the browser’s viewport. This means that if users don’t scroll down, images placed at the bottom of the page won’t even be loaded.

(19) 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 as follows:

  • Off
  • Zoom In
  • Zoom Out

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

(21) Watermark: You can set a watermark over the carousel images. Find the related settings in the plugin Settings Menu.

(22) Image Protection: Enable image protection to prevent image downloading from the mouse right-click.

(23) Image Title 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. Check the below screenshot and learn how to add an Image Title Attribute and how it looks.

Edit Gallery

Add Text in the Title section to set an Image Title Attribute.

Image Title Attribute
Image Title Attribute

This is how it is displayed.