00:00:00:00 - 00:00:24:09
Unknown
Hello, everyone. Welcome to today's webinar. As usual, we'll just wait a minute or two more for anyone that is just joining. But can somebody tell me in the chat whether you can see me, hear me and see my screen, please?

00:00:24:11 - 00:01:03:04
Unknown
Brilliant. Thank you very much. I'll just give it a moment.

00:01:03:07 - 00:01:36:12
Unknown
Okay, let's get going. Right. So this webinar is one that's actually been rearranged from later on, last year. So apologies if anyone's been waiting for this particular topic. The title is Advanced Grouping in that. So I'll go over obviously what advanced grouping is, but it basically is a way to allow you to precisely position, fields in your that template, in your mega edit template, relative to all the fields that are within the same group.

00:01:36:15 - 00:02:05:10
Unknown
In a nutshell, will obviously go into more detail. So the maximum duration of the webinar, as always, is one hour, and the recording will be available after the webinar. My name is Sam, I'm the Academy manager in Vigo and joined joining me today as is becoming routine. And tradition now is Duncan who from our support team who many of you will be familiar with and Duncan will be manning the chat today.

00:02:05:12 - 00:02:30:21
Unknown
So if you've got any questions, fire them into the chat. And Duncan wider. Try and answer them. Now, if you can, or we can take them away and answer them later on. If you are new to life storm and these webinars, then the chat should be somewhere in your bottom right corner. If your screen is the same as mine.

00:02:30:23 - 00:02:49:18
Unknown
Okay, so I've also got some resources for you here. So there is a page on the academy that I'm going to copy and paste into the chat, which will have the recording once we're finished. And it also has some bits and pieces of information I'm going to be using as well. So let me zoom in a little bit.

00:02:49:20 - 00:03:13:05
Unknown
There's loads of written information. What you also find in here is a set of resources. So if you do want to have a look at the final product which is available, which I'll show you in a moment. Or if you want to download any of the resources I use to create the product. So if you want to try it yourself or you want to see exactly how I did it, the those things are also available for download as a couple of zip files.

00:03:13:12 - 00:03:22:28
Unknown
And then that max file. So you can get those from that page I've just provided to you.

00:03:23:01 - 00:03:43:27
Unknown
Okay. So what we're going to be doing in this hour, I've titled this is kind of a product build workshop. So I'm going to actually start off with a sort of half built product. Already an inventor of the fundamentals, which I think most of you already know has already been done. And there's plenty of other resources if you're brand new to invent.

00:03:44:00 - 00:04:07:18
Unknown
I'm going to focus really on the advanced grouping functionality here. So let me load up a product that's been made for this particular webinar. What we're going to be using here, is a trifold. Well the example here is a trifold leaflet. We're only going to be working on one side just to keep it simple. And it comes in three different panels.

00:04:07:20 - 00:04:18:06
Unknown
Very questionable artwork from both myself and I, but hopefully it will get the point across with what we're trying to achieve.

00:04:18:09 - 00:04:42:01
Unknown
Right. So what is advanced grouping? The best way to explain this is to actually just show you on this product that we're going to make. So it's a way of really fine tuning how your fields on your canvas are positioned and how they're sized based on the position of other fields within the group based on the content of certain fields.

00:04:42:03 - 00:05:13:03
Unknown
And based on the rules you specify around those things. So if I show you briefly what we're going to be working on today. So we're going to split these what I'm calling panels into separate sections. So left right and center. And you can see the behavior that the advanced grouping is going to do. So for example on this left hand side here what we want to do with this is fine tune it so that when we add more text or take less text away, we still want the full height of the panel full of content.

00:05:13:06 - 00:05:32:15
Unknown
So as a result, if we've got less text, we might want that image to scale as a result. So it's always nice and full. There's no big empty spaces. So what you'll find is that if I start to put some more text content in, for example, the image will scale accordingly. To sort of make up that space.

00:05:32:17 - 00:05:46:17
Unknown
If I take some of this text away again, that image will scale. And I've also got it set up so that if we actually remove these whole sections, then again the image will scale to fill that gap.

00:05:46:19 - 00:06:15:18
Unknown
By the way, the sample product we're using here is a fake product for a wafer on an animal sanctuary. Hence the ridiculous imagery and, boilerplate AI generated text. Okay. Next we'll look at the right hand side and what behavior that can do. We're also going to have a look at how we can incorporate both vertical and horizontal all elements in these rules that we're going to create.

00:06:15:20 - 00:06:34:25
Unknown
And the way I'm going to explain this one is we've got here two columns in this particular panel. And we want it to be controlled both ways. So we want the contents of both of those columns to be centralized. So that's that horizontal behavior we're going to be working on. But then we also want it to be vertically controlled.

00:06:35:03 - 00:07:08:12
Unknown
So we want it as the text in those columns gets longer or gets shorter. The remaining space in that panel that we've specified there adjusts to fit, so that we have a nice distribution of all of our fields and all that content. So if I just take a look at some of those and start modifying that. So for example, if I start making let's see some of this left panel here have longer text.

00:07:08:14 - 00:07:39:08
Unknown
You can see that everything is repositioning to keep the entire thing centralized, even though one side is longer than the other. It might not be a perfect example that would use on your product, but hopefully it gets across what this is capable of. And we also see that as we start to put in more text, the spacing in this case, rather than sticking to the top and the bottom of the, of the panel, in this case, we're actually just distributing the remaining gaps between all of the fields.

00:07:39:10 - 00:07:53:15
Unknown
So as I start to enter more text, the gap between each of those fields becomes less and less until we get to the point where there's no space left and it will start to overspill.

