Дизайн: цвета, фон и шрифт

На вкладке «Тема» в конструкторе вы задаёте внешний вид всей страницы: цвета, фон, форму кнопок и шрифт. Все изменения, кроме своего CSS, автоматически сохраняются в черновик примерно через 2 секунды и появляются на странице после следующей публикации.

Вкладка устроена сверху вниз: «Шаблон», «Пресеты», «Цвета», «Фон», «Подложка под содержимым», «Стиль кнопок», «Шрифт» и «Свой CSS». Шаблонам посвящена отдельная статья.

#Пресеты

Пресеты — готовые цветовые сочетания. Один клик сразу задаёт цвет фона, цвет текста, цвет кнопок и стиль кнопок, а также сбрасывает ваш собственный цвет текста кнопок. Всего 16 пресетов: Classic, Midnight, Harbor, Ocean, Forest, Sunset, Rose, Slate, Mono, Frost, Lavender, Amber, Charcoal, Mint, Crimson и Sand. Активный пресет отмечен, пока вы не измените ни одно из этих четырёх значений.

#Цвета

Четыре основных цвета, у каждого есть палитра и hex-значение (без прозрачности):

«Фон»

Цвет фона страницы; также используется, если тип фона — «Цвет».

«Цвет текста»

Цвет имени, био и текстов.

«Цвет кнопки»

Цвет кнопок ссылок и цвет по умолчанию для кнопок в блоках.

«Текст кнопки»

Текст на кнопках. Если не выбрать свой цвет, автоматически подбирается цвет, который хорошо читается на цвете кнопки.

Всегда показывается значение, которое действует сейчас, даже если оно взято из шаблона. У многих блоков есть свои цветовые поля в разделе «Параметры отображения». Пока там написано «По умолчанию (из темы)», они следуют этим цветам.

#Фон

Кнопки «Цвет», «Изображение», «Градиент» и «Видео» задают тип фона страницы. При переключении конструктор запоминает значения других типов, пока вы остаётесь в конструкторе.

Цвет

Страница использует цвет «Фон» из раздела «Цвета».

Изображение

«Изображение для компьютера»

Фон для больших экранов, 1920 × 1080 px.

«Изображение для телефона»

Необязательно, вертикальное 1080 × 1920 px. Если поле пустое, там написано «как на компьютере», и используется изображение для компьютера.

«Выбрать» открывает ваши файлы, «Управление ↗» — страницу файлов, «Убрать» удаляет изображение. Если изображение не совпадает точно с целевым размером, открывается инструмент обрезки, и обрезанное изображение сохраняется как новый файл. Подробнее в статье Изображения в конструкторе страниц.

Градиент

«Начальный цвет» и «Конечный цвет»

Два цвета градиента.

«Угол»

Направление от 0 до 355 градусов с шагом 5.

«Пресеты»

Готовые градиенты: Indigo, Sunset, Ocean, Forest, Berry и Midnight.

Видео

«Видео для компьютера»

Прямая ссылка на видеофайл (.mp4 или .webm) или «Выбрать видео» из ваших видеофайлов.

«Видео для телефона»

Необязательно, например файл поменьше для мобильного интернета. Если поле пустое, используется видео для компьютера.

Видео воспроизводится без звука и по кругу, без элементов управления. Посетителям, которые включили в системных настройках уменьшение движения, оно не показывается. Рекомендуются файлы до 8 МБ в формате MP4 или WebM.

Прозрачность наложения

Для изображения, градиента и видео ползунок от 0 до 80 % накладывает поверх фона затемняющий слой, чтобы текст легче читался.

Фон страницы из изображения, градиента или видео заменяет фоновые изображения шаблона. В слотах изображений шаблона тогда появляется соответствующая подсказка. С вариантом «Цвет» изображения шаблона снова видны.

#Подложка под содержимым

Делает текст читаемым на фоновом изображении, градиенте или видео:

«Выкл.»

Без подложки: содержимое лежит прямо на фоне.

«Всё содержимое»

Одна карточка под всем содержимым.

«Для каждого блока»

Отдельная карточка под профилем и под каждым блоком.

«Сплошная» или «Полупрозрачная»

Появляется, как только подложка включена. Полупрозрачная подложка пропускает фон.

С шаблоном Business Card эта настройка не действует.

#Стиль кнопок

Стиль кнопок — значение по умолчанию. Его можно переопределить в блоке «Ссылки» и для каждой ссылки («Скругление углов» в обоих местах).

#Шрифт

На выбор: DM Sans, Figtree, Sora, Plus Jakarta Sans, Raleway, Inter, Poppins, Montserrat, Nunito, Outfit, Space Grotesk и «Системный по умолчанию» (собственный шрифт устройства). Строка «Аа — Съешь ещё этих мягких французских булок.» показывает предпросмотр.

LinkHarbor раздаёт все шрифты сам. Браузеры ваших посетителей ничего не загружают для них с Google Fonts или других сторонних серверов.

#Какая настройка главнее

Цвета и формы уточняются от общего к частному:

1. Шаблон: базовый стиль и цвета по умолчанию
2. Вкладка «Тема»: цвета, фон, стиль кнопок и шрифт для всей страницы
3. Параметры отображения блока: цвета и формы для этого блока
4. Оформление отдельной ссылки: важнее всех остальных значений
5. Свой CSS: для всего, что не покрывают элементы управления

Как выполнить тонкую настройку с помощью своего CSS, объясняется в статье Свой CSS.