00:00:11:20 - 00:00:14:08
In this tutorial, we're going to discuss
the general
00:00:14:08 - 00:00:17:17
layout and options
available on your MegaEdit editor.
00:00:18:11 - 00:00:21:28
Many of the topics covered in this
tutorial will be covered in more detail
00:00:22:06 - 00:00:25:25
in subsequent tutorials within the series.
00:00:26:10 - 00:00:29:13
So we're going to start off
on the MegaEdit products screen.
00:00:29:13 - 00:00:32:02
So this is the screen where we can see
all of the products
00:00:32:02 - 00:00:36:27
that have already been converted
into MegaEdit products.
00:00:36:27 - 00:00:39:27
And what we're going to do, first of all,
is to actually get to a product
00:00:39:27 - 00:00:43:25
landing page
on the front end of our storefront.
00:00:44:17 - 00:00:46:24
Now, there's a few ways
in which you can do this from here.
00:00:46:24 - 00:00:51:24
The easiest is to go to the product
variant settings so I can just locate
00:00:51:24 - 00:00:57:01
the product of interest
and click on edit product variant.
00:00:57:01 - 00:01:00:13
And then the top of the screen
is a view product page button.
00:01:01:15 - 00:01:02:25
And that will take us directly
00:01:02:25 - 00:01:04:23
to the product landing page.
00:01:06:02 - 00:01:09:26
So in the example we've got here,
the landing page will be fairly simplistic
00:01:09:26 - 00:01:11:05
as we've not fully defined
00:01:11:05 - 00:01:14:06
our product information,
such as descriptions in an image.
00:01:14:20 - 00:01:17:07
However, we do have a few MegaEdit
00:01:17:07 - 00:01:20:23
resource selections
that we've set up in previous tutorials.
00:01:21:17 - 00:01:23:28
So I can make some selections in here
as to the
00:01:25:09 - 00:01:27:17
the products I want to start off with.
00:01:27:17 - 00:01:31:22
So the canvas size, the stock
that I want to use and the output type
00:01:32:15 - 00:01:34:22
and then towards the MegaEdit interface,
00:01:35:13 - 00:01:38:01
I'm going to hit start
00:01:42:21 - 00:01:46:02
now the MegaEdit editor will load
and the default configuration
00:01:46:11 - 00:01:49:09
and using the brand colours specified
in your appearance
00:01:49:09 - 00:01:51:17
settings within the Infigo admin area.
00:01:52:09 - 00:01:56:11
So we'll take a look at adjusting
those settings in a future tutorial
00:01:56:19 - 00:02:01:03
if you want to further
brand the colours on your MegaEdit editor.
00:02:02:16 - 00:02:05:19
What we're going to do
next is just navigate around the editors
00:02:05:19 - 00:02:08:10
screen and discuss the available options
00:02:08:19 - 00:02:11:02
and functionality.
00:02:12:16 - 00:02:15:08
Starting off with the two at the top left.
00:02:15:08 - 00:02:18:24
Here we have back, which will take you
to the product landing page.
00:02:18:24 - 00:02:22:12
So the page we initially came from
and then we have menu
00:02:23:01 - 00:02:27:06
now that will give you access
to the general editor settings.
00:02:27:06 - 00:02:29:03
The options that are available in here
00:02:29:03 - 00:02:32:15
will depend on the customer
role of the logged in user.
00:02:32:27 - 00:02:36:24
So for example, if I'm logged in
as an administrator, as I am here,
00:02:37:10 - 00:02:39:29
then we have a greater amount of options
available,
00:02:41:06 - 00:02:45:21
such as, for example, if we scroll down
to the bottom of this list, you'll see
00:02:45:21 - 00:02:50:08
a section heading which is admin, product
options, everything underneath.
00:02:50:08 - 00:02:54:04
There are options which are only available
to our administrators
00:02:55:03 - 00:02:57:16
and we'll
cover these in a separate tutorial
00:02:58:26 - 00:03:02:07
covering some of the other options
available in the menu
00:03:02:07 - 00:03:06:03
for scrolling back to the top
and our general user settings here,
00:03:06:27 - 00:03:09:09
the first thing we have
is the canvas size.
00:03:10:18 - 00:03:14:00
So the menu itself will display
the currently used canvas size
00:03:14:13 - 00:03:18:00
and if you are
if your product is configured to allow it,
00:03:18:08 - 00:03:21:21
users can modify the canvas size
by clicking on this button.
00:03:22:25 - 00:03:26:08
So if we click that icon there,
a separate window will open.
00:03:26:18 - 00:03:30:13
And this allows users
to select a new canvas or a new stock
00:03:31:12 - 00:03:36:10
based on available specifications.
00:03:36:10 - 00:03:37:07
The details we're seeing
00:03:37:07 - 00:03:40:16
here are the same as those
we saw on the product landing page.
00:03:40:25 - 00:03:45:07
It just allows us to change these details
within the product specification itself,
00:03:45:19 - 00:03:49:04
rather than having to exit the editor
and go back to our product
00:03:49:04 - 00:03:50:22
landing page
00:03:54:14 - 00:03:56:26
once we've chosen a new specification
00:03:56:26 - 00:04:01:08
so I can change my stock and my canvas
size, for example, I hit change
00:04:02:14 - 00:04:02:26
is then
00:04:02:26 - 00:04:06:12
given me a warning saying that the aspect
ratio is changing in this case.
00:04:06:23 - 00:04:08:00
So there's a couple of options
00:04:08:00 - 00:04:11:22
as to how it wants to move elements
that are on the page.
00:04:12:26 - 00:04:17:04
I can click Continue and you'll see that
my stock has now changed because I'm using
00:04:17:04 - 00:04:20:29
a different colored stock in this case
and my canvas
00:04:20:29 - 00:04:29:26
has been updated.
00:04:29:26 - 00:04:34:07
Okay, so a few more options
that are available on our menu list here.
00:04:35:11 - 00:04:38:01
Again,
these options will be available to the end
00:04:38:01 - 00:04:42:08
user,
allowing them to perform common functions
00:04:42:08 - 00:04:45:01
on the MegaEdit template.
00:04:45:14 - 00:04:47:06
So starting off with clear page.
00:04:47:06 - 00:04:50:27
So this removes and resets
all elements from the selected page
00:04:52:07 - 00:04:53:25
we have reset.
00:04:53:25 - 00:05:00:13
So that reverts all changes
made to the page.
00:05:00:13 - 00:05:02:05
We have the editor settings.
00:05:03:24 - 00:05:05:03
So if I click on there, this
00:05:05:03 - 00:05:09:26
allows us to change the editor
to snap, to grid, snap
00:05:09:26 - 00:05:12:11
to objects or a free mode
00:05:13:01 - 00:05:15:28
where you can just sort of drag things
anywhere on the screen.
00:05:16:13 - 00:05:19:14
You've also got the ability
to enable a ruler if you want something
00:05:19:14 - 00:05:23:03
to reference against, you could see that
just appeared in the background
00:05:23:03 - 00:05:27:10
there.
00:05:27:10 - 00:05:32:20
And once I'm happy with that selection,
I can click okay.
00:05:32:20 - 00:05:35:28
And then also available in this dropdown
list, we have the canvas settings
00:05:36:19 - 00:05:39:27
which will just show is the same options
that we see with the canvas size
00:05:39:27 - 00:05:46:08
here.
00:05:46:08 - 00:05:48:13
So moving over to a different part
of the screen.
00:05:48:13 - 00:05:51:03
Next, we have these plus and minus icons
00:05:51:13 - 00:05:59:21
that quite simply zoom in and zoom out.
00:05:59:21 - 00:06:02:07
We have the reset zoom icon.
00:06:02:07 - 00:06:04:07
So that will just take it
to its default, zoom
00:06:05:01 - 00:06:07:25
and we have the enablement
of a full screen mode.
00:06:07:25 - 00:06:09:18
If you want a little bit
more space to work
00:06:09:18 - 00:06:19:02
with, working next to the actual canvas
itself,
00:06:19:18 - 00:06:23:19
you'll notice for zoom in and little bit
that we have a couple of different lines
00:06:23:19 - 00:06:28:26
around the outside of the canvas
and this is representing the page bleed
00:06:29:25 - 00:06:30:15
so the MegaEdit
00:06:30:15 - 00:06:34:01
editor window will show a black
and a red box
00:06:34:23 - 00:06:37:04
around the edge of your canvas
00:06:37:04 - 00:06:39:07
which do represent the page bleed.
00:06:39:07 - 00:06:41:26
So the area between the black
and the red areas
00:06:41:26 - 00:06:45:00
will not be shown
when the product output is previewed.
00:06:45:25 - 00:06:49:29
As this is part of the bleed area,
any images or text in this area
00:06:50:14 - 00:06:53:10
will be cut off.
00:06:53:10 - 00:06:56:00
Next, we'll take a look at this menu
over on the left hand side.
00:06:57:17 - 00:07:02:13
So starting off with fields.
00:07:02:13 - 00:07:05:22
So in this default state,
the field tabs allows the addition
00:07:05:22 - 00:07:08:16
of images and text.
00:07:09:03 - 00:07:14:03
These options can be available to just
administrators and template creators,
00:07:14:15 - 00:07:16:21
or they can be available
to customers as well.
00:07:17:10 - 00:07:27:09
And these options will be configured
in a later tutorial.
00:07:27:09 - 00:07:30:17
So to show you how these work,
what we're going to do is just adds
00:07:30:17 - 00:07:34:27
an image
and a text field to our main canvas.
00:07:35:19 - 00:07:36:23
Two ways we can do this.
00:07:36:23 - 00:07:41:01
We can either just click the button
that's on the left hand side here.
00:07:41:02 - 00:07:43:11
So for example,
I can click to add an image
00:07:44:08 - 00:07:48:15
or you can drag and drop from here
as well onto your actual canvas
00:07:48:28 - 00:07:51:29
to place it in a specific location.
00:07:51:29 - 00:07:56:07
So these fields can both be resized,
they can be rotated,
00:07:56:21 - 00:07:58:10
they can be repositioned.
00:07:58:10 - 00:08:02:06
And if you double click on any of those,
you get a multitude of additional options
00:08:02:06 - 00:08:03:12
available as well.
00:08:03:12 - 00:08:08:10
These will be covered in a future tutorial.
00:08:08:10 - 00:08:12:00
Image galleries
can be added to in figure for use in MegaEdit
00:08:12:18 - 00:08:16:02
So if we come back to the left hand
side in this menu here,
00:08:16:13 - 00:08:19:15
we're going to go down
one option to the Images tab
00:08:23:11 - 00:08:24:27
so I can click add files
00:08:24:27 - 00:08:27:01
to create galleries of images.
00:08:28:05 - 00:08:30:02
So if I click Add Files,
00:08:30:02 - 00:08:33:22
I can just select a few
00:08:34:05 - 00:08:35:02
images that I want
00:08:35:02 - 00:08:37:15
to be able to select between.
00:08:37:15 - 00:08:41:03
So I've just picked two example images
there of the Vigo Academy logo,
00:08:41:15 - 00:08:44:10
and then you'll see that
when I add those images in,
00:08:44:10 - 00:08:46:15
I get the option to either add them to a
00:08:47:12 - 00:08:51:04
an album that we already have
or I can create a new album
00:08:56:11 - 00:08:58:03
and then hit start
00:08:58:10 - 00:09:02:05
and you'll see that both of those
will now be uploaded and available
00:09:02:17 - 00:09:11:17
in that particular image gallery.
00:09:11:17 - 00:09:15:28
With gallery items uploaded, I can drag
and drop images from the gallery
00:09:15:28 - 00:09:20:00
onto the canvas.
00:09:20:00 - 00:09:23:15
This will be added as an image placeholder
field,
00:09:23:25 - 00:09:26:19
which will be pre-populated
with your selected image
00:09:27:02 - 00:09:30:11
and this can be replaced with other images
if required.
00:09:30:15 - 00:09:35:28
So I can just drag another image
from our image galleries over here,
00:09:36:11 - 00:09:41:00
drop it into the field or the frame,
and then it will overwrite the image
00:09:41:00 - 00:09:45:26
that's in there.
00:09:45:26 - 00:09:50:01
The image field that we added separately
so we had initially is essentially
00:09:50:01 - 00:09:51:08
the same as this one here.
00:09:51:08 - 00:09:55:21
So I can still add a new image to
this field just by dragging and dropping
00:09:55:23 - 00:09:57:11
from the image galleries,
00:09:58:12 - 00:10:00:03
dropping into the frame,
00:10:00:03 - 00:10:04:02
and then that image will be added.
00:10:04:02 - 00:10:07:04
Additional options for configuring
these images will be covered in
00:10:07:04 - 00:10:08:25
future tutorials.
00:10:08:25 - 00:10:11:21
So coming down
one more tab to the pages section.
00:10:12:09 - 00:10:16:27
So this tab allows you to add and select
different pages within this product.
00:10:16:27 - 00:10:21:00
So I can click new page to add a new page
to this particular product.
00:10:21:13 - 00:10:24:25
The amount of pages that we can add
is specified in the product
00:10:25:04 - 00:10:27:17
settings
that we did in a previous tutorial
00:10:32:03 - 00:10:34:18
to switch between specified pages.
00:10:35:06 - 00:10:37:10
If we make sure
that we're on the pages tab,
00:10:37:10 - 00:10:40:23
we can just select
between the available pages.
00:10:40:23 - 00:10:41:05
Okay.
00:10:41:05 - 00:10:44:20
We also have a tools tab down here
in the default state.
00:10:44:20 - 00:10:47:26
That tab is empty,
so we'll cover that in later tutorials.
00:10:48:12 - 00:10:50:22
And then a final couple of things to note.
00:10:50:22 - 00:10:53:20
On the bottom left,
we have click to collapse, that will
00:10:53:20 - 00:10:57:00
just give us a little bit more workspace
by getting rid
00:10:57:00 - 00:11:00:10
of this left hand menu.
00:11:00:10 - 00:11:03:15
We also have a preview if configured to do
00:11:03:15 - 00:11:09:26
so on your product.
00:11:09:26 - 00:11:14:05
And we have an
add to basket option as well.
