diff --git a/docs/linked_design.md b/docs/linked_design.md index 0f2af10..1a111bf 100644 --- a/docs/linked_design.md +++ b/docs/linked_design.md @@ -22,12 +22,6 @@ page_nav: url: '/text' --- -## Introduction -### Linked design - -![Linked design](/public/linked_design.png) - - You can control the appearance of web pages right from Lunacy. The feature that we call **linked design** lets you update designs in Lunacy and then apply the changes to the web page. This applies to: * Texts @@ -39,7 +33,7 @@ You can control the appearance of web pages right from Lunacy. The feature that

Note: This feature works only in cloud documents.

-#### How it works for a web developer +## How it works for a web developer Switching to linked design might slightly impact your standard practices at the beginning, but will save you lots of time and efforts later on. @@ -59,8 +53,11 @@ The procedure is as follows: 5. One by one, select the layers/layer groups subject to updates from Lunacy, copy their code in the **Export** panel and paste it to your HTML code. +Here's also a short video explainer: -#### How it works for a graphic designer + + +## How it works for a graphic designer The only difference from your standard flow will be the work with raster images. You should wrap all the raster images subject to updates into layer groups. @@ -79,11 +76,3 @@ When making changes to your design, which is already a live webpage, proceed as

Notes:

Do not rename layer and text styles after the design is online

Do not add new styles, if you don't won't to bother your web developers. Edit your current styles instead.

- -In the **Export** panel: - -* Copy the link to the CSS file in Lunacy and add it to your HTML document. Stick to the CSS styles and color variables in the code. -* Write a JS script for fetching the JSON file with text content key/value pairs and a function that will output text by key values. Add texts to your HTML document using this function and respective keys. -* Add graphic content as PNG/SVG links to our Lunacy cloud (covered by CDN). - -That’s it! Now your graphic designers can update the page by themselves.