A slider slideshow allows displaying multiple large artworks on the home page, rather than just one static image. The HTML5 slideshow can make your home page more interesting and interactive. It will help to showcase your best artwork right on your front page.
Many other website builders have slideshows, but the Wix website builder uses the power of HTML5 to include neat transition effects which make the slideshow appear much like flash.
But, as I explained in the past, HTML5 is much better than flash. The main advantage is images and text being indexed by Google, whereas with flash they cannot.
This slideshow tutorial will explain how you can easily create a large slideshow on your Wix website homepage.
The artworks will automatically display and play at a set interval as the website is loaded. I will also show you how to insert SEO optimized titles and descriptions to your slideshow.
(Please subscribe to be notified when future posts arrive)
The template we are using for this tutorial is the Artist Painter Wix template at the right.
How to create HTML5 Slideshow with Wix
- Click Slideshow in the center of the large picture on your Wix site home page, then hit the blue Organize Images button in the popup menu. Next, click Add Images.
-
Title and Description with SEO keywords
Hit Upload Image in the top corner of the next popup menu to begin uploading your own image files. Pictures can only be in png, jpg or gif format, and no larger than 10MB.
One of the great things about images on Wix websites is that they do not have to be uploaded more than once. Artworks are saved at Wix for easy retrieval whenever you need to use them elsewhere. They will appear in your image menu.
Click the image to outline it in blue, then hit OK.
Now, you have the opportunity to enter a title and short description about your artwork.
Title – As you can see in the picture on the right, I chose a name consisting of the name of the painting and a particular keyword phrase searched for in Google – Newfoundland Painting. According to Google Adwords Keyword Tool, this particular phrase has little competition, and 720 searches per month.
Incidentally, the term Iceberg has 60,500 local monthly searches, but it is unlikely that I will show up in top spot for a single word.
Description – A description is simply a summary of the painting. Try to use words and phrases which people type into the Google search box. Once again, the Keyword Tool previously mentioned can be of great help.
Particular phrases I used here are:
oil painting on canvas – 880 searches
Newfoundland artist – 2400 searches
Graham Matthews – 110 searches
Newfoundland icebergs – 1600 searches
If you notice, I used a variety of phrases instead of the same one over multiple times. It is considered optimal SEO practice to target different keyword phrases, thus increasing the chance that someone visits a site after typing it in in Google search.
Also, below the description, I listed the title, medium, size and price.
Link Image – Directly below the description is the Link to box. A URL can be specified here to be visited when the image is clicked. Ideally, that link should be the page where a larger description of the painting appears. Since I do not have that page created yet, I will leave it blank for now, and return later.
-
Change Slideshow Style
If you preview your slideshow, you will notice that the text only appears when hovering the cursor near the bottom of the image. I do not like this style, as some viewers may not even know its there. Return to the Slideshow Gallery Settings menu and select Change Style at the bottom. Near Default, click edit style. There are several options here for styles - for showing floating text and displayed text. Choose the one you prefer. For my slideshow, I will select Slideshow Text Bottom, on the second page of styles.
When I previewed my slideshow, I noticed that all the text did not display. Dots appear at the end of the description. This is perfectly fine because it encourages clicking of the image. When the image is clicked, a full page preview appears, along with the full title and description. -
Displaying Full Images or Image Previews
You will notice that the slideshow image automatically adjusts to the size of the slideshow box. Only a part of a vertical image will display. I like this setup, as it makes the slideshow more consistent. But, if you would rather display the full image, regardless of the size, visit your Slideshow Gallery Settings once more. Directly below Slideshow Images, under Image Scaling select Fit to Width. This will display the full painting.
-
More Settings for your HTML5 Slideshow
Under Slideshow Gallery Settings, there are a few more adjustments you can make at your own discretion.
Transitions – This affects how one artworks transitions into another. The default for this template is Cross-Fade.
It can be changed to either none, vertical, horizontal, or out & in. Also, the slider can be adjusted to make the slideshow transitions go faster or slower.
Autoplay – If selected, it allows the slideshow to automatically play as soon as the website is loaded. If you would rather not have the slideshow automatically play, deselect this box, and check the Show Autoplay button box.
Now, you have the opportunity to enter a title and short description about your artwork. 
How to display a HTML5 slideshow in other pages
Go to App Market, which is the bottom icon at the left of the website builder. Select Galleries, and choose either Animated Gallery, Slider Gallery, Slideshow Gallery or Grid Gallery. Then, simply insert the slideshow in your page.
Assignment: Go to Google Adwords Keyword Tool and search for highly searched keyword phrases relative to your art. Record all of these in a Word or notepad document. Use this list in writing your picture descriptions and titles.
The next tutorial in this Website building series is arriving soon. Subscribe here to be notified when it is posted.
Post a Comment Blogger Facebook
Thank-you for your comment!