Please be aware that Lyyti is developed constantly and your view might not match 100% with the view described in this article.

This feature can be used with the following license packs: Starter, Basic, Professional and Enterprise.

There will be some changes to Lyyti's visuals and brand management at the beginning of the year. The biggest change will be that designs and layouts will be combined into one entity: Designs. In addition, admin users and other users with design rights will be able to create new designs directly in Lyyti. Previously, a new design always required changes in a CSS code editor, but now designs can be created with a more user-friendly editor. The CSS editor will also remain available for more advanced designs. Designs are used on registration pages, mini event sites and surveys.

Note that the design update should not affect your already existing designs. To test the new design editor feature please create a new design according to the instructions in this article. Existing designs have automatically the CSS editor active meaning that making changed through the new design editor will not apply in the design. When the CSS editor has been activated, it will overwrite any changes made on the design editor.

This article contains of the following sections:

• Creating a new design
  • Design editor
  • CSS editor
• Using a design in an event
• Using a design in a survey
• Edit and delete existing designs
• Admin user rights and brand management

Creating a new design

The admin user and users who have the design right can manage designs like before under the top bar selection: materials.

To create a new design:

1. Go to the top bar and select materials
2. Choose from the left menu > design
3. All of the existing designs and Lyyti's ready-made designs will be listed on the main page
4. Select Add design
   
5. Fill in the basic information of the design: name, if the questions are by default one below the other or on the same row and if other users can also edit the design or only use the design
   
6. Save and continue
7. Choose to create the design with the design editor or the CSS editor
   

Note that if you select to create the design with the CSS editor, the design editor will not work anymore. All changes would then need to be done in the CSS code. 

It is also possible to create a new design by copying an existing one. To do this, click the three dots on the main Designs page and select Copy. If you copy a design that uses the CSS editor, no changes made with the design editor will be visible

Design editor

A new design can be easily created with the new design editor by just copy pasting the needed colours and other material in the design editor.

In the design editor it is possible to define only certain elements:

• Primary colour
• Button colour and button text colour
• Button roundness
• Fonts and font colours (You can choose a font from the selection or upload your own font)
• A logo
• Background colour or picture
• Default banners: top banner and/or bottom banner

Colours are added to the editor as hex colour codes or with the help of the colour picker.

After the design is ready, remember to publish the design and save it from the top right corner.

CSS editor

For more advanced designs please select to create the design with the CSS editor instead of the design editor. In the CSS editor it is possible to edit more elements if the design. Using the CSS editor will overwrite the changes made on the design editor side and once it has been activated it cannot be deactivated. More information about the CSS editor can be found in this article: Add new design.

Using a design in an event

After the design has been created and published it can be used in events. On the event level, the user can decide of they prefer using the default banners of the design or if they wish to add their own banners. Third option is to use the design without any banners.

1. Open an event or create a new event
2. The Design is selected in the event creation flow after settings. To go directly to the design selection open the events option on the left menu and then select Design
3. Select the design that is used
4. Determine which banners are used: the default banners of the design or your own banners (It is also possible to select no banners to be used).
5. Save

Using a design in a survey

The design also determines the visual appearance of the survey. To select a design for your survey, go to the survey editor and change the current design by editing the survey. In surveys, the design's default banners are always shown, meaning that custom banners cannot be added separately at the individual survey level.

Edit and delete existing designs

It is possible to edit existing designs on the design page under materials. In order to edit or delete a design open the main design page and click on the three dots in the right lower corner.

Note that if the CSS editor has been activated in the design no changes made on the design editor will apply because the CSS editor always overwrites the design editor. If you want to use the design editor make sure that the CSS feature is not in use in the design. 

If the design is in use, it cannot be deleted. Instead of deleting, use the replace function and then delete the design.

The ready-made designs Lyyti offers (Lyyti Green and Lyyti Grey) cannot be edited or deleted.

Admin user rights and brand management

The admin user of the organisation can with this new update select a default design that is used always when a new event is created. The default design helps users navigate which design they should use in their events and makes creating events faster. The user can change the design if they wish and add their own banners on the event level.

To define a default design, go to Materials > Designs. Click on the three dots and select > Set as default.

The organisation can have one default design.