Show details for Backgrounds in MegaEdit | ID:ME_020

Backgrounds in MegaEdit | ID:ME_020

In this tutorial, we will learn how to apply a range of selectable backgrounds to our MegaEdit products, using a resource set named Background Categories.

Tutorial Video Transcript

00:00:13:07 - 00:00:13:19
In this

00:00:13:19 - 00:00:17:12
tutorial, we'll learn how to apply a range
of selectable backgrounds

00:00:17:12 - 00:00:21:06
to our MegaEdit products
using a resource set named background

00:00:21:06 - 00:00:22:17
categories.

00:00:24:06 - 00:00:28:01
Now these are specified on a canvas
specification themselves.

00:00:28:01 - 00:00:30:05
They're not separate sets of resources.

00:00:30:19 - 00:00:33:12
So we begin by navigating to our MegaEdit

00:00:33:12 - 00:00:36:22
canvas specifications.

00:00:37:04 - 00:00:40:07
Easiest way to get to that
is to type in canvas in the search box

00:00:41:05 - 00:00:41:28
and then go to mega.

00:00:41:28 - 00:00:44:25
Edit Canvas.

00:00:47:00 - 00:00:49:05
We can either create a brand new canvas

00:00:49:05 - 00:00:54:28
or edits one of our existing ones,
and then the category

00:00:54:28 - 00:00:58:13
we're going to be focusing
on is covered in the third tab here.

00:00:58:14 - 00:01:07:28
So background categories.

00:01:09:13 - 00:01:12:11
So before we go any further,
a background category

00:01:12:11 - 00:01:16:16
just allows us to apply a range of images
which we can use

00:01:16:16 - 00:01:20:17
to cover the entire background
of our specified canvas.

00:01:21:10 - 00:01:25:09
That means that you should pay careful
attention to the size of the images

00:01:25:09 - 00:01:26:24
that you upload here

00:01:26:24 - 00:01:30:15
For example,
if we have an A4 canvas, if we upload

00:01:32:05 - 00:01:35:03
an image which
is in a completely different aspect ratio,

00:01:35:12 - 00:01:39:00
it's going to stretch that image
to cover the entire A4 canvas.

00:01:39:14 - 00:01:42:23
So what you want ideally is an A4

00:01:42:23 - 00:01:44:27
canvas, A4 image,

00:01:46:02 - 00:01:47:28
A5 canvas, A5 image,

00:01:47:28 - 00:01:50:25
and so on and so on.

00:01:52:09 - 00:01:55:00
To create our category,
we go to add a new record,

00:01:56:08 - 00:02:06:12
puts a name and description, specify

00:02:06:12 - 00:02:09:07
whether or not we want this to be an admin
only category

00:02:10:08 - 00:02:15:08
and click insert.

00:02:15:08 - 00:02:18:22
From there we're going to click Configure

00:02:20:13 - 00:02:23:03
and in simple case of uploading the files,

00:02:23:03 - 00:02:25:29
we want to be able to utilize

00:02:32:09 - 00:02:35:12
the cam multi-site files if we wish.

00:02:35:12 - 00:02:38:15
So you can upload multiple at once

00:02:39:28 - 00:02:41:04
and progress will be shown.

00:02:41:04 - 00:02:42:14
Is that uploading?

00:02:42:14 - 00:02:44:21
And then any that upload successfully

00:02:45:20 - 00:02:48:02
will be displayed
as thumbnails at the bottom of this

00:02:48:02 - 00:02:54:17
list,
you do have the ability to redownload

00:02:54:17 - 00:02:58:23
those images by clicking on the
the name link themselves.

00:02:58:23 - 00:03:01:11
Or if you go to the
settings icon, you can rename

00:03:02:12 - 00:03:04:13
each of those individual backgrounds.

00:03:05:29 - 00:03:07:15
You also have the ability to delete

00:03:07:15 - 00:03:14:16
them.

00:03:14:16 - 00:03:15:27
We scroll down a little bit.

00:03:15:27 - 00:03:18:25
We also have the ability
to define background colors

00:03:18:29 - 00:03:21:07
to a background category.

00:03:21:07 - 00:03:24:20
This works in much the same way
as the images here, however,

00:03:24:20 - 00:03:27:15
allows you to define
a solid color backdrop.

00:03:29:03 - 00:03:30:09
So this is easy to do.

00:03:30:09 - 00:03:33:09
I just click on add background color,

00:03:33:09 - 00:03:35:12
specify the name
I want to use for my color,

00:03:37:03 - 00:03:40:22
and then my two options
are to either directly input a hex value

00:03:41:04 - 00:03:43:08
or I can activate this color picker

00:03:44:24 - 00:03:46:29
where I can also enter an RGB value.

00:03:48:10 - 00:03:51:00
A HSL value or again

00:03:51:00 - 00:03:54:24
we can enter our hex value.

00:03:55:17 - 00:03:57:03
and then those resources are

00:03:57:03 - 00:04:04:16
now saved.

00:04:04:16 - 00:04:09:12
So as they are saved to a particular
canvas, every time a product is utilizing

