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


Изменить Блок Promo


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

#1 FamilyLand

FamilyLand

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

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

Отправлено 17 Сентябрь 2017 - 12:24

Добрый день!

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

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

  • Снимок экрана (21).png


#2 Stasya

Stasya

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

  • Модератоpы
  • 4 007 сообщений

Отправлено 18 Сентябрь 2017 - 10:49

Просмотр сообщения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;}


#3 Sharlex

Sharlex

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

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

Отправлено 12 Октябрь 2017 - 13:37

Добрый день!

Аккаунт SL-416251.

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

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

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

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


#4 Mr.Nito

Mr.Nito

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

  • Модераторы
  • 1 364 сообщений

Отправлено 12 Октябрь 2017 - 16:00

Просмотр сообщения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>


#5 Sharlex

Sharlex

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

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

Отправлено 12 Октябрь 2017 - 16:13

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




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

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