Show details for Configuring text fields in MegaEdit | ID:ME_009

Configuring text fields in MegaEdit | ID:ME_009

In this tutorial, we will investigate the options available for the text fields. These are fields where a customer is able to place text on to the canvas area. The administrator / template designer has full control over the customisation options available to the customer. For example, the customer could be given a fully dynamic text frame, with almost as much customisation options as seen by the administrator. Or on the other end of the scale, options available to the end user could be heavily restricted, so they can do little more than type into a completely fixed frame. We will also explore how to review our dynamic template as a customer would, to ensure the desired customisation options are available.

Tutorial Video Transcript

00:00:11:17 - 00:00:12:18
In this tutorial

00:00:12:18 - 00:00:15:21
we'll investigate the options
available for text fields.

00:00:16:13 - 00:00:18:22
These are fields
where a customer is able to place

00:00:18:22 - 00:00:20:25
text onto the canvas area.

00:00:22:03 - 00:00:26:24
The administrator or template designer
has full control over the customization.

00:00:26:24 - 00:00:29:05
Options available to their. Customers.

00:00:29:21 - 00:00:34:09
For example, the customer could be given
a fully dynamic.

00:00:34:09 - 00:00:37:24
Text frame
with almost as much customization options

00:00:37:24 - 00:00:42:00
as seen by the administrator themselves
or on the other end of the scale.

00:00:42:01 - 00:00:45:22
Options available to the end user
could be heavily restricted.

00:00:45:22 - 00:00:47:07
So they can do little more.

00:00:47:07 - 00:00:50:10
Than typing into a completely fixed text
frame.

00:00:50:10 - 00:00:51:28
For example.

00:00:53:01 - 00:00:56:15
We're also going to explore how to review.

00:00:56:15 - 00:00:58:01
Our dynamic templates as a.

00:00:58:01 - 00:01:00:18
Customer would to ensure that the desired.

00:01:00:18 - 00:01:04:19
Customization options are available.

00:01:06:17 - 00:01:08:19
So we'll start off
in the administrative area.

00:01:09:12 - 00:01:10:07
On the

00:01:11:06 - 00:01:14:04
MegaEdit products screen.

00:01:15:24 - 00:01:18:02
So to begin,
we're going to apply some font.

00:01:18:02 - 00:01:20:06
Options to MegaEdit products.

00:01:20:25 - 00:01:24:09
So uploading custom
fonts is also possible.

00:01:24:09 - 00:01:26:20
But this will be covered
in an additional tutorial.

00:01:27:09 - 00:01:28:12
In this one, we're just going.

00:01:28:12 - 00:01:30:20
To enable the default Infigo font set.

00:01:31:11 - 00:01:31:26
So if I.

00:01:31:26 - 00:01:35:02
Find my MegaEdit product
and then edit that,

00:01:36:11 - 00:01:39:02
this is the area
where we previously uploaded

00:01:39:03 - 00:01:43:07
all selected canvas
stock and output type options.

00:01:43:20 - 00:01:45:27
Now we're just going to go
to our font section.

00:01:47:12 - 00:01:48:00
Make sure that.

00:01:48:00 - 00:01:51:09
We have the default
Infigo fonts selected,

00:01:52:21 - 00:01:55:18
and then click Save
and that just make sure

00:01:55:18 - 00:01:58:19
that we actually have some fonts available
within

00:01:58:19 - 00:02:01:05
this particular product.

00:02:01:05 - 00:02:02:08
Next, we're going to launch

00:02:02:08 - 00:02:07:10
The MegaEdit Editor, which I've already
got on this second tap here.

00:02:10:15 - 00:02:11:29
So with the MegaEdit editor.

00:02:11:29 - 00:02:13:24
Loaded. We can drag a text.

00:02:13:24 - 00:02:15:19
Frame. Onto the canvas.

00:02:15:19 - 00:02:18:04
Either by. Selecting it.

00:02:18:04 - 00:02:18:24
And dragging and.

