This article was last updated on the May 7, 2018.
In this article, we'll cover some usage examples of how you can utilize LayerSlider within your X or Pro powered site. We'll mainly be focusing on how to use LayerSlider and so may skip over some finer details.
Note: This article covers only a small portion of what you can achieve with LayerSlider, make sure you take a look at the official documentation which is linked to in the Documentation section below to explore the full possibilities of this powerful tool.
Make sure you already have LayerSlider installed and then in your Wordpress Dashboard, you should see the LayerSlider menu item like this:
Go ahead and click on LayerSlider WP, once you've clicked that, you'll see the LayerSlider main admin screen like this:
As we mentioned further up, we're only going to cover how to use LayerSlider and not every option it provides, to learn more about LayerSlider check out the official documentation here.
In this article, we'll cover adding a new LayerSlider and then adding that to the frontend of your site.
Note: You'll also see a note in the LayerSlider admin asking you to register the product. You do not need to register LayerSlider as any updates are included in X or Pro.
Creating a Slider
In the LayerSlider admin screen go ahead and click on Add New. You'll see that add a new change to allow you to enter in your slider name Add slider.
Once you've added your slider, you'll be taken to the main settings screen for that slider like this:
You'll notice on the first tab called Layout that there are various options, set these as you wish, for the purpose of this article we're going to leave them set to the standard dimensions which is Slider Width 600px and Slider height 300px. We'll also leave Responsive mode on.
Under the Layout tab, there are various other options which are:
- Navigation Area
- Thumbnail Navigation
- Your Logo
As explained further up in this article, we won't cover every option provided and instead will only change the options we need to. All other options are explained in depth in the official plugin documentation.
Now on that screen go ahead and click on Slides which you'll see at the top of the screen next to Slider Settings.
Once you've clicked on that, you'll see the main Slides screen like this:
You'll see at the top of the screen there are various options, this can seem a lot to set, but don't worry it's a lot simpler to use than it looks and if you get stuck, there's some great in-depth documentation on adding slides and layers at the official documentation here here.
We're going to create a simple slider with two images and a piece of text overlaying both images, making full use of LayerSliders layers option. First of all click on Click To Set under Slide Options.
Clicking that will open up the WordPress media library, go ahead and pick whichever image you wish to use. Then if you scroll further down the page, you'll be able to add an additional layer click on Add New, then click on the Text tab and enter in the text you wish to be on the slide.
Once you've added that new layer, scroll back to the top of the page and click the green plus symbol next to the first slide, which will then add a second slide to our existing slider.
Now you've added a second slide to your existing slider, you can follow the steps set out above so go ahead and again click on Click to set and pick your second slider image from the WordPress media library.
Then scroll down again and add a new layer and enter in the text you want to display over that specific slider image you just added.
Now at the bottom of the page, click on Save Changes:
Congrats! You've successfully created your first LayerSlider, now it's time to add the slider to the frontend of your website.
LayerSlider and Cornerstone
For the purpose of this article, we're going to cover adding a LayerSlider on a new page through Cornerstone, but you can add it to an existing page/post anywhere you want. Load up the page/post you want to add it to in Cornerstone.
If it's a new page/post, add a new section in Cornerstone which will contain the LayerSlider. Search for the Classic LayerSlider element:
Drag and drop that Classic LayerSlider element into the new section you just created. If you have created multiple sliders, you'll need to click on the slider it adds and then select the slider you wish to use from the drop-down option in Cornerstone:
Once you've added the slider and any other content to the page. Save the changes and you'll then be able to see the sliders when you visit the page on your site like this:
As you can see, we have our slides showing with the additional layer we added with the text.
Just like with our Revolution Slider integration, you can also add a LayerSlider either above or below the Masthead as well. To do this, click on the Cog/Gear icon in the cornerstone in the bottom left section of the screen and then click on either Slider Settings: Above Masthead or Slider Settings: Below Masthead depending on which one you wish to use. Then from the drop-down select the LayerSlider you wish to use:
Once you've added that save your changes and Cornerstone will reload showing the slider above or below the masthead depending on which option you selected.
We've only scratched the surface of what you can do with LayerSlider, there are many more options, configurations, and styles you can use all of which is covered by the official documentation.
Users will frequently inquire about the version of LayerSlider being utilized within X or Pro. Because of the way that we are utilizing the plugin within X or Pro, it should be noted that the version of LayerSlider included with the theme is made intentionally for numerous reasons. The following is just a few of the reasons why we do not always utilize the latest version of the LayerSlider plugin:
Stability – Newer versions of software do not always equal greater stability. Oftentimes there are undiscovered bugs that are introduced with certain versions and are unknown until the product has been released to the public for some time. The version of the plugin that we bundle with the theme is more or less guaranteed to work without any issues as we take a great deal of time to test all functionality thoroughly before releasing it along with the theme.
Release Cycles – While we try to include the latest version of LayerSlider with each release, occasionally the release cycle of the plugin will prevent this from being possible. Essentially, since we have no idea when LayerSlider will be releasing new versions of the plugin, we cannot plan our releases around this. Because of this, if we have already begun the process of finalizing our release and submitting it to ThemeForest for review while LayerSlider is putting out a new version of the plugin, that version of the plugin will not be able to make it into the theme until the next release at the earliest.
Not Always Necessary – Some of LayerSlider's releases have only included simple "bug fixes" without any huge additions or modifications to the rest of the plugin. Because of situations like this, it is up to our discretion whether or not a new release will make it into the theme or not based on the nature of the update.
Because of these reasons (among others), there is no need to register your license for LayerSlider if you happen to have one. In fact, doing so is discouraged in order to prevent any potential conflicts when updating, as previously mentioned. If you happen to see a notification in your WordPress admin panel asking you to register LayerSlider upon activation, simply dismiss this notice.
Hopefully, the information provided above has helped you to gain a better understanding of what to expect from utilizing LayerSlider within X or Pro. Ultimately, there are a few things to take away from this article:
- LayerSlider is an extremely powerful and flexible plugin that will assist you in creating the perfect website.
- The version of LayerSlider included with the theme is an unmodified version of the plugin.
- We do our best to ensure that the version of LayerSlider included with X is as up-to-date as possible; however, this might not always be the case based on the reasons listed in the "Bundled Version" section above, which includes stability, release cycles, and the fact that not all updates are necessary.
- Any questions concerning the usage of a LayerSlider feature should be directed to the online documentation referenced in the "Documentation" section above.