15. Qode Carousels

The Qode Carousel provides a beautiful way of displaying images in a carousel layout. The carousel has a fluid transition effect  and also lets you enable a stylish greyscale hover effect. It can take the full width of the content or it can be placed in grid, and you can choose whether you would like to display items in one or two rows.

Creating a Qode carousels

Navigate to Qode Carousel -> Carousels from your Admin Panel. To add a new carousel just fill in the “Name” field and click on the “Add New Carousel” button:

f

*Carousels can also be created from single Carousel Item pages. This will be discussed in the following section.

15.1. Qode Carousel Item

To create a new Carousel Item, please navigate to Qode Carousel -> Carousel Item from your Admin Panel.

g

Now you can input a Title for this Carousel Item and publish it by clicking the “Publish” button.

In the “Qode Carousel” section, you can set the options for this Carousel Item. The first two available options let you upload your Carousel Image and your Carousel Hover Image. Please note that  carousel image needs to have minimal width of 220px.

The rest of the options are optional, and let you enable this carousel item to link to another page. You can input a link in the “Link” field, and choose whether you would like the link to open in a new browser tab (“Self”) or in the same browser tab in the “Target “ field.

g

In the Post Attributes section you can set the order in which you would like this Carousel Item to be displayed in the Carousel:

h

Finally, you need to choose the Carousel you would like to display this item in. You can do this in the “Carousels” section on the right side of the screen.

h

Note that one Carousel Item can be placed in more than one Carousel.

You can also add new Carousels from the “Carousels” section by clicking on the “+Add New Carousel” Link.

y

15.2. Qode Carousel Shortcode

To display a carousel on one of your pages, you need to navigate to that page and add the Qode Carousel shortcode via Visual Composer.

a

First you need to choose the Carousel you would like to display on the page:

d

Then you can choose a predefined number of items to be shown:

a

Now you choose how will you order the items in the Carousel ( by Menu order, Title, or Date ) and choose between an ascending and descending order.

Finally,you can choose whether the Carousel Items will be displayed in one or two rows.

s