00:02:18:24 - 00:02:22:11
Dropping, or we can.

00:02:22:11 - 00:02:26:18
Actually just click on the text
frame to add another text frame to our.

00:02:26:18 - 00:02:28:28
Canvas.

00:02:31:20 - 00:02:33:06
Now, one of the options that we have.

00:02:33:06 - 00:02:34:24
With our text frame or text.

00:02:34:24 - 00:02:36:21
Field is the same as we saw.

00:02:36:21 - 00:02:38:10
With the image. Field.

00:02:38:10 - 00:02:41:18
So starting with the basics, you've got
a lot of transformation options.

00:02:41:19 - 00:02:43:25
So we can reposition.

00:02:44:13 - 00:02:46:18
We can resize,

00:02:47:04 - 00:02:49:21
the can rotate,
and then when we double click.

00:02:51:01 - 00:02:53:20
The text field that will load up.

00:02:54:16 - 00:02:56:07
This pop up window.

00:02:56:07 - 00:02:58:28
Which will give us all of our text
options.

00:02:58:28 - 00:03:02:13
And again, it works in pretty much
the same way as we saw in a previous.

00:03:04:16 - 00:03:05:17
Tutorial.

00:03:05:17 - 00:03:08:23
With the image field.

00:03:09:14 - 00:03:10:08
So we'll start off

00:03:10:08 - 00:03:14:27
with the Text Options tab.

00:03:14:27 - 00:03:16:02
And the first. Thing that this.

00:03:16:02 - 00:03:18:03
Shows us is a font selector.

00:03:18:12 - 00:03:20:00
So this lists all of the fonts.

00:03:20:00 - 00:03:24:11
That were made available
by selecting a particular font set

00:03:24:20 - 00:03:28:24
in that admin area
that we did a few moments. Ago.

00:03:30:02 - 00:03:38:16
So for example,
if I type something into this. Box.

00:03:38:16 - 00:03:41:20
I of course just have the ability
to change the utilize

00:03:41:20 - 00:03:43:24
font.

00:03:48:15 - 00:03:49:22
The Image Options tab

00:03:49:22 - 00:03:52:23
also allows you to format and customize.

00:03:52:23 - 00:03:54:25
The text content of your frame.

00:03:55:10 - 00:03:56:12
So some of the available.

00:03:56:12 - 00:03:58:24
Options that are in here include.

00:03:58:24 - 00:04:00:15
Modifying the text. Appearance.

00:04:00:15 - 00:04:03:07
So adding effects,
which is bold and italics,

00:04:03:07 - 00:04:06:15
if that's being included
in your font specification.

00:04:07:04 - 00:04:09:23
So if you upload custom fonts,
you'll need to make sure that you have

00:04:09:23 - 00:04:14:00
the relevant information
for these options.

00:04:14:00 - 00:04:15:00
You can change the. Color.

00:04:16:09 - 00:04:16:29
So you can do this.

00:04:16:29 - 00:04:17:20
In a few ways.

00:04:17:20 - 00:04:22:17
You have a color picker, you can specify
an RGB value if you wish to do so.

00:04:22:17 - 00:04:24:13
CMYK value.

00:04:24:13 - 00:04:28:04
Or if you specified spot colors
which will be in a future tutorial,

00:04:28:15 - 00:04:31:00
you'll be able to specify
spot colors from here as well.

00:04:31:09 - 00:04:33:16
So these are pre. Defined colours

00:04:33:16 - 00:04:42:27
That you want to be able to choose
between.

00:04:44:13 - 00:04:46:06
We have horizontal and vertical text

00:04:46:06 - 00:04:50:22
alignment.

00:04:50:22 - 00:04:52:19
We have a text scale slider.

00:04:52:19 - 00:04:54:23
Which allows us to change the font. Size.

00:04:54:23 - 00:04:58:22
And then direct entry to the font size

00:04:58:22 - 00:05:03:09
and incremental change of the font size.

