Learn how to change the single image on the Wix website into a full-width rotating carousel of images.
- [Instructor] The website's looking better and better, but this is not the photo that I want. These are not the images I want. This is not the gallery I want. Let's look at that in a little bit more detail. So here in this lovely image slideshow here, we can see what is currently going on if we go to the preview button here on the top and we'll get a sense of what's happening. So this is a full width slider. So you can see here that this is just rotating in space. It's showing all of the various pictures of cake that we have here.
That's how it looks on a desktop. We can switch over here to mobile. This is what it's going to look like on a mobile device. Click the dots here to go ahead and change it from one photo to another. Great, so the idea's good. The photos are all wrong. How do we address that? We'll go back here into edit mode and we're interested in changing our design. So go ahead and change on designs here. There are a number of other design options you can choose.
Sometimes they take a moment to load. You'll see here some of these are inside of some kind of border. Notice that a lot of these are black borders. Don't let that put you off. 'Cause if it's a bad color that's going around the photos, that color can be changed. So you can change your particular layout here by clicking around these just as you've always done. I've fundamentally gotten the functionality that I want here. Now I just want to customize just a little bit so I'm going to go into customize media and so right now what I have is in the image gallery, it is displaying as a background image.
I can also display this as a strip. So a strip would be a series of pictures here that are going to animate, and we can change the type of gallery so right now this is a full-width slideshow. So big picture and another big picture and another big picture, but we can change it to a full width accordion slider so we have little silvers of all of the photos. That's kind of a nice effect. If you have the right photos, that might be a great thing to try. You could try the four column full-width collage where we're a little short on pictures here so this one doesn't quite work for us, but we also have a three-column full-width collage which does fit a little bit better.
So here we got the six pictures all together as a collage. That's kind of nice and we also have the full-width showcase so here we've got the photo and then some smaller versions of it on either side and that will rotate in space too. But I really just like the plain full-width slideshow. Let's just focus on one picture of each cake at a time. So I'm going to go ahead and choose that. Then I need to actually need to change my media so if you click on this button here that says organize media, you should get a nice little box here that'll ask you to organize your gallery images and you can drag and drop these to arrange these in the order that you want them to display.
Now these are Wix-provided images. They are legal for you to use on your website. If you like them, you can keep them. But hey, this is a cake design company. They're not going to show other people's cakes so we're going to add more images and we don't really want any of these Wix images, but just to show you, they are available. There's a whole bunch of images here that are free from Wix that you can use on your site. All the licensing is taken care of. You can import images from your social media if you wish.
You can purchase images through Shutterstock right here inside of Wix if that's of interest. What I'm actually interested in is my own images. I'm going to go to the my images tab and then upload images and in your exercise files folder for chapter two video number three, you'll find these images which are great cake images and we'll go ahead and select all those. Just hold down the shift key to select them all and these will go ahead and upload here into Wix.
So now you can see that I have chosen one image here. If I roll over these images, you can get a larger version of it that will tell you how they're labeled and the file name and the size and so forth. Very nice. You can also magnify these to see them better. You can rename them, delete them, crop them and download them. And we'll go ahead and apply that. So this is going to add this to the image carousel that already exists.
So we've got the six images we started with, the four that I've added. That's a bit too many so I'm going to go ahead and delete these Wix images. We aren't actually deleting the images from our image library here. We're just deleting them from this particular image carousel. They still exist elsewhere and now I'm going to reorder these images. I want the rocket there. There we go. So I'm going to lead with my pink and white wedding cake, go to the chocolate, go to another wedding cake, and then to the rocket birthday cake.
Go ahead and say done. Give it just a second and it should go ahead and re-arrange for you. So now we can go ahead and preview this if you click the preview button up here on the top. This is going to give me a preview of what this looks like right here on a desktop display and wow that's just fabulous. You can really see the pictures really well. That looks absolutely great. If you want, you can switch over to your mobile preview. Here's what the site will look like on a mobile device and you can click on the dots here to switch to the different cake photos.
So this is looking fabulous. It's really a huge improvement over what we had and that is how you can go about adding some kind of slideshow or carousel or some kind of grid pictures to your Wix website.
- Creating a new website with Wix
- Choosing a theme and fonts
- Editing page content, layout, banners, images, and sections
- Adding new pages
- Integrating video and social media links
- Publishing your Wix website