00:04:09:12 - 00:04:14:09
that canvas, those background resources
will become available.

00:04:14:17 - 00:04:18:23
Now I'm going to launch this
MegaEdit product.

00:04:19:14 - 00:04:20:16
So on the left hand side

00:04:20:16 - 00:04:25:19
we have a new tab available, which is the
background selection clicking on there.

00:04:25:19 - 00:04:29:00
We can see the under our background
category, which is the one I created.

00:04:29:11 - 00:04:33:27
We now have three solid colours
which are the specific colours I specified

00:04:34:09 - 00:04:38:00
and then all of those different background
images displayed as thumbnails.

00:04:39:16 - 00:04:42:23
Applying those to
any of our pages is really, really simple.

00:04:43:19 - 00:04:46:05
Just navigate to a page

00:04:46:05 - 00:04:48:13
and then drag and drop

00:04:48:13 - 00:04:53:26
from the thumbnail
on the left hand side onto the page.

00:04:53:26 - 00:04:57:13
And remember that it will stretch
the image to fill the entire page.

00:04:57:14 - 00:05:07:07
This is why it's very important
they are the correct size.

00:05:07:07 - 00:05:10:21
If you want to override any of the
backgrounds that you've specified,

00:05:11:07 - 00:05:15:03
simply drag
another option onto that same page.

00:05:15:03 - 00:05:16:18
If you want to save that as you default

00:05:16:18 - 00:05:20:11
format, just go to menu
and save as product default.

00:05:20:29 - 00:05:24:28
And that is now what will load up
when the product is activated in

00:05:24:28 - 00:05:29:07
the MegaEdit Editor.

 

Incomplete
Have a question? Tutorial out of date? CLICK HERE to add a comment and let us know 80%
4 / 5
Step by Step Guide

Backgrounds and Layouts

In this tutorial, we will learn how to apply a range of selectable backgrounds to our MegaEdit products, using a resource set named Background Categories.

We will also discover how to create pre-configured page layouts. MegaEdit editor allows you to Add/Edit Layouts to your product. There are unlimited variations of layouts to create since they can be made exactly for your needs. You can modify the layouts and make multiple images per page or single image per page.

Creation Date: Jan 09, 2023
Created By: Sam Webster

1. Navigate to your Canvas resources

Both backgrounds and layouts are specified on a specific canvas. Begin by navigating to your canvas specifications.

Navigate to your Canvas resources

2. Click on Edit next to your canvas of choice

Click on Edit next to your canvas of choice

3. Click on Background Categories

Click on Background Categories

4. Click on Add new record

Click on Add new record

5. Specify category details and click on Insert

This will create the category on our canvas. Now, we must apply resources to that category.

Specify category details and click on Insert

6. Click on Configure

Click on Configure

7. Click the upload area and select files to use as your background options

These should match the size of the canvas being used. A background image will always stretch to fill the available canvas area, meaning a mismatch in sizing could cause the background image to be distorted.

Click the upload area and select files to use as your background options

8. Successfully uploaded background images will be displayed as thumbnails

Successfully uploaded background images will be displayed as thumbnails

9. Click on Add Background Color

You also have the ability to define background colours to a background category. This works in the same way as the images above, however allows you to define a solid colour backdrop.

Click on Add Background Color

10. Complete the colour name and select/enter your colour of choice, then click OK

Complete the colour name and select/enter your colour of choice, then click OK

11. Multiple background colour options can be defined

Multiple background colour options can be defined

12. Click on Back

Our background category specification is complete.

As we have created this category on a specific canvas specification, they will be available wherever this canvas available for a product.

Click on Back

13. Click on Layout Categories

Layouts are specified within the MegaEdit editor itself.

The only action we need to take in the admin area is to create a Layout Category in which to save our layout designs.

Click on Layout Categories

14. Click on Add new record

Click on Add new record

15. Complete category information and click on Insert

Complete category information and click on Insert

16. Navigate to and launch your MegaEdit product in the MegaEdit editor

17. Click on Background selection and select a category

Click on Background selection and select a category

18. Drag and drop background designs onto pages within your MegaEdit product

Drag and drop background designs onto pages within your MegaEdit product

19. You can change the background design by dragging and dropping another design on top of the previous o

You can change the background design by dragging and dropping another design on top of the previous o

20. Saving new layouts

Layouts allow you to save the design and position of different MegaEdit elements into a single selectable option.

For example, the image below shows a page containing a background, clipart and two stylised image fields. These can all be saved as a single layout for simple replication in other pages or other products using this canvas specification.

Saving new layouts

21. To save a new layout, click on Layouts then Add/Edit layout

To save a new layout, click on Layouts then Add/Edit layout

22. Follow the on-screen instructions to save the layout to a selected layout category.

Follow the on-screen instructions to save the layout to a selected layout category.

23. Your saved layout is now created and ready for use

Drag and drop from the Layouts tab onto your canvas to apply the layout design.

You are able to define as many layout designs as you wish.

Your saved layout is now created and ready for use
Alternate Search Terms