Wix Design Tutorials: Creating a Gallery-Based Site with Strips

hi I’m Jeremy from the Wix design studio in this tutorial I’ll show you how a design expert uses the Wix editor to create an entire gallery based website with strips animation and scroll effects so let’s dive in first I’ll open the Wix editor and start with a blank page I always start by saving and naming my site so it’ll autosave in the future in the editor I added gridlines I use these to align the elements in my design you can use the
editors rulers to set your own custom grid lines in the top bar click tools and select the guides you want to use next I’ll change paid background to yellow since my side is only one page I’ll remove the default header and footer layouts so I’ll go to page but manage pages settings and under the layouts tab select no header and footer now I’ll add my header text click Add text click Edit text to customize and center the text from the toolbar I’ll
click align to center to Center the text on the page I’ll add more text for the title of my site I want to accent this title with a graphic element and add a catchy tagline I’ll go to add box and drag and drop a black box from the toolbar I’ll resize it changing the dimensions to 430 pixels wide by 10 pixels high then I’ll add and customize my sub head to add my first gallery I’ll go to add gallery and choose a grid layout now I’ll add my own
photos click manage media select all and delete next click Add media then image I’ve already created a folder for my uploaded images once my image is uploaded I’ll select them all and click Add to page here I can organize my images any way I want I’ll drag and drop to reorder my pics so my images tell a story to customize the gallery click settings for the layout I’ll keep the group under image display select horizontal for the thumbnails I’ll
select fit so my image is resized to fit the layout then I’ll adjust the spacing between the images 58 pixels next click stretch and stretch the full width width margins at 80 pixels for this gallery I want to give it a white background so I’ll add a strip go to add strip choose a classic strip and drag it into place from the toolbar click arrange and select send to back then click stretch screen and set the margins to 80 pixels I’ll resize the
strip’s height to 1500 pixels and position it then I’ll drag my gallery over the strip resize it in reposition it customize my own hover overlay for images I’ll return to my gallery settings and click design go to background and icon color overlay and choose white so it matches the strip background I’ll use the slider to set the opacity of my overlay to 80% for icon color I’ll go with black in preview mode you can see my white overlay when
hovering over images in the gallery back in the editor I’ll add animation to my types click animation and select the glide in preview to see how it looks awesome I love the way my title slides I’ll go back to the editor to add a social body go to add social inset social link I’ll customize my bar click layout and set the icon size to 33 pixels and spacing to 15 pixels let’s preview once more now we’re rolling in this fold I’ll add another gallery
this one will include a video on autoplay I’ll add some text for this section then from the toolbar like a line and align to Center like before I’ll add another box as a graphic element in my design then I’ll add another grid gallery and switch up the layout click settings layout and slider I’ll use the default settings for the rest select the gallery and click stretch to full width I’ll change the height of my gallery to 646 pixels again click
stretch and adjust the margins to 80 pixels the real beauty of the Wix pro gallery is that it allows me to showcase stills and videos I’ll delete the default images and choose two from my images next click Add media video and upload video I’ll search the free from Wix collection for escapable then i’ll reorder the median my gallery so the video is first next click settings design and customize expand mode this is where I can set which info will
display on Xfinity from advanced settings go to video settings under play videos select autoplay preview to see what you’ve done so far I like that my attention instantly goes to the video back in the editor for the next section I’ll add another classic strip click stretch and set the margins to 80 pixels customize all change strip background image and choose a photo from my images I’ll upload another image a bold signature as a PNG file and
attach it to my stroke I’ll resize the image so it overlaps with my gallery above then I’ll add some text and customize preview to check it out I love how my signature remains static all my video loops in the background back in the editor let’s add some design types I’ll select the strip and go to change strip background from image settings under scroll effects I’ll go with parallax I’ll also set color behind image the same yellow as my site
preview again now when I scroll I can see the parallax effect in action I think this section is used just a little more back in the editor and I’ll add animation to the signature test them out and choose the one you want I’ll go with reveal and set the duration to 1.7 seconds in preview mode you can see how it all comes together the animation effect feels like someone is actually adding their signature to the site and in every section my gallery
stand out back in the editor I’ll add another classic strip like the others click stretch and set the margins to 80 pixels for this strip I’ll add an image resize it and attach the strip next I’ll resize my strip I’ll add some text and another box as a final touch I want to add my signature PNG again and layer it over the image to group these images click command and select each element boom there groups click Save and preview to see how
everything looks now I’ll add one final grid gallery to the site like my other galleries I’ll delete all the default images upload my own and reorder them I want to create a different look for this gallery so I’ll go to settings layout and go with collage I’ll adjust the thumbnail size to 30 spacing to zero and keep the collage density at 80% under design backgrounds and icons I’ll change my color overlay to yellow and bring up the opacity to 80%
gems for icon color I’ll change it to black next I’ll customize expand home I only want to show the title and description next each image I’ll change the background color of this view to yellow to match my background and customize my title and description styles then go back to manage media and add personal titles and descriptions for each image in preview mode let’s see how the images look on expand nice back in the editor I’ll finish up this
section I’ll add some text and customize I’ll also add a box and adjust the width to 10 pixels in the height 200 to design the last section of this site I’ll add another strip to create my About section I’ll resize the height to 554 pixels so the gallery layers above I’ll add my about text and customize and add a couple more box elements to tie in with the rest of my design finally I’ll customize my footer I’ll add text and the signature image
then group these elements together I’ll add another strip and resize type to 20 pixels so it looks like a line I’ll select the white strip above click stretch and set the margins to 80 pixels and that’s it here’s my final gallery based website with strips animation and scroll effects thanks for watching I hope you had fun and we’ll see you in the next one