00:07:53:17 - 00:08:23:26
Unknown
And we'll also take a look at this central panel as well. So this is where we're demonstrating the usage of nested groups. So we're talking about advanced groups here which is a reference to the InDesign functionality of grouping your fields together. But what we can do is actually put groups within groups, as you can in InDesign, and apply separate positional and size conditions and constraints to those individual nested groups.

00:08:23:29 - 00:08:47:16
Unknown
And as a result, you can get quite complex behavior. We saw some of it on the right hand side there, but we also see some of it in the center here. So the behavior here is I've got several different things being controlled. One is the yellow boxes for the contact information I've got here. So if I get rid of those the other ones will move to keep it nice and centralized and look nice and neat.

00:08:47:19 - 00:09:10:28
Unknown
If I get rid of one of those images again, the remaining things will centralize to make it look, hopefully quite nice and neat. And then I've got a higher level, even again, where if I get rid of this disclaimer, for example, at about the bottom. There the entire size shifts down and that image will resize as a result.

00:09:11:01 - 00:09:25:12
Unknown
So hopefully this shows you the kind of complexity that we've got available in this. In this functionality. I've just seen the message saying, have we frozen? No, that's the same for everybody.

00:09:25:15 - 00:09:43:07
Unknown
It might just be me chatting away at this point rather than, actually doing anything on screen.

00:09:43:09 - 00:10:16:18
Unknown
Okay. There are I think that might be on your end. Unfortunately. If you can't get it up and running again, then the, the recording is available for afterwards. Right. Okay, just let me shift my screen around a little bit, just so I've got my, my notes that I need. And then we'll we'll get started with making this.

00:10:16:20 - 00:10:20:17
Unknown
Okay.

00:10:20:20 - 00:10:41:19
Unknown
So I'm going to load up InDesign. I've tried my best to increase the scale of all the text, for example. As much as InDesign will allow me to do, if it's still a bit small or the text on your screen, I do apologize. I don't think at this stage there's much more I can I can do about it, but hopefully you can see the text in the InDesign window.

00:10:41:21 - 00:11:05:20
Unknown
So the products I'm using, again, I've provided it for you for download if you want to use this later on. I'm starting off with the base product, which is just a very, very basic representation of how this might initially look. And all we've got is various different frames, various different text boxes positioned on our page, ready for us to actually do some work in.

00:11:05:22 - 00:11:27:21
Unknown
I've got a few static images already in there, and an empty image frames which we're going to actually link to our, our embed files. What I've also got, because we don't want to set this up from scratch today in invent is I've predefined a lot of the other things that we need to make the product product work.

00:11:27:23 - 00:11:52:16
Unknown
So for example, I think most of you will be familiar with this. I've got some resources in there for different clipart. I've got a lot of variables which control things, such as the text boxes, the visibility of certain fields, the images that we're going to choose. As a result, I've got them all nicely set up on a form, so they all hopefully appear quite nicely to us when we're looking at our products in Mega Edit.

00:11:52:18 - 00:12:14:00
Unknown
And I've set up a couple of very basic logic statements as well. Just to make certain fields show and hide when certain checkboxes are clicked. But apart from that, it's brand new from scratch.

00:12:14:03 - 00:12:21:08
Unknown
Okay.

00:12:21:10 - 00:12:43:03
Unknown
Right. So before I get into specifically doing this, I do want to talk about a couple of general setup tips. So just to make your life easier when you're working on this kind of thing. So one thing to consider is naming conventions. So for this you would probably use the layers tab which is within InDesign itself. I've got it set up side by side within that here.

00:12:43:06 - 00:13:03:04
Unknown
Make sure you don't have to. But but it's highly recommended to rename all the fields and all the groups that you end up creating with some relevant name if you don't name them, and then you start trying to play around with them in an event. You're going to very quickly get confused as to which field it is you're looking at.

00:13:03:04 - 00:13:32:16
Unknown
And it's just going to it's going to drive you crazy. So make sure that you're renaming as you go along. I would also recommend sorting out the sort of stack order here as well. Again, it's not a necessity, but it will make just a bit clearer going as you're going through the process. So what I mean by this is if you're wanting your, the behavior of your fields to behave in this order.

00:13:32:19 - 00:13:59:24
Unknown
So, for example, the text area butts up against the header, this separator butts up against the text area. In reality, you only need to order those inside InDesign inside indents, which I'll show you later on, but it will make your life and understanding a bit easier if you also do the same thing in the layers tab. Just so it's nice and easy to to view and appreciate.

00:13:59:26 - 00:14:35:12
Unknown
Okay. Another thing you'll need to do, which I forgot to do a couple of times during the setup of this, is in order to use these in event, you will need to enable all of the fields within InDesign. So again, most of you will be familiar with this with individual fields. If you go to properties in event you change whether that field is static or whether it's enabled in, event, you will need to do this for all of the fields you want to utilize as part of this advanced grouping, and the groups as well.

00:14:35:18 - 00:14:43:21
Unknown
That's the important point. The groups as well need to be enabled. But we'll do that as we're going through the process.

00:14:43:24 - 00:15:04:10
Unknown
Make sure that you've linked to for your variables. So standard in that 101. And then it's also a good idea to do iterative testing. So especially if it's early days with this and you've only tried it once or twice or not at all, you can just get ahead of yourself and try and set up the whole thing in one go.

