Телефон отдела продаж
Email отдела продаж
Email тех. поддержки
Не нашли ответ на свой вопрос
Просмотров: 40782
Настройка обновленного слайдера
+Добавляем произвольный HTML код
+Вставляем видео
+CSS классы для размещения текста в слайдере
Настройка обновленного слайдера
Подробное описание статьи:

Теперь в слайдере можно создать произвольный html контент.
Контент нужно помещать на вкладке «подробно» в поле «детальное описание».
В поле «детальная картинка» нужно загружать изображение размера:

  • Для шаблона с вертикальным меню 1173x556
  • Для шаблона с горизонтальным меню 1920х690

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

Как обновиться до нового слайдера

При первой установке решения по умолчанию, Вам устанавливается уже полностью настроенный инфоблок с созданными демонстрационными слайдами «Слайдер» или «Слайдер для верхнего меню» в зависимости от выбранного типа меню.

Если же Вы обновляете решение, то Вам необходимо обновить слайдер вручную. Это можно сделать следующим способом:
Сначала скачать XML файл:

Потом данный файл и папку загрузить на сайт и импортировать. О том как импортировать XML файлы можете прочесть здесь

Далее вам нужно в настройках слайдера выбрать импортированный инфоблок

Обратите внимание, что шаблон компонента должен быть выбран "promoSlider".

Варианты текста (классы текста):



Заголовки 36 Px (Большой текст)

  • Большой заголовок черного (или белого если выбрана тема с темным фоном) цвета (жирный шрифт) <div class="bigText"></div>
  • Большой заголовок (тонкий шрифт) <div class="bigTextLight"></div>
  • Большой заголовок (жирный цветной шрифт) <div class=" bigTextColor"></div>
  • Большой заголовок (жирный шрифт белого цвета) <div class=" bigText whiteColor"></div>

Текст 18 px (Текст среднего размера)

  • Средний заголовок черного (или белого если выбрана тема с темным фоном) цвета <div class="mediumText"></div>
  • Средний заголовок цветной <div class=" mediumTextColor"></div>
  • Средний заголовок белый <div class=" mediumText whiteColor"></div>

Текст 14 Px (обычный маленький текст)

  • Маленький текст черного цвета <div class="smallText"></div>
  • Маленький текст цветной (или белого если выбрана тема с темным фоном) <div class=" smallTextColor"></div>
  • Маленький текст белого цвета <div class=" smallText whiteColor"></div>

Кнопка

  • Цветная кнопка: <a href="здесь адрес ссылки" class="cButton"></a>
  • Прозрачная кнопка с бордером: <a href=" здесь адрес ссылки " class="cButtonLight"></a>

Отступы

У всех блоков кроме первого есть по умолчанию отступ 24 px, если необходимо его убрать, нужно добавить класс noMargin
Например: <div class="bigText noMargin ">Заголовок</div>

Расположение текста

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

Выравнивание текста

Выравнивание текста по умолчанию будет по левому краю, текст можно выровнять и по центру, для этого нужно добавить класс:
<div class="center"> Весь контент </div>
Например:

<div class="center">
	<div class="bigTextLightColor noMargin" >Самые свежие</div>
	<div class="bigText whiteColor noMargin">продукты питания</div>
	<div class="smallText whiteColor" style="text-align: center;">Самые лучшие товары только в нашем интернет-магазине!<br>загрузить сюда можно любой текст!</div>
	<a href="http://v2.dw-deluxe.ru/catalog/produkty-pitaniya/" class="cButton">Перейти в раздел</a>
</div> 

Пример текста выравненного по левому краю:

<div class="bigText noMargin">Новые поступления</div>
<div class="bigTextLightColor noMargin">детских товаров</div>
<div class="smallText">Самые лучшие детские товары только в нашем интернет-магазине! <br> загрузить сюда можно любой текст!</div>
<a href="http://v2.dw-deluxe.ru/catalog/detskie_tovary/" class="cButton">Перейти в раздел</a>


