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


Добавление Нового Блока


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

#1 Аслан

Аслан

    Пользователь

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

Отправлено 12 Январь 2018 - 12:53

Подскажите пожалуйста как на странице каталог добавить ряд ссылок с картинками ( как на фото прикрепленном) на страницы сайта ? Желательно, чтобы от категории Вы смотрели ранее ссылки были отделены такой же голубой полоской на которой написано вы смотрели ранее

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

  • 5.jpg


#2 Аслан

Аслан

    Пользователь

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

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

:huh:

#3 Vaccina

Vaccina

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

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

Отправлено 13 Январь 2018 - 08:13

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

Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
</div>
						 </div>
					 </div>
					 {% ENDFOR %}
					 <div class="action">
						 <div class="showAllRecent button">Показать больше</div>
					 </div>
					 </div>
				 </div>
				 </div>
				 {% ENDIF %}
				 <!-- /END Вы смотрели -->
  
после него вставьте:
				 <!-- Полезное -->
				 <div class="block-sidebar viewed useful">
				 <h3 class="block-title">Полезное<div class="toggleBlock" title="Свернуть/развернуть"><div class="toggleArrow"></div><div class="toggleSquare"></div></div></h3>
				 <div class="block-content">
					 <div class="list-items">
					
					 <div class="item recently-item">
						 <div class="item-inner">
						 <div class="product-image">
							 <a href="ссылка на страницу" class="product-imgs">
							 <img class="goods-image-icon" src="ссылка на картинку" alt="">
							 </a>
						 </div>
						 <div class="bg-hover-viewed"></div>
						 <div class="item-box-content">
							 <h2 class="product-name">
							 <a href="ссылка на страницу">Текст</a>
							 </h2>
						 </div>
						 </div>
					 </div>
					
					 <div class="item recently-item">
						 <div class="item-inner">
						 <div class="product-image">
							 <a href="ссылка на страницу" class="product-imgs">
							 <img class="goods-image-icon" src="ссылка на картинку" alt="">
							 </a>
						 </div>
						 <div class="bg-hover-viewed"></div>
						 <div class="item-box-content">
							 <h2 class="product-name">
							 <a href="ссылка на страницу">Текст</a>
							 </h2>
						 </div>
						 </div>
					 </div>
					
					
					 </div>
				 </div>
				 </div>
				 <!-- /END Полезное -->
вместо текста вставьте необходимые ссылки и заголовки.

Новые блоки дублируйте по аналогии, одна картинка с заголовком:
					 <div class="item recently-item">
						 <div class="item-inner">
						 <div class="product-image">
							 <a href="ссылка на страницу" class="product-imgs">
							 <img class="goods-image-icon" src="ссылка на картинку" alt="">
							 </a>
						 </div>
						 <div class="bg-hover-viewed"></div>
						 <div class="item-box-content">
							 <h2 class="product-name">
							 <a href="ссылка на страницу">Текст</a>
							 </h2>
						 </div>
						 </div>
					 </div>


#4 Аслан

Аслан

    Пользователь

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

Отправлено 13 Январь 2018 - 10:51

Просмотр сообщенияVaccina (13 Январь 2018 - 08:13) писал:

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

Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
</div>
						 </div>
					 </div>
					 {% ENDFOR %}
					 <div class="action">
						 <div class="showAllRecent button">Показать больше</div>
					 </div>
					 </div>
				 </div>
				 </div>
				 {% ENDIF %}
				 <!-- /END Вы смотрели -->
  
после него вставьте:
				 <!-- Полезное -->
				 <div class="block-sidebar viewed useful">
				 <h3 class="block-title">Полезное<div class="toggleBlock" title="Свернуть/развернуть"><div class="toggleArrow"></div><div class="toggleSquare"></div></div></h3>
				 <div class="block-content">
					 <div class="list-items">
					
					 <div class="item recently-item">
						 <div class="item-inner">
						 <div class="product-image">
							 <a href="ссылка на страницу" class="product-imgs">
							 <img class="goods-image-icon" src="ссылка на картинку" alt="">
							 </a>
						 </div>
						 <div class="bg-hover-viewed"></div>
						 <div class="item-box-content">
							 <h2 class="product-name">
							 <a href="ссылка на страницу">Текст</a>
							 </h2>
						 </div>
						 </div>
					 </div>
					
					 <div class="item recently-item">
						 <div class="item-inner">
						 <div class="product-image">
							 <a href="ссылка на страницу" class="product-imgs">
							 <img class="goods-image-icon" src="ссылка на картинку" alt="">
							 </a>
						 </div>
						 <div class="bg-hover-viewed"></div>
						 <div class="item-box-content">
							 <h2 class="product-name">
							 <a href="ссылка на страницу">Текст</a>
							 </h2>
						 </div>
						 </div>
					 </div>
					
					
					 </div>
				 </div>
				 </div>
				 <!-- /END Полезное -->