00:05:04:07 - 00:05:05:17
We have arrangement options.

00:05:05:17 - 00:05:06:09
So if there's.

00:05:06:09 - 00:05:09:14
Multiple frames

00:05:09:14 - 00:05:11:03
stacked on top of one another
and you want to.

00:05:11:03 - 00:05:13:15
Change
which one is appearing at the. Front.

00:05:13:15 - 00:05:14:17
Then as with. The.

00:05:14:17 - 00:05:18:26
Image field that we saw in a previous
tutorial, you can just change the order

00:05:20:17 - 00:05:22:05
in the z axis

00:05:22:05 - 00:05:25:24
of those individual fields.

00:05:28:02 - 00:05:30:07
And finally,
we have a few management options.

00:05:30:07 - 00:05:32:12
This just gives us the ability
to delete the field,

00:05:33:01 - 00:05:37:06
duplicate,
and then some text specific ones.

00:05:37:20 - 00:05:41:21
So we have one which is fit text to box,
so that will resize

00:05:41:21 - 00:05:45:03
the actual frame itself
to fits the currently

00:05:45:12 - 00:05:48:00
input text.

00:05:49:21 - 00:05:51:03
We have clear formatting.

00:05:51:03 - 00:05:53:08
So that will revert it to our.

00:05:53:10 - 00:05:55:02
Saved format to.

00:05:55:02 - 00:05:59:04
Save text format
and then we can set a default format.

00:05:59:04 - 00:06:02:26
So if we want the current specification
to be our default text specification,

00:06:04:06 - 00:06:06:18
then we can save that format as well.

00:06:06:18 - 00:06:09:16
However, if I click to revert,
it should go back to that red format

00:06:09:16 - 00:06:12:27
that we had previously.

00:06:18:05 - 00:06:19:11
The next tab along is the

00:06:19:11 - 00:06:22:12
show Advanced Text Options.

00:06:25:04 - 00:06:28:08
So on this tab, you can

00:06:28:23 - 00:06:30:02
primarily.

00:06:30:02 - 00:06:32:07
Put in fit to box options.

00:06:33:00 - 00:06:35:26
So this is kind of the opposite.

00:06:35:26 - 00:06:38:05
Of the functionality
I showed a moment ago.

00:06:38:05 - 00:06:42:23
This means you adjust the size of the text
font.

00:06:43:18 - 00:06:46:16
You're just the size of the text
to fit the size of the box

00:06:46:16 - 00:06:47:26
that you have specified.

00:06:47:26 - 00:06:51:13
So let's say that you want the text
to fill that particular area.

00:06:52:19 - 00:06:55:14
If we specify that we want it
to fit to box.

00:06:55:25 - 00:06:57:01
Then it's going to rescale.

00:06:57:01 - 00:07:00:18
The actual text contained within it
so that the box is filled

00:07:02:08 - 00:07:03:01
By default.

00:07:03:01 - 00:07:05:02
It will show as a minimum
and a maximum font.

00:07:05:02 - 00:07:06:21
Size of minus one.

00:07:06:21 - 00:07:08:08
This means that there's no limits.

00:07:08:08 - 00:07:11:09
It will just keep reshaping to fit

00:07:11:20 - 00:07:14:03
that particular box
no matter what you type in it.

00:07:14:17 - 00:07:17:15
But you can do
maximum and minimum font sizes.

00:07:18:20 - 00:07:20:11
You can also specify a text wrap

00:07:20:11 - 00:07:27:06
if you want it to split
onto multiple lines.

00:07:27:06 - 00:07:30:10
Moving down a little bit,
you have the ability to force upper or

00:07:30:10 - 00:07:30:24
lower case

00:07:30:24 - 00:07:35:27
If you wish to do so.

00:07:35:27 - 00:07:37:04
And then you've got options.

00:07:37:04 - 00:07:38:24
For line height, character.

00:07:38:24 - 00:07:42:19
Spacing,
word spacing and paragraph spacing.

