Перейти к содержимому


Добавления Контактов С Картинками И Кнопкой "быстрый Заказ"


  • Авторизуйтесь для ответа в теме
В теме одно сообщение

#1 Ostinems

Ostinems

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 162 сообщений

Отправлено 25 Май 2016 - 23:32

Доброй ночи)

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

1. Это добавить иконку трубки к номеру телефона

2. добавить так же небольшую картинку и текст - "Мы работаем с 9:00 - 22:00, без выходных"

3. Кнопку "Быстрый заказ" ( именно кнопку, на который будет написано "Быстрый заказ" )

Прикрепленные изображения

  • 1.JPG


#2 Юля123

Юля123

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 567 сообщений

Отправлено 26 Май 2016 - 11:07

Просмотр сообщенияOstinems (25 Май 2016 - 23:32) писал:

Доброй ночи)

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

1. Это добавить иконку трубки к номеру телефона

2. добавить так же небольшую картинку и текст - "Мы работаем с 9:00 - 22:00, без выходных"

3. Кнопку "Быстрый заказ" ( именно кнопку, на который будет написано "Быстрый заказ" )

Здравствуйте,

1) Иконку нужно загрузить в редакторе шаблонов, после этого в шаблоне HTML найдите код:

<div class="header_phone">

после этого кода добавьте код:
<img src="ссылка на иконку" alt="" title="" />

в конце style.css добавьте код:

.header_phone img {
width: 37px;
}
.header_callback {
font-size: 14px;
width: 200px;

display: block;
background-color: #da3b44;;
color: #fafafa!important;
line-height: 17px;
height: 35px;
padding: 9px 33px;
border: 1px solid #a40f18;
cursor: pointer;
font-weight: 700;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.15),0 1px 1px 0 rgba(0,0,0,0.2);
-moz-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.15),0 1px 1px 0 rgba(0,0,0,0.2);
-webkit-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.15),0 1px 1px 0 rgba(0,0,0,0.2)
}

Далее в шаблоне HTMl перед кодом:
				 </div>
	 <div id="header-logo">

добавьте код:

{% IF SETTINGS_STORE_WORK_TIME %}
				 <div class="work-time" title="Время работы нашего магазина: {SETTINGS_STORE_WORK_TIME}">
				 Мы работаем {SETTINGS_STORE_WORK_TIME}, без выходных
				 </div>
			 {% ENDIF %}
<a class="callback fancybox.ajax" href="http://{NET_DOMAIN}/callback?only_body=1"><span class="header_callback">Обратный звонок</span></a>

в style.css найдите код:

.header_phone {
float: right;
position: relative;
top: 50px;
width: 270px;
}

и замените на код:

.header_phone {
float: right;
position: relative;
top: 30px;
width: 270px;
}

Выглядит так:

QIP Shot - Screen 354.png

Результат без добавления иконки.


Пример иконки для добавления на сайт:
PHONE.png




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных