Play Video

Building A Social Network in Wix | Part 9 | Editing Profile Pages Wix Code

Wix Training Academy- https://www.wixtrainingacademy.com/
————————
Are you asking: How do I build a social networking website on Wix?

I wanted to create a series to help fill a major need in the Wix market. People want to know how to use Wix Code and what the capabilities of the platform truly are. With that in mind, I listened to my community, read comments and engaged with Wix Design Pros.

Today, I am bringing you Part 8 of a multiple part series. The series is called: “Building A Social Network In Wix | The Non-Coding Founder’s Guide”

Part 9 is dedicated to providing you an understanding of how to edit your profile pages. It is a combination of the Wix Members App and the profile page we built out together. This is a crucial step in your process of building a social network in Wix. If this step is skipped, you will not be able to allow your users to edit their profile pages thus giving them a blank profile. This process is fairly simple overall, but there were a lot of moving parts so comment any additional questions you may have.

This series is specifically made for entrepreneurs, CEO’s, Founder’s, President’s and Co-Founder’s looking to build a website for their startup or re-design their existing website. The goal is to bring you quality Wix Code training videos while also displaying the capabilities you have in Wix.

I want this series to pioneer an issue Wix is currently tackling. I want people to understand how powerful the Wix platform is and how you can maximize your online marketing efforts within Wix.

If you are interested in hiring me for your social network or Wix website project, check out my new hand-crafted service: https://www.wixtrainingacademy.com/hire-a-wix-pro
————————————————
Series Schedule: (x1 Video Per Week) *Variable

Sunday July 15 – Part 1 | The Introduction
Tuesday July 24 – Part 2 | Planning Databases Homepage Design
Tuesday – Part 3 | Creating Profile Pages and Database Fields
Thursday – Part 4 | Building The Registration Lightbox
Wednesday – Part 5 | Posting User Statuses Function
Thursday – Part 6 | Creating Social Feed Pages
Thursday – Part 7 | Adding Images To Statuses
Monday – Part 8 | Adding Statuses to Profile Pages
Sunday – Part 9 | Editing Profile Pages
————————————————
Topics To Be Covered:

-Creating Profile Pages
-Creating Custom Login Pages
-Giving A User Ability To Post An Update And Edit Or Delete It
-Working With Repeaters And Dynamic Pages
-Building Feeds
-Peer-To-Peer Messaging (Direct Messaging)
——————————————————–
Stay Connected:

Email: info@wixmywebsite.com
Twitter: https://twitter.com/WixTraining
Subscribe: Wix Training Academy
Wix Training Academy: https://www.wixtrainingacademy.com/

