Nielsen Documentation

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

Section modules

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

and then in this page:

add a new slider
  1. Enter a name for the slider
  2. In the Slider settings section set the slider type (in nielsen 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:

add a new slider

And then click on the "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 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 nielsen.

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

Click on Slider > add slider:

add a new slider

and then in this page:

add a parallax slider
  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:

add a parallax slider

And then click on "add slide":

add a parallax slider

In this page you can set:

add a parallax slider
  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:

add a parallax slider

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:

add a new slider

and then in this page:

add a flexi slider
  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:

add a slide

And then click on "add slide":

add a slide

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

add a slide

Set the revolution slider

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

add a slide

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:

add a 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:

add a slider

And past this code inside the editor of the page:

add a slider
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:

add a slider
Insert the slider throught the Nielsen > 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