00:15:04:13 - 00:15:25:18
Unknown
But then if you then move it over to Mega Edit and there's a bit of a problem which in all likelihood it won't do exactly what you want the first time, because it can get a bit complicated. If you've got a complex template, you're going to struggle to isolate exactly where those problems are. So what I would recommend is going sort of an iterative process set at one bit.

00:15:25:23 - 00:15:40:24
Unknown
Take it over for testing, set up the next bit, take it over for testing. It takes a little bit longer, but I think overall it might actually take a bit shorter because yet you can find the problems faster.

00:15:40:27 - 00:15:51:23
Unknown
Okay. So let's start off with our, left panel.

00:15:51:26 - 00:16:26:06
Unknown
So as a reminder, what we want this to do is we want the image here to be the main thing that's filling our remaining space. So we want the content to be bolted to the top of the panel. We want it to be bolted to the bottom of the panel. So there's no empty space around there. But then when we actually need to either provide more space or take away more space, it's the image which is going to give up that, that functionality.

00:16:26:08 - 00:16:39:01
Unknown
Okay. So one concept that we need to look at as well is the concept of a boundary frame. So.

00:16:39:03 - 00:16:45:11
Unknown
What I'm going to do oh I've lost that button since I've changed my.

00:16:45:13 - 00:16:50:14
Unknown
Screen around.

00:16:50:16 - 00:17:05:01
Unknown
And.

00:17:05:03 - 00:17:34:10
Unknown
Interesting. Oh, it's down here. Okay. So. I'm going to draw an empty text frame here. And I'm going to call this my boundary frame. And what I'm doing with this is it's an optional step for each of the groups that you're making. And it is really needed if you want to control what the outer boundary is of the group that you're going to make and you go into control.

00:17:34:13 - 00:18:05:07
Unknown
So if you don't specify a boundary frame, and if I get ahead of myself here, I apologize. I will go for it later. If you don't use a boundary frame and you group some, some fields together, the boundary of that frame, the boundary of that group will be wherever the frames end. If you want more control over where that boundary is going to be, and want to have much more say over exactly how it's positioned, then I'd recommend using one of these boundary frames.

00:18:05:10 - 00:18:25:17
Unknown
Again, it's completely optional. Whether you do use it very situation or whether you would and it's easy to play around with them both to see if they do what you want them to do. However, that boundary field needs to just be an empty frame, nothing in it, no imagery or anything like that. So. This disappeared.

00:18:25:17 - 00:18:35:15
Unknown
But this button here, in in design will do exactly what you want.

00:18:35:18 - 00:19:00:17
Unknown
Okay, I'm going to rename that. Just call it, Left panel boundary, for example. And then I'm going to select all of the fields that I want in that particular, panel or that particular group. And I'm going to group them all together in InDesign.

00:19:00:19 - 00:19:07:08
Unknown
So I'm just going to select them using the layers tab. I just find it a little bit easier.

00:19:07:10 - 00:19:31:29
Unknown
Right click and group them together. So what you'll find when you go over to events and start trying to meddle with the properties of this. If all of the fields contained within that particular group are not enabled, then you won't actually be able to do anything with it. So this is where you need to make sure that all the fields are enabled, and then the group itself is enabled.

00:19:32:02 - 00:19:41:24
Unknown
So let me rename that group and then group.

00:19:41:26 - 00:20:00:13
Unknown
Then I'm going to select all of my things again that are contained within it. This is just a bit of a time saver. If you've got multiple things selected you can enable them all in one click rather than having to go to them all independently. Or you if you multi-select them, you can see their options for all of these in a list as well.

00:20:00:16 - 00:20:28:04
Unknown
It just makes it a bit easier than having to control them all in isolation. Bear in mind that you do need to enable your boundary as well, so if you are using a boundary field, you will need to make sure that's enabled in inventor as well. If I go to my boundary, make that an image. But now I should be able to enable that group.

00:20:28:06 - 00:20:43:13
Unknown
And there we go.

00:20:43:15 - 00:20:49:29
Unknown
Okay, so I'm just checking my notes to make sure I've not missed anything.

00:20:50:02 - 00:21:11:25
Unknown
Right. So one thing that we might have to consider with some of these fields, especially for the text fields, I think, is how they're able to grow. So, for example, if I go to one of these, text fields here. So the one which is a text area which needs to to grow or shrink, go to inventing, go to its properties.

00:21:12:01 - 00:21:31:03
Unknown
And you'll see here we've got an option which is the text field size constraint, which is right down at the bottom when you're on the text tab. And this controls how that field size can grow. So if you are wanting it to to grow or to shrink, then you need to make sure that it is able to grow in that particular direction.

00:21:31:06 - 00:21:50:15
Unknown
I think by default they're set to fixed if I remember correctly, so it won't grow automatically. So you want to set that in this case, for example, to vertical to allow it to, to change size.

00:21:50:17 - 00:22:13:06
Unknown
Okay. All right. So to actually set up the advanced grouping, if I go to my left panel group that we made go to invent and then go to the properties tab. And then what we see on here as part of the group settings is where we set up this entire thing. So some of these you will be familiar with from existing functionality.

00:22:13:12 - 00:22:34:24
Unknown
So group master for example this works with advanced grouping as well. So if you want one particular field to control the behavior of the rest, like if that field is hidden the rest of the fields will hide. Then you can specify a group master. We've got the ability to specify whether or not we want uniform font size in the group.

00:22:34:26 - 00:23:03:07
Unknown
So to be honest, we want this turned off in this particular, group because there's two different sizes of font we want to maintain. For this example. We've got spread behavior which was existing even prior to these advanced options. So that's just allowing things to move based on based on the visibility of other things. There's other tutorials on that, and it's not the focus of this particular webinar.

