How to use Revolution Slider for Prestashop with the Ultramodern Theme

0

Currently the slider isn’t available for Prestashop Cloud. If you are using Prestashop’s cloud… use the direction for the regular slider.

Revolution Slider comes free with Ultramodern Prestashop Theme:
http://addons.prestashop.com/en/beauty-jewelry/18901-ultramodern-with-pull-out-side-menus.html

Slider revolution is a Prestashop slider with robust animation functionality.

The original documentation for this module can be found here:
http://themes.eshopalot.com/revolution-slider/index.html

Please read the above link, as this will give you a more detail tutorial on how to use this module.

The steps below will show you how we have make our slider in our demo for Ultramodern Prestashop Theme.

How to Install

  • When you install the theme… slider revolution is automatically added.
  • Go into your Prestashop admin > modules
  • At the top right of the page click on “add new module”.
  • Now upload the modules from your desktop. Usually if downloaded from the web… the file will be in your downloads folder (Windows)
  • Now in your module search box, type in “revolution”
  • On the right of the search you will see the module “revolution slider”. Click “install”.
  • Module is now installed.

 Import a demo

  • Click on this link to download the demo template from our ultramodern Prestashop theme
    http://themes.eshopalot.com/revolution-slider/homepageslider.zip
  • Or you can download one of the premade templates from the people of revolution slider:
    http://revolution.themepunch.com/example-downloads/
    J
    ust make sure you download a full-width or full screen template for the Ultramodern theme
  • While still in your module section. Search for “revolution”, and next to “revolution slider” click “configure”
  • To the right click on “import slider”
  • Find the demo you have just downloaded and upload in this section

Editing the demo

  • Now click on “settings” next to (homepageslider) or what the name of the demo you have just uploaded
  • You must now display a hook. In our demo we have hooked to “displayHome” which puts the slider your homepage. Now press “save settings” at the bottom

Editing Slides

First create your images. In our demo we have created 3 images to the size of 1280 pixels wide x 575 pixels high. But you can make them what size you like. Just keep them all the same and keep the width a MINIMUM of 1200 pixels wide.

  • Now while still in the Revolution Slider.. at the bottom click on “edit slides” (blue button)
  • Click “edit slide” for the first slide
  • This is a simple slide. you just have to edit the background image and the text
  • First scroll down to “slider main image” and select “change image”.
  • Next to actions click the + button.
  • Click on the “drop files to upload” and find your image on your desktop
  • Select your image and wait for it to load.
  • Once loaded click on “return to file list”.
  • Click on the thumbnail of the image you want to use… and to the right click on “insert”
  • Scroll ALL THE WAY to the bottom of the page and click on “Update Slide

Editing Slides

  • Now scroll back up and click on any text within the slider window
  • In the Layer general paramiters, edit the text here
  • Do the same for the other text element… or you can select on it… then click “delete layer” (red button)
  • you can also add a layer with a text, image or video element. If you have time… play around with this section
  • When  your finished with this slide… scroll ALL THE WAY down and click on “to slide list”. Now you’ll see the list of slides.
  • Adding Video
    • If you don’t want to use video.. delete the second slide.
    • To add your own video to this slide… click on the video on the slide preview
    • Under “layer general permiters”, click on “edit video”
    • Change the info under “Enter Youtube ID or URL
    • At the botton of the page click on “Update Slide”

Add Slides

  • To add a slide, just click on “add slide” or you can even duplicate a slider if you want to keep the settings.
  • to add text to slide… click on “add layer”
  • Please refer to the original documentation for the full explanation of each layer and animation

The above should be enough to get your started.

 

 

 

 

 

 

Share.
Translate »