The Polygon Documentation

Set sliders

The Sliders module gives you the freedom to create multiple sliders for the pages of your site. There are 4 kinds of sliders: Flexislider, Parallax, Banners and Revolution (if you have already installed the Slider Revolution plugin).

This module can be activated or deactivated at any time from the correlated Modules section.

Modules section

If the module has been activated, in the sidebar of your site you will find the Slider custom post type to add sliders.

2. Create a new slider

Click on "Slider > Add slider":

add a new slider

Now set slider settings as shown in picture.

add a new slider
  1. Enter a name for the slider.
  2. In Slider settings section, set slider type
  3. In layout settings panel, you can edit slider settings such as speed of transition or enabling autoplay option.
  4. Click on "publish" to create the slider.

In the page with all sliders, click on "View Slides" button:

add a new slider

Click, then, on "Add slide" button:

add a new slider

In the next page you can upload the image and customize the slide: add text, customize colors and so on. Each slider has different settings, so please check details for the slider you want to create. Below in this page, you can find details for all sliders available on The Polygon.

Set the banners slider

Click on Slider > add slider:

add a new slider

and then in this page:

add a banners slider
  1. Enter a name for the slider
  2. In the Slider settings section set the slider "banners"
  3. Set the height for the slider (in our demo we set a 525 pixel height)
  4. Set if you want the autoplay and set the animation speed
  5. Set if display or not the animation arrows

Click on "publish".

In the "All sliders" page, click to the "view slides" button:

add a banners slider

And then click on "add slide":

add a banners slider

In this page you can set:

add a banners slider
  1. The url if you want add a link to the image
  2. The size of the image (big or small): you can have one big image or two small images
  3. The small text and the big text
  4. The text position
  5. If add or not a small border before and after the text
  6. Upload the image using the "featured image" panel
  7. Publish the slide.

Set Parallax slider

Click on "Slider > Add slider":

add a new slider

Now, set slider settings as shown in picture.

add a parallax slider
  1. Enter a name for the slider.
  2. In Slider settings section, select "parallax" slider.
  3. Set width and height for the slider (in our demo we set a 400 pixel height and left the width as 0 to have the slider responsive).
  4. Enable autoplay and set animation speed.

Click on "publish".

In the page with all sliders, click on "View Slides" button:

add a parallax slider

And then click on "Add slide":

add a parallax slider

In this page, you can set settings for the slide.

add a parallax slider

Title and Content of the post are shown in the slide, over the image that is set as Featured Image of the post.
In the editor, you can add HTML tags like h1, h2, links and so on.
Now we are going to explain settings that you can customize in the single slide:

  • Vertical align: select vertical position of the image.
  • Horizontal align: select horizontal position of the image.
  • Paragraph Font Size: font size of the text.
  • Color content: color content of the slide.
  • Effect: animation effect applied to content of the slide.
  • Overlay: overlay of animation.
  • Video Mp4: mp4 video used as background; if you use an mp4 video, we suggest you to convert the video into WEBM or OGG formats and upload the video in both formats, to avoid compatibility issues with browsers like Firefox.
  • Video Ogg: OGG video used as background.
  • Video Webm: WEBM video to use as background.
  • Video Poster: image shown during video loading.
  • Video Button: add a button in video section.
  • Video button style: style of the button.
  • Video Url: URL of the button shown in video section.
  • Label Button: label of the button shown in video section.

Set Flexslider

Configure general settings of the slider:

Impostazioni flexslider
  • Width content: width of the container of the slider
  • Effect: effect of the animation of the slider
  • Pause between slides (s): set how many seconds an image will be visible in the slider
  • Animation speed (s): animation velocity of the slides
  • Control Nav: show/hide slider navigation bar

Set Revolution slider

Install the Revolution slider plugin and then click on "Revolution slider" tab:

add a slide

Click on "Create new slider":

Please, check the documentation of Revolution slider to learn how to create and customize it. Here you can find the documentation: http://themepunch.com/codecanyon/revolution_wp/documentation.

After creating the slider, go to Sliders > Add slider:

add a slider

Create a new Revolution slider and select the slider you created in Revolution slider layout settings. In this way, you will be able to see it in sliders dropdown in "Page Settings" panel of your "Pages".

Insert the slider into the page

You can insert the slider into the page in 3 different ways.

Insert the slider using the shortcode:

In the page with all sliders, copy the slider shortcode:

add a slider

And paste this code into the editor of the page:

add a slider

Insert the slider using "Page Settings" panel

In "Page settings" panel, check "Activate page options", click on the "header" tab and then select the slider you want to insert in the page:

add a slider

Insert the slider using the "The Polygon > Layouts" manager:

Layouts manager

In this section you can customize the layout of each page, product and post: set the slider, the page layout (with or without sidebar) and other settings.

Layouts manager