Оформлення: кольори, шрифти, фон і анімації

Кольори сайту

Шестерня вгорі → «Кольори сайту». Тут основні кольори: фон, текст, акцент (колір кнопок) і приглушений, плюс ваші іменовані кольори, наприклад «Фірмовий синій».

Коли елементу задано колір сайту, а не код на кшталт #FF5A36, він змінюється всюди разом: поправили акцент, і всі кнопки й плашки на всіх сторінках стали нового кольору. У виборі кольору будь-якого елемента кольори сайту стоять кружечками праворуч.

Стилі кнопок

Шестерня → «Стилі кнопок». Головна кнопка бере акцент сайту, а «Друга» й «Контур» налаштовуються тут: кольори, рамка, заокруглення. У кожної кнопки в налаштуваннях обирається, який це стиль.

Шрифт і текст

У заголовків і тексту група «Шрифт»: шрифт, розмір, вага, міжрядковий і міжлітерний інтервал, вирівнювання, колір. Розмір на телефоні задається окремо (перемкніть полотно на телефон), а великі заголовки зменшуються самі.

Фон секції

У групі «Фон» у секції та групи:

• колір або градієнт (готові: «Акцент», «Сяйво», «Згори вниз», «Аврора», або свій);
• картинка фону із затемненням поверх, щоб текст читався;
• відео на фоні (тільки в секції): посилання на MP4 або WebM, грає без звуку, на телефоні замість нього картинка.

Рамка, заокруглення, тінь, скло

Група «Оформлення» є майже в усіх елементів:

• Рамка: товщина й колір;
• Заокруглення кутів;
• Тінь;
• Скло: розмиття того, що за елементом, як у напівпрозорих карток.

Анімація

Група «Анімація» в будь-якого елемента й секції:

• Поява під час прокручування: проявлення, знизу вгору, згори вниз, зліва, справа, збільшення, з розмиття. Є тривалість і затримка, а в групи поява по черзі для всіх елементів усередині.
• Під час наведення: підняти, збільшити, тінь, пригасити.
• По колу: ширяння, пульсація, погойдування. Підходить для значків і фігур.

Кнопка «Програти» показує анімацію просто на полотні.

Відступи й розміри

У секції «Розкладка»: ширина (звичайна, на всю ширину, до країв), висота (за вмістом або на весь екран), внутрішні відступи, проміжок між елементами, вирівнювання. В елементів «Розмір і відступи»: ширина, максимальна ширина, відступи зовні й усередині.

Числа в полях можна вводити з клавіатури: значення застосовується, коли ви виходите з поля або натискаєте Enter.