P.S. Если вы хотите добавить видео со "смыслом" (например презентационный ролик) , то лучше сделать только 1 слайд с видео, если у вас несколько слайдов, то видео стоит использовать как бекграунд (задний фон).
И не забывайте добавлять картинку заглушку для мобильных устройств

Комментарии
Илья здравствуйте.
Визуальным редактором не стоит пользоваться в  данном случае, он может наложить лишние стили.
Напишите нам пожалуйста в саппорт, запишем Вам демонстрацию как и что редактировать
А подскажите пожалуйста , через визуальный редактор можно провести те же манипуляции ?
У меня при смене цвета , текст слетает и превращается в какой-то расплывшейся по всему слайду трындец. Это норм ?
а ваообще текст сторонний как на главной вывести не могу понятьчерез включаемую область жмет к левому краю
Стесняюсь спросить. А где на сайте, на Главной странице, предусмотрен Основной заголовок H1?? Его физически нету нигде. Лично я ставлю его на 1й слайдер. У кого как?
Только не видно текста на баннерах, приходится делать 1 тонн, и не оптимизирован текст под разные устройства.
А как цвета делать ?
Спасибо, очень удобно все расписано.
 
Текст сообщения*
Популярные теги
каталог 4.00 корзина создание тегов теги настройка карточки товара включение тегов добавление тегов баннеры на сайт свойства цены настройка тегов карточка товара производители установка готового решения баннеры выпадающее меню формы характеристики товара обратная связь загрузка картинок в меню цветовая гамма торговые предложения настройка каталога оформление заказа настройка меню слайдеры коллекции бренды умный фильтр загрузить логотип заменить лого Наши предложения почта logo услуги почтовые шаблоны загрузка логотипа скидки кастом активация купона настройка брендов лого замена баннеров типы цен логотип Баннер замена главного баннера цветовая тема замена графики ТП изменение шаблона замена картинок настройка производителей SKU ошибки замена логотипа список товаров настройка свойств выбор города свойства товаров старая цена Мой Мир@mail.ru бренды из 1С чат для сайта пейдж спид замена языковых файлов Facebook Liveinternet настройки компонентов Похожие товары инфоблок yandex обработчик наличия $_SERVER['HTTPS'] сменить цветовую схему купоны на скидку счетчики надписи в наличии шаблон корзины переименовать кнопку facebook pixel Livejournal ускорение сайта Геолокация карта лайфхак youtube 1с 8.3 таймер накопительная система валюта шаблон оформления переключить цветовую гамму зачеркнутая цена Google непонятные символы Главная страница села ланги Аксессуары хит продаж обратный звонок сортировка таймер обратного отсчета наличие веб формы шапка сайта перечеркнутая цена иероглифы google analytics mysql_connect установка новинка города правила работы с корзиной лендинг Цвет оптимизация сайта заказать звонок 404 сортировка брендов GooglePageSpeed Вид корзины языковые файлы письма изменение верстки OpenID установка 1С-Битрикс новинки гугл пейдж спид скорость загрузки кастомизация Артикул цвет футера отзывы 443 сортировка товаров https видео Яндекс подгрузка брендов изменение заголовков PHP7 новости дизайн распродажа скролл кастомизация шаблона

Оставить обращение в тех. поддержку

Ваше обращение будет обработано в течение 48 часов с момента регистрации. Обращения обрабатываются: по будним дням с 12:00 до 18:00 (МСК). Правила оказания технической поддержки Вы можете посмотреть здесь

Ваше имя?*
Электронная почта*
Тема обращения*
Адрес сайта*
Логин и пароль от системы администрирования*
Описание проблемы*
Защита от автоматического заполнения
Введите символы с картинки*

* - обязательные поля

Сообщение отправлено
Ваше сообщение успешно отправлено. В ближайшее время с Вами свяжется наш специалист
Закрыть окно