Skip to main content

Moodboards overview

Updated

Our new client collaboration tool, Moodboards, allows you and your clients to contribute to a shared canvas on your Format site.

Table of Contents

  1. Accessing Moodboards
  2. Creating a Moodboard
  3. Moodboard features
  4. How to add and organize elements
  5. Overview of available elements (text, images, etc.)
  6. Asset layer list
  7. Commenting
  8. Moodboard settings
  9. Mobile editing

Accessing Moodboards

The new Moodboards feature is currently undergoing beta testing, and is not yet available to every Format member. Moodboard release updates will be communicated via our email newsletter and posted updates on your Format account Dashboard.

Using Moodboards, you can create an inspiration canvas and share it with your clients. Your clients are then able to add comments to individual elements on your Moodboard.

Moodboards are part of your site's Workflow panel. You can access Moodboards by navigating to Workflow > Moodboards:

  1. Workflow: Select the Workflow tab
  2. Moodboards: Select Moodboards

Creating a Moodboard

From within the Moodboards panel, you can create new Moodboards or edit existing ones. First, create a new Moodboard:

  1. New Moodboard: Create a new Moodboard
  2. Moodabord Title: Give your Moodboard a title
  3. Assign to Client: Assign your Moodboard to a client
  4. Create New Client: Create a new client to assign your Moodboard to, if necessary
  5. Add Moodboard: Save your new Moodboard

Moodboard Features

If you've used a flex block element on a Custom Page before, you're already familiar with how Moodboards function, since they both use the same interface and many of the same features. Once you add your Moodboard in the previous step, you'll be brought into the Moodboard editor.

  1. Add Element +: Add an element (text, images, video, etc.) to your Moodboard
  2. Undo/Redo: Undo or redo actions taken in your Moodboard. This only affects the current editing session
  3. Switch Editing Mode: Switch between desktop and mobile editing views
  4. Moodboard Status: Choose between Draft, Ready for Feedback, and Complete
  5. Preview: Preview your Moodboard on your live site
  6. Moodboard History and Comments: View actions taken on your Moodboard by clients, and comments left on your Moodboard by clients
  7. Close: Close the Moodboard
  8. Moodboard Section Options: Choose between a range of section options, including:
    1. Layers: View and rearrange the current section's asset layers
    2. Background: Change the section background color, or add a background image or video
    3. Section Options: Adjust margins, padding, and wide width options
    4. Duplicate: Duplicate the currently-selected section
  9. Duplicate/Add Section: Duplicate the currently-selected section, or add a new, blank section below it
  10. Change Section Size: Click and drag to change the section length

How to add and organize elements

Moodboards use a drag-and-drop editor, allowing you to create custom sections and page layouts with more advanced flexibility than our standard pages. Before you begin adding elements to your Moodboard section, it will help to understand how the flex editor functions.

The flex editor is comprised of a grid of rectangles. When you add a new element, you can edit it, resize it, and move it around within that grid. Your elements will automatically snap in place to the grid points that you click and drag the element to.

  1. A blue bounding box surrounds the entire flex section. Within this bounding box, you can see a faint grid of rectangles—this grid is not visible on your live site, and is only present as a visual guide when editing your Moodboard
  2. A smaller bounding box surrounds individual elements, and will snap to grid points when clicking and dragging the element

You can also group elements together. Grouping elements together allows you to reposition them, as well as duplicate multiple elements at once. When elements are grouped, you can edit them independently by double-clicking individual elements. However, keep in mind that you'll need to ungroup elements if you want to resize them.

To group elements, you can hold Ctrl (or Cmd on a Mac) and click on each element you want to add to a group. You can also click and drag within the editor to highlight multiple elements.

Overview of available elements

You can add images, text, buttons, lines, video, icons, and color swatches to your Moodboard. Each of these elements have many design options available. Here, we'll go into a bit more detail about each of these element types.

Images

  1. Edit Image: Clicking this provides you with more image formatting options (see next screenshot)
  2. Image Link: You can add a link to your image
  3. Move Forward and Move Backwards: You can adjust whether your image is in front of or behind other content
  4. Duplicate: You can duplicate your image
  5. Delete: You can delete your image (this is permanent)

If you click Edit Image (number 1 in the above list), you will then be presented with the following options: 

  1. Image Content: You can change the focal point of the image (i.e. which portion of your image to center on if the image is cropped), or replace the image with another image
  2. Image Options: Here you have several options, including:
    • Crop Ratio: Choose between Fit or Fill
    • Zoom: Adjust the zoom on your image
    • Opacity: Adjust the transparency of your image
    • Corner Radius: Round the corners of your image
    • Overlay Opacity: Adjust the transparency of the overlay on your image
    • Overlay Color: Change the color of the overlay on your image
  3. Image Description: You can add a short SEO description of your image. This description is not displayed on your live site

Text

After adding a text element, you will be presented with the following options:

  1. Edit Text: Click here for additional editing options (see below screenshot)
  2. Alignment: Choose between top, center, and bottom text alignment
  3. Move Forward and Move Backwards: You can adjust whether your text is in front of or behind other content
  4. Duplicate: You can duplicate your text element
  5. Delete: You can delete your text element
  6. Text Box: You can resize your text element or click and drag it to reposition it

You can click Edit Text (number 1 in the previous screenshot) to access additional design options for your text element, including text type, font size, text color, text justification, text styling, and the ability to add a link to your text.

Please note: Text type (Large Heading, Heading, etc.) styles are set by your site's Design settings for Custom Pages. This can be adjusted by navigating to the Design tab and changing the typography settings for Custom Pages.

Buttons

After adding a new button to your Moodboard, you'll be provided with the following options:

  1. Button Options: Adjust the font size and border radius
  2. Button Text & Link: Change the button's text content and link destination
  3. Button Colors: Change the button background color and text color
  4. Button Align: You can align your button on a nine-point grid within its bounding box
  5. Move Forward and Move Backwards: You can adjust whether your button is in front of or behind other content
  6. Duplicate: You can duplicate your button element
  7. Delete: You can delete your button element
  8. Button Bounding Box: In the editor, you can view how your button aligns in its bounding box based on the alignment option you choose in the Button Align setting

Lines

Lines can be used as content dividers, design elements, borders, and more.

  1. Line Type: Choose between a Simple Line or Dashed Line
  2. Line Weight: Adjust the pixel weight of the line element
  3. Line Color: Adjust the color of the line element
  4. Alignment: Choose between top, center, and bottom alignment for the line element
  5. Move Forward and Move Backwards: You can adjust whether your line element is in front of or behind other content
  6. Duplicate: Duplicate the line element
  7. Delete: Delete the line element

Video

  1. Edit Video: Access additional video editing controls, like looping, autoplay, and muting
  2. Video Align: Align your video within a nine-point grid
  3. Element Overlap Controls: You can overlap elements in the Moodboard editor. These buttons allow you to bring elements forward, send them backwards, move to front, and move to back. This effectively allows you to decide if an element is hidden behind another element or on top of it
  4. Duplicate: Duplicate the currently selected element
  5. Delete: Delete the currently selected element

Slideshows

  1. Upload Images: Upload images to your Slideshow section. This works the same way as uploading images anywhere else on your site
  2. Slideshow Options: Adjust visual effects, navigation options, and more
  3. Manage Images: Manage the images in your Slideshow section. As no images have been uploaded yet, this cannot be accessed
  4. Layer Positioning: Adjust the positioning of your slideshow in relation to other elements in your Moodboard section, where overlapping elements may be a concern
  5. Duplicate: Duplicate the Slideshow
  6. Delete: Delete the Slideshow

Icons

You can choose from a selection of icons to add to your Moodboard.

  1. Change Icon: Select an icon to use on your Moodboard
  2. Color: Change the color of your icon
  3. Size: Change the size of the icon
  4. Element Align: You can align your icon on a nine-point grid within its bounding box
  5. Link: Add a link to your icon
  6. Layer Positioning: Adjust the positioning of your icon in relation to other elements in your Moodboard section, where overlapping elements may be a concern
  7. Duplicate: Duplicate the icon
  8. Delete: Delete the icon

Swatches

You can also add color swatches to your Moodboard.

  1. Swatch Options: Adjust the size, labelling, and border radius of your swatch
  2. Color: Change the color of your swatch
  3. Layer Positioning: Adjust the positioning of your swatch in relation to other elements in your Moodboard section, where overlapping elements may be a concern
  4. Duplicate: Duplicate the swatch
  5. Delete: Delete the swatch

Asset layer list

To help you organize the elements in your Moodboard more conveniently, you can access an asset layer list. This list allows you to view all of the elements in the currently selected Moodboard section and how they are layered on top of each other. If you've ever used a program like Photoshop or Clip Studio Paint, this layer list functions similarly.

  1. Layers: Clicking this tab will open a sidebar on the left with a list of all assets in the currently selected layer

Once you select the Layers tab, you'll be able to view the following:

  1. Layers: You can view an ordered list of your asset layers. Assets are displayed from topmost layer to bottommost layer
  2. Reorganize layers: You can click and drag a layer to reorganize its position in relation to the layers above or below it. This is more convenient than simply using the move forward and move backwards buttons on individual layers

Commenting

Commenting is new to Moodboards, and allows you and your clients to communicate more effectively and collaboratively on projects. Comments can be added, removed, and viewed from within your Moodboard at any time.

  1. Comment history: You can access comments by clicking on the icon in the top-right corner of your Moodboard editor
  2. Comment icon: Comments will also display on each Moodboard element that they have been added to
  3. Comments overlay: Comments will display in a small overlay, where you can also reply to them from, or delete comments that are no longer relevant

Moodboard Settings

Once you've Closed your Moodboard (7 in the previous screenshot), you'll be brought into the general Moodboard page editor, where you can save your Moodboard and adjust its settings:

  1. Back to Moodboards: View all of your Moodboards
  2. Visibility: Choose between Private and Offline. A Moodboard must be set to Private in order to share with your clients
  3. Share: Share your Moodboard with your clients. You'll be prompted to fill out a short form to send an email to your clients with the Moodboard invite
  4. Preview: Preview your Moodboard on your live site
  5. Save Changes: Save your Moodboard
  6. Settings: Adjust Moodboard settings, including:
    1. Moodboard Title: Change your Moodboard title
    2. Moodboard Visibility: Choose between Private and Offline
    3. Client: Change the assigned client
    4. Require Verified Contact: Toggle this setting to restrict Moodboard access to contacts within the client assigned to this Moodboard
    5. Enable Commenting: Enable commenting on your Moodboard
    6. Moodboard URL: Copy your Moodboard's URL for sharing
  7. Edit Moodboard: Edit your Moodboard

Mobile editing

You can also create a custom mobile view of your Moodboard sections. This mobile view displays on devices such as cellphones and tablets, and is separate from your Moodboard's desktop view.

14_Flex_Block_Mobile.png

  1. Preview: Preview and edit desktop and mobile views by clicking on the icons in the top-right corner of the editor

The below screenshot shows an example of how Moodboard elements can be resized and repositioned into a layout that is separate from the desktop layout:

15_Flex_Block_Mobile_Editing.png

All stock images used within flex block screenshots in this article were sourced from Unsplash.

Still have questions? Format provides human support seven days a week. Start a live chat or reach us by email at info@format.com. We're here to help!

Related to

Related articles