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


Слайдшоу, Редактирование Html


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

#1 tavlintsev

tavlintsev

    Новичок

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

Отправлено 14 Апрель 2019 - 20:03

Добрый день.
Подскажите, пож-та, интересует как можно добавить ссылку(на страницу) в баннере на главной?
Не могу разобраться в html коде, возможно нужно еще где то править. Ткните куда вставлять ссылку на страницу новую.
На данный момент там ссылки на каталог, хочется вставить свои ссылки на новые страницы.

#2 metry

metry

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

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

Отправлено 17 Апрель 2019 - 16:34

Добрый день. Для внесения изменений зайдите в Редактор шаблонов-->HTML и найдите:
	  <!-- Слайдшоу -->
	  <div id="slideshow">
		<div class="preloader"><span class="content-loading"></span></div>
		<div class="slider">
		  <div class="owl-carousel">
			<div class="item item-1" style="background-image:url({ASSETS_IMAGES_PATH}slide1.jpg?design=lotus);">
			  <div class="image"><a href="#" title=""><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=lotus"/></a></div>
			  <div class="content" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown">
				<div class="text-content container">
				  <h2 class="title"></h2>
				  <h4 class="subtitle"></h4>
				</div>
			  </div>
			</div>
			<div class="item item-2" style="background-image:url({ASSETS_IMAGES_PATH}slide2.jpg?design=lotus);">
			  <div class="image"><a href="#" title=""><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=lotus"/></a></div>
			  <div class="content" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown">
				<div class="text-content container">
				  <h2 class="title"></h2>
				  <h4 class="subtitle"></h4>
				</div>
			  </div>
			</div>
			<div class="item item-3" style="background-image:url({ASSETS_IMAGES_PATH}slide3.jpg?design=lotus);">
			  <div class="image"><a href="#" title=""><img src="{ASSETS_IMAGES_PATH}slide3.jpg?design=lotus"/></a></div>
			  <div class="content" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown">
				<div class="text-content container">
				  <h2 class="title">подарите себе моменты счастья!</h2>
				  <h4 class="subtitle">Насладитесь вкусным и полезным питанием!</h4>
				  <a href="{CATALOG_URL}" class="button button3"><span></span><span></span><span></span><span></span>Подробнее</a>
				</div>
			  </div>
			</div>
		  </div>
		</div>
	  </div>
	  <!-- /END Слайдшоу-->

- в найденном коде вместо # задайте свою ссылку для перехода.

#3 tavlintsev

tavlintsev

    Новичок

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

Отправлено 19 Апрель 2019 - 14:46

Спасибо, все получилось! ;)

#4 Diaboloc

Diaboloc

    Новичок

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

Отправлено 19 Июнь 2019 - 11:58

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

#5 stasia

stasia

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

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

Отправлено 19 Июнь 2019 - 12:31

Просмотр сообщенияDiaboloc (19 Июнь 2019 - 11:58) писал:

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

Здравствуйте. Уточните номер Вашего аккаунта, спасибо.

#6 Diaboloc

Diaboloc

    Новичок

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

Отправлено 19 Июнь 2019 - 13:59

Просмотр сообщенияstasia (19 Июнь 2019 - 12:31) писал:

Здравствуйте. Уточните номер Вашего аккаунта, спасибо.
SL-478213

#7 stasia

stasia

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

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

Отправлено 19 Июнь 2019 - 17:39

Просмотр сообщенияDiaboloc (19 Июнь 2019 - 13:59) писал:

SL-478213

Зайдите в Редактор шаблонов --- main.js и найдите данный код:

// Слайдер на главной
var owlS = $('#slideshow .slider .owl-carousel');
owlS.owlCarousel({
  items: 1,
  loop: true,
  rewind: true,
  lazyLoad: false,
  nav: true,
  navText: [ , ],
  dots: true,
  autoplay: true,
  autoplayHoverPause: true,
  autoWidth: false,
  smartSpeed: 500,
  dotsSpeed: 400,
  mouseDrag: true,
  touchDrag: true,
  pullDrag: true
});

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

