Magic Slideshow Widgets€¦ · Widget Configuration After placing the images, please go to the...

7
Published On - May 9, 2017 Magic Slideshow Widgets webkul.com /blog/magic-slideshow-for-magento-2/ Magic Slideshow Widgets allows you to display multiple images in your store. You can place Magic Slideshow Widgets at any part of the page and display images with a description. There are two types of animations available – fade in/fade out and slideshow. Each slideshow image can have a separate URL link for visiting a page. The amazing thing about this module is that it adapts to the viewing device resolution. That means if a user is viewing the slideshow on a smartphone or a laptop, the images will adjust its resolution and size accordingly. There will be no stretching or cropping of the images, the images will look beautiful on every device. Features Set the transition time between the images. Display description for every image – at top or bottom. Two types of animation effects- slideshow and fade in-out Enter URL link for every slideshow image. Set the height and width of the slideshow widget. The slideshow images are responsive. The module source code is open for customization. Placing the Images After installing the module, you need to place the images for the slideshow widget. Please go to the root directory of Magento and open the pub folder. Open media folder as visible in the screenshot below: Create a new folder named as MagicSlideShow inside media folder 1/7

Transcript of Magic Slideshow Widgets€¦ · Widget Configuration After placing the images, please go to the...

Page 1: Magic Slideshow Widgets€¦ · Widget Configuration After placing the images, please go to the admin backend panel Content>Pages. Click Edit any of the pages where you want to display

Published On - May 9,2017

Magic Slideshow Widgetswebkul.com /blog/magic-slideshow-for-magento-2/

Magic Slideshow Widgets allows you to display multiple images in your store. You canplace Magic Slideshow Widgets at any part of the page and display images with adescription. There are two types of animations available – fade in/fade out and slideshow. Each slideshow imagecan have a separate URL link for visiting a page.

The amazing thing about this module is that it adapts to the viewing device resolution. That means if a user isviewing the slideshow on a smartphone or a laptop, the images will adjust its resolution and size accordingly.There will be no stretching or cropping of the images, the images will look beautiful on every device.

Features

Set the transition time between the images.

Display description for every image – at top or bottom.

Two types of animation effects- slideshow and fade in-out

Enter URL link for every slideshow image.

Set the height and width of the slideshow widget.

The slideshow images are responsive.

The module source code is open for customization.

Placing the Images

After installing the module, you need to place the images for the slideshow widget. Please go to the root directoryof Magento and open the pub folder. Open media folder as visible in the screenshot below:

Create a new folder named as MagicSlideShow inside media folder

1/7

Page 2: Magic Slideshow Widgets€¦ · Widget Configuration After placing the images, please go to the admin backend panel Content>Pages. Click Edit any of the pages where you want to display

Then create images folder inside MagicSlideShow folder.

Create different folders for every different slideshow widget. Please view the screenshot below:

Now copy and paste the image files in this folder.

2/7

Page 3: Magic Slideshow Widgets€¦ · Widget Configuration After placing the images, please go to the admin backend panel Content>Pages. Click Edit any of the pages where you want to display

Widget Configuration

After placing the images, please go to the admin backend panel Content>Pages. Click Edit any of thepages where you want to display the slideshow widget.

Go to Content section and click Insert Widget icon, a pop-up window will appear.

3/7

Page 4: Magic Slideshow Widgets€¦ · Widget Configuration After placing the images, please go to the admin backend panel Content>Pages. Click Edit any of the pages where you want to display

Select the Widget Type as Magic Slide Show from the list. Click Insert Widget button.

Now you need to configure the following options for the widget:

Transition Time – Set the changing time for every slideshow image. e.g 3000.

Select top or bottom position for description – Select where you want to display the description. Optionsavailable – Top or Bottom.

Transition Effect – Select the animation effect – slideshow or fade in/out.

Links – Enter the URL links for the images. Please put | between the URLs and in the end.

e.g. http://webkul.com/|https://store.webkul.com/|

4/7

Page 5: Magic Slideshow Widgets€¦ · Widget Configuration After placing the images, please go to the admin backend panel Content>Pages. Click Edit any of the pages where you want to display

Description – Enter the description content to show for every image. Please put | between the descriptions andin the end.

e.g.Visit Webkul Home Page|Visit Webkul Store|

Height – Enter the height of the widget. e.g 400

Width – Enter the width of the widget. e.g 600

Responsive – Select Yes, to auto-size the images according to the resolution.

Folder Name – Enter the folder name where images are stored.

As you can see the widgets have been added to the page. Please click Save Page for applying your changes.

5/7

Page 6: Magic Slideshow Widgets€¦ · Widget Configuration After placing the images, please go to the admin backend panel Content>Pages. Click Edit any of the pages where you want to display

User Front-End View

Here’s how Magic Slideshow Widgets will appear on the front-end. The slideshow widget is showing thedescription on top the image.

6/7

Page 7: Magic Slideshow Widgets€¦ · Widget Configuration After placing the images, please go to the admin backend panel Content>Pages. Click Edit any of the pages where you want to display

Thank you for viewing the blog, if you have any further query please visit uvdesk.com

7/7