Collaboration

Design libraries.

Design libraries are a collection of typography themes, color palettes and design assets you can reuse on any site in the same account. They’re a great tool for designers and teams to organize brandbooks, set design guidelines and reuse assets. Create and share design libraries with your teammates to streamline workflow and drive collaboration.

Creating a design library.

Define the typography themes, color palettes and design assets of any site, and save them to your design library. Find your design libraries under Tools in the top bar of your canvas, and select Create Design Library. Choose to add the typography, color themes and design assets from your current site to the library, or uncheck the boxes to start from scratch and click Create.

I'm placeholder for alt text

Theme manager.

The Theme Manager consists of your site’s typography and color themes. This is where you can view and edit the text styles and color palette of your site.

I'm placeholder for alt text

Customizing typography.

From the Theme Manager, use the pencil icon to customize your typography. Select the dropdown to choose a font or upload your own. You can also choose the text size and edit the style. Once you click Apply Theme, these style changes will apply to matching text elements across your site.

I'm placeholder for alt text

Saving typography.

To save typography themes to your library, click Design Libraries and from the dropdown, choose the library you want to add them to.

I'm placeholder for alt text

Customizing color themes.

By default, color themes are comprised of a combination of 25 shades. Under Colors, use the pencil icon on the left to edit the color range. You can define primary colors for backgrounds and text, interactive elements like buttons and links, and supporting colors. You can also select an individual shade to adjust the brightness and saturation.

I'm placeholder for alt text

Saving color themes.

To save color themes to your library, click Design Libraries and from the dropdown, choose the library you want to add them to.

I'm placeholder for alt text

Saving design assets.

Design an entire section and save it to your library for reuse. Right click on the section you want to add and select Save as Design Asset. Rename your section, choose the library you want to add it to and hit Save.


Note: These assets are saved on an account level and can be reused on multiple sites. You can also save your designs locally under My Assets for reuse on a site level.

I'm placeholder for alt text

Managing design assets.

View all of your design assets in the Add panel under Design Assets. Select a design library and use the 3 dots to rename an asset, save it to a new library or delete it. You can save your local assets to an existing library too. To reuse a design asset, drag it into your canvas.

I'm placeholder for alt text

Reusing themes.

Typography and color themes can be reused across multiple sites. Go to the Theme Manager and select Design Libraries. Using the dropdown, select the existing library you want to apply the themes from.

I'm placeholder for alt text

Deleting a design library.

From the top bar, under Tools, select Design Libraries to open the main panel. On an existing library, use the 3 dots to open the library, duplicate or delete it.

I'm placeholder for alt text

Deleting themes.

Open a library, and select the 3 dots on the right to delete an entire theme. Deleting a theme will remove it from your library, but will continue to show everywhere it’s in use on your site.

I'm placeholder for alt text

Sharing with your team.

Once your library is set, use the toggle on the right to share it with your team. This enables your teammates to access and reuse the shared library on any site in this account.


Note: This toggle will only appear once you sign up to the Partner Program and set up a team account. Learn more about setting up a team account.

I'm placeholder for alt text

Intro

Anchor

TRY IT YOURSELF

Exercise on design libraries.

Open Academy X from desktop to complete this exercise.

{No.}

{Exercise Description}

Open advanced exercise on the editor →

{No.}

{Exercise Description}

Open Academy X from desktop to complete this exercise.

Did you find this resource helpful?

Yes thanks
Not really
Submit Feedback

Thank you for your feedback!

Next lessons.

VIDEO LIBRARY

Title

Learn how to add new sections, rearrange them & flip them to vertical.

Start lesson

LESSONS & EXERCISES

Title

Learn how to work with sections—the building blocks of your site.

Start lesson

VIDEO LIBRARY

Title

Get to know where you control size, position and behavior of all elements.

Start lesson

LESSONS & EXERCISES

Title

Learn how to take precise control over the positioning of elements using grid.

Start lesson

Related learning resources.

VIDEO LIBRARY

Title

Learn how to add new sections, rearrange them & flip them to vertical.

Watch Now

LESSONS & EXERCISES

Title

Learn how to work with sections—the building blocks of your site.

Start Lesson

VIDEO LIBRARY

Title

Get to know where you control size, position and behavior of all elements.

Watch Now

LESSONS & EXERCISES

Title

Learn how to take precise control over the positioning of elements using grid.

Start Lesson

Ready to start creating?

Search icon
Home icon
LESSONS & EXERCISES
Arrow down icon
Editor X Essentials
Arrow down icon
Design & Layouting
Arrow down icon
Interactions & Effects
Arrow down icon
Elements & Components
Arrow down icon
Web Concepts
Arrow down icon
Content Management
Arrow down icon
Collaboration
Arrow down icon
VIDEO LIBRARY
Arrow down icon
External link icon
External link icon

Top searches

People are searching for

Video tutorial introducing the Editor X workspace with an overview of the responsive layouting and design tools.

VIDEO LIBRARY

Introducing Editor X

Discover the Editor X workspace. Get an introduction to your advanced layouting tools and an overview of responsive web design features like breakpoints, flexbox and CSS grid.

Video introducing the Editor X workspace with an overview of the responsive layouting tools and design capabilities.

VIDEO LIBRARY

Getting Started

Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.

Thumbnail indicating interactions. Orange background with a shaded orange container over it. In the middle of the container is a white logo.

LESSONS & EXERCISES

Hover Interactions

Design dynamic web experiences by adding a variety of interactions to any element on hover. Customize the interaction settings for every breakpoint, from transform adjustment to advanced design capabilities and timing control.

ACADEMY MENU ▶
Search icon