00:23:03:09 - 00:23:35:03
Unknown
And then what we're focusing on here is advanced options. So I'm going to say here that we've got the ability to specify in what axes we want this particular group to be varied in. So we've got adjust vertically, which is what we're going to do here. I just horizontally, which is what we'll deal with kind of in this central panel here and with the columns over here and then much lesser used.

00:23:35:05 - 00:23:58:18
Unknown
We've got control vertically and horizontally. Now we'll get a bit. I'll get into a bit more detail on this later on as to why that's very little used. But what that essentially will do is give you some diagonally stacked, fields where you're just controlling the, the horizontal and vertical. So you're specifying a position and then specifying a position that way.

00:23:58:20 - 00:24:23:28
Unknown
So you end up with them diagonal if you want the behavior like we've got in this one or in this one, then we'll use a different approach, which I'll talk about later. So I'm going to say adjust vertically. This is where we get the option to specify our boundary item. If we have one. So there it will show me all of the empty, image frames that I can select from.

00:24:24:00 - 00:24:50:16
Unknown
I can select my boundary. That means it will disappear from this prevailing list underneath. Now what this list has ignoring the align options there for a moment, is all of the different fields that are present within that group. And this is the main place where we want the order to be specified. Because this is where things, things positioned directly above or below each other will directly impact on one another.

00:24:50:17 - 00:25:11:20
Unknown
So this needs to be in the order that you want it to behave in. So let me just check the mine's correct. I've got the header text divider, image divider and text. So I'm happy with that particular order.

00:25:11:22 - 00:25:37:24
Unknown
Okay. So if I go into the more details on one of these options. So I'll go into my left panel header for example, go into my advanced settings and you'll see that I get options for top, bottom and height. So what that means is the top margin of that particular frame, the bottom margin of that particular frame, and then the height of the entire frame.

00:25:37:26 - 00:25:54:19
Unknown
And then equally, if I went to adjust horizontally, that would give me left. So the left margin of the frame, the right margin of the frame and the width of the frame.

00:25:54:21 - 00:25:58:23
Unknown
Okay.

00:25:58:25 - 00:26:23:28
Unknown
Now we see as well in each of these that we have the option to hide the field if the placeholder is empty. I'm going to turn that off for all of these because I want my visibility to be controlled, by other properties. So I'm going to turn those off. Right. Now, if I go in to try and specify, what these top and bottom margins are, you'll see I've got a few different options.

00:26:24:00 - 00:26:51:09
Unknown
So I've got self and that will maintain the margin of what is currently specified in InDesign. So if I go for self here for example you can see that's eight points. And that is going to be if I just select both of those. Fields. That's going to be the difference here between the top of that header text area and the boundary that I've specified.

00:26:51:17 - 00:27:05:01
Unknown
So that's self if you keep it as self it means that that gap will always remain at that site regardless of what else you you get.

00:27:05:03 - 00:27:28:00
Unknown
We then have value, which is where you can actually physically specify what that gap is going to be. So you've got various different, units that you can choose from. And then you can specify what that particular margin is going to be. And then you've got auto. Now I'll come on to more examples of this later. But what that allows you to do is to automatically distribute space.

00:27:28:03 - 00:27:52:23
Unknown
So whatever remaining space there is, after you've done all you're with the specifications and however you want it set up, it allows you to automatically distribute the space either in margins or you can do it in, in this actual size of the fields themselves. Now, I do have a diagram I want to quickly show you, which goes through this.

00:27:52:25 - 00:28:03:11
Unknown
And this is where I struggle to find my correct page. Okay, let's try this.

00:28:03:13 - 00:28:35:01
Unknown
Not the best, but hopefully it's clear enough. And you do have access to this page as well. So this is just a very basic explanation of how these different, margin methods actually work and how they calculate the space. Because think about it. If you've got, let's say our header and our text here. So these two, the header has a bottom margin and the text has a top margin.

00:28:35:03 - 00:29:00:14
Unknown
So we need to know how those two actually combine and relate to each other when we're specifying these options so that we get the correct spacing between them. So we'll start off with self. So that uses the distance taken from the InDesign file. So the notes I've got here is that even though in event displays both the left and the right margins.

00:29:00:14 - 00:29:21:17
Unknown
So for example, if you've got well let me go through with the example I've got here. So we've got two sample fields which are side by side. And then in the middle we've got specified what the right margin of the left field is going to do. Well, the left margin of the right field is going to do. And then a total gap as it would appear in mega edits as a result.

00:29:21:19 - 00:29:51:17
Unknown
That's the basic premise of this simple example. If we just used self, even though in the event, window the user interface, it will show self as in this case ten millimeters. For both of those margins, it will still only use the total gap that is available in that InDesign file. So even though it will say self ten for one margin and self ten for the other margin, the total gap is only ten.

00:29:51:19 - 00:30:22:23
Unknown
So that's all it will use inside Mega Edit. That's probably the most confusing one of the bunch. Then if you look at value, that's a lot easier to understand. So if we specify, for example, ten millimeters on the right margin and then another ten millimeters on the left margin, and that's specified with our value option. Then the total gap as it appears in Mega read it as a result will be 20mm.

00:30:22:25 - 00:31:01:14
Unknown
Okay. And then the next option we have is auto. So as I've mentioned auto allows a waiting to be applied between the available space and to control how that distribution happens. So. In addition to automatically getting it to calculate what that space is, we can also specify a weighting of that automatic distribution. And what this basically means is that if you apply a weighting of one that will have less space allocated to it than something with a weighting of of two.

