We take a look at how components (Symbols) are created in Pinegrow
Transcript
So carrying on what is kind of turning into a bit of a course now is transitioning you from Webflow into my no code….my no code tool of choice Pinegrow taking elements that you might be familiar with within Webflow and kind of showing you the implementation of that in Pinegrow. I’m going to sort of demonstrate to you how components are kind of created and reused within Pinegrow.
Once again Pinegrow being a very much more feature-rich and you can do a lot more with components than you can in Webflow we’re just going to kind of go through that and I’ll take you through it.
So, if you are new here my name is Samuel Gregory and this is the full stack agency so let’s turn our attention on to the project at hand. So, this is my agency website and if we go into the Huawei section I think this would be a pretty perfect use case for a reusable reasonable component we’ve got the team here and when you click on it it kind of opens up and you click another one on closes blah blah blah this being reused as a component would be very very handy to me as I can add new members very very easily so let’s go dive into Pinegrow see what that’s like and I’ll take you through a bit my bit.
So, here’s the about page and obviously I’ve created this in static HTML and you do the same thing whatever component that you’re creating the first thing you do is obviously create that component. The the next thing you’ll do is if you go up to the top right here you’ll see the actions panel you can select that if you’re not seeing that for whatever reason you can go to window and then show high panels and you’ll see the components the actions panel there that you can open up.
And just looking at kind of through all of these options, this one you can define line a Pinegrow component use comp is sort of changing an element into a component section and we’ll get into that when it comes to naming and organizing your component you can actually put them into sections to kind of make it easier to find out.
Similarly, now down here we’ve got editable areas and we will be going into this as well you define an editable area within that component you want to only be able to update certain areas in the component. Repeat is something that allows you to define an element within the component that is able to be repeated and we have a perfect instance of that so we’ll be doing that as well which I’m not sure why but I’m not seeing the the links here maybe Pinegrow can take a look at that.
This one can be deleted so you’re able to sort of set optional elements within within a component that can be just deleted. Use editable is similar to use comp and that you’re just changing it into an editable area that you’ve already defined and then locking is preventing it from actually going from from changing anything whatsoever.
Let’s just dive right in the first thing I’m going to do is obviously Define making sure my my wrapping element is there and obviously Define that component and you need to give it a unique ID good convention here is to actually give it kind of the project name mine’s the Jupiter and the draft website so JTG is fine and then with a full stop and I’m going to just put person there just to identify the component itself and this is now the display name and of course I’m just going to put person this is like a human readable display name.
Updating instances is when you come to change the component what you’ll see is do and change the component you’ll be able to update it using command, command shifts you for updating the whole entire project which is probably what I suggest doing but you can also do quick updates with command U so this update instances actually prevents this component from being updated in those instances.
I’m not really sure why or there’ll be there’ll be times where you need that but you might come across them let me know if you do find or think of a decent way why you might want to prevent updating all instances.
Mapping URLs is cross project kind of URLs so rather than it being kind of a I guess an absolute URL become a relative so you can read that if you hover over it you can see the description there so we’re going to leave all these as they are and then you can leave a nice little description and use a photo only for the preview so we get we get access to looking um seeing our widget in the kind of list panel here um and we can say that we don’t want to see that photo might take up look it does take up a lot of space seeing that photo that you might find quite helpful we can then just confirm confine that to when you hover over the component and you see it preview and then you also see an image of it.
So, I’m going to leave that as it is we can save that now and um we can we can update but we’re going to choose not to now the best thing we can do which is what we’re going to do right now is probably move this definition to a style sheet a separate page where all of our components are defined the source component can have so the everything that that component needs and then each instance can add or remove depending on all the settings you have here, get a bit more detail into that but what I’m going to do right now is actually just move this component definition to a style sheet.
Okay, I was having loads of trouble with um copying that into the style guide page I obviously have some weird setup that I can’t quite remember what it did so what I’ve done and according to Pinegrow’s documentation, I’ve just created a lib.html file and I’ve just kind of dumped it in there and that allows me to now use this as my kind of source component or my original definition of my component. So, I’ve clicked on add to section and I’m going to put about page as a section and once again if I command shift U to update everything…..then when I go into my list here we’ve got a new section called about page.
And like I say it works exactly the same way it’s like that anywhere I want and use it on any Pages kind of going forward now the next thing I want to do is start defining some editable areas because what will happen is… if we go into this page and get to the right section if I drag this onto the page this component.
I try and make any changes it’s going to warn me that this is not the original definition of the of the component so I can click into that go to the original definition and then make my changes there so we’re protected against any kind of updates or accidental changes to the uh to the component. So, let’s start now creating these editable areas and it might be easier if I just select elements in the in the dom tree here but the first thing we’re going to obviously want to do is be able to update this title here so once now I’m in the component I can define that as an edible editable area and of course we want to give it a unique ID…um which I’ll name it a person to kind of prefix it all and then I’m going to go name and just give that a name.
Now the inner content is will allow the the editor or the developer or designer to be able to edit the anything inside of that element. Now, this could be helpful this could be multiple you can add all any types of HTML within this element or whatever um in some if if not handled correctly it could be quite dangerous so be very very mindful when you allow edit inner content to be editable because it won’t let you add anything inside of that element.
We need to do this um because we’re dealing with text inside of our editable area here so we’re going to leave that check but just be mindful if this was higher up then of course the user could potentially delete or….or rearrange or create do anything they want within that element so you’re opening it to a lot of a lot of accidental changes or just kind of messing up the whole idea of the component, and so just bear that one in mind.
Next one in here is got the attributes so I can allow for certain attributes to be edited now it’s picked up that I’ve got class already on this element so it allows me to change the class but we have a unique kind of thing here and we’ll get into that just a sec, but you can also add elements it might be attributes it might be an autoplay on a video it might be it might be a width it might be a height or something like that that you want to be able to change on an image so you can give access to specific attributes that you want to give access to so that can be really handy too.
Classes of course this is really great for say menu links that you can and it’s giving you an example here of an active class you can only allow the active class to be added to that element on each instance. Background image is the same because you wouldn’t want to give access to the style attribute which is where background image resides and you want to be able to control that that they can only update the background image and then components is allowing only certain components inside of that element there but we’re not going to touch that one in this particular episode. So, for me this is all fine and I can Define that as a header editable area I need to save and update.
I can now change that name to whatever I want. So, let’s now run through all of these and make them editable and then we can kind of I can touch on any kind of unique instances um as we go so when the user clicks on this element you can see that we’ve got an area here for…for paragraphs of text but we might want to be able to we might want to allow to add or remove multiple instances of a paragraph tag.
My profile has two paragraphs but I don’t want to do that because then every instance will always have those two paragraphs so, what I want to do is delete the second one, to find this as an edible area as we’ve done before and then actually allow this to be repeated now this will mean that a user can have one um to many instances of the paragraph element to be able to add different pattern and multiple paragraphs for that profile here. So, that’s what I’m going to do here and then Define that as a unique ID I don’t think this is essential um but it will just be helpful for keeping things in neat and tidy.
So, now looking at the image and the way that this is marked up um we have a source attribute and then we have the source set attribute so how do we enable them to be able to upload an image and then edit the source set so that we can we can use responsive imagery uh once again defining that as an editable area giving it an ID, here’s where we would disallow for inner content so we don’t actually want them to change any inner content but we do want to allow them to change attributes and like I say Pinegrow picks up on the attributes that we already have on the element and then we want to be able to allow them to change those.
Similarly, on the source element here we don’t want to allow for in a inner content and once again we want to allow the user to change the source set and that’s all we want them to be able to change so, updating that going back to our about page here what we can do with this paragraph We can now duplicate that and then add in that text that I copied earlier so let’s start from scratch here and let’s recreate news um Neil’s profile here so of course I’m just gonna drag that onto the page it’s going to start out with all the original information that we defined in the component but of course now we can then go down here and get the text we’re changing this one and hide that paste in his text here and show that back up there.
So, you might find it a bit clunky that clicking on an element and changing the text now what is the kind of a better thing to do is clicking on the component and clicking on the properties inspector here and down here you can see all of the editable attributes of that component has and then you can change them directly in here it’s a kind of cleaner way to do things than kind of clicking them and editing them.
You can also obviously when it’s an image you can update that image just there you can upload it so we do that now, foreign but in this instance because it’s kind of it registers it more of a text field we’re going to have to do this a bit more kind of manually. So, let’s just do that you see that updated and then the source set here as well needs to be manually updated but obviously the narrower you go the narrower this will be so it can it will only show us what elements or sorry what editable properties are able to be edited.
So, you might find that a little bit cleaner than kind of clicking around and whatever so now that we recreated that and made that into a component…can delete that and then we have two instances of our brand new component and I can just do this now for every single new person that joins you can add them and make my life a hell of a lot easier.
So, I hope that covers everything when it comes to components within Pinegrow if you have seen something in Webflow that I’ve not covered do ask a question down in the comments or check me out on the discord I’ll leave a link to that below in the description I hope you liked this episode if you did well of course give it a thumbs up do subscribe if you want to hear more about how I’m helping you transition from Webflow to Pinegrow and I think that’s kind of everything so happy building the future of the web.