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


Информационный Блок

Автор Эбболка, 12 янв. 2016 10:52

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

#1 Эбболка

Эбболка

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

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

Отправлено 12 Январь 2016 - 10:52

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

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

  • 2016-01-12 10-47-47 Мы рады видеть Вас! – Yandex.png
  • 2016-01-12 10-53-23 Мы рады видеть Вас! – Yandex.png

#2 spaykus

spaykus

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

  • Пользователи
  • PipPipPip
  • 128 сообщений
  • ГородУфа

Отправлено 12 Январь 2016 - 11:55

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

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

  • fgdfghdfh.png

#3 Юля123

Юля123

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

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

Отправлено 12 Январь 2016 - 11:56

Просмотр сообщенияЭбболка (12 Январь 2016 - 10:52) писал:

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


Здравствуйте, перед изменением создайте бекап. Затем в шаблоне HTML найдите и удалите код:

	<!-- Информационный блок -->
	{% IF index_page %}
	<div id="block-info">
	  <div class="container">
		<div class="row">
		  <div class="col-md-3 col-sm-6 col-sms-6 col-smb-12 block-top-content">
			<div class="icon-block"><em class="fa fa-truck">&nbsp;</em></div>
			<div class="text-block">
			  <h4>Бесплатная доставка</h4>
			</div>
		  </div>
		  <div class="col-md-3 col-sm-6 col-sms-6 col-smb-12 block-top-content">
			<div class="icon-block"><em class="fa fa-unlock-alt">&nbsp;</em></div>
			<div class="text-block">
			  <h4>Безопасная оплата</h4>
			</div>
		  </div>
		  <div class="clear-resp"></div>
		  <div class="col-md-3 col-sm-6 col-sms-6 col-smb-12 block-top-content">
			<div class="icon-block"><em class="fa fa-rotate-left">&nbsp;</em></div>
			<div class="text-block">
			  <h4>30 дней гарантии</h4>
			</div>
		  </div>
		  <div class="col-md-3 col-sm-6 col-sms-6 col-smb-12 block-top-content">
			<div class="icon-block"><em class="fa fa-phone">&nbsp;</em></div>
			<div class="text-block">
			  <h4>Прием заказов 24/7</h4>
			</div>
		  </div>
		</div>
	  </div>
	</div>
	{% ENDIF %}
	<!-- /END Информационный блок -->

далее после кода:

<!-- /END Каталог -->

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

 <!-- Информационный блок -->
	{% IF index_page %}
	<div id="block-info">
		  <div class="block-title">
				<a><h5><span>Информация</span></h5></a></div>
				<div class=info>
			<div class="icon-block"><em class="fa fa-truck">&nbsp;</em></div>
			<div class="text-block">
			  <h4>Бесплатная доставка</h4>
			</div>
			<div class="icon-block"><em class="fa fa-unlock-alt">&nbsp;</em></div>
			<div class="text-block">
			  <h4>Безопасная оплата</h4>
			</div>
		  <div class="clear-resp"></div>
			<div class="icon-block"><em class="fa fa-rotate-left">&nbsp;</em></div>
			<div class="text-block">
			  <h4>30 дней гарантии</h4>
			</div>
			<div class="icon-block"><em class="fa fa-phone">&nbsp;</em></div>
			<div class="text-block">
			  <h4>Прием заказов 24/7</h4>
			</div>
		  </div>
	</div>
	{% ENDIF %}
	<!-- /END Информационный блок -->


в main.css найдите код:
/*** Информационный блок ***/
#block-info {background: #09afe7;padding: 30px 0 0 0;text-align: center;}
#block-info .block-top-content {margin-bottom: 30px;}
#block-info .block-top-content:last-child {margin-bottom: 10px;}
#block-info .icon-block .fa {font-size: 24px;color: #fff;width: 105px;height: 105px;line-height: 75px;background: #333744;text-align: center;border: 15px solid #61ccf0;border-radius: 100%;-webkit-transition: all 700ms ease;-moz-transition: all 700ms ease;-ms-transition: all 700ms ease;-o-transition: all 700ms ease;transition: all 700ms ease;}
#block-info .icon-block .fa:hover {background: #ffffff;border-color: #61ccf0;color: #3abfec;}
#block-info .icon-block .fa.fa-truck:before {margin-left: 2px;}
#block-info .icon-block .fa.fa-unlock-alt:before {margin-left: 6px;}
#block-info .icon-block .fa.fa-rotate-left:before {margin-left: 4px;}
#block-info .icon-block .fa.fa-phone:before {margin-left: 6px;}
#block-info .text-block {margin-top: 10px;}
#block-info .text-block h4 {color: #fff;}


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


