Editing and Designing

Add Media

For Third-party media:

  1. Select the Third-party media tab (picture icon) at the top of the Element panel
  2. Select the media library you want to use
  3. Click on or drag the media into the Workspace area

To add your own media:

  1. Navigate to the media on your device
  2. Drag and drop the media into the Workspace area

Studio supports gif, jpe, jpeg, jpg, m4v, mp4, png and webm file formats.

Backgrounds

Adding a Color Background

Select the background and then click on the color picker under Page Background in the Design panel and select a tile from Default colors or choose Custom to add your own color or create a gradient background.

Adding an Image or Video Background

To add a background image or video, select the image or video from the media gallery and click the "Set as background" option in the Design panel under the Size & Position tab. It will be resized to fit your Page.

Editing a Background Image

When adding a background image, it will be resized to fit your Page. To change the image placement or crop the image, double click on the shape and use the slider to increase/decrease the image size and drag it into a new position. You can also right-click on the background layer and select “Scale & Crop Background Image”.

Removing a Background

To remove a background image or video, select the background layer and click the “x” icon or right-click on the background layer and select “Detach Image From Background”.

Texts and Fonts

Adding Text

To add text to your media, select the Text tab at the top of the Element panel. You can add a preset text by clicking one of the options within the text tab. This will automatically add the text to your Page. There are also Text Sets available to choose from. Double-click on the textbox added to your Page to edit the text and click outside the textbox once you’re finished.

Formatting Text

On selecting a preset text or text set, the Design panel will open on the right hand side which allows you to modify the text properties such as position, size, font and color.

Text Box / Text Highlight

To add background color to the textbox, or highlight your text, go to the select your text and go to the Text box options in the Design panel.

  • To add background color to the full textbox, select “Fill”.

  • To add background color to the text only, select “Highlight”.

You can adjust the color by clicking on the color picker and selecting a tile from Default colors or choose Custom to add your own color. You can also adjust the opacity level.

To add padding, enter a size into the padding box. This will add consistent vertical and horizontal padding but if you wish to have different padding sizes, select the Lock icon and change the values.

To remove a background color or text highlight, select “None” from the Text box options. Then clicking "Fill" or "Highlight" again will bring back your previous changes.

Removing Text

To remove text, select the textbox and select the Backspace keyboard button.

Shapes & Stickers

To add shapes and stickers to your Page, head to the Shapes & Stickers tab at the top of the Element panel. Click on a shape or sticker to add it to your Page. You can change the color, size and position using the Design panel.

To remove, a sticker or shape, click on the element and select the Backspace keyboard button.

Masking and Cropping

You can mask and crop media by adding shapes. Select a shape to add it to your Page, then drag and drop an image or video from the media library into the shape.

To change the image placement or crop the image, double click on the shape and use the slider to increase/decrease the image size and drag it into a new position.

Click anywhere outside the image to finish.

Page Templates

Navigating to the Templates tab at the top of the Element panel allows you to save the current Page as a template, view existing templates, and delete templates.

To save the current Page as a template select 'Save current page as template' and it will appear in the grid of saved templates. This saved template will save everything on the Page - the background, any images, shapes, stickers, text, and the position of all of these.

To remove a saved template, hover over the template in the Templates panel and select the bin icon in the top right corner and then click Delete.

Rotating and Resizing Elements

Select the element, textbox or media that you want to edit. To rotate, hold the circular handle and drag to the left or right. To resize, select any of the square handles on the corners and drag in or out.

Click anywhere outside the selected element to finish.

Applying Filters

To add a filter to an image or video, click on the media you wish to edit. Filter options will appear in the Design panel. Select a filter to apply it to the image. You can adjust the color and opacity level or switch between them by clicking on a different filter. To remove a filter, select “None” or right click on the image and select “Clear Image Styles” from the submenu.

Borders and Corner Radius

You can add borders and corner radius to images, videos and text boxes. Select the element on the Page and go to the Border/Corner radius options in the Design panel.

Note that it may appear as though there is a small gap between the image and the border when viewing the Page in Studio. This gap will not be present when previewing Stories as described in the Creating Stories documentation or when the Page goes live.

Adding a Border

To add a border, enter a pixel size in the box. This will create a consistent border width but if you wish to resize the border this, select the Lock button and change the width for each side.

To change the border color, click on the color picker and select a tile from Default colors or choose Custom to add your own color. You can also adjust the opacity here.

Adding a Corner Radius

To add a corner radius, enter a pixel size in the box and this will create a consistent corner radius. If you wish to have a different corner radius, select the Lock button and change the size for each corner.

Remove a Border/Radius

To remove a border or corner radius, type “0” into the size box.

Layers

To change the order of elements/layers:

  • Go to the Layers tab at the bottom of the Design panel. Select a layer and drag it up or down the Layers panel to move it into a new position. (To expand the Layer tab, click on the tab at the top of the layer panel where it says Layers, hold the mouse down and drag it to expand).

  • Right-click on the element in the Workspace and choose a command from the submenu.

The background layer is always at the bottom of the stacking order. Therefore, the “Send To Back” command places the selected item directly above the background layer.