00:31:01:16 - 00:31:27:09
Unknown
For example, this allows us to control that spacing. So in my example here, for example, I'm saying for example, what I've got weight one and weight one on both of my margins. The total gap we've got available in Mega Credit is ten millimeters. So therefore it just distributes five millimeters on each of the margins there. Nice and easy.

00:31:27:11 - 00:31:49:15
Unknown
If we've got weighting two on one of the fields and weighting one on the other, the weighting two will have the bigger distribution. And that's proportional. So basically if we still have that ten millimeter gap weighting two we'll get 6.6mm weighting one will get 3.3.

00:31:49:17 - 00:32:14:09
Unknown
And then an important consideration with this is that when you're considering the gap to the boundary. So for example if we're looking at our thing here where we've got our header area, its top boundary is top margin. Sorry is going to be going directly to the boundary. Now in that point of that consideration there's only one margin being considered.

00:32:14:09 - 00:32:36:19
Unknown
There's no opposing margin for it to work against. So that just needs to be considered and factored in. When you're setting up your template. So I've got an example here which hopefully shows it the available gap, not including the fields themselves, is 30mm. And what we want is ten on one side, ten in the middle and ten on the other side.

00:32:36:21 - 00:32:54:17
Unknown
But as a result, that means that we have to define weight two on the outer margins, the ones that hit the boundary and then weight one on the inner margins. And that will mean that we get an equal distribution amongst all of them.

00:32:54:19 - 00:33:12:11
Unknown
Hopefully that makes sense. If you do need some more time staring at this diagram for that to sort of sink in, then this diagram is available on that page. Showed you.

00:33:12:13 - 00:33:21:27
Unknown
Yes. It works the same vertically as well.

00:33:21:29 - 00:33:42:28
Unknown
Okay. Right. So I apologize if I run out of time before we do all three panels here. By the way, it's, taking a bit longer to explain this than I thought. Keep going. So let's replicate that behavior with that information in here. So what we want to do is the it's always going to be stuck to the top and the bottom.

00:33:43:00 - 00:33:49:03
Unknown
So what that means if I go to my group.

00:33:49:06 - 00:34:04:10
Unknown
My left panel header which is right at the top, the top margin is always going to be 0.0mm, whatever you want it to be, because it's sticking to the top and we don't want it to move.

00:34:04:13 - 00:34:24:04
Unknown
The bottom of that element is going to be a set value as well. And that's going to be zero because we want that to be snug against the field which appears underneath it in this example. So in this case we want it to be snug with the text area that appears underneath it.

00:34:24:07 - 00:34:36:15
Unknown
The height of that one I'm going to leave itself because we don't want that one to resize dynamically. And then we'll move on to our first text panel.

00:34:36:18 - 00:34:48:16
Unknown
So again the top margin of our text is going to be zero because we want it to be flush against the the panel that precedes it.

00:34:48:18 - 00:35:11:26
Unknown
The bottom is going to be zero. But then the height of this one is going to be controlled by the content that is within the field. So this is an important point. So when we're actually controlling the size of the field we get an additional option there which is content based. So the size will change based on what is whatever is in that field.

00:35:11:29 - 00:35:24:13
Unknown
Okay. We have a divider which is static. So I'm just going to leave all of those as.

00:35:24:16 - 00:35:44:05
Unknown
Zero margin and leave the height to self. And then the other interesting one here is the actual image panel itself. So the image frame. So this is the one we need to dynamically resize based on everything else. So the top and bottom margins will be the same as the others. We will go into some more creative margins later on.

00:35:44:07 - 00:36:05:02
Unknown
And then the actual size of that one, the height size of that particular image is going to be automatic. So that's going to be automatically calculated based on the remaining space. Bear in mind there we can specify a minimum and a maximum size if it's relevant to your scenario as well.

00:36:05:04 - 00:36:18:08
Unknown
Okay. I'll just do the other two panels quite quickly because they are very similar to ones we've already done. And then my second text.

00:36:18:10 - 00:36:43:02
Unknown
Will be contact. Now, in the interest of saving time, what I was going to do is actually physically export this. Now put it into a new mega edit product. But in the interest of saving time, we'll just again review what that does in the final product, because that is at this point all you need to do to actually set that up and get it working on the left panel.

00:36:43:05 - 00:36:52:16
Unknown
So as a reminder, the behavior that that gives you.

00:36:52:18 - 00:37:27:22
Unknown
We can control the text that's in these panels, which will always appear. And then. The image will rescale depending on what we've specified. Yeah. The top and the bottom always remain bolted to the outside of that panel. So it's always fill in the entire space. Other options we've got here still using those same options. I've used some logic to say that if I uncheck these areas, then the text box and the divider in the header will disappear.

00:37:27:25 - 00:37:53:08
Unknown
But because we're still using those, those specified options, as soon as we hide those fields, our image now becomes the top of the list. So whatever the top margin is for that image now becomes against the boundary. And because we specified the margin of zero, it means that that image is now snapping straight to the top. I can do the same with the bottom.

00:37:53:10 - 00:38:02:08
Unknown
And there we get a full size image.

00:38:02:11 - 00:38:17:16
Unknown
Okay, hopefully that makes sense. I'm going to very quickly move on to the right panel. If you do have any questions again please feel free to put them in the, in the box.

00:38:17:19 - 00:38:30:05
Unknown
Right. So. Looking at the right hand side.