вместо текста вставьте необходимые ссылки и заголовки.

Новые блоки дублируйте по аналогии, одна картинка с заголовком:
					 <div class="item recently-item">
						 <div class="item-inner">
						 <div class="product-image">
							 <a href="ссылка на страницу" class="product-imgs">
							 <img class="goods-image-icon" src="ссылка на картинку" alt="">
							 </a>
						 </div>
						 <div class="bg-hover-viewed"></div>
						 <div class="item-box-content">
							 <h2 class="product-name">
							 <a href="ссылка на страницу">Текст</a>
							 </h2>
						 </div>
						 </div>
					 </div>
Спасибо

#5 Аслан

Аслан

    Пользователь

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

Отправлено 14 Январь 2018 - 10:39

Просмотр сообщенияVaccina (13 Январь 2018 - 08:13) писал:

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

Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
</div>
						 </div>
					 </div>
					 {% ENDFOR %}
					 <div class="action">
						 <div class="showAllRecent button">Показать больше</div>
					 </div>
					 </div>
				 </div>
				 </div>
				 {% ENDIF %}
				 <!-- /END Вы смотрели -->
  
после него вставьте:
				 <!-- Полезное -->
				 <div class="block-sidebar viewed useful">
				 <h3 class="block-title">Полезное<div class="toggleBlock" title="Свернуть/развернуть"><div class="toggleArrow"></div><div class="toggleSquare"></div></div></h3>
				 <div class="block-content">
					 <div class="list-items">
					
					 <div class="item recently-item">
						 <div class="item-inner">
						 <div class="product-image">
							 <a href="ссылка на страницу" class="product-imgs">
							 <img class="goods-image-icon" src="ссылка на картинку" alt="">
							 </a>
						 </div>
						 <div class="bg-hover-viewed"></div>
						 <div class="item-box-content">
							 <h2 class="product-name">
							 <a href="ссылка на страницу">Текст</a>
							 </h2>
						 </div>
						 </div>
					 </div>
					
					 <div class="item recently-item">
						 <div class="item-inner">
						 <div class="product-image">
							 <a href="ссылка на страницу" class="product-imgs">
							 <img class="goods-image-icon" src="ссылка на картинку" alt="">
							 </a>
						 </div>
						 <div class="bg-hover-viewed"></div>
						 <div class="item-box-content">
							 <h2 class="product-name">
							 <a href="ссылка на страницу">Текст</a>
							 </h2>
						 </div>
						 </div>
					 </div>
					
					
					 </div>
				 </div>
				 </div>
				 <!-- /END Полезное -->
вместо текста вставьте необходимые ссылки и заголовки.

Новые блоки дублируйте по аналогии, одна картинка с заголовком:
					 <div class="item recently-item">
						 <div class="item-inner">
						 <div class="product-image">
							 <a href="ссылка на страницу" class="product-imgs">
							 <img class="goods-image-icon" src="ссылка на картинку" alt="">
							 </a>
						 </div>
						 <div class="bg-hover-viewed"></div>
						 <div class="item-box-content">
							 <h2 class="product-name">
							 <a href="ссылка на страницу">Текст</a>
							 </h2>
						 </div>
						 </div>
					 </div>

А как сделать , чтобы текст располагался на уровне середины картинки и был побольше сейчас как на картинке

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

  • 7.jpg


#6 Firefly

Firefly

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

  • Модераторы
  • 3 810 сообщений

Отправлено 15 Январь 2018 - 14:10

Просмотр сообщенияАслан (14 Январь 2018 - 10:39) писал:

А как сделать , чтобы текст располагался на уровне середины картинки и был побольше сейчас как на картинке

Здравствуйте.
В шаблоне main.css добавил Вам код:
.useful .block-content .product-name {max-height: 84px;}
.useful .block-content .product-name a {line-height:84px;max-height:84px;font-size:20px;}

Проверьте результат

#7 Аслан

Аслан

    Пользователь

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

Отправлено 15 Январь 2018 - 14:31

Просмотр сообщенияFirefly (15 Январь 2018 - 14:10) писал:

Здравствуйте.
В шаблоне main.css добавил Вам код:
.useful .block-content .product-name {max-height: 84px;}
.useful .block-content .product-name a {line-height:84px;max-height:84px;font-size:20px;}

Проверьте результат
Спасибо большое




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

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