// Слайдер на главной
var owlS = $('#slideshow .slider .owl-carousel, #slideshow1 .slider .owl-carousel');
owlS.owlCarousel({
  items: 1,
  loop: true,
  rewind: true,
  lazyLoad: false,
  nav: true,
  navText: [ , ],
  dots: true,
  autoplay: true,
  autoplayHoverPause: true,
  autoWidth: false,
  smartSpeed: 500,
  dotsSpeed: 400,
  mouseDrag: true,
  touchDrag: true,
  pullDrag: true
});


В Редакторе шаблонов---HTML, найдите код:

	  {% IFNOT index_page %}
	  <!-- Хлебные крошки -->
	  <div id="breadcrumbs">
		<div class="container">


И перед ним вставьте:


	 <!-- Отзывы -->
		<div class="container">
		  <div class="block-title">
			<h2 class="title">Отзывы</h2>
		  </div>
	  <!-- Слайдшоу отзывы-->
	  <div id="slideshow1">
		<div class="preloader"><span class="content-loading"></span></div>
		<div class="slider">
		  <div class="owl-carousel">
			<div class="item item-1" style="background-image:url({ASSETS_IMAGES_PATH}slide1.jpg?design=lotus);">
			  <div class="image"><a href="{CATALOG_URL}" title=""><img src="http://design.skinsolution.ru/11111.jpg?1030&643412816238"/> </a></div>
			  <div class="content" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown">
				<div class="text-content container">
				  <h2 class="title">Всё для питания и увлажнения</h2>
				  <h4 class="subtitle">Забудьте о сухой и проблемной коже!</h4>
				  <a href="{CATALOG_URL}" class="button button3"><span></span><span></span><span></span><span></span>Подробнее</a>
				</div>
			  </div>
			</div>
			<div class="item item-2" style="background-image:url({ASSETS_IMAGES_PATH}slide2.jpg?design=lotus);">
			  <div class="image"><a href="{CATALOG_URL}" title=""><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=lotus"/></a></div>
			  <div class="content" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown">
				<div class="text-content container">
				  <h2 class="title">Сделайте счастливой свою кожу!</h2>
				  <h4 class="subtitle">Профессиональный уход в домашних условиях!</h4>
				  <a href="{CATALOG_URL}" class="button button3"><span></span><span></span><span></span><span></span>Подробнее</a>
				</div>
			  </div>
			</div>
			<div class="item item-3" style="background-image:url({ASSETS_IMAGES_PATH}slide3.jpg?design=lotus);">
			  <div class="image"><a href="{CATALOG_URL}" title=""><img src="{ASSETS_IMAGES_PATH}slide3.jpg?design=lotus"/></a></div>
			  <div class="content" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown">
				<div class="text-content container">
				  <h2 class="title">ОЙ..)))</h2>
				  <h4 class="subtitle">А на первый заказ у нас скидочка 5%</h4>
				  <a href="{CATALOG_URL}" class="button button3"><span></span><span></span><span></span><span></span>Подробнее</a>
				</div>
			  </div>
			</div>
		  </div>
		</div>
	  </div>
	  <!-- /END Слайдшоу отзывы-->
	  </div>
		  </div>



Найдите в Редакторе шаблонов --- main.css данный код:  

/*** Слайдер ***/
#slideshow {position: relative;top: 0;z-index: 1;}
#slideshow .preloader {height: 100vh;}
#slideshow .slider {position: relative;}
#slideshow .slider .item {display: block;position: relative;}
#slideshow .slider .item .content {position: absolute;top: 40%;width: 100%;text-align: center;}
#slideshow .slider .item .content .text-content {padding: 0 70px;}
#slideshow .slider .item .content .title {font-size: 60px;margin-bottom: 20px;color: #ffffff;}
#slideshow .slider .item .content .subtitle {font-size: 24px;margin-bottom: 30px;color: #ffffff; text-transform: none;}
#slideshow .owl-nav {opacity: 0;filter: alpha(opacity=0);}
#slideshow:hover .owl-nav {opacity: 1;filter: alpha(opacity=100);}
#slideshow .owl-nav .owl-prev, #slideshow .owl-nav .owl-next {position: absolute;top: 50%;margin-top: -25px;}

Замените его на:

