17.01.2018      1004      1
 

Как оформить надпись к баннеру на сайте


Иногда требуется сделать дополнительную надпись к баннеру, размещенному в сайдбаре или шапке сайта. Это может быть призыв к действию, напоминание о скором старте курса, тренинга и т. д. Делать приписки на самом баннере не всегда удобно – «плавающую» дату устанешь переделывать, готовую партнерскую «гифку» и вовсе не откорректировать (по крайней мере, быстро). Проще вынести дополнения в отдельный текст. Например, так:

Некоторые вставляют текст в заголовок виджета:

Мне этот вариант не очень нравится: во-первых, такую надпись легко принять за название рубрики, поскольку внешне она ничем от него не отличается (какое уж тут привлечение внимания!). Во-вторых, нет возможности управлять оформлением текста, ведь он будет выводиться в соответствии с настройками шаблона (шрифт, цвет, расположение и т. д.). Если надпись короткая, а у шаблона красивый шрифт по умолчанию – результат может получиться приемлемым, но длинная надпись в заголовке смотрится странно, особенно в скупых на оформительские фишки темах:

Я решаю эту проблему с помощью строки-заготовки:

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

Свойство font-family отвечает за выбор шрифта, font-size — его размер, color – цвет, font-weight – насыщенность (в данном примере стоит bold – жирный), font-style – начертание (курсив/наклон), line-height – межстрочный интервал.

Для наглядности поменяю шрифт на Mistral, а цвет на красный:

То есть, цвет, начертание, размер – тут все на ваше усмотрение. Правда, экзотическими шрифтами лучше не увлекаться: стильные «завитушки», красиво смотрящиеся на компьютере, могут вообще не читаться мобильными устройствами, поэтому безопаснее выбирать универсальные шрифты вроде Arial, Helvetica, Georgia и т. д.

Цвет можно посмотреть в любой таблице HTML цветов, например, в этой: https://colorscheme.ru/html-colors.html. Выбираете нужный оттенок, копируете его название или номер вместе со значком # и вставляете в свой код после слова color:

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

Всем удачи и красиво оформленных сайтов!


Обсуждение: есть 1 комментарий
  1. Хорошая идея для дополнительного призыва — оригинальная надпись, взял на заметку.

    Ответить

Ваш комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Политика конфиденциальности
Пользовательское соглашение