Сообщений в теме: 4

[FamilyLand]

Добрый день!

Подскажите пожалуйста можно ли заменить блок promo на карусель с разными баннерами вместо текстовой информации на одинаковом фоне?

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

• 

[Stasya]

No Tolerance (17 Сентябрь 2017 - 12:24) писал:

Добрый день!

Подскажите пожалуйста можно ли заменить блок promo на карусель с разными баннерами вместо текстовой информации на одинаковом фоне?

Здравствуйте. Вам необходимо в шаблоне HTML найти блок

<div id="promo">
	 <div class="container">
	 <div class="owl-carousel">
		 <div class="item">
		 <p>При заказе на сумму более 20000 рублей</p>
		 <h2>Бесплатная доставка</h2>
		 <a href="http://familyland.su/page/dostavka-i-oplata" class="button">Подробнее</a>
		 </div>
		 <div class="item">
		 <p>Роботы пылесосы со скидкой!</p>
		 <h2>Специальное предложение</h2>
		 <a href="http://familyland.su/catalog/roboty-pylesosy" class="button">Подробнее</a>
		 </div>
		 <div class="item">
		 <p>Скидки на аромадиффузоры!</p>
		 <h2>Ограниченное предложение</h2>
		 <a href="http://familyland.su/catalog/aromadiffyzory" class="button">Подробнее</a>
		 </div>
	 </div>
	 </div>
</div>

и заменить его на

<div id="promo">
	 <div class="container">
	 <div class="owl-carousel">
		 <div class="item">
<img src="{ASSETS_IMAGES_PATH}картинка 1 ">
		 </div>
		 <div class="item">
<img src="{ASSETS_IMAGES_PATH}картинка 2 ">
		 </div>
		 <div class="item">
<img src="{ASSETS_IMAGES_PATH}картинка 3 ">
		 </div>
	 </div>
	 </div>
</div>

Необходимые картинки загрузите в разделе Сайт-> Редактор шаблонов в левой колонке, а в коде вместо картинка 1, картинка 2, картинка 3 укажите название картинки, с которым загрузили ее на сайт (название картинки.формат).
Затем в файле main.css найдите код

#promo {position: relative;margin: 0px auto;padding: 116px 0px 148px;color: rgb(255, 255, 255);background: url("http://design.familyland.su/promo.jpg?design=tourism") 30% -89px no-repeat fixed;background-color: #242424;}

и замените его на

#promo {position: relative;margin: 0px auto;padding: 116px 0px 148px;color: rgb(255, 255, 255);background-color: #242424;}

[Sharlex]

Добрый день!

Аккаунт SL-416251.

Сделал изменения по приведенному примеру, все работает. Но хотелось бы изменить следующее:

Как можно сделать, чтобы в карусели, ширина баннеров была на всю страницу, так же, как и в случае с баннерами в главной шапке, по аналогии?
Как можно сделать, чтобы на баннерах были текстовые блоки с кнопкой, по аналогии с баннерами в главной шапке (ближе к правому краю)?

P.S. Можно куда то сместить "кругляшки" от баннеров, показывающие их общее число и номер. Сейчас они залезают на ленту новинок товара.

Сообщение отредактировал Sharlex: 12 Октябрь 2017 - 13:40

[Mr.Nito]

Sharlex (12 Октябрь 2017 - 13:37) писал:

Добрый день!

Аккаунт SL-416251.

Сделал изменения по приведенному примеру, все работает. Но хотелось бы изменить следующее:

Как можно сделать, чтобы в карусели, ширина баннеров была на всю страницу, так же, как и в случае с баннерами в главной шапке, по аналогии?
Как можно сделать, чтобы на баннерах были текстовые блоки с кнопкой, по аналогии с баннерами в главной шапке (ближе к правому краю)?

P.S. Можно куда то сместить "кругляшки" от баннеров, показывающие их общее число и номер. Сейчас они залезают на ленту новинок товара.

Изменения произвёл.
В шаблоне HTML добавил блоки  с текстом

	<!-- Промо -->
	<div id="promo">
		 <div class="">
		 <div class="owl-carousel">
				 <div class="item">
					<img src="{ASSETS_IMAGES_PATH}nn-center.png">
					<div class="content" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown">
					  <div class="container">
						<div class="text-content right">
						  <p>Текст</p>
						  <h2>Текст 1</h2>
						  <p>Текст текст текст текст3</p>
						 
						  <a href="http://ufa.geona-dveri.ru/img/panorama/index.html" class="button big">Подробнее</a>
						</div>
					  </div>
					</div>				   
				 </div>
				 <div class="item">
					<img src="{ASSETS_IMAGES_PATH}slide2.jpg ">
					<div class="content" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown">
					  <div class="container">
						<div class="text-content right">
						  <p>Текст</p>
						  <h2>Текст 2</h2>
						  <p>Текст текст текст текст3</p>
						 
						  <a href="http://ufa.geona-dveri.ru/img/panorama/index.html" class="button big">Подробнее</a>
						</div>
					  </div>
					</div>					
				 </div>
				 <div class="item">
					<img src="{ASSETS_IMAGES_PATH}slide3.jpg ">
					<div class="content" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown">
					  <div class="container">
						<div class="text-content right">
						  <p>Текст</p>
						  <h2>Текст 3</h2>
						  <p>Текст текст текст текст3</p>
						 
						  <a href="http://ufa.geona-dveri.ru/img/panorama/index.html" class="button big">Подробнее</a>
						</div>
					  </div>
					</div>					
				 </div>
		 </div>
		 </div>
	</div>

[Sharlex]

Большое спасибо! То, что нужно.