Requirements before you begin
Access to the Template Designer
An existing Template you wish to edit (or a new Template)
One or more images you wish to use as an overlay or background
In this article, we will outline how to use the Top Layer panel to add image overlays to your Template, how the Background area works, and how the two are connected.
Overview
The screenshot below shows Qompose's new and improved Template Designer:
This is the background selection area, you can choose from a solid colour or an image. This article will document how to make use of images as background layers.
This is the background canvas, the Upload button allows you to upload an image directly to the background layer. You can also drag and drop content from the Top Layer panel to quickly set already-uploaded content as your background layer.
This is the Top Layers panel, where you can upload images to use as your Top Layer. As per step 2, you can drag and drop any content from this area into the background area to set this as the Template's Background Layer.
Uploading images to your Top Layer
The Top Layer panel is used to store images ready to be added either as an overlay on your canvas or as your Template's Background.
Head to the Top layer tab on the left-hand navigation of the Template Designer
Click + Media
Select one or more images from your device
Top Tip
You can now select multiple images at once when uploading to your Top Layer. Previously, only one image could be uploaded at a time.
Once uploaded, your images will appear as thumbnails within the Top Layer panel, ready to be used as an overlay or a Background.
Adding a Top Layer image as an overlay
Dragging an image from your Top Layer panel directly onto the canvas places it above all other layers on your Template. This is the standard way to add logos or overlay graphics that should always remain visible on top of your other content.
From the Top layer panel, click and drag your desired image onto the canvas
Setting a Template Background
The Background area, found within the Properties panel on the right-hand side of the Template Designer, shows a visual preview of whatever image is currently set as your Template's Background.
You can set a Background in one of two ways:
Uploading a new image directly:
Within the Background section, click Image
Click Upload
Select your image
Please Note
Uploading an image this way immediately sets it as your Template's Background and automatically adds it to your Top Layer panel, so it's available for reuse without uploading it again.
Using an image already in your Top Layer:
Drag the desired image from the Top layer panel directly into the Background preview box, located in the bottom right of the Properties panel (bottom right hand side of the user interface as per the screenshot above)
Top Tip
Because any image uploaded via the Background box also lands in your Top Layer panel, you only ever need to upload an image once — after that, it's available for both overlay and background use.
Summary
The Top Layer and Background areas of the Template Designer are closely linked: any image uploaded to either one becomes available to the other. Dragging a Top Layer image onto the canvas adds it as an overlay above all other content, while dragging it to the Background box sets it as your Template's Background. With support for multi-image uploads to your Top Layer, building overlays and backgrounds is faster than ever, without the need to re-upload the same asset twice.