Introduction

The Design Editor in LoftyWorks offers a variety of tools to help you create and customise your designs. This article will guide you through the key features, including adding and editing content, managing pages, and using general controls like keyboard shortcuts and UI buttons. Learn how to personalise your designs with text, images, icons, and more, while also exploring advanced options such as image replacement and profile photo integration.

To get to know about this design centre, reference Getting Started with the LoftyWorks Design Centre.

Summary

Adding Content
Editing Content
Adding Pages
General Controls

Adding Content

To add content, click on the type of content that you would like on the left side. You can choose from text, photos, elements, icons, and logos.

Once you have found content that you would like to add to your design, you can either click what you want to add and it will appear on the design or you can drag and drop it on your design:

You can upload additional images/photos or icons by selecting that content type and then clicking to browse:

You can access your properties to pull their images into your designs within the Design Centre.

Editing Content

To edit content, simply click on the content that you would like to edit within your design and then adjust accordingly. For example, selecting this text content allows you to edit the font, size, colour, etc. If you double-click the text content box, you will be able to type in what you would like to replace the filler text:

Editing an element or an icon will allow you to change opacity and fill colour:

Adding Pages

To add additional pages to your design, click on the two arrows in the top left:

And then click on the large + icon:

Alternatively, you can also hover on an existing page to copy that page or delete it:

General Controls

Keyboard Shortcuts

The following keyboard shortcuts are now supported when interacting with elements in the Design Centre:

(a) CTRL/CMD+C (Copy)

(b) CTRL/CMD+V (Paste)

UI Buttons

Use these icons in the top-right to do the following:

Adjust canvas size
Add canvas image
Review and adjust content layers

Use this toolbar to do the following when selecting a specific object in your design:

Bring forward
Send backward
Bring to front
Send to back
Align left
Align centre
Align right
Group
Ungroup
Crop image, save, cancel
Clone
Delete

With an object selected, you can also open up the side menu to adjust shadows, styles, and many more items. The menu will change slightly depending on the content of the object that you have selected.

Image Replacement

You can select an image and replace it with another one with the click of a button:

Agent Profile Photo

When designs are added to the Design Centre, images can be tagged as an agent's profile photo. This means that when the design is used, the system will automatically check the CRM for a headshot profile photo and automatically use that one in the design. These images can only be tagged on upload by LoftyWorks. If there is no profile photo available in the CRM then it will not replace it at all.

Questions?

If you have any questions about this topic or anything else, please get in touch with our Support Team. You can email us at <Support@LoftyWorks.com> or call us on +44 330 321 3500.

Design Editor Overview