/*** Слайдер ***/
#slideshow, #slideshow1 {position: relative;top: 0;z-index: 1;}
#slideshow .preloader, #slideshow1 .preloader {height: 100vh;}
#slideshow .slider, #slideshow1 .slider {position: relative;}
#slideshow .slider .item, #slideshow1 .slider .item {display: block;position: relative;}
#slideshow .slider .item .content, #slideshow1 .slider .item .content {position: absolute;top: 40%;width: 100%;text-align: center;}
#slideshow .slider .item .content .text-content, #slideshow1 .slider .item .content .text-content {padding: 0 70px;}
#slideshow .slider .item .content .title, #slideshow1 .slider .item .content .title {font-size: 60px;margin-bottom: 20px;color: #ffffff;}
#slideshow .slider .item .content .subtitle, #slideshow1 .slider .item .content .subtitle {font-size: 24px;margin-bottom: 30px;color: #ffffff; text-transform: none;}
#slideshow .owl-nav, #slideshow1 .owl-nav {opacity: 0;filter: alpha(opacity=0);}
#slideshow:hover .owl-nav, #slideshow1:hover .owl-nav {opacity: 1;filter: alpha(opacity=100);}
#slideshow .owl-nav .owl-prev, #slideshow .owl-nav .owl-next, #slideshow1 .owl-nav .owl-prev, #slideshow1 .owl-nav .owl-next {position: absolute;top: 50%;margin-top: -25px;}


#8 Diaboloc

Diaboloc

    Новичок

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

Отправлено 19 Июнь 2019 - 19:09

Просмотр сообщенияstasia (19 Июнь 2019 - 17:39) писал:


Зайдите в Редактор шаблонов --- main.js и найдите данный код:

// Слайдер на главной
var owlS = $('#slideshow .slider .owl-carousel');
owlS.owlCarousel({
items: 1,
loop: true,
rewind: true,
lazyLoad: false,
nav: true,
navText: [ , ],
dots: true,
autoplay: true,
autoplayHoverPause: true,
autoWidth: false,
smartSpeed: 500,
dotsSpeed: 400,
mouseDrag: true,
touchDrag: true,
pullDrag: true
});

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

// Слайдер на главной
var owlS = $('#slideshow .slider .owl-carousel, #slideshow1 .slider .owl-carousel');
owlS.owlCarousel({
items: 1,
loop: true,
rewind: true,
lazyLoad: false,
nav: true,
navText: [ , ],
dots: true,
autoplay: true,
autoplayHoverPause: true,
autoWidth: false,
smartSpeed: 500,
dotsSpeed: 400,
mouseDrag: true,
touchDrag: true,
pullDrag: true
});


В Редакторе шаблонов---HTML, найдите код:

{% IFNOT index_page %}
<!-- Хлебные крошки -->
<div id="breadcrumbs">
<div class="container">


И перед ним вставьте:


<!-- Отзывы -->
<div class="container">
<div class="block-title">
<h2 class="title">Отзывы</h2>
</div>
<!-- Слайдшоу отзывы-->
<div id="slideshow1">
<div class="preloader"><span class="content-loading"></span></div>
<div class="slider">
<div class="owl-carousel">
<div class="item item-1" style="background-image:url({ASSETS_IMAGES_PATH}slide1.jpg?design=lotus);">
<div class="image"><a href="{CATALOG_URL}" title=""><img src="http://design.skinsolution.ru/11111.jpg?1030&643412816238"/> </a></div>
<div class="content" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown">
<div class="text-content container">
<h2 class="title">Всё для питания и увлажнения</h2>
<h4 class="subtitle">Забудьте о сухой и проблемной коже!</h4>
<a href="{CATALOG_URL}" class="button button3"><span></span><span></span><span></span><span></span>Подробнее</a>
</div>
</div>
</div>
<div class="item item-2" style="background-image:url({ASSETS_IMAGES_PATH}slide2.jpg?design=lotus);">
<div class="image"><a href="{CATALOG_URL}" title=""><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=lotus"/></a></div>
<div class="content" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown">
<div class="text-content container">
<h2 class="title">Сделайте счастливой свою кожу!</h2>
<h4 class="subtitle">Профессиональный уход в домашних условиях!</h4>
<a href="{CATALOG_URL}" class="button button3"><span></span><span></span><span></span><span></span>Подробнее</a>
</div>
</div>
</div>
<div class="item item-3" style="background-image:url({ASSETS_IMAGES_PATH}slide3.jpg?design=lotus);">
<div class="image"><a href="{CATALOG_URL}" title=""><img src="{ASSETS_IMAGES_PATH}slide3.jpg?design=lotus"/></a></div>
<div class="content" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown">
<div class="text-content container">
<h2 class="title">ОЙ..)))</h2>
<h4 class="subtitle">А на первый заказ у нас скидочка 5%</h4>
<a href="{CATALOG_URL}" class="button button3"><span></span><span></span><span></span><span></span>Подробнее</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /END Слайдшоу отзывы-->
</div>
</div>