00:38:30:08 - 00:38:55:21
Unknown
Okay, so a very quick reminder of what this one was supposed to do. So we've got two things being controlled here. And I'm actually going to show you a little little tip for this. It really helps when you're actually trying to troubleshoot any problems as you're trying to make these. If you hold Ctrl shift and D and I apologize if it doesn't work for you, but I don't think this is happening and I think this will work for you guys as well as your as you're working on this.

00:38:55:24 - 00:39:21:19
Unknown
That will just show up all of the outlines of the frames it's a debugging mode for. So you can actually see what's going on. So what you can see we've got here is we've got a, a boundary for the, the columns here. The columns are positioned sort of essentially horizontally. And what we get is both horizontal and vertical behavior.

00:39:21:20 - 00:39:36:16
Unknown
So as I start to put in some text that widens that text field, it will make sure that both columns are centered overall, even if they're not equal in width.

00:39:36:18 - 00:39:55:11
Unknown
It's that some more random text in there you can see that things are rescaling as such, and then the same will occur if I go for the other one. And then also if I start to put in more lines.

00:39:55:14 - 00:40:19:16
Unknown
It's doing a similar behavior to the left panel. But instead of pinning the the contents of the top on the bottom is now just distributing the space that we have available. So this is a greater use of the automatic, distribution rather than just using one image as automatic. We're now using a lot of the margins as automatic.

00:40:19:23 - 00:40:30:13
Unknown
So all that space is getting distributed and everything stays nice and even on the page.

00:40:30:16 - 00:41:01:06
Unknown
Now, one thing I do need to mention before I forget, if you do end up trying this yourself, This dynamic resizing of nested groups that I'm going to show you. So what we've basically got here is a subgroup which contains the columns, and that's within a larger group, which is the entire panel. If you try if you try this within the next few days, you'll find that you can't resize the subgroup based on the content of the subgroup.

00:41:01:08 - 00:41:23:00
Unknown
It's just a small bug that was found in the, in the functionality. It's been repaired and it's going to be, deployed quite soon. I'm using a, prerelease version of the InDesign script, the event script, which is repairing that behavior. So if you do try and recreate it and it's not quite working as expected, that's probably why.

00:41:23:03 - 00:41:30:25
Unknown
Right.

00:41:30:27 - 00:41:36:23
Unknown
Okay.

00:41:36:26 - 00:42:05:21
Unknown
So I'm just checking my notes. So what I'm going to do is launch our InDesign file, and I don't want to use a boundary for this one. So I'm happy with the fact that the two columns for the subgroups are going to be controlling what the actual boundary is, because we can make it so that it scales, and it maybe doesn't need to be anything other than, the boundary created by the grouped fields themselves.

00:42:05:27 - 00:42:18:02
Unknown
Again, it's very situational. When you would use that boundary field. So what I'm going to do is just select the columns. If I can find them.

00:42:18:04 - 00:42:25:25
Unknown
So there's two of my columns. Group those together.

00:42:25:27 - 00:42:42:27
Unknown
So if I write up a column. And then my. Whoever wants.

00:42:42:29 - 00:43:07:12
Unknown
A look right. So again another little tip for you if you are having to do sort of nested groups, then you probably want to work from the lowest level group upwards rather than the other way around. You just make it a lot easier for you. So start from the lowest level group in the tree, which in this case is my columns, and then work upwards.

00:43:07:12 - 00:43:22:25
Unknown
So specify everything here. Then I'll take it over and test it to make sure it works. And then once you're happy with that, then put it in a larger group and specify the behavior of the larger group.

00:43:22:27 - 00:43:34:08
Unknown
Oh okay. Right. So I'm going to enable both of those groups.

00:43:34:10 - 00:43:58:07
Unknown
And then I'm going to set the behavior here to be adjust horizontally for both of those groups. Because this one we're not looking at vertically at the moment. Well we're splitting out the horizontal in the vertical behavior completely here into these two separate groups. So these two groups we've made at this point, at this point in time are both horizontal behavior and they have no boundary item specified.

00:43:58:07 - 00:44:05:20
Unknown
So we can just leave that.

00:44:05:22 - 00:44:29:24
Unknown
Okay. Make sure that you're happy with your, your stack order of your fields. So the same way it works top to bottom before you kind of working left to right here. So you're looking at the left and right margin of the left column first and then the right column second for me, which is exactly what I want, which is all good.

00:44:29:27 - 00:44:58:13
Unknown
Right. So the behavior we've got here is that we want to maintain a central gap. It doesn't change. And it's the outside space that's going to be modified to try and keep it central. So what we've got and I've not pointed out so far is some pre configuration options. All these options do is some pre-created scenarios where it will automatically set some of the options that are within these advanced settings.

00:44:58:15 - 00:45:20:10
Unknown
So for example if I say aligned left you can see that automatically adjusts those settings to be what it considers to be aligned left. Chances are that when you select one of these, it won't do exactly what you want first time. So my recommendation is to fine click the one that you think is closest, but then still go through and fine tune exactly what this is.

00:45:20:17 - 00:45:24:25
Unknown
You're going to want this to do.

00:45:24:27 - 00:45:51:19
Unknown
So what I'm going to do is specify one of our examples here. I'm going to go with space around. It's probably quite a close one. So that will mean that we always have automatically calculated space around the, the edge of all the fields. That automatically changes everything to auto. But that's not exactly what I want. So I'm going to change that a little bit.

00:45:51:21 - 00:46:11:25
Unknown
So starting off with my inner boundary here, that I want that to be a fixed value that doesn't change is a total value. I want a four millimeters distance. So I'm going to specify two millimeters on each of those relevant margins.

