top of page

Trending

Looking for Studio resources?

Head over to the Wix Studio Academy to learn all things Studio.

9 LESSONS   |   28M

Design your website with
advanced features

Sign in to view all course videos.
Let's go

 →

Congratulations on finishing this course—keep up that momentum

09 Lesson icons/Replay/05 RePlay full

02:59

09 Lesson icons/Replay/05 RePlay full

03:40

09 Lesson icons/Replay/05 RePlay full

02:43

09 Lesson icons/Replay/05 RePlay full

02:34

09 Lesson icons/Replay/05 RePlay full

02:18

09 Lesson icons/Replay/05 RePlay full

01:54

09 Lesson icons/Replay/05 RePlay full

03:00

09 Lesson icons/Replay/05 RePlay full

02:59

09 Lesson icons/Replay/05 RePlay full

06:12

In this course

Elevate your website’s design using the advanced features in the Wix Editor. Engage and impress your site visitors with customized animations, interactive galleries, sticky videos, site frames and mobile welcome screens. Plus, you’ll learn how to add extra wow factors to your site like image-based navigation menus and illustrations, pictures and fold animations that reveal as your users scroll your page.

Learn how to

  • Customize and time your website’s animations

  • Custom-design elements like site frames and mobile welcome screens

  • Animate galleries, logos, illustrations, page folds and navigation menus

  • Make your website more interactive for visitors to navigate

Still frame from the course: Robbie Sims, Wix UX Designer

Robbie is a user experience designer who honed her professional design mentality through a degree in architecture. She has been contributing products to the Editor platforms at Wix for 10 years.

Wix UX Designer

Your instructor

Robbie Sims

Who it’s for

  • Site owners looking to elevate their websites’ designs and capabilities

  • Emerging creatives who know the basics of design and want to build interactive and animated features into their websites

  • Designers looking to elevate their websites with impressive, advanced features and capabilities

Resources to help you grow

Get helpful articles, practical templates and more to put your skills to work.

  • Loading...

  • Loading...

Build an interactive gallery

Hi, I'm Robbie, and a designer here at Wix.

In this course, you're going to learn how to elevate your site design by using Editor features.

We're going to learn the unique scroll effects, and also animations.

We're going to make interactive images and more.

Are you ready to go?

Let's start.

In this lesson, we're going to teach you how to use the interactive gallery to add a playful feel to your website.

So let's go ahead and take a look.

You can see here on my published website, I have a gallery.

I can drag and drop all of these, what look like stickers.

I can also rotate them, I can resize them.

This is a really nice effect to give your visitors in the header of your website, when they first visit your site and they can play around.

So, let's go ahead and see how it's done.

All right. I'm in my Wix website editor.

Now, what I'm going to want to do is click on Add.

I have a section here called Gallery.

And then I have More Galleries.

So the gallery that's going to give us this effect is called the Freestyle Gallery.

Let's go ahead and add it to our website.

Because this is just a playful gallery, it's okay that we put it outside of our content gridlines.

So let's go and stretch it all the way to the left, all the way to the right, make it as wide as possible.

This way, when the users visit my site and they play around with my gallery, they'll have more room to drag it and drop it around the site.

All right, so let's go ahead and change the images.

Let's delete these temporary ones.

And I'm going to add my own images.

So just go ahead and select all of these...

and I'm going to add them to my gallery.

And click Done.

All right, cool.

So now I have all of my stickers here, from my gallery.

The way that I made them transparent so they look like stickers is I imported what's called a PNG file.

Now, I can export these in most design softwares, and it gives us this transparent background, to make them really look like stickers.

It makes it much more playful.

Under the Layout, I have an option here to set Randomize Layout.

So if I click it a few times, it'll give me the placement where my stickers are going to start when somebody visits my website.

Let's see...

okay, this looks good.

Let's go ahead and check it out.

Press Preview.

Cool.

So now I can drag and drop my stickers around, I can rotate them, resize them.

Now all I need to do is publish my website and let visitors play.

So in this lesson, I taught you how to use the interactive gallery to make a playful feel on your website.

Now it’s your turn

Take your new skills and build your website.

Keep your learning going

Build your website with the Wix Editor

New

Course

...

Create, build and customize your professional website exactly the…

9 lessons | 69m

Start Course →
Two product pages from an online streetwear store with Buy Now and Order buttons with a graph that shows increasing sales.

New

Course

...

Learn the fundamentals to promote your business and manage your…

10 lessons | 46m

Start Course →
Stylized product page for hand soap, eighteen dollars, with an Add to Cart button.

New

Course

...

Sell online with Wix eCommerce, the powerful all-in-one platform…

7 lessons | 33m

Start Course →
Sign in to view all course videos.
Let's go

 →

Congratulations on finishing this course— Keep up that momentum
bottom of page

We use cookies and similar technologies. You can opt-out by clicking 'Do Not Sell or Share My Personal Information' at the bottom of the page.