Найдите в Редакторе шаблонов --- main.css данный код:  

/*** Слайдер ***/
#slideshow {position: relative;top: 0;z-index: 1;}
#slideshow .preloader {height: 100vh;}
#slideshow .slider {position: relative;}
#slideshow .slider .item {display: block;position: relative;}
#slideshow .slider .item .content {position: absolute;top: 40%;width: 100%;text-align: center;}
#slideshow .slider .item .content .text-content {padding: 0 70px;}
#slideshow .slider .item .content .title {font-size: 60px;margin-bottom: 20px;color: #ffffff;}
#slideshow .slider .item .content .subtitle {font-size: 24px;margin-bottom: 30px;color: #ffffff; text-transform: none;}
#slideshow .owl-nav {opacity: 0;filter: alpha(opacity=0);}
#slideshow:hover .owl-nav {opacity: 1;filter: alpha(opacity=100);}
#slideshow .owl-nav .owl-prev, #slideshow .owl-nav .owl-next {position: absolute;top: 50%;margin-top: -25px;}

Замените его на:

/*** Слайдер ***/
#slideshow, #slideshow1 {position: relative;top: 0;z-index: 1;}
#slideshow .preloader, #slideshow1 .preloader {height: 100vh;}
#slideshow .slider, #slideshow1 .slider {position: relative;}
#slideshow .slider .item, #slideshow1 .slider .item {display: block;position: relative;}
#slideshow .slider .item .content, #slideshow1 .slider .item .content {position: absolute;top: 40%;width: 100%;text-align: center;}
#slideshow .slider .item .content .text-content, #slideshow1 .slider .item .content .text-content {padding: 0 70px;}
#slideshow .slider .item .content .title, #slideshow1 .slider .item .content .title {font-size: 60px;margin-bottom: 20px;color: #ffffff;}
#slideshow .slider .item .content .subtitle, #slideshow1 .slider .item .content .subtitle {font-size: 24px;margin-bottom: 30px;color: #ffffff; text-transform: none;}
#slideshow .owl-nav, #slideshow1 .owl-nav {opacity: 0;filter: alpha(opacity=0);}
#slideshow:hover .owl-nav, #slideshow1:hover .owl-nav {opacity: 1;filter: alpha(opacity=100);}
#slideshow .owl-nav .owl-prev, #slideshow .owl-nav .owl-next, #slideshow1 .owl-nav .owl-prev, #slideshow1 .owl-nav .owl-next {position: absolute;top: 50%;margin-top: -25px;}

Большое спасибо, не думал, что всё настолько сложно)))

#9 Diaboloc

Diaboloc

    Новичок

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

Отправлено 20 Июнь 2019 - 06:02

Сразу не увидел, после установки этих кодов, у меня на каждой странице отображается заголовок - "отзывы", даже на странице товара, как это исправить?

#10 Diaboloc

Diaboloc

    Новичок

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

Отправлено 20 Июнь 2019 - 06:31

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

{% ENDIF %}

{% IFNOT index_page %}
<!-- Хлебные крошки -->
<div id="breadcrumbs">
<div class="container">

#11 Ирина345

Ирина345

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

  • Модераторы
  • 5 664 сообщений

Отправлено 20 Июнь 2019 - 19:13

Просмотр сообщенияDiaboloc (20 Июнь 2019 - 06:31) писал:

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

{% ENDIF %}

{% IFNOT index_page %}
<!-- Хлебные крошки -->
<div id="breadcrumbs">
<div class="container">
Здравствуйте, совершенно верно, код слайдера необходимо было вставить перед данным кодом.




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

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