Setting Website Colors & Styles

To set the colors and Styles for the website, go to the "Site Settings" and click on the "Colors and Styles" tab.

To set a color for all headings, text, links, or the page background sitewide, click on the field you need and manually select a color in one of three formats or enter a color code directly.

To change the Style of all links on the website, click on the "Additional settings" link. In the settings, specify the width and color of the underline, as well as link styles on hover.

To create your own Style library for the project, click on the "Manage Styles" button.

In the Style management panel, you can add color, typography style, and a button. You can also download the created Styles and import them into another project of yours.

To add a new Style to the project, click on "Manage Styles" and select one of the options: Create Color Style, Create Typography Style, or Create Button Style.

If you already have Styles and want to add another one, click on the plus icon beside the "Color," "Typography," or "Button" option to add a new one. The new Style will appear beside the previous one.

To edit a Style, click on it.

Color. When creating a color Style, specify a name and description that will then be displayed in Project Styles.

Typography. When creating a typography Style, color settings for text, font size for different screen resolutions, font type, weight, and other font settings are available.

At the top of the typography style editor, a font can be previewed. To see how the font is displayed on a mobile device, select the range you need in the breakpoints settings panel.

To edit breakpoints, click on the gear icon, and a menu with default devices will open.

Button. When creating a button Style, you can additionally choose the display of an icon or text wrapping. You can also set typography settings, Style on hover, and other basic settings.

The button Style can also be previewed on different devices, and breakpoints can be edited.

Color. To use the created color Style, click on any element where you want to specify color, and in the editor, select Project Styles.

Select the Style you need, and it will be automatically applied to the block. The field with the color specified will display the name of your Style, as well as an icon indicating that the project's color Style has been applied to the field.

Typography. To use the created typography style, in the block settings, select the "Typography" tab and click on "Styles."

In the context menu, click on the Style you need, and it will be automatically applied to the block. To go to the Style settings, click on Go to Style Library.

After applying Styles for typography, only those options will be displayed in the settings that have not been specified for that Style. After editing these options, the changes will be applied only to the current block and will not affect the typography Style set in the project.

Button. To use the created button Style, in the block settings, select the "Button" tab and click on "Styles" beside the presets.

In the context menu, click on the Style you need, and it will also be applied automatically.

As before, in the settings for the button, only those settings will be displayed that have not been specified in the Style itself. You can edit them or keep them unchanged.

To add an icon to the button, go to the "Content" of the block.

Beside the button, a place for the icon will appear. Click on it to add an icon. A menu will open where options for icons will be available: Arrows, emojis, Tilda Icons, The Noun Project, and the option to upload your own icon files.

To change the icon display on hover for the button, click on the "Add Icon on Hover" option.

Select an icon and save the changes.

To delete an icon, click on its image beside the button text. Select the "Icon" tab and click on the trash bin. Save the changes, and the icon will disappear.

To download the project Style, click on the Manage Styles button and select the option you need. A file with the name of the project and .tildastyles extension will be downloaded to your device.

To upload a Style, select a corresponding option in the context menu as well. New Styles will be added to the Styles created in the project before. The Styles created in the project before will not be deleted or updated.

If you delete a Style from the project and then save the settings, the Style will still be applied to the block settings for the next 2 weeks. A notification will appear in blocks where the Style was previously applied.

In two weeks, the Style will be completely deleted from the project, and the block settings will be reset.

If you have added styles to a page in one project and then you need to transfer the same page to another project in the current or another account, the page will be transferred together with styles.

When transferring, the styles will be copied to the new project for the blocks to be displayed correctly.

When trying to transfer a page or pages with styles to a project within the same account where the styles limit has been or will be reached, a notification about an error will appear. To complete transferring the page, you need to delete extra styles in another project.

When transferring a page or pages with styles to a project in another account where the limit has been reached, the pages will not be transferred. When clicking on Accept, a notification will appear that the limit has been exceeded and you need to delete extra styles.