what is up YouTube Michael Patrick Stroud here from witch training Academy and today I’m bringing you part 9 of building a social networking Wix guys one thing right off the bat I am running a quick feedback survey from you to better the Wix training academy in 19 so I’m getting ready to plan out when I head home this Wednesday for winter break for a whole month I’m getting ready to plan out 2019 and what the witch training Academy is gonna
look like how I’m gonna alter it how I’m going to improve it to provide you the best witch training experience possible so if you have five minutes of your time head to the witch training academy calm this pop-up will pop up within two three four or five seconds on your website and it just says provide your feedback click it it takes you to a quick little survey it’d be much appreciated if you could fill this out and let me know how I did in 2018
as far as content and the witch training Academy goes alright guys so in today’s video what I’m going to actually do is show you how to give the user the ability to edit their profile and how we’re gonna do that and how we’re gonna utilize the Wix apps themselves to incorporate a cool little feature here and to actually build out a profile it’s gonna be pretty nice and there’s gonna be a little bit to it but just follow along I’m gonna make it as
simple as possible so that way you guys can have a quick and easy learning experience so you could go back and implement it quickly into your websites so first things first we’re gonna go back to our actually before we do that what we’re gonna do is we’re gonna go to the add button right here and guys before we hop into things don’t forget to subscribe right down below with Schank add me so you don’t miss an upload of the building and social
networking Wix and non coding founders guide series turn that notification bell on I’ve had a few people not know that the uploads came through some people were so back on part three and we’re on part nine already so make sure you subscribe and turn that notification bell on so you don’t miss the notifications when a new one is uploaded so now that we’re in the ad here what we’re gonna do is we’re gonna scroll down to members and then once you
get down to members you’re gonna click Add site so this is gonna add a members area to your website it’s gonna go ahead work its little magic here and then what happens is well right after it loads right after it adds adding adding adding and adding and good we’re gonna click get started so what happens is is which actually adds a nice little member widget here it’s kind of cool what they’ve done if you haven’t seen this feature yet it’s awesome
I’d highly recommend checking it out but what happens is this account information is all associated with the back end in Wix so this actual information is in the Wix CRM for the website you’re building any information edited in here by the user goes back to the wiki RM question is how do we utilize this same feature to go ahead and get the proper information on the user profile page so so how does this a user actually edit their profile so on
here you can see they have some of the basic features here which is first name last name contact the email phone but what we’re gonna have to do is we’re gonna have to edit our own little module and add just a button right here that has the same layout of this page but we’re gonna have all the same information from the profile page so when they edit it in here when they go to edit profile they will then be able to add their details and it’ll pop
up on the user profile page so I know that might sound a bit complex and a bit confusing to start but once I hop into it here you’re gonna understand what I mean by that so to better understand it let’s go back to the user profile page that we’ve been building out so if we go here user profile data that’s our page here okay so this is our sample user profile page in the last video I showed you how to add this statuses box now what I want to show
you is how to add one the edit profile button which is very simple to do and then to how to actually give the user the ability to change their background image their profile image by the way you guys I did make this profile image circular I which was the process of updating their like image system when we made this first profile page video and I kind of looked a little funny because I couldn’t even figure out how to make the image a circle that’s
because which like I said was going through an adjustment period changing the design module and editing mods will further images so to do it you simply double click it and then it’s gonna pop up an image tool and you could right here choose a cropping and you could choose what type of shape you want to crop your image as and obviously I’d show a circle and then you could choose the proper like sizing right here using the cropping tools right
there but I already did that we’re gonna click that right there and we’re good so we’re gonna give the user the ability to your background image their profile picture their full name their handle so they’re at name their bio their location and their website so it’s actually fairly simple to do what we’re gonna do first is we’re gonna go into add and then we’re gonna go to button and we’re just gonna grab I’m gonna use this button right here and
again guys we’re going for a layout kind of sort of similar to Twitter so that’s where I’m drawing some of this inspiration from again this is our own little version it’s not Twitter but it’s like that’s what I’m modeling kind of after so what we’re gonna do is I’m gonna first go in here change the design really quickly go to customize we’re on regular I want the fill to stay that except I want the border color to change to this blue right here
and then I’d like the text to also be let’s see how yeah we’ll keep the text that right there so it’s prominent and then on hover I want the fill color to be this blue and then I want the text you have to be white and then on disabled we could keep it grey like that so that’s very quick and easy right there and then we’ll change the text to edit profile so it’s very clear so okay guys so if we go to preview here you can see everything disappears
and the edit profile button is fairly clear so if someone comes on here this is what they’re gonna see to start with they’re gonna notice that there’s literally nothing on here like it’s just a whole bunch of random images says full name handle bio location website and people are just like okay I don’t have anything on here and they’re instantaneously gonna be thinking how do i edit my profile you know how do I change this to my stuff well you’d
have to click edit profile so now what we have to do is we added the button we have to link it back to the members area but before we can link it back to the members area we have to actually go ahead and add a little page in there for the profile completion so people could actually add their details so now if we go back to my account page and I’m gonna take this little member up here off the top for right now it’s easy to add back I’ll tell you
why towards the end of the video it relates to yeah I’ll tell you why at the end of the video so okay so we’ve got the my account here so what I’m gonna do here guys and I’m gonna go to manage pages I’m gonna click my account and then you could see this right here this is the my account page what I’m going to do is I’m going to control paste I’m gonna copy that and paste it because we want that same button layout then I’m going to copy this and
then I’m not gonna paste the app I’m just gonna copy that and then what I’m gonna do is I’m going to go to back to manage pages here and add a new page I’m gonna change the page name to update profile and we can see what happens here is it is then added in this menu here right so that page is then add in the menu and then I copied over I have to go back here I can’t copy the my account info sorry apologize so you can see that the you update
profile is added in here and now what we have to do is add the fields that correlate to the profile page so what I’m gonna put up here at the top I’m gonna add a little box number one I’m gonna go to box and then I’m just gonna add this and I’m just gonna be just the border a box just like the previous my account page I’m going to change the design I’m going to drop the opacity to zero I’m going to add the border which is that I’m gonna drop the
color of the border pretty much nothing just so you can see it let’s make sure you can make it a little bit darker did you two do go back to border okay so now you can see that again I’m gonna drop that down a little bit drop the page there and now I’m gonna grab some text I’m gonna go to text I’ll just grab a random piece of text here going to extend this and then I’m gonna just change the font I’m just going through my normal scheme here guys
this is I mean the pretty straightforward stuff you guys have all done this or seen this how to add text all that good stuff I’m just going to change the text right there I’m gonna change it to update profile I’m going to shrink it down a little bit right there I’m actually gonna make it they go black and then I’m going to copy the text drop it down below and then just explain so we’re gonna explain what this does so that way when people come
here they’re not confused again this is just a part of user experience user navigation you want to make it very clear on your users what they’re doing on this page why they’re here fill in the fields below to edit your profile page okay so we tell them to fill in the fields right now what we have to do just like we would if someone was using a user input form because that’s exactly what this is we have to add the field options and we have to add
our data set so first let’s go up to page or excuse me not page due to the database go to data set come in here we’re gonna click on that and then we’re gonna click double click it we’re gonna choose where it goes so it goes to user profile data because that’s our profile page and we want the mode to be right only we choose that to be right only and then what we’re going to do is we’re gonna add our fields so user input right here and now you
guys can choose whatever field you want and design the fields to be whatever you like but I’m gonna just use this as an example so we’re gonna use these fields right here so we have the full name so we’re going to need one for the users full name we’re going to need one for the users app name then what I’m going to do is I’m going to come back to add and I’m gonna want a text box for the users bio so user file and then we have location so I’m
gonna come back whoops I’m gonna go back up here and I’m just gonna select this one again actually make it easy I’ll just copy this so we got one for user location and then we also need another one for user website and then we need to come back in here one more time and we need to go to the upload button and we need one of these for profile picture and then we need one of these for background picture or header picture whatever you’d like to call
that to make sure they’re lined up and then finally we need to add a submit button so we’ll go to button and I’ll use our one from the edit button you’ll come in here we’ll add it down here and it’ll just say submit ok so now what we need to do is we’re gonna change the field so that way we could set it up correctly so we don’t want this to be a phone number we want it to be text then we want the placeholder text to be full name on the next one
we’re gonna edit it again we want this to be text we want the placeholder text to be app name then we want this one to be yeah describe yourself in 50 words it will just keep it down right now that’s fine that’s going to be the bio this is going to be right here this is going to be the user location again we want to change this to text your location then we could say sea state etc doesn’t really matter wherever then want to put for the location
and then let’s put website URL and then so on this one you could either make this your I would recommend making it a URL what has to happen though is it’s got to have the HTTP back colon backslash backslash WW blank whatever comm in order for to actually register correctly in the fields here as a item or an actual URL so just just an alert so if you want to put like a little alert message next to it that says that I would recommend doing that I’m
not gonna make these all required what I am gonna make required is the full name and the app name because those will come into play a little later down the road and then we need to do is edit these puppies will say profile picture and then we want this to be a required field and then we’ll change this one to header image we also want this to be a required field okay so now that we have all of these filled out what we have to do is we have to
connect them to our database so that way it goes into the user input database so I’m gonna go ahead click this click this little button right here connect to data it’s gonna pull up it already recognizes our user profile data set value connects to full name good app name here so value connects to handle then we got our bio value connects to profile bio then we’ve got our location connects to profile location and you can see if it’s properly
connected the data button right there will turn green so that way you know it’s properly connected website URL so connects to profile website connected then we want to upload a profile picture we want this to connect to profile picture and it’s properly connected and then header image and we want this to connect to have a name best profile background image in here that works profile background image and then it’s connected and then last but not
least we want the submit button to connect to data and then link connects to submit and then you could choose what happens after this is submitted so you could have it stay on this page so that way they can update again you could add a success message which I would add that and I would add it right under the submit button so I’m gonna pull that up a little bit I’m gonna drop that down a little bit so we have a little bit more room did you do then
I’m gonna bar submit button back down here and then you yeah your message right here it could say like your content has been submitted we’ll keep it that so that way it’ll stay on this page in case they want to update it again so that way it doesn’t drive them right back to the profile page it gives them time to be like oh wait I want to update this or I want to update that they simply press submit right there and then and then they’re updated
just like that then they’re updated so okay so this is where they update it so now that that is built out now that that’s done and we have that here what we need to do is one click Save and now what we have to do is we have to go back to our profile page go to user profile we have to go to edit profile because we have to link this button to that page that we just created so we’ll come in here we’re gonna click link and then we’re gonna link it to
a page we’re gonna link it to update profile press done that’s linked there and now if all is well make sure these are all connected okay so if all is well and all works we should be able to go ahead and connect everything and see if it works now what I’m gonna do to guys is I’m gonna go back here and I’m going to go back down to members and I’m gonna add the little login bar at the top again I’m not adding this now and I’ll explain why right now
is because the drop down features on it if I press preview it takes you to my account but that’s not that’s not this this page the my account page is is this page right here which is fine but I’m gonna have to show you how to fix that so that way when it comes time if people click that up at the top it tastes another profile page rather than this my account page but that I’m gonna add it up there right now so it gives us pretty quick access to go
back to and in between pages and then just to make navigation a little easier again guys I haven’t added an actual physical navigation bar anything yet because I’m just showing you the bare bones of this I’m gonna go ahead and just add a home button up here at the top I’m just gonna link the text to home keep it just like that I know it’s very raw very unedited but that’s okay that’s what we need to do for right now I am then going to go ahead
and make sure on the home page yep okay so I’m gonna press publish I don’t know what in the hell that is I’m gonna press publish and then we’re gonna give it a shot see if it works if not we’re gonna debug it and figure out what went wrong okay so first things first I’m going to login okay so I’m logged in so now what we’re gonna do to test it is I’m going to go up here to my account and then I’m going to go to update profile and I’m going to
enter the proper information almost couldn’t spell my own name holy crap I’m gonna add my app name so I’ll just add it as yeah I’ll just add it as Michael Strout um I like to think I am a fairly cool guy not sure what do you think what do you think guys if you think I am go ahead and drop a like down below in this video location I’m gonna put Phoenix because I’m excited to get back there in four days and visit family website URL I’m gonna come
straight here to the wished rank Adam you guys don’t forget to fill out your feedback form I’m gonna copy that I’m going to add it in here I’m gonna add a profile picture myself what one do we want to add today let’s see I know what I want to add I want to add my my sweater picture I like that one a lot I’m gonna add that one now for my background image man what one can I grab um let’s just go to the wish Frank add me and try to find nope my
background YouTube channel are ah here it is grab that and then submit your content has been submitted okay cool so now what we have to check is we have to go into our because I haven’t linked the pages yet so it just submits there so we actually have to verify that we have a properly submitted profile page so if I go back to user profile data and what I’m gonna do is I’m actually gonna go to our website’s dashboard I know this is a bit confusing
so I’m gonna show you all the linking processes between the two um after we get these last little elements set up for the profile pages so that way I can show you how to go back to a profile page after someone’s uploaded their data so we’re gonna go to database here in our dashboard this isn’t our wet which dashboard on our site and I’m going to go to user profile data ok good so this means there’s been one uploaded so now I have to show you how
that works I have to see because I honestly don’t even remember the settings I have for this page for as far as SEO settings go settings here alright I’m gonna change this to go to add field full name okay good all right so now if we publish that I should be able to go to the website and let’s see here and then pull up my profile strictly by searching right now so strictly by searching the exact URL so it was bash last user what was a user
profile sorry I apologize I forget what I named it what is the name of that database user profile data is that how I have it in here I believe it is let’s just check the settings here SEL what’s the page yep okay page info user profile data slash full name so it should come up choose your profile data slash Michael stroke will come up like that yeah here we go guys look at that you can see how it worked there we go so I know there was out long
process to try to get to this page but that’s because I haven’t linked it yet I haven’t properly set it up and linked it but you can now see that our update profile edit profile button here works correctly and now what I’m going to show you to quickly do so I can make your life a little easier before this video ends is to link it back to the user profile data page so if we go to edit profile what Arc excuse me I’m gonna go back into the editor so
we’re gonna go back to our my account page and what we’re gonna do is we’re simply gonna go once again back to the pages here and we’re gonna click add new page and we’re gonna title this page back to profile and then just for the time being this is a little placeholder I’m gonna show you a true proper way to do it I’m just gonna add a button so when someone clicks on it what will happen is we’ll just right here back to profile and then we’re
going to link that to our user profile they tap it yeah whoops that’s a dynamic page and it’s got to be full name data okay yeah so I’m not gonna get into that in this video I was gonna make it a quick and easy little way I have to show you how to properly link it back using code so I’m not gonna show you that in here you can see it worked though you can see the edit profile button is now active if I went back to here you could go back to edit
profile and then you could edit your details again so that’s pretty awesome you can see how that updates and how it works I hope you enjoyed the video I’m very excited for this I’m very excited to you now know how to do this if you did drop a like down below comment if you have any questions at all I know this was a lot for a video and there’s a lot of moving parts a lot to follow but hopefully I did a fairly good job of explaining and don’t
forget to scribe here at the witch training academy click that Bell notification on so you don’t miss and upload a building in social network in Wix and finally don’t forget to head over to wish shank Adam e.com again within 3 seconds a pop-up will appear they’ll ask you to provide feedback from 2018 on how I did with both this and the YouTube channel please just 5 minutes of your time fill out that quick little survey to help me out so that way
I care for 2019 and give you the ultimate witch training experience guys I really appreciate your time and I hope you enjoyed the video this was part 9 of building a social network in Wix I will have the next part up before Christmas so I’m going I’m gonna aim to have almost two or three extra ones done for you before Christmas happens which is in about two weeks so that’s my goal for you and that’s what I’m aiming for I appreciate your time I
appreciate your patience patience you guys are amazing and stay awesome have a fantastic rest of your day Michael struck out