00:46:11:28 - 00:46:25:00
Unknown
So the right margin on my left box and the left margin on my right box. So what I wrote left and right goes on in this.

00:46:25:02 - 00:46:48:29
Unknown
Okay. And then our outer margins need to be that automatically calculated amount. And then you just need to be an equal weighting. It doesn't matter if it's one, two or whatever. In this case, as long as they're equal, it means that we'll get an equal distribution of that remaining space that we have available. So just to keep it nice and simple, I'm going to go for a weighting of one on each of those.

00:46:49:01 - 00:47:10:03
Unknown
And maybe I don't want it to go too close to, to the edge. So maybe I'll put in a minimum value there as well. Just so if you can avoid it. It doesn't go too close to the edge.

00:47:10:06 - 00:47:31:25
Unknown
Okay. Now, again, in the interest of time, I won't replicate that on the bottom, but that is exactly the same functionality. And then what I'm going to do is multi-select. Well, I'm going to create our upper level group now a higher level group. So I'm going to multi-select all the fields that we have in the right panel here rather than selecting the individual columns.

00:47:32:02 - 00:48:03:06
Unknown
I'm going to select the group. And it's the group that's going to appear within our event tab. Here. So if I say for example so we've got our header. We've got our upper column group. I'm not going to select the individual fields within the group divider. So right. So our group. And that should be everything in there.

00:48:03:09 - 00:48:11:07
Unknown
I'm going to put that into a group, make sure that group's renamed and enabled.

00:48:11:10 - 00:48:18:07
Unknown
Add a boundary if you feel you need it. I'm not going to do it. In the interest of time.

00:48:18:09 - 00:48:29:14
Unknown
And then enable, what you'll see is that instead of all the individual fields, we actually get the group as part of this.

00:48:29:16 - 00:48:59:20
Unknown
So, within there I've got right up a column and right row a column. They've appeared as, entries in my stack. This is vertical behavior that we're controlling. So I can say it just vertically. If I have one, I can specify a boundary. And then again, I can start modifying these fields. And when we're looking at the entire group, it's exactly the same set of options that you have with individual fields.

00:48:59:21 - 00:49:22:21
Unknown
So even if you're modifying a subgroup like we have here, you're still saying, well, what's the top margin of the group? What's the bottom margin of the group? What's the height of the group? All left right and width. So in this case we want a nice weighting. All around all around that particular product. So everything is nicely spaced.

00:49:22:24 - 00:49:59:12
Unknown
So I might go for just one of the preexisting options there, which is space around. And what that will give us is all of the interior margins will have a weighting of one. The exterior margins will have a weighting of two. And that will mean all of the spacing is the same between all of the different gaps.

00:49:59:14 - 00:50:09:06
Unknown
Okay. That's it for that particular panel as well.

00:50:09:09 - 00:50:35:16
Unknown
So as a very quick reminder of what that does, I'll put on our debugging mode again, this space all around these different fields, if I modify. That text it will distribute our space. And our horizontal behavior is being controlled individually by those subgroups.

00:50:35:19 - 00:50:57:12
Unknown
Right. So very quickly let's have a look at our central panel. Now this isn't much this new to be honest. We've covered most of it in the left and right. This is just got multiple nested groups. And this is where the recommendation of going from the bottom level group up really comes into play, because it just makes it much, much easier.

00:50:57:14 - 00:51:22:29
Unknown
And what I also want to very quickly show you here is why it's important to really consider what your margins are going to be, because it can get you into trouble if you, don't really think about how they're going to operate. So. What I'm going to start with here is our lowest level group on the central panel, which is going to be these three contact details areas.

00:51:23:02 - 00:51:29:03
Unknown
So I'm going to select all of those.

00:51:29:05 - 00:51:41:27
Unknown
Put those into a group.

00:51:42:00 - 00:51:50:16
Unknown
Enable that group.

00:51:50:19 - 00:51:54:23
Unknown
And.

00:51:54:26 - 00:52:16:18
Unknown
Let's start setting some behavior. So this is what we want this to do is centralize based on which ones are showing and hiding. So if the zone if there's all three showing, it's this behavior here. If there's two showing so one's hidden it will redistribute them. So they're sort of centralized vertically. And then if there's only one showing it will just show the send to central.

00:52:16:22 - 00:52:34:26
Unknown
It'll show it in the middle regardless of which one of those details it is. So we repositions based on how many there are. But we do need to be careful about how we specify the margins because, for example, if we hide this, this top field.

00:52:34:28 - 00:53:07:09
Unknown
Let me show it. Let me let me try and get a more practical example here. So we might say adjust vertically. Let's say our top margin is. Zero because it's flush against what the boundaries our bottom margin might be self. So it maintains what that distance is. And then all of our interior margins might remain as self in theory because we think, oh well it's all nicely positioned in InDesign.

00:53:07:12 - 00:53:36:18
Unknown
So I'm just going to leave it with what it is. We might even put the top one itself. However, if you then hide this top field for whatever reason, so let's say is empty and then you say okay, well it's going to centralize. That is field number two. That's then going to have the top boundary margin. So whatever you've specified as your your top boundary behavior for field number two is now going to be prevalent at the top of the field.

00:53:36:20 - 00:54:01:16
Unknown
So for example, if you'd specified a value of zero here, when all three are present it's going to be bolted to the top of your boundary. But if you then hide the first field, then the second field is automatically going to bolt to the top of the boundary because it's using self as its margin. So hopefully that kind of illustrates why you need to really pay attention to how you're configuring these things.