00:07:44:05 - 00:07:46:11
Next along,
we have border and shadow options.

00:07:46:11 - 00:07:47:11
So these are just.

00:07:47:11 - 00:07:51:21
Adding effects to our fields
or our individual text.

00:07:53:02 - 00:07:56:14
So our borders will create a border
around the entire field.

00:07:57:04 - 00:07:59:25
It's also in here
that we can apply a background color

00:07:59:25 - 00:08:02:04
to the entire field

00:08:10:27 - 00:08:15:16
and change the opacity we which to do so.

00:08:15:16 - 00:08:18:17
And then we have the shadow option
which just allows us to define a shadow

00:08:18:29 - 00:08:19:20
on the individual.

00:08:19:20 - 00:08:21:13
Lettering and to.

00:08:21:13 - 00:08:24:08
Modify the design of that shadow.

00:08:25:06 - 00:08:27:12
Now finally
on here we have the details tab.

00:08:27:26 - 00:08:30:08
So from an administrator and template.

00:08:30:08 - 00:08:31:16
Designer perspective.

00:08:31:16 - 00:08:33:24
The details tab is the most critical.

00:08:33:24 - 00:08:36:06
Of the tabs available here.

00:08:36:06 - 00:08:38:28
Within this type,
you can control the frame or.

00:08:38:28 - 00:08:40:25
Text customization. Options.

00:08:40:25 - 00:08:43:24
That a customer is able to access.

00:08:43:24 - 00:08:44:28
So there's a lot of different.

00:08:44:28 - 00:08:47:10
Options available. Within this tab.

00:08:47:10 - 00:08:50:26
What they essentially do is enable
or disable the individual.

00:08:50:26 - 00:08:52:26
Customization options that we can see.

00:08:52:26 - 00:08:54:19
And these are the tabs.

00:08:54:19 - 00:08:57:23
Additional things you can do in
there is disable.

00:08:57:23 - 00:08:59:23
The ability to load this pop up at all.

00:08:59:23 - 00:09:01:11
For an end user.

00:09:01:11 - 00:09:05:19
You can disable the ability to move
or to rotate the field.

00:09:06:24 - 00:09:11:03
You can make it
so that the frame can't be selected

00:09:11:03 - 00:09:14:28
or can't be deleted for customization over
what the end

00:09:14:28 - 00:09:19:11
user is able to do.

00:09:19:11 - 00:09:20:24
Also in here, and particularly.

00:09:20:24 - 00:09:25:15
Relevant to a text field,
is this placeholder text.

00:09:25:28 - 00:09:28:00
So this is just a text
that will be shown if.

00:09:28:00 - 00:09:29:07
There's no.

00:09:29:07 - 00:09:35:14
Custom text written in the field itself.

00:09:35:14 - 00:09:37:04
So if I remove the text that I've.

00:09:37:04 - 00:09:40:00
Written in there.

00:09:40:00 - 00:09:43:23
You can see that
it displays a placeholder text.

00:09:43:23 - 00:09:45:15
So if we add a few restriction options.

00:09:45:15 - 00:09:47:16
To here just to test this out.

00:09:47:16 - 00:09:49:20
So if I say, for example, I don't want.

00:09:49:20 - 00:09:51:28
The user to be able to do anything here.

00:09:52:12 - 00:09:53:04
Apart from.

00:09:53:04 - 00:09:56:19
To actually change the text
that's contained within the text field.

00:09:57:12 - 00:10:00:23
So I could say, for example,
it's going to be fixed position.

00:10:02:00 - 00:10:05:23
I can't change the field size.

00:10:05:23 - 00:10:09:09
Maybe I don't want to allow them
to open the pop up so this whole.

00:10:09:09 - 00:10:11:21
Pop up will be disabled.

00:10:12:01 - 00:10:16:08
And I want to restrict the ability
to delete the field.

00:10:16:08 - 00:10:17:11
However, I still wants to.

00:10:17:11 - 00:10:20:12
Be able to select it
so I can actually override the text.

00:10:20:12 - 00:10:23:05
So maybe I'll leave
the do not select field

00:10:24:17 - 00:10:29:11
disabled.

00:10:29:11 - 00:10:30:22
Now as an.

00:10:30:22 - 00:10:34:06
Administrator, I'm always going
to have access to all of these options so.

00:10:34:06 - 00:10:34:20
I can't.

00:10:34:20 - 00:10:38:28
Verify in this mode that the options

00:10:38:28 - 00:10:42:02
I've selected
are going to be valid for for our.

00:10:42:02 - 00:10:43:01
Users.

00:10:43:16 - 00:10:45:05
However, I have got an emulation.

00:10:45:05 - 00:10:48:02
Mode which lets me
see the product as a user, would see it

00:10:48:02 - 00:10:51:08
and interact with the product
as a user would interact with it.

00:10:53:01 - 00:10:53:18
So if I go to.

00:10:53:18 - 00:10:55:19
Menu.

00:10:55:19 - 00:10:57:10
The first. Option in my admin.

00:10:57:10 - 00:10:57:27
Section.

00:10:57:27 - 00:11:01:03
Is emulate user mode

00:11:02:02 - 00:11:02:17
that will now

00:11:02:17 - 00:11:05:27
allow me to interact as a user would.

00:11:05:27 - 00:11:07:07
So I can't do much with this.

00:11:07:07 - 00:11:07:16
I can.

00:11:07:16 - 00:11:07:23
Still.

00:11:07:23 - 00:11:10:05
Rotate
as I haven't disabled that in my options.

00:11:10:19 - 00:11:12:23
I can't reposition, I can't.

00:11:12:23 - 00:11:14:27
Load up the the. Pop up window.

00:11:15:17 - 00:11:21:09
However, I can still override the text.

00:11:22:14 - 00:11:25:05
Finally,
you may come across a couple of issues.

00:11:25:13 - 00:11:27:07
With your text fields.

00:11:27:07 - 00:11:29:15
Primarily,
these are just positional issues.

00:11:31:00 - 00:11:33:12
So if I move the text field off the canvas
itself.

00:11:33:24 - 00:11:35:19
You see that
I get. This warning appearing.

00:11:35:19 - 00:11:37:16
And it's saying
that there are positional issues.

00:11:38:17 - 00:11:39:05
Now this is.

00:11:39:05 - 00:11:40:13
Just a warning.

00:11:40:13 - 00:11:43:13
So you still be able to ignore the issue
by clicking here,

00:11:43:24 - 00:11:46:07
or you can still progress the basket.

00:11:46:07 - 00:11:48:12
However, if you don't want.

00:11:48:12 - 00:11:49:16
Those to be appearing,

00:11:49:16 - 00:11:52:26
your two options are to either
move the fields so completely on.

00:11:52:26 - 00:11:54:06
The canvas

00:11:54:27 - 00:11:57:26
or you can disable positional warnings
completely.

00:11:58:09 - 00:12:00:23
By going to. Menu.

00:12:00:24 - 00:12:02:27
Products options

00:12:04:06 - 00:12:07:10
going right down to

00:12:07:10 - 00:12:09:11
general field features.

00:12:09:11 - 00:12:15:22
And then we have an option here, which is
do not check for positional issues,

00:12:15:22 - 00:12:19:08
which will just
remove that check completely.

 

Incomplete
Step by Step Guide

Configure text fields in MegaEdit

In this tutorial, we will investigate the options available for the text fields.

These are fields where a customer is able to place text on to the canvas area.

The administrator / template designer has full control over the customisation options available to the customer. For example, the customer could be given a fully dynamic text frame, with almost as much customisation options as seen by the administrator. Or on the other end of the scale, options available to the end user could be heavily restricted, so they can do little more than type into a completely fixed frame.

We will also explore how to review our dynamic template as a customer would, to ensure the desired customisation options are available.

