0
Слайдшоу, Редактирование Html
Автор tavlintsev, 14 апр. 2019 20:03
Сообщений в теме: 10
#1
Отправлено 14 Апрель 2019 - 20:03
Добрый день.
Подскажите, пож-та, интересует как можно добавить ссылку(на страницу) в баннере на главной?
Не могу разобраться в html коде, возможно нужно еще где то править. Ткните куда вставлять ссылку на страницу новую.
На данный момент там ссылки на каталог, хочется вставить свои ссылки на новые страницы.
Подскажите, пож-та, интересует как можно добавить ссылку(на страницу) в баннере на главной?
Не могу разобраться в html коде, возможно нужно еще где то править. Ткните куда вставлять ссылку на страницу новую.
На данный момент там ссылки на каталог, хочется вставить свои ссылки на новые страницы.
#2
Отправлено 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
Отправлено 19 Апрель 2019 - 14:46
Спасибо, все получилось!
#4
Отправлено 19 Июнь 2019 - 11:58
Здравствуйте, подскажите как на главной странице, внизу сделать карусель как и вверху, чтобы туда вставить другие картинки? Хочу сделать слайд шоу с отзывами, и каких размеров картинки нужны? Без ссылок совсем, просто галерея картинок с заголовком "Отзывы".
#5
Отправлено 19 Июнь 2019 - 12:31
Diaboloc (19 Июнь 2019 - 11:58) писал:
Здравствуйте, подскажите как на главной странице, внизу сделать карусель как и вверху, чтобы туда вставить другие картинки? Хочу сделать слайд шоу с отзывами, и каких размеров картинки нужны? Без ссылок совсем, просто галерея картинок с заголовком "Отзывы".
Здравствуйте. Уточните номер Вашего аккаунта, спасибо.
#7
Отправлено 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
Отправлено 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
Отправлено 20 Июнь 2019 - 06:02
Сразу не увидел, после установки этих кодов, у меня на каждой странице отображается заголовок - "отзывы", даже на странице товара, как это исправить?
#10
Отправлено 20 Июнь 2019 - 06:31
нашёл в чём причина, эта команда позволяла отображать заголовок на всех страницах, нужно было поставить блок слайдера перед ним.
{% ENDIF %}
{% IFNOT index_page %}
<!-- Хлебные крошки -->
<div id="breadcrumbs">
<div class="container">
{% ENDIF %}
{% IFNOT index_page %}
<!-- Хлебные крошки -->
<div id="breadcrumbs">
<div class="container">
#11
Отправлено 20 Июнь 2019 - 19:13
Diaboloc (20 Июнь 2019 - 06:31) писал:
нашёл в чём причина, эта команда позволяла отображать заголовок на всех страницах, нужно было поставить блок слайдера перед ним.
{% ENDIF %}
{% IFNOT index_page %}
<!-- Хлебные крошки -->
<div id="breadcrumbs">
<div class="container">
{% ENDIF %}
{% IFNOT index_page %}
<!-- Хлебные крошки -->
<div id="breadcrumbs">
<div class="container">
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных