Как Т-Банк предоставляет промоматериалы для рассрочек и кредитов?
В гайде с материалами для коммуникации. В нем мы описали, как интегрировать сервис рассрочек для покупателей в интернет-магазин или в точку продаж в офлайне. В гайде есть ссылки на все нужные материалы: макеты баннеров для сайта или социальных сетей, шрифты, логотипы, инструкции по интеграции.
С помощью этих материалов можно рассказать покупателям, что теперь в вашем магазине можно покупать в рассрочку и кредит. В гайде собраны варианты кнопок и баннеров, которые мы рекомендуем, но по ссылкам есть и альтернативные примеры. Можно подобрать и скачать более подходящий к дизайну сайта.
Допустим, вы хотите сообщить покупателям, что оплата в рассрочку или кредит теперь доступна на сайте:
Откройте гайд в браузере или скачайте PDF. Если смотрите гайд в браузере, все ссылки из него откроются в том же окне, поэтому удобнее скачать.
Перейдите на нужную страницу.
Например, материалы для баннеров — на странице 15
Мы приложили несколько ссылок со всем готовым: подробную инструкцию по адаптации под свой сайт, фирменные шрифты Т‑Банка, макеты в Фигме. Эти материалы доступны любому пользователю по ссылке.
Так выглядят макеты баннеров в Фигме
Скачайте нужные материалы по ссылке. Перейдите по ссылке в Фигму → авторизуйтесь → в правом меню найдите вкладку Export.
Выберите макет, который хотите скачать, — его название появится во вкладке Export. Кликните иконку + и выберите формат для скачивания: например, SVG. Нажмите кнопку Export, и макет сохранится в выбранной папке.
Как скачать макет из Фигмы
Откройте макет в любом удобном фоторедакторе, если хотите адаптировать макет под себя и добавить на баннер фото товара. Картинку нужно вставлять на серое поле в макете, тогда половину баннера будет занимать информация про рассрочку, а вторую половину — иллюстрация.
По этой инструкции можно работать с любыми материалами из гайда.
Как рассказать на сайте про рассрочку и кредит?
Мы рекомендуем это делать на нескольких страницах сайта:
на главной;
в каталоге товаров;
в карточке товара;
в чекауте и корзине;
на посадочной странице.
Как именно это сделать, мы описали в гайде с материалами для коммуникации. PDF Там собрали варианты использования элементов интеграции, готовые макеты материалов и примеры того, как это будет выглядеть. Все эти материалы можно скачать из Фигмы и Дропбокса по ссылкам из гайда.
Например, вы хотите добавить кнопку «Купить в кредит» в карточку товара. На странице 10 гайда мы рассказали, зачем нужна кнопка и как она выглядит в карточке товара. Больше примеров и макеты кнопок собрали в Фигме, ссылка тоже есть на странице 10.
Как рассказать про рассрочку и кредит в карточке товара
Какие материалы для сайта есть в гайде с материалами для коммуникации?
Мы приложили все шаблоны, которые могут понадобиться: макеты баннеров, POS‑материалы, логотипы, материалы для страниц сайта. Все это можно скачать из Фигмы и Дропбокса по ссылкам из гайда. PDF
Пример: вам нужно разместить логотип Т‑Банка на посадочной странице. Мы приложили ссылку на логотипы в гайде: нажмите соответствующую кнопку, и архив с ними сохранится на ваш компьютер. Как правильно использовать логотип Т‑Банка
Страница из гайда со ссылкой на архив с логотипами Т‑Банка
На странице 13 — готовый макет посадочной страницы с рекомендованными блоками и обязательной по законодательству информацией. Это юридические сноски, которые магазин обязан размещать, когда продает в рассрочку или кредит.
На этой же странице есть ссылка с макетами посадочных страниц, в том числе для мобильной версии. На странице с макетами также написали руководство, как использовать блоки и что можно изменить под себя. Например, дизайн списка товаров можно поменять, а юридические сноски — нет.
Фрагмент руководства из Фигмы
Все материалы можно скачать и использовать на своем сайте. Как это сделать
На странице 16 есть кнопки и теги, а также ссылка на исходники в Фигме. Теги — это некликабельные маркеры, которые сообщают о возможности купить в рассрочку или кредит. Их можно разместить рядом с названием или фотографией товара в карточке, меню и рекомендациях.
Тег «рассрочка» в карточке товара
В гайде показаны варианты, которые мы рекомендуем, а по ссылке есть дополнительные, которые подойдут под любой дизайн сайта. Материалы можно скачать и использовать на сайте. Как это сделать
Исходники кнопок в Фигме
Как правильно использовать промоматериалы из гайда?
В гайде с материалами для коммуникации собраны варианты кнопок и баннеров, оформленные по стандартам Т‑Банка. Вы можете менять макеты промоматериалов, соблюдая несколько ограничений.
Что нельзя делать с материалами из гайда:
Менять композицию и пропорцию элементов в ней.
Пример правильного и неправильного оформления баннера
Двигать логотип и текст.
Пример правильного и неправильного оформления баннера
Ставить текст на изображения.
Пример правильного и неправильного оформления баннера
Менять шрифт и начертания, выделять текст цветом.
Пример правильного и неправильного оформления баннера
Использовать другие цвета фона, кроме фирменного желтого и серого.
Пример правильного и неправильного оформления баннера
Применять к тексту, кнопкам и тэгам визуальные и цветовые эффекты.
Пример правильного и неправильного оформления кнопки
Использовать любые изображения, кроме 3D‑графики и фото из гайда.
Пример правильного и неправильного оформления баннера
Применять к изображениям, предоставленным в гайде, любые эффекты и цветокоррекцию.
Пример правильного и неправильного оформления баннера
Добавлять на баннеры другие логотипы.
Пример правильного и неправильного оформления баннера
Как поставить логотип Т‑Банка на своем баннере?
Если ни один баннер из гайда с материалами для коммуникации вам не подходит, вы можете создать свой и разместить на нем логотип Т‑Банка в любом из углов композиции.
При этом важно соблюдать несколько правил:
Используйте логотип Т‑Банка только вместе с фирменной желтой плашкой, так как это часть логотипа.
Пример правильного и неправильного оформления баннера
Визуальный вес двух логотипов должен быть одинаковым.
Пример правильного и неправильного оформления баннера
Размер логотипа Т‑Банка должен быть не менее 64 × 64 px.
Пример правильного и неправильного оформления баннера
Логотипы Т‑Банка и вашего бренда должны располагаться в разных углах баннера.
Пример правильного и неправильного оформления баннера
Нельзя использовать изображения, фото и 3D-графику из макетов и папок, ссылки на которые лежат в гайде.
Пример правильного и неправильного оформления баннера
Нельзя менять композицию и пропорцию логотипа.
Пример правильного и неправильного оформления логотипа Т‑Банка
Как правильно использовать логотип Т‑Банка?
Ориентируйтесь на гайд с материалами для коммуникации. Если ваша ситуация в нем не описана, то достаточно применять несколько правил.
Соблюдать расстояние вокруг логотипа
Используйте правило охранного поля: вокруг логотипа должно быть расстояние, кратное ширине ножки буквы «Т».
Формула расчета охранного поля вокруг логотипа Т‑Банка
Например, ширина ножки — 10 px. Значит, сверху и снизу логотипа должно быть расстояние 4 × 10 = 40 px, справа и слева — 5 × 10 = 50 px. Между гербом и названием бренда должно помещаться 2,5 × 10 = 25 px.
Выбрать правильный фон
Логотип можно размещать:
на плашке светло-серого #f6f7f8, белого #ffffff, желтого #f9df55 цвета.
без плашки, при этом на светлых фонах и на желтом фоне ставьте черный логотип, а на темном фоне — белый.
Выбрать правильный вариант герба
В логотипах Т‑Банка используется два варианта герба: полноценный и упрощенный. Полноценную версию герба выбирают, если высота логотипа больше 20 мм / 70 px, упрощенную — при высоте логотипа 8—20 мм / 36—70 px.
Ориентация логотипа на выбор герба не влияет.
Слева логотип с полноценным гербом, справа — с упрощенным
Избегать типичных ошибок
При использовании логотипов Т‑Банка нельзя:
менять композицию внутри логотипа;
менять пропорцию логотипа: растягивать его по ширине или длине;
применять к логотипу любые эффекты;
нарушать охранное поле;
ставить логотип на фотографический фон;
ставить логотип под углом;
красить части логотипа в другой цвет;
ставить логотип на градиентный фон;
использовать текстовую часть без герба.
Примеры неправильного использования логотипа Т‑Банка
Что делать, если материалы не подходят?
Напишите об этом нам на почту tcbpromohelp@tinkoff.ru с темой письма «Вопрос по материалам для коммуникации. С вами свяжутся сотрудники банка и помогут решить вопрос.
Как вставить баннер Т‑Банка на сайт?
Инструкция ниже поможет вставить три популярных вида баннеров. Если вы захотите использовать другие баннеры из гайда с материалами для коммуникации, понадобится помощь разработчика. Гайд с материалами для коммуникации PDF
Потребуется выполнить четыре шага:
Если у вас самописный сайт, откройте файл с его HTML‑кодом в любом редакторе кода. Если ваш сайт сделан на Тильде, Вордпрессе, 1С‑Bitrix, конструкторе сайтов от Т‑Банка или в любой другой CMS — откройте редактор кода вашей CMS.
Вставьте код с файлом стилей из поля ниже в любое место между тегами <head> и </head>:
Выберите нужный вид баннера и вставьте его код между тегами <body> и </body>. Расположение баннера на сайте будет зависеть от того, где вы разместили его код.
При выборе баннера обратите внимание на ширину блока, в который хотите его вставить. Она должна быть больше или равной ширине баннера, иначе баннер будет отображаться непропорционально.
Код для вставки вертикального баннера 675 × 1200 px
Этот HTML‑код добавит на ваш сайт такой баннер размером 1920 × 1200 px:
Сохраните HTML‑файл и загрузите его на хостинг или нажмите «Сохранить» в админке вашей CMS.
Готово, вы разместили баннер на своем сайте. Если вас не устраивает текст или изображение на баннере, его можно изменить.
Как изменить баннер Т‑Банка на сайте?
Ваши действия зависят от того, что вы хотите поменять.
Изменить ширину баннера
Если вам нужно задать другую ширину баннера, измените значение атрибута style в теге div. Оно должно быть больше или равно ширине баннера выбранного класса:
<div class="tcb‑banner tcb‑banner--sm"> — баннер шириной 675 px, в атрибуте style можно указывать любое значение больше или равное 675 px;
<div class="tcb‑banner tcb‑banner--md"> — баннер шириной 1200 px, в атрибуте style можно указывать любое значение больше или равное 1200 px;
<div class="tcb‑banner tcb‑banner--lg"> — баннер шириной 1920 px, в атрибуте style можно указывать любое значение больше или равное 1920 px.
Например:
<div class="tcb‑banner tcb‑banner--sm" style=”width: 800px”> — баннер шириной 800 px
<div class="tcb‑banner tcb‑banner--md" style=”width: 1500px”> — баннер шириной 1500 px
Изменить пропорции баннера
Чтобы изменить пропорцию баннера, нужно изменить значение атрибута class у тега div. Найдите в HTML‑коде тег <div class="tcb‑banner tcb‑banner…"> и замените его на нужный вариант:
