A slideshow on the home page of a portfolio website is ideally a presentation of the artist’s best artworks.

slideshowThere are numerous advantages for having a slideshow on the homepage of your portfolio website. Artworks will be displayed large, and it will be the first thing any visitor sees. Slideshows are attention getters. It is important to showcase your best stuff up front and in the face of collectors. If they show an interest, they will browse the other pages of your portfolio.

The last time in this portfolio creation series using Webydo, I gave you guidelines on how to setup pages of a portfolio website. Please read the first part of this series first, before attempting this tutorial.

Building a Classic Portfolio Website


You can follow along or go off into your own direction anytime you want. The point of this series is to help you with the technical side of designing a portfolio site, so that you will have a foundation on which to build your own unique website.

Creating a Slideshow

  1. Open your Webydo site.

    Make sure the Home page is selected and click the slider gallery until “Manage” appears in the menu, as shown below. First, remove the text box and arrows by un-checking Text Caption and arrows. Now, click “Manage” and delete all the existing images.

  2. Click Upload Images, and choose 5 images from your computer to add to the slideshow. The slideshow will be much easier to manipulate if you have all the images at the same size beforehand. But, if you prefer different sized images, go ahead and upload them at the original size. The images can be made to fit the slider afterwards by adjusting the Fitting settings in the properties panel.

    For the purpose of this tutorial, I resized my images to 700 width and 520 height beforehand and had to crop some slightly to make them the same size. (I had the text caption appear again at this stage. If this happens to you, right click on the text caption box, and choose Delete)

    slideshow images

  3. Now, your images probably appear distorted, and the size of the slideshow container is not ideal for what we want. But, don’t worry. We are about to fix all that.

    Click the slider image to select it. In the properties panel to the right, click the down arrow near Fitting and select Original Size (the default setting here is Stretch).

    The next step is to change the dimensions of the slider. Select the slider container (Manage will appear in the top menu). At the top, near the width and height dimensions, hit the lock icon to unlock. Enter all the dimensions and settings as displayed below, then click the lock icon again.

    slideshow settings
    Now, select the slideshow (Manage will not appear). Hit the unlock icon here, and enter dimensions of the image as below.

     slider menu 

  4. Slider Settings

    Image transition – This sets the animation between slides. This can be set to either no animation, fade in, slide horizontally or slide vertically. Set it according to your preference, but fade in tends to work better for large images.

    Duration – This is the duration between slides. I have kept this at the default 0.5

    Autoplay transition – When checked, this will make the slider automatically play when the page is opened. This the arrows are removed, it is essential to leave this checked.

    Delay – This sets the delay time between slides. Increase it if you prefer images appear longer. I have increased this to 5 seconds.

  5. Preview the Slideshow

    Hit Preview at the top to see your slideshow in action. If everything is ok, hit Save to save everything you have done so far.


In the next posts in this portfolio website series using Webydo I will go over several things, such as creating your portfolio pages, Bio page, Contact, menus, social networking buttons, setting SEO of images and much more.

Please subscribe here to follow along with this series… or follow at Facebook.

You may also be interested in reading our past articles on Webydo:

Creating an Online Store
Code Free Websites

If you have any questions, I will be happy to help. Contact me via the contact form below or leave a comment.

No comments:

Thank-you for your comment!