Тип компонента Ссылка

Что это за компонент

Ссылка - это компактный компонент для перехода пользователя по нужному адресу.

Если говорить совсем просто, это кнопка-ссылка, в которой можно настроить:

• адрес перехода
• текст ссылки
• иконку
• внешний вид самой кнопки

Этот компонент подходит везде, где на странице нужен быстрый и понятный переход:

• в каталог
• на контентную страницу
• на подборку
• в другой раздел витрины
• на внешний ресурс

Когда использовать именно этот тип

Ссылка подходит, если нужно:

• сделать заметную кнопку перехода
• вывести короткий призыв к действию
• дать клиенту понятный маршрут из одного блока в другой
• добавить небольшую кнопку с иконкой

Этот тип особенно удобен, когда не нужен большой баннер, длинный текстовый материал или сложное меню, а нужен один конкретный переход.

Как этот блок выглядит в Omnis и в mini app

Рабочая логика простая:

1. В Omnis создается компонент типа Ссылка.
2. В карточке заполняются адрес, текст и при необходимости иконка.
3. После сохранения компонент размещается на нужной странице.
4. В mini app пользователь видит готовую кнопку-ссылку и нажимает на нее для перехода.

1. Как создать компонент Ссылка

Обычно сценарий такой:

1. Откройте Управление -> CMS -> Компоненты.
2. Нажмите Создать.
3. В окне выбора типа выберите Ссылка.
4. Заполните название компонента.
5. При необходимости задайте код.
6. Укажите адрес перехода.
7. Заполните текст ссылки.
8. При необходимости добавьте иконку.
9. Сохраните компонент.
10. Разместите его в нужном слоте страницы.

2. Основные поля карточки

Сверху у Ссылки используются стандартные поля CMS-компонента.

ID

Это внутренний идентификатор записи. В ежедневной работе он нужен редко.

Тип

Для этого документа тип всегда будет Ссылка.

Он определяет:

• состав полей компонента
• внешний вид блока в клиентском приложении
• набор собственных настраиваемых свойств

Код

Это служебный код компонента.

Если код не заполнен вручную, система обычно формирует его сама после сохранения.

Наименование

Это рабочее название ссылки в Omnis.

Лучше использовать понятные названия, например:

• Ссылка в каталог
• Кнопка перейти к акции
• Ссылка на условия доставки
• Кнопка связи с менеджером

Приоритет

Это служебный параметр порядка. Он полезен, если на странице несколько кнопок и нужно контролировать их очередность.

Активирован

Этот переключатель помогает:

• включать рабочую ссылку
• хранить черновики
• временно отключать компонент без удаления

3. Все поля самого компонента Ссылка

Ниже основных полей находится блок настроек самой ссылки.

URL

Это адрес перехода.

Именно по этому адресу пользователь будет переходить после нажатия на ссылку.

Практически сюда можно указывать:

• внутренний адрес страницы приложения
• адрес каталога
• адрес подборки
• адрес контентной страницы
• внешний сайт или внешний сервис
• e-mail или другой адресный сценарий, если он нужен в работе

Как ведут себя разные адреса

Практически полезно понимать следующее:

• если адрес внутренний, ссылка ведет пользователя внутри приложения
• если адрес внешний, ссылка открывает внешний ресурс

Поэтому перед сохранением важно убедиться, что адрес действительно ведет туда, куда вы ожидаете.

Если поле URL оставить пустым

Визуально кнопка может остаться на экране, но перехода по ней не будет.

Поэтому в рабочем сценарии лучше не оставлять ссылку без адреса.

Анкор

Это основной текст ссылки, который видит клиент.

Именно он отвечает на вопрос пользователя: “Куда ведет эта кнопка?”

Хорошие примеры:

• Перейти в каталог
• Открыть акцию
• Подробнее
• Смотреть подборку
• Условия доставки

Практический совет:

чем яснее текст, тем лучше работает ссылка.

Иконка

Это необязательное изображение рядом с текстом ссылки.

Оно помогает:

• сделать кнопку заметнее
• усилить визуальный акцент
• поддержать фирменный стиль

Пользователь может:

• выбрать уже загруженную иконку
• загрузить новую

Иконка особенно уместна, если ссылка:

• ведет в каталог
• открывает специальный раздел
• должна выглядеть как заметная action-кнопка

4. Как Ссылка выглядит у клиента

В mini app этот компонент отображается как кнопка.

Внутри нее могут быть:

