Using Wix Repeaters | Wix Fix

[Music] [Laughter] hey guys welcome back to wix fix i hope you're having a fantastic day in today's video i want to teach you guys about repeaters now i know i've used these in previous videos however i've recently noticed that i've never actually fully covered what they are and how to use them properly and in the future i plan to make some more advanced tutorials so i figured i'd make this video to cover the basics so let's first start by talking about what they are if you go to add listing grid you're going to notice these repeaters right here personally my favorite one to use is this one right here because this one is typically in the same style that i typically use on my websites so it's less editing and less work to get to where i want it to be but basically repeaters are elements that have items inside of it and when you edit the design of one item all the rest of the items are affected as well so if i select this text element and move it inside of this item you're going to notice that the text element in the other items moves as well and if i come up to the add button and i add let's say a basic shape to one of these items you're going to notice that this basic shape gets added to the other items as well and the same thing happens if you delete it the cool thing about repeaters is is if you have some content that's going to be a little bit repetitive and you don't want to design each and every single one of them you can use a repeater to do all the heavy work and design work for you so let's say you have a bunch of testimonials that you want to showcase on your website but you don't want to create a bunch of strips or columns and stuff like that to display them so what you can do is just create a repeater design one of the items inside of it and all the rest of the items will follow it is important to note that really the only thing that will change the repeaters is if you change the position or maybe the sizing of the elements inside of it however you can select like this text right here and you can edit this text to be whatever you want and as you can see it's not affecting the other items and same thing goes for images if we add an image element to one of the items in the repeater then of course the image is going to showcase on all of the other items however we can change the image inside of one of the items to be different and it won't affect all of the other items so it's really just adding and removing items and and really just the sizing of those items that's going to affect the other items but of course the content inside of it can be exchanged for other content and let's say you have more testimonials that you want to show or maybe you want to remove them what you can do is come over to manage items and then you can duplicate an item and edit it however you want or maybe if you don't want an item you can just come over here and press delete but here's one of the cons let's say you have a testimonial that is longer than the rest of them and you're going to notice it does this one of the items is going to be super long and the other ones are going to be shorter now you can use this to your advantage if you want to create something similar to like pinterest however for most people they don't really want it to be inconsistent so it is a little finicky and you have to make sure if you don't want this style to make sure that all of your content is roughly the same size but the major pro is is you can link all of this content to your databases which if you don't know what that is it's basically content management so if we add this to our site and let's say we wanted to add team members to our website now i've already made a tutorial on this in the past so i'm not going to really cover the design in too much detail but let's say we added content management database to our website for teams and here i'm just using wix's basic one and it comes with six people and this is going to be the team page that wix sets up for us honestly it's not bad but what if we want to do something a little more custom so i'm going to come over here to site menu and i'm just going to add a page and let's say we just want to add a repeater to this page and let's just use this basic team one right here i'm going to go ahead and stretch this like that and then what we can do is come over to add we can go to content manager and add a data set to our page this element is going to be invisible as soon as you publish however it just helps us inside the editor so we're going to press settings we're going to choose our team database and then what we're going to do is go ahead and select an element inside of our item and we're going to say connect to data and we're going to make sure it's set to the team data set that we have on our page and we're going to connect the image to the photo so now it's going to show the photo of our team members from the database and then we can follow the same procedure for the name for the job title and for their little description so the cool thing about linking your repeater items to your database is when you update your database and here so let's say you add an employee or maybe someone left the company and you remove them it's going to automatically update your repeater on your website without you having to do any design work another cool use that you can use repeaters for is for your shop or even blog post so let's say we have a blog and we'll just add this to our site when we add the blog service to our website this is what we're gonna see and this looks professional however it's very obvious that this was made on wix so if you wanted to you could add a page so if we come over to pages and just add a blank page let's just add a repeater to this page i'm going to go ahead and press stretch to stretch at the full width of the screen then i'm going to come over to layouts and add 20 pixels of spacing in between each of the items and then i'm just going to go ahead and delete everything inside of here and i'm going to stretch this to be as big as i want and let's just go ahead and add a box to this item we'll attach it to the left in the bottom and we'll add a title and we'll add a paragraph and actually let's go ahead and add a button as well in the future i'm going to be showing you how to design these to make them look pretty however for now i just kind of want to show you the basics and how to set them up now that we have the blog service on our website and we have this repeater set up we can come over to add we can go down to content manager and data set and basically now we're going to follow the same steps so we're going to actually connect this one to our blog posts and then for this background image we're going to connect this one to the post data set and the image is going to connect to the cover image and you're going to see it update right inside the editor and then for this title we're going to connect it to the title of the blog post for this paragraph we're going to connect it to the excerpt and this button we are going to connect it to the actual blog post which will be post page url so now if we preview the site and we click on this button it's going to automatically take us to our blog post also something i want to know is if we look at this title it's longer than the other two so it kind of expands this one down a little bit so this is a good example of if you want to do the pinterest look you can if you and if you don't then you need to make sure that maybe the design of this text is set to a little bit smaller something like that so all of them are consistent or you can make sure that the title of the blog post is a little bit shorter to make sure it fits and if i add a few more blog posts you're going to notice that it's kind of creating that pinterest style website which i think really looks pretty cool for this example now the last thing i want to do in this website is maybe do the same thing for a store so if we add an online store to our website this is what we're gonna see it looks professional however same thing with the blog it looks very basic and it looks like it was made on wix so what we can do is come over to page we can add another blank page and we can add a repeater to the site and for this one let's go ahead and stretch it the full width of the screen and we're going to add like 30 pixels of spacing and let's just go ahead and remove the items in here and we'll go ahead and design it however we want now what i'm going to do is go ahead and remove the background and change it change them to a color and then maybe we want to add an image to our repeater so we'll just do a stock image for now let's go ahead and make the repeater quite large i'm going to go ahead and make the image as large as the width of this item and then down below we're going to go ahead and add some text now of course i'm going to make the design pretty basic because i want to cover this in more detail in the future but we can go up to add we can go down to content manager and press data set then we want to press settings on that data set and make sure it's set to our products in our store we're going to connect the image to the dataset for our products and the image is going to connect to the main media image the title we're going to connect it to the name of the product this paragraph text we're going to make sure it connects to the price and this button we're going to connect it to the product page now if you notice right here it only put the number it didn't put the dollar sign so what you can do is use the shift arrow key and bump this over a couple times we're going to copy and paste it we're going to remove the connection to the data set and we're just going to make this one a dollar sign and we're going to go ahead and put it right next to the number this is going to be our custom shop page now like i mentioned earlier i plan to make a full tutorial on making a custom shop design but this was just to give you a general idea of what you can do with a repeater so just to recap a repeater is an element with several different items in it and when you design one item the design follows for the rest of the items inside of that repeater and if you connect elements inside of the item to a database then the amount of items inside of your repeater are going to be purely based on the amount of items you choose to show from that database so it basically takes all of the manual work and design out of it when you just design one item basically all the other items will automatically display with the data set but that basically wraps it up for the video today guys if you guys did learn something or find this useful in any way please like the video and consider subscribing for more wix content coming out real soon thank you guys again and i'll see you on the next one [Music] you

Channel: Wix Fix

Views: 1,725

Keywords: using wix repeaters, useing wix repeaters

Id: HyGY5OVLito

Length: 10min 22sec (622 seconds)

Published: Sun Jun 27 2021