Creation Date: Nov 22, 2022
Created By: Sam Webster

1. Navigate to your MegaEdit Products screen

To begin, we will apply some font options to our MegaEdit products.

Uploading custom fonts is also possible, but will be covered in another tutorial. In this tutorial, we will enable the default Infigo font set.

Navigate to your MegaEdit Products screen

2. Click on Edit

Click on Edit

3. Click on Font

Click on Font

4. Select font sets

By default, Infigo will contain a font set named Infigo Default Fonts. Select this for inclusion in this MegaEdit product.

Select font sets

5. Click on Save changes

Click on Save changes

6. Navigate to the MegaEdit product and hit Start to launch the MegaEdit editor

Navigate to the MegaEdit product and hit Start to launch the MegaEdit editor

7. Click on Fields

With the MegaEdit editor loaded, drag a text frame on to the canvas by clicking and dragging from the Add Text button.

Click on Fields

8. Transform the text frame

The text frame can be resized, rotated or repositioned from this view.

Resize - Click and drag one of the black boxes around the outside of the frame.

Rotate - Click and drag the black square offset from the centre top of the image frame

Reposition - click and drag the interior of the image frame.

Transform the text frame

9. Resize the frame

Resize the frame

10. Rotate the frame

Rotate the frame

11. Resposition the frame

Resposition the frame

12. Open the text options

Double click a text frame to open up the Text Options window.

This window contains all of the controls required to adjust the content of a text frame.

Open the text options

13. Highlight the text and select a font

The Text Options tab contains a font selector. This lists all fonts made available by the selections in the Infigo admin area, at the start of this tutorial.

Highlight the text and select a font

14. Image Options tab

The Image Options tab allows you to format and customise the text content of your frame. Some of the available options include:

  • Modify text appearance such as bold or italics

  • Change the text colour

  • Horizontal and vertical text alignment within the frame

  • Text scale slides and font size input

  • Rearrange the order, moving the frame forwards or backwards on the canvas

  • Delete the text frame

  • Duplicate the text frame

  • Fit the text to fill the specified frame size

  • Clear text formatting

  • Save current text format as default text format

Image Options tab

15. Advanced Text Options tab

On this tab, you can:

  • Force an upper or lower case text selection

  • Adjust the line height

  • Adjust the character, word and paragraph spacing

Advanced Text Options tab

16. Border and Background Options tab

On this tab, you can:

  • Apply different border styles to your frame

  • Control the design of the border, such as the colour or corner radius

  • Apply a background colour with opacity control

Border and Background Options tab

17. Shadow Options tab

On this tab, you can control:

  • Enable or disable a shadow on the chosen text

  • Control the position, blur and transparency of the shadow

  • Control the colour of the shadow

Shadow Options tab

18. Experiment with shadow settings

Experiment with shadow settings

19. Details tab

From an administrator and template designer perspective, the Details tab is the most critical. Within here, you can control the frame / text customisation options that a customer is able to access.

There are many options in this tab, essentially enabling or disabling the individual customisation options discussed in the previous steps.

In addition, a few regularly used options are listed below:

  • Restrict movement direction to certain axes

  • Do Not Select - customers cannot select the image frame and therefore cannot access the Image options or transform it

  • Do Not Delete - Prevents the user from deleting the image frame

  • Help text - Provide helpful tips to a user

  • Placeholder Text: Apply text for use when no other text is present in the frame

Details tab

20. Click on Menu, then Emulate User Mode

This option allows you to interact with your template as a customer would, based on your settings.

Click on Menu, then Emulate User Mode

21. Text field issues

Reposition the frame until the warning seen below appears.

Positional issues will appear if the frame sits outside of the main canvas area.

The image causing these issues will show a yellow warning icon, with details of the issues accessible in the bottom right pop up box.

Description of issues will be displayed in the pop up, giving suggestions on how to identify and resolve these issues.

Text field issues
Alternate Search Terms