• только текст
• текст и иконка

По виду это обычно не обычная текстовая гиперссылка внутри абзаца, а отдельный самостоятельный элемент интерфейса.

На практике компонент выглядит как:

• компактная кнопка для действия
• ссылка-переход между разделами
• небольшая заметная кнопка под баннером или текстом

Как работает клик

Когда пользователь нажимает на компонент:

• система берет адрес из поля URL
• если адрес внутренний, выполняется переход внутри приложения
• если адрес внешний, открывается внешний ресурс

5. Общие настраиваемые свойства компонента

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

Чаще всего здесь могут пригодиться:

• padding-y - внутренние отступы сверху и снизу
• padding-x - внутренние отступы слева и справа
• margin-y - внешние отступы сверху и снизу
• margin-x - внешние отступы слева и справа

Практически это помогает:

• отделить кнопку от соседних блоков
• сделать ссылку более “воздушной”
• аккуратнее встроить ее в страницу

Если не уверены, эти поля лучше не усложнять без необходимости.

6. Собственные настраиваемые свойства компонента Ссылка

У Ссылки есть свой собственный набор настраиваемых свойств, который отвечает именно за внешний вид кнопки и иконки.

Иконка

• image-format - размерный формат иконки

Это свойство управляет тем, какой вариант изображения будет использоваться внутри кнопки.

Практически его применяют, если:

• иконка выглядит слишком маленькой
• иконка выглядит слишком крупной
• нужно аккуратнее вписать изображение в кнопку

В редакторе доступны готовые значения xs, sm, md, lg, xl, thumb, original.

Кнопка: фон и текст

• bg-btn - фон кнопки
• color-text-btn - цвет текста кнопки

Эта группа управляет основным цветовым контрастом кнопки.

Кнопка: размеры и форма

• width-btn - ширина кнопки
• round-btn - скругление углов кнопки
• height-btn - высота кнопки

Эти свойства отвечают за общую форму кнопки.

Практически полезно:

• делать кнопку шире, если текст должен занимать больше места
• скруглять сильнее, если нужен более мягкий стиль
• корректировать высоту, если кнопка выглядит слишком плотной или слишком низкой

Кнопка: текст

• text-size-btn - размер текста кнопки
• weight-btn - насыщенность шрифта кнопки

Эта группа влияет на читаемость и визуальный вес ссылки.

Кнопка: внутренние отступы и расстояние

• padding-x-btn - горизонтальные внутренние отступы кнопки
• gap-x-btn - расстояние между иконкой и текстом

Эти свойства особенно полезны, если ссылка содержит иконку и выглядит слишком тесной.

7. Как безопасно настраивать внешний вид Ссылки

Чтобы не испортить кнопку лишними правками, удобнее придерживаться такого порядка:

1. Сначала заполните адрес и текст.
2. Потом проверьте базовый вид кнопки.
3. Только затем добавляйте иконку.
4. После этого уже меняйте форму, цвета и размеры.

Особенно осторожно стоит менять:

• width-btn
• height-btn
• text-size-btn
• image-format

Именно они быстрее всего меняют визуальный баланс кнопки.

8. Когда использовать правила для разных дисплеев

Если ссылка выглядит по-разному на узком и широком экране, можно использовать правила для разных дисплеев.

Чаще всего это полезно, если:

• кнопка слишком длинная для маленького экрана
• иконка выглядит слишком крупной
• текст на кнопке не помещается аккуратно

Практический подход такой:

1. Сначала настройте хороший базовый вид.
2. Потом добавляйте минимальные изменения для узких экранов.
3. Проверяйте результат именно в mini app.

9. Практические рекомендации по работе с этим типом

Делайте текст ссылки конкретным

Подробнее подойдет не всегда. Часто лучше писать яснее:

• Открыть каталог
• Перейти к акции
• Смотреть подборку

Не делайте слишком много ссылок одного вида подряд

Если на странице много одинаковых кнопок, клиенту сложнее понять, куда нажимать в первую очередь.

Проверяйте адрес после сохранения

Даже у маленькой кнопки ошибка в адресе ломает весь смысл компонента.

Используйте иконку только там, где она помогает

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

Итог

Ссылка - это один из самых простых и полезных компонентов CMS.

Он позволяет быстро собрать:

• кнопку перехода
• компактный action-блок
• визуально аккуратную ссылку с иконкой или без нее

Если на странице нужен понятный и прямой маршрут для клиента, это один из самых удобных типов компонентов.