00:54:01:16 - 00:54:20:05
Unknown
It might be a little bit of trial and error while you're getting used to it. But just remember that you can set different values for the top and the bottom margin. If you're making things disappear, you can make it so things have got equal spacing around and all that kind of stuff. Well, what we're going to do in this one is nice and simple.

00:54:20:05 - 00:54:36:12
Unknown
We're just going to say space around vertically, same as we did here, so that everything is nice and centralized.

00:54:36:15 - 00:55:02:11
Unknown
Okay. I'm then going to go for my next group up. So that that group we just made is doing vertical behavior. Our next group up is going to be doing horizontal behavior. So we've got two image frames and this group here. And what we want this to do is quite similar. So if we hide either of the image frames or everything within that central group, then we want the remaining fields to all be squashed and centralized into the middle.

00:55:02:11 - 00:55:21:16
Unknown
So we've not got some, some offset either side. So if I go to I apologize if all of this is repetition, I'm just trying to really drill the point in time here. Let's see. So.

00:55:21:18 - 00:55:48:11
Unknown
Here is a central panel left image contact details group and right image. Select all three of those. We don't need to individually select the fields inside that subgroup.

00:55:48:13 - 00:56:08:27
Unknown
And then I'll do this really quickly. Remember in this case it's going to be a just horizontally rather than vertically. We've not bothered with a boundary again. So we can leave that as not because it's not required as such. And then again, in my case I might want to go space around just to make sure that there's an equal distribution of spacing.

00:56:09:00 - 00:56:30:08
Unknown
But we can modify those settings to be more applicable to our own scenario if we want to do so. So that's two nested groups. Now we've got one more group which is again looking at vertical behavior. So this is the entire contents of that central panel. So I'm going to select the main image a boundary if we had one.

00:56:30:08 - 00:56:34:05
Unknown
But I've not specified one here.

00:56:34:07 - 00:56:50:12
Unknown
So the main image, the group that we just made and that bottom disclaimer as well. I'm going to group those together. Rename it.

00:56:50:14 - 00:57:06:01
Unknown
It's going to be vertical behavior boundary item if we have one. And then this behavior is going to be slightly different. Just as a as a final one here. So we want it that it's bolted to the top.

00:57:06:03 - 00:57:28:08
Unknown
But then if we move things down or so if we get rid of these fields then the image will change size to sort of fill that remaining space. So again make sure that our stack is in the correct order. So I'm happy with my top value is going to be zero. My bottom value is going to be self.

00:57:28:08 - 00:57:45:21
Unknown
So it maintains this spacing between the contact group and the image. But then my height is going to be auto. So that's going to auto calculate the height.

00:57:45:24 - 00:58:02:14
Unknown
Okay. We'll say the margins for the group here are self self and we'll just leave it as self so it doesn't change. And then our disclaimer we'll set the bottom to.

00:58:02:16 - 00:58:22:10
Unknown
Auto I think so that it will not try and pin stuff to the bottom all the time. We just double check that. So what I did in my other one.

00:58:22:13 - 00:58:30:11
Unknown
And I've got it pinned to the bottom. And then the bottom.

00:58:30:13 - 00:58:52:10
Unknown
My top as self and then my height as self. So that's more or less the the distribution of settings I want there. It might need a bit of fine tuning because I'm rushing a little bit based on time. But what that behavior will do, you know final one here. So obviously we've got some rules and variables associated around this.

00:58:52:10 - 00:59:19:00
Unknown
Allow me to show and hide these different fields. But what we should see some quite neat behavior where based on what fields we've got filled, it will show or hide. And then based on the rules that we've specified, it will reposition everything to to accommodate those rules that we've set. So for example, if I put a second image in here, oh, that one with my other image.

00:59:19:03 - 00:59:37:25
Unknown
And that's.

00:59:37:27 - 01:00:01:01
Unknown
A bad example I don't think I've selected the right image that that you see today. So for example, if I get rid of this second image, it centralizes those fields because it's keeping all the horizontal group centralized. And then if we start to hide some of these options.

01:00:01:04 - 01:00:09:10
Unknown
It expands that image to suit.

01:00:09:12 - 01:00:33:20
Unknown
Okay. So I think that's all I wanted to show you today. Apologies if anyone's having to jump. Because I've hit the time limit, and I want to be a couple minutes from now. Just to show you the things that are available in the resources. If you want to try and replicate this, I'll take a look. So all of those things I've used can be downloaded, and you can see the final product on a test storefront.

01:00:33:22 - 01:01:01:14
Unknown
I've got a couple of GIFs which are showing the expected behavior of the product. There's a step by step guide of what I've set in that particular product. If you want to reference. There's a few tips and tricks which might be quite useful, which I've hopefully mentioned most of them as we've gone through the content today. And then that margin explanation diagram, in case you needed for reference, is in that material as well.

01:01:01:16 - 01:01:10:18
Unknown
And then once I've processed the video, once we've finished this, I'll upload it here so that everything's all in the same place.

01:01:10:21 - 01:01:32:14
Unknown
Okay. So I think that's about it. If you've stayed with me for this long, thank you very much, I appreciate it. And I hope you found it useful. And I hope it's been new content for you as well. So. Yeah. So based on this, I look forward to seeing some even more amazing invent templates. So go and create.

01:01:32:17 - 01:02:20:21
Unknown
Let us know if you make anything good that you want us to showcase. And, I'll speak to you next time, which will be the webinar in about a month or six weeks time. So thank you very much. I'll speak to you soon.