Creating From a Template

Selecting a Template & Renaming It

Once you click on a template, it will open as a copy in your Workspace. If you close it (by clicking on the “E” logo in upper left), you’ll see that it’s located in your Workspace with the original file name.

Before you do anything else, make sure to rename your Design! Navigate to the “Home” section (first tab in right panel), then click on the pencil icon. This will open a popup window with editable fields for Title and Subtitle.

We recommend the following naming convention, and that you put the same information for both Title and Subtitle.

YY-Event or Region-Title of Project or H1-Post Platform-version#

Examples:

19-Devcon-Diamond Sponsors Confirmed-Email-v2
19-NA-Living with Humans Webinar-Tw-v1

Pro Tip: We DO NOT recommended using the other two buttons in the Home panel (Resize, Duplicate), as this will resize your backgrounds automatically. Instead, to create another image with different sizing, go back to Templates/Team and select from there each time.

Next, select the Page variation that best suits your needs.

Pro Tip: Delete any Pages you won’t be using (optional, but it helps to clean up your file and avoid confusion).

Gathering Assets

Before you begin, please note the following:

NEVER use images taken from Google Image searches! We could be heavily penalized for using copyrighted images without permission (\$1000 or more)
ONLY use photos from certified free stock photo sites: Rawpixel, Unsplash, Pexels
If you need a partner logo, or need a logo to be formatted as white PNG, please request it in the Slack channel with hashtag #logoRequest and say specifically what you need.

Depending on the template you choose, you may need to gather some visual assets, such as background photos, speaker headshots or logos. Based on template type, this is what you’ll need:

Blue Overlay 1-6 - background photo, minimum 1200 px wide
- Refer to Photography Best Practices below for more tips on selecting a suitable background image
Blue BG 1-3 (Pages 1-2 only) - speaker headshot (does not need to be in a circle shape, as it will be cropped to a circle via Easil)
Co-branding (any template) - requires a white, transparent PNG. JPEG logos will not work.

Uploading & Placing Assets

Navigate to the Images panel from the vertical icon menu.

To upload your assets, click on the button to the right of the Search bar and select an image from your computer via the popup window.

Background Photo

To insert a background photo, delete the template one, then click on or drag your desired image onto the Page.

With image still selected, select “Background”, and it will expand to fit the width of the page.

If you want to enlarge and crop, use the corners to resize the image, then drag it to fit the way you want on the page. Any portion of the image that extends beyond the edge will be cropped.

Pro Tip: You may need to zoom out in order to see and drag the corner handles.

For tips on composition, please refer to Best Practices/Photography.

Adding a Speaker Headshot

This only applies to Pages with a green circle.

Click on the green circle so that it is selected.

In the Images panel, upload a speaker photo, drag it over the green circle, and release once the pointer is over the circle.

Once you release, the photo should appear cropped within the circle.

To enlarge/move the photo within the circle, double-click on it. A small pop-up should appear with further instructions. Once you’ve resized and positioned the image the way you want, click “Crop” in the popup window.

The cropped image should now appear in the circle. Delete/hide the pink instructions text.

Co-branded Logo

Some designs will require the inclusion of a second logo, such as partner-related materials or joint event promotions. For these co-branding needs, each template has a hidden layer named COBRAND.

To access this layer, go to the Layers panel, which shows you a list of all visual elements on your page, in order of visibility.

You can Hide/Unhide layers by clicking on the eye icon. Hidden layers are dark grey, unhidden layers are light grey.

Hide liferay-logo-white-1x, then unhide the layer group COBRAND. Once COBRAND layer is unhidden, you should be able to see the pink co-branding box+instructions on the Page.

In the Images panel, upload a white, transparent PNG version of a co-brand logo you want to include. (Note that JPEGs will not work here.) Then, drag it to the Page.

Align the logo to the left edge of the pink box, resize it to fit within, and then vertically center it. For tips on sizing your logo so that it is visually balanced, please refer to Best Practices/Co-branded Logos.

After the size and position are finalized, delete the pink rectangle and pink text.

Editing Text Fields

Before you begin, please keep in mind:

All visual components (text boxes, buttons/CTA, speaker headshots) should be either left- or center-aligned to the Liferay logo, depending on the layout.
DO NOT move visual components left and right, only up and down

Double-click on a text field to start editing. Highlight the sample text, then type or paste in your text.

Pro Tip: If you are copying your text from another application, make sure to use Paste Without Formatting(Mac: command-shift-v, Windows: ctrl-shift-v). This preserves the template’s text styles.

If you have more or fewer lines than the sample text, adjust the vertical spacing accordingly, so that each line of text is more or less evenly spaced.

If your text doesnt fit within the box, try the following (in this order):

Shorten the amount of text--this will be easier to read, too
Add an additional line of text
Slightly decrease text size. Don’t make it noticeably smaller, as this will cause the header hierarchy to be lost.

Pro Tip: To select more than one item, hold down Shift while clicking on items

Beware of:

All templates are already aligned correctly. Do not enlarge text boxes or move them (and other visual components) left to right, as this will will affect the alignment and cause it to be off. Here is an example of a design whose visual components are not aligned properly:

This version below works because it has even spacing between the lines yet maintains enough breathing room around each text component. The entire text block has also been moved down slightly so that it is more vertically centered.