{"id":46718,"date":"2015-04-13T07:57:04","date_gmt":"2015-04-13T11:57:04","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=46718"},"modified":"2016-02-17T06:56:28","modified_gmt":"2016-02-17T11:56:28","slug":"opencart-2-x-how-to-work-with-parallax-module","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/opencart-2-x-how-to-work-with-parallax-module.html","title":{"rendered":"OpenCart 2.x. How to work with Parallax module"},"content":{"rendered":"

\r\n

Good news for all on-line store keepers! This new tutorial will show you how to manage Parallax module in your OpenCart store.<\/p>\r\n

OpenCart 2.x. How to work with Parallax module<\/a><\/p>\r\n

Parallax is a special scrolling technique in computer graphics wherein background images move by the camera slower than foreground images, creating an illusion of depth and adding to the immersion.<\/p>\r\n

Today we want to show you where exactly in the template this technique is used and how to manage Parallax module<\/strong>.<\/p>\r\n

Parallax may appear in multiple places on your website. For example, let us edit banner in the footer section where Parallax<\/strong> effect is used:<\/p>\r\n

\"opencart_2.x_how_to_work_with_parallax_module_1\"<\/a>\r\n<\/p>\r\n

    \r\n
  1. \r\n

    Log into your OpenCart admin panel. Go to Design->Banners<\/strong> under System<\/strong> wheel icon:<\/p>\r\n

    \"opencart_2.x_how_to_work_with_parallax_module_2\"<\/a>\r\n <\/li>\r\n

  2. \r\n

    This banner title is Parallax-2<\/strong>. Press Edit<\/strong> icon on the left:<\/p>\r\n

    \"opencart_2.x_how_to_work_with_parallax_module_3\"<\/a>\r\n <\/li>\r\n

  3. \r\n

    Under Banner name<\/strong> type the name of your banner.<\/p>\r\n

    You may enable<\/strong> or disable<\/strong> banner by selecting corresponding option from Status<\/strong> drop down.<\/p>\r\n

    Under title<\/strong> field type the title of your banner. In case you have multilanguage option, this title may differ for every language.<\/p>\r\n

    Paste the capture for slides in the Description<\/strong> field. That part may be also different for different languages. We will change Free Shipping<\/strong> text to New text<\/strong>.<\/p>\r\n

    You may also set a link to your banner in the Link<\/strong> field:<\/p>\r\n

    \"opencart_2.x_how_to_work_with_parallax_module_4\"<\/a>\r\n <\/li>\r\n

  4. \r\n

    To edit the image, click on it and then click on the Edit<\/strong> icon. In case you want to delete image, click on Trash bin<\/strong> icon:<\/p>\r\n

    \"opencart_2.x_how_to_work_with_parallax_module_5\"<\/a>\r\n <\/li>\r\n

  5. \r\n

    Click Upload<\/strong> icon:<\/p>\r\n

    \"opencart_2.x_how_to_work_with_parallax_module_6\"<\/a>\r\n <\/li>\r\n

  6. \r\n

    Upload new image from your computer:<\/p>\r\n

    \"opencart_2.x_how_to_work_with_parallax_module_7\"<\/a>\r\n <\/li>\r\n

  7. \r\n

    Double click on the new image to replace the old one:<\/p>\r\n

    \"opencart_2.x_how_to_work_with_parallax_module_8\"<\/a>\r\n <\/li>\r\n

  8. \r\n

    Now our new image appears in the admin panel. Click Save<\/strong> button to save the changes. Alternatively, you may click Add<\/strong> button in the footer to add a new banner to the group in the same way:<\/p>\r\n

    \"opencart_2.x_how_to_work_with_parallax_module_9\"<\/a>\r\n <\/li>\r\n

  9. \r\n

    After all changes were made, refresh front end to see the result. Now our new image and new capture on it appear:<\/p>\r\n

    \"opencart_2.x_how_to_work_with_parallax_module_10\"<\/a>\r\n <\/li>\r\n

  10. \r\n

    You may also change dimensions<\/strong> of the banner image. To perform this, go to Extensions->Modules<\/strong>:<\/p>\r\n

    \"opencart_2.x_how_to_work_with_parallax_module_11\"<\/a>\r\n <\/li>\r\n

  11. \r\n

    Scroll the page until you see the module you need. In our case it is Parallax->Parallax-2<\/strong>. Click Edit<\/strong> button:<\/p>\r\n

    \"opencart_2.x_how_to_work_with_parallax_module_12\"<\/a>\r\n <\/li>\r\n

  12. \r\n

    This is the section where you can change Width<\/strong> and Height<\/strong> of the image in case you need it:<\/p>\r\n

    \"opencart_2.x_how_to_work_with_parallax_module_13\"<\/a>\r\n <\/li>\r\n<\/ol>\r\n

    That’s it! Now you know how to manage Parallax module in your OpenCart store. Please feel free to check the detailed video tutorial below:<\/p>\r\n

    Feel free to check the detailed video tutorial below:<\/p>\r\n

    OpenCart 2.x. How to work with Parallax module<\/a><\/p>\r\n

    <\/p>","protected":false},"excerpt":{"rendered":"

    Good news for all on-line store keepers! This new tutorial will show you how to manage Parallax module in your OpenCart store.<\/p>\n","protected":false},"author":72,"featured_media":46736,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1156],"tags":[557,1157,1773],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/46718"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/72"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=46718"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/46718\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/46736"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=46718"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=46718"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=46718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}