+7 (499) 705-30-10
Заказать сайт
Блог. Университет Интернет-маркетинга
Новости. Знания. Технологии.
Назад
04.03.2014
8126

Бесплатные кнопки для сайта

Кнопка будет вполне симпатично смотреться и при минимальных изменениях шаблона. Но если Вас интересуют все функциональные возможности - читайте инструкцию до конца, мы расскажем, как пользоваться дополнительными функциями.

С правой стороны открывшегося окна располагаются шаблоны кнопок. Их можно использовать без изменения стилей, а можно, как в рассматриваемом примере, на их основе создать новый стиль, соответствующий дизайну Вашего сайта. Остановимся на последнем шаблоне кнопки и нажмём на «Дополнительные настройки»:

 

Здесь Вы можете:

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

Разбирая практический пример, сделаем кнопку в цветах Мегагрупп.ру - зелёную с белым текстом. Для этого в верхнем поле вместо слов «Текст кнопки» прописываем свой вариант надписи. Если изменения не отразятся сразу, нажмите на кнопку «Применить». В разделе «Цвет текста» кликаем на цветной квадратик и передвигаем маркер в верхний левый угол, соответствующий белому цвету:

 

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

 

В разделе «Цвет кнопки» в выпадающем списке выберем вариант «два цвета»

 

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

 

Чтобы текст кнопки лучше выделялся, сделаем ему тёмно-зелёную тень. Путём экспериментов, подбираем наиболее подходящий оттенок, размер и сдвиг тени.

 

Для выразительности всей кнопки, сделаем тень и ей. Пусть она будет немного побольше тени от текста - так кнопка выглядит более объёмно:

 

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

 

Обведём кнопку рамкой, подобрав подходящий цвет экспериментальным путём. Для данного случая подойдёт тёмно-зелёная рамка толщиной в 1 пиксель:

 

Подкорректируем скругление углов, уменьшив радиус с 18 до 10 пикселей:

 

И финальный штрих – зададим внутреннее размытие, которое сгладит переходы между цветами внутри самой кнопки:

 

Обратите внимание: не обязательно пользоваться всеми настройками. Ваша кнопка может смотреться вполне симпатично и при минимальных изменениях шаблона. Мы просто показали весь функционал в действии.
После того, как стили кнопки заданы, сохраняем её, нажав на кнопку «Сохранить»:

 

Теперь в нашей коллекции кнопок появился первый экземпляр:

 

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

 

Итак, кнопка размещена:

 

Но хотелось бы сделать её более живой - так, чтобы при наведении курсора она «реагировала».
Для этого нам понадобится альтернативное изображение кнопки. Снова вызываем окно создания кнопок:  .

Нам нужна полная копия текущего изображения с незначительным изменением цветов. Чтобы не мучиться с созданием нового варианта с нуля, копируем имеющийся экземпляр, нажав на «Копировать» под уже готовой кнопкой:

 

В разделе «Дополнительные настройки» указываем чуть более светлые оттенки уже выбранных цветов и нажимаем «Сохранить»:

 

Вставляем кнопку на страницу, без указания ссылки. Выделяем новое изображение и переходим в раздел «Добавить/Изменить изображение»:

 

Здесь копируем адрес, выделив его курсором и нажав сочетание клавиш Ctrl+C, и закрываем окно редактирования изображения:

 

После этого вторую кнопку со страницы можно будет удалить, нажав на Delete на клавиатуре. Выделяем первоначальную кнопку и также переходим в раздел «Добавить/Изменить изображение»:

 

В появившемся окне переходим на вкладку «Дополнительно» и ставим галочку в пункте «Альтернативное изображение». В поле «При наведении» вставляем скопированный ранее адрес второго варианта кнопки (сочетание клавиш Ctrl+V), а в поле «В покое» размещаем адрес текущего изображения, который можно посмотреть и скопировать на вкладке «Общее». Сохраняем изменения кнопкой «Обновить»:

 

Если система предложит Вам перед сохранением прописать alt и title изображения, можно сделать это на вкладке «Общее»:

 

Выполняем это:

 

Попробовали? Получилось?! :) Поздравляем – кнопка полностью готова! Теперь Вы можете похвастаться тем, что вложили душу буквально в каждую кнопочку на Вашем сайте.

Совет дня. Оператор в оффлайне - Оникон всё равно работает: подключите отправку сообщений с сайта в виде SMS

Оффлайн-отправка SMSСегодня наш совет дня посвящён популярному сервису Оникон. Совсем недавно среди тех, кто в повседневной бизнес-деятельности уже пользуется системой онлайн-консультирования, проводился опрос на тему: «Помогите сделать сервис лучше! Какая дополнительная опция в Ониконе Вам более всего необходима?»

По итогам Вашего голосования с результатом 35% победил вариант «SMS-уведомление о только что оставленном на сайте оффлайн-сообщении».

Логика предпринимателей понятна: чем быстрее свяжешься с клиентом, который хочет сделать заказ – тем больше шансов, что сделка состоится (пока покупатель «горит» желанием приобрести товар или услугу).

Вы – выбрали, мы – сделали! Система SMS-уведомлений внедрена в Оникон!

Как это работает? Задать номер телефона для SMS-уведомлений Вы можете в списке сайтов (кнопка «Настройки»). Даже когда Вы отошли от компьютера (оператор в оффлайне), Оникон находится на связи с клиентом. При соответствующей настройке он сразу отправит Вам сообщение потенциального заказчика.
Пример SMS-ки, которая будет приходить на телефон, показан на скриншоте.

Используйте новые возможности сервиса для более качественной работы с потенциальными покупателями!

Рекомендуем прочитать
Почему отзывы важны для вашего бизнеса?
Как вы выбираете товары и услуги для себя, если перед вами — большой выбор? Как узнать, в каком из множества предложений есть то, что вам нужно? 
Читать дальше ..
Как начать продавать на Ozon
Об Ozon сегодня не слышал только самый ленивый. Это крупнейший российский маркетплейс, и с каждым годом его обороты только растут. Как начать продавать на Ozon сразу и выгодно, мы расскажем прямо сейчас.
Читать дальше ..
Что такое корпоративный сайт и для чего он нужен?
Сегодня мы поговорим о корпоративных сайтах — как они создаются и работают, какие есть нюансы и правила их создания и работы.
Читать дальше ..
Как начать продавать на Wildberries
Сегодня мы дадим вам краткий гайд о том, как начать продавать на Wildberries — грамотно, быстро и с пониманием дела.
Читать дальше ..
Как создать сайт, который будет работать?
Сегодня мы разберём по шагам, как действовать, чтобы создать сайт, который принесёт успех.
Читать дальше ..
Как оформить страницы сайта?
В этой статье речь пойдёт о том, как разместить текстовый контент в CMS так, чтобы страницы лучше продвигались, хорошо воспринимались и приводили на ваш сайт больше заинтересованных посетителей.   
Читать дальше ..
Клиенту дорого, что делать? Работа с возражениями по цене.
Сегодня будет минутка полезного маркетинга. Мы поделимся с вами лайфхаками, которые будут очень кстати в работе с клиентами, если цена ваших товаров или услуг вызывает у них вопросы.  
Читать дальше ..
SSL-сертификат — как и зачем использовать?
Какие опасные моменты могут встать на вашем пути и как от них защититься? Сегодня мы поговорим об SSL-сертификате — что это такое, откуда взялось и и как работает.
Читать дальше ..
Секреты составления цепляющих Title и Description
Метатеги Title и Description представляют сайт в поисковой выдаче, влияют на его посещаемость. Потенциальные клиенты видят эту информацию как название и анонс ресурса. 
Читать дальше ..
Как оформить текст на странице, чтобы его прочитали?
Чтобы не потерять впустую потраченные деньги, время и нервы на работу с копирайтером, текст должен быть оформлен так, чтобы его хотелось прочитать. Как это сделать?
Читать дальше ..
Хотите получать информацию от лидера рынка?
Подпишитесь на рассылку!
Наверх