21 Slider - Regency

#### Regency Documentation

# Set the sliders

In this page you will learn how to set a logo slider, to show your customers or partners brands.

### 1. Install and activate the YIT Slider plugin

Start to install the YIT Slider plugin. Click on the green button as shown in the images below:

And then click to "install" to install the plugin.

After the installation, click to "activate" to activate the plugin.

### 2. Create a new slider

Click on Slider > add slider:

and then in this page:

1. Enter a name for the slider
2. In the Slider settings section set the slider type (in regency we include 4 slider types: banner, flexslider, parallax or revolution)
3. In the layout settings panel you can edit the slider settings like speed of transition, animation effect, if display or not the navigation and so on.
4. Click to "publish" to create the slider.

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

And then click on the "Add slide" button:

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 the details for the slider you want to create, at the bottom of this page you can find all the details for all the sliders availables on regency.

### Set the banners slider

Click on Slider > add slider:

and then in this page:

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:

And then click on "add slide":

In this page you can set:

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 the parallax slider

Click on Slider > add slider:

and then in this page:

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

Click on "publish".

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

And then click on "add slide":

In this page you can set:

1. An optional name for the slide
2. The text that you want to add under the image
3. The aligment and the position for this text
4. The animation for the text loading (we use bounceIn)/li>
5. The black overlay if you want to add it to make your image with a black opacity

In the editor you can add html tag like h1, h2, links and so on. This is the code of our text (copy and past this code in the "text" tab of your editor, not in the default visual tab):

`<h2>A WONDERFUL <span style="color: #ffcc00;">ALL-IN-ONE</span> THEME</h2>
` `<h4>WITH STUNNING FEATURES</h4>
` `[button href="#" class="" target="" color="white" ]CHECK THE AMAZING FEATURES[/button]`

#### Set a video in the parallax slider

In the parallax slider you can also set a video (that start in the header or that the user can watch by clicking in a button). These settings are here:

IMPORTANT: If you use a mp4 video, to avoid compatibility issues with browsers like Firefox, we suggest you to convert the video in the webm or ogg formats and upload the video in both formats.

Here you can also enable a button (like Watch video!) and upload another video that will open in a lightbox popup.

### Set the flexi slider

Click on Slider > add slider:

and then in this page:

1. Enter a name for the slider
2. In the Slider settings section set the slider type "flexslider"
3. Set the width for the slider (in our demo we set the width to 0 for a responsive slider)
4. Set the transition effect (fade or slide)
5. set the animation speed and enable or not the navigation

Click on "publish".

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

And then click on "add slide":

In this page you can upload the image and add the url if you want to add a link.

### Set the revolution slider

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

And then click on "Create new slider":

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

When you created the slider, in Sliders > Add slider:

Create a new revolution slider and in the revolution slider layout settings select the slider you created. In this way you will see the slider in the sliders dropdown in the Page Settings panel of your pages.

### Insert the slider in the page

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

##### Insert the slider using the shortcode:

In the "All sliders" page copy the slider shortcode:

And past this code inside the editor of the page:

##### Insert the slider using the Page Settings panel

In the Page settings panel under the editor, click on the "header tab" and then set the slider you want to insert in the page:

##### Insert the slider throught the Regency > 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.