/*** Информационный блок ***/
#block-info {padding: 30px 0 0 0;text-align: center;margin-bottom: 20px;}
#block-info .block-top-content {margin-bottom: 30px;}
#block-info .block-top-content:last-child {margin-bottom: 10px;}
#block-info .icon-block .fa {font-size: 24px;color: #fff;width: 105px;height: 105px;line-height: 75px;background: #333744;text-align: center;border: 15px solid #61ccf0;border-radius: 100%;-webkit-transition: all 700ms ease;-moz-transition: all 700ms ease;-ms-transition: all 700ms ease;-o-transition: all 700ms ease;transition: all 700ms ease;}
#block-info .icon-block .fa:hover {background: #ffffff;border-color: #61ccf0;color: #3abfec;}
#block-info .icon-block .fa.fa-truck:before {margin-left: 2px;}
#block-info .icon-block .fa.fa-unlock-alt:before {margin-left: 6px;}
#block-info .icon-block .fa.fa-rotate-left:before {margin-left: 4px;}
#block-info .icon-block .fa.fa-phone:before {margin-left: 6px;} 
#block-info .text-block { margin: 10px 0 20px;}
#block-info .text-block h4 {color: #fff;}
.info { background: #09AFE7;padding: 20px 0;}

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

.block-title h5 {line-height: 40px;}

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

.block-title h5 {line-height: 40px;text-align: left;}

#4 Юля123

Юля123

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

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

Отправлено 12 Январь 2016 - 12:23

Просмотр сообщенияspaykus (12 Январь 2016 - 11:55) писал:

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

Вам в шаблоне HTML после кода:

<!-- /END Каталог -->

нужно добавить код:

			<a href="ссылка"><img src="ссылка на изображение" alt="" title="" /> </a>
			<a href="ссылка"> <img src="ссылка на изображение" alt="" title="" /></a>

Добавьте нужные изображения баннеров, и замените ссылки соответственно.

#5 Эбболка

Эбболка

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

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

Отправлено 21 Январь 2016 - 15:08

добрый день помогите понять я изменила блок немного но есть проблема он не встает корректно
если установить его то уезжают вы смотрели и фильтры
наверняка я просто теряю какой то див или тег
поглядите будьте добры
обозначен блок как
<!-- Информационный блок в левой части -->
находится стразу под каталогом
майн сс тоже идет как  <!-- Информационный блок в левой части -->
Аккаунт SL-372065

#6 Dars

Dars

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

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

Отправлено 21 Январь 2016 - 17:38

Просмотр сообщенияЭбболка (21 Январь 2016 - 15:08) писал:

добрый день помогите понять я изменила блок немного но есть проблема он не встает корректно
если установить его то уезжают вы смотрели и фильтры
наверняка я просто теряю какой то див или тег
поглядите будьте добры
обозначен блок как
<!-- Информационный блок в левой части -->
находится стразу под каталогом
майн сс тоже идет как  <!-- Информационный блок в левой части -->
Аккаунт SL-372065
Здравствуйте!
Начнем с самой структуры блока, измените код:

<!-- Информационный блок в левой части -->
		
	 {% IF index_page %}
	 <div id="block-info">
		 <div class="container">
			 <div class="row">
				 <div class="col-md-3 col-sm-6 col-sms-6 col-smb-12 block-top-content">
					 <div class="icon-block"><em class="fa fa-truck">&nbsp;</em></div>
					 <div class="text-block">
						 <h4>Бесплатная доставка</h4>
					 </div>
				 </div>
				 <div class="col-md-3 col-sm-6 col-sms-6 col-smb-12 block-top-content">
					 <div class="icon-block"><em class="fa fa-unlock-alt">&nbsp;</em></div>
					 <div class="text-block">
						 <h4>Безопасная оплата</h4>
					 </div>
				 </div>
				 <div class="clear-resp"></div>
				 <div class="col-md-3 col-sm-6 col-sms-6 col-smb-12 block-top-content">
					 <div class="icon-block"><em class="fa fa-rotate-left">&nbsp;</em></div>
					 <div class="text-block">
						 <h4>30 дней гарантии</h4>
					 </div>
				 </div>
				 <div class="col-md-3 col-sm-6 col-sms-6 col-smb-12 block-top-content">
					 <div class="icon-block"><em class="fa fa-phone">&nbsp;</em></div>
					 <div class="text-block">
						 <h4>Прием заказов 24/7</h4>
					 </div>
				 </div>
			 </div>
		 </div>
	 </div>
	 {% ENDIF %}
	
		 <!-- /END Информационный блок в левой части-->

на:

<!-- Информационный блок в левой части -->
		
	 {% IF index_page %}
	 <div id="block-info">
				 <div class="col-md-6 col-sm-6 col-sms-6 col-smb-12 block-top-content">
					 <div class="icon-block"><em class="fa fa-truck">&nbsp;</em></div>
					 <div class="text-block">
						 <h4>Бесплатная доставка</h4>
					 </div>
				 </div>
				 <div class="col-md-6 col-sm-6 col-sms-6 col-smb-12 block-top-content">
					 <div class="icon-block"><em class="fa fa-unlock-alt">&nbsp;</em></div>
					 <div class="text-block">
						 <h4>Безопасная оплата</h4>
					 </div>
				 </div>
				 <div class="clear"></div>
				 <div class="col-md-6 col-sm-6 col-sms-6 col-smb-12 block-top-content">
					 <div class="icon-block"><em class="fa fa-rotate-left">&nbsp;</em></div>
					 <div class="text-block">
						 <h4>30 дней гарантии</h4>
					 </div>
				 </div>
				 <div class="col-md-6 col-sm-6 col-sms-6 col-smb-12 block-top-content">
					 <div class="icon-block"><em class="fa fa-phone">&nbsp;</em></div>
					 <div class="text-block">
						 <h4>Прием заказов 24/7</h4>
					 </div>
				 </div>
			 </div>
	 {% ENDIF %}
	
		 <!-- /END Информационный блок в левой части-->

Теперь в main.css строки:

#block-info {padding: 0px 0; border-top: 1px solid #9182A4; position: relative; border-bottom: 6px solid rgb(82, 61, 105);background-image: url("http://design.***.ru/fon_bar.png?5649");}
#block-info { padding: 20px 0; border-top: 1px solid #dddddd; position: relative;}

замените на:

#block-info {padding: 20px 0; border-top: 1px solid #dddddd; border-bottom: 6px solid rgb(82, 61, 105);background-image: url("http://design.***.ru/fon_bar.png?5649"); float:left;}

Не забудьте звездочки поменять на название вашего домена.

Ну и я бы ещё, конечно, изменил заголовки с h4 на поменьше - иначе текст просто не помещается в левом блоке.

#7 Эбболка

Эбболка

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

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

Отправлено 21 Январь 2016 - 18:09

дело в том что http://design.***.ru/fon_bar.png?5649 используется в информационном блоке слайдера и блоке в радел товары и ни коим образом не имеет отношения к информационному блоку отзывы в левой части ...

и код там в блоке абсолютно другой...

#8 Egik

Egik

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

  • Пользователи
  • PipPipPipPip
  • 659 сообщений
  • ГородМосква

Отправлено 10 Март 2016 - 22:58

Здравствуйте! Аккаунт SL-205650
Сделал по инструкции блоки из сообщения  #4 не получается сделать пробел между баннерами и фильтром. И какие оптимальные размеры картинок для баннеров (в левом блоке)

#9 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 11 Март 2016 - 02:27

В шаблоне HTML найдите:
<a href="ссылка"><img src="{ASSETS_IMAGES_PATH}оплаты.jpg" alt="" title="" /> </a>
			 <a href="ссылка"> <img src="{ASSETS_IMAGES_PATH}доставки.jpg" alt="" title="" /></a>
замените на:
<a href="ссылка" style="margin-bottom: 30px; display: block; float: left;"><img src="{ASSETS_IMAGES_PATH}оплаты.jpg" alt="" title="" /> </a>
			 <a href="ссылка" style="margin-bottom: 30px; display: block; float: left;"> <img src="{ASSETS_IMAGES_PATH}доставки.jpg" alt="" title="" /></a>

размер левой колонки не фиксирован, он имеет процентное значение ширины.

#10 Egik

Egik

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

  • Пользователи
  • PipPipPipPip
  • 659 сообщений
  • ГородМосква

Отправлено 11 Март 2016 - 11:00

Просмотр сообщенияVaccina (11 Март 2016 - 02:27) писал:

размер левой колонки не фиксирован, он имеет процентное значение ширины.
Здравствуйте!
Обьясните как сделать баннеры в левой калонке оптимальные для разных разрешений,(ширина, высота,формат)

#11 Юля123

Юля123

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

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

Отправлено 11 Март 2016 - 12:09

Просмотр сообщенияEgik (11 Март 2016 - 11:00) писал:

Здравствуйте!
Обьясните как сделать баннеры в левой калонке оптимальные для разных разрешений,(ширина, высота,формат)


Здравствуйте!
В шаблоне HTML после кода:

			 <a href="ссылка"><img src="{ASSETS_IMAGES_PATH}оплаты.jpg" alt="" title="" /> </a>
			 <a href="ссылка"> <img src="{ASSETS_IMAGES_PATH}доставки.jpg" alt="" title="" /></a>

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

<a href="ссылка"> <img src="ссылка на изображение" alt="" title="" /></a>


ширина картинки должна быть 262px по ширине, такие же как и изображения оплаты и доставки.

#12 Egik

Egik

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

  • Пользователи
  • PipPipPipPip
  • 659 сообщений
  • ГородМосква

Отправлено 11 Март 2016 - 12:43

Просмотр сообщенияЮля123 (11 Март 2016 - 12:09) писал:

ширина картинки должна быть 262px по ширине, такие же как и изображения оплаты и доставки.
Спасибо, вопрос немного по-другому был задан тк при просмотре сайта на разных экранах и устройствах,невезде корректное изображение (картинки уже каталога (айфон и айпад))

#13 Юля123

Юля123

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

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

Отправлено 11 Март 2016 - 14:01

Просмотр сообщенияEgik (11 Март 2016 - 12:43) писал:

Спасибо, вопрос немного по-другому был задан тк при просмотре сайта на разных экранах и устройствах,невезде корректное изображение (картинки уже каталога (айфон и айпад))

К сожалению, у нас нет возможности протестировать на данных устройствах, не могли бы Вы прислать скриншоты с данных устройств? При проверке на эмуляторах никаких проблем не обнаружено.

#14 Egik

Egik

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

  • Пользователи
  • PipPipPipPip
  • 659 сообщений
  • ГородМосква

Отправлено 11 Март 2016 - 16:23

Просмотр сообщенияЮля123 (11 Март 2016 - 14:01) писал:

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

#15 Юля123

Юля123

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

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

Отправлено 11 Март 2016 - 16:48

Просмотр сообщенияEgik (11 Март 2016 - 16:23) писал:

Я не могу прислать скрин тк проверял тут.

Хорошо, значит, я Вас не так поняла,  уточните, что Вы имеете ввиду под "оптимальные для разных разрешений". А точнее, как должны вести себя баннеры в мобильной версии?

#16 Egik

Egik

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

  • Пользователи
  • PipPipPipPip
  • 659 сообщений
  • ГородМосква

Отправлено 11 Март 2016 - 17:14

Просмотр сообщенияЮля123 (11 Март 2016 - 16:48) писал:

Хорошо, значит, я Вас не так поняла,  уточните, что Вы имеете ввиду под "оптимальные для разных разрешений". А точнее, как должны вести себя баннеры в мобильной версии?
Как я вижу, при вертикальном расположение одинаковы по ширине с левым блоком, а при горизонтальном как на некоторых экранах встают баннеры рядом с друг другом в ряд, но на более больших экранах от центровать, а то получается стоят по левому краю. (если возможно) в приведенной ссылке выше это видно.

#17 Egik

Egik

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

  • Пользователи
  • PipPipPipPip
  • 659 сообщений
  • ГородМосква

Отправлено 06 Сентябрь 2016 - 23:10

Здравствуйте! Аккаунт SL-205650
Сделано по инструкции блоки из сообщения  #4 ,но они куда то пропали. В редакторе только остался один файл, и то вместо названия много цифр. Что это и куда подевались они?

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

  • Безымянный2.png

#18 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 07 Сентябрь 2016 - 01:14

Названия файлов должно состоять из латинских букв без лишних символов как пробел, попробуйте изменить названия файлов и в шаблоне HTML их также необходимо заменить.

#19 Egik

Egik

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

  • Пользователи
  • PipPipPipPip
  • 659 сообщений
  • ГородМосква

Отправлено 14 Декабрь 2016 - 12:37

Здравствуйте! Аккаунт SL-205650
Делаю по аналогии блок из сообщения #9 но почему то не отображается картинка, а показывается иконка.Не могу понять, помогите.

#20 Egik

Egik

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

  • Пользователи
  • PipPipPipPip
  • 659 сообщений
  • ГородМосква

Отправлено 15 Декабрь 2016 - 12:43

актуально
Обратно в Другое


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Спорт
  5. → Другое
  6. Privacy Policy