Наполнение слайдера на главной странице
Инструкция по наполнению контентом слайдера на главной странице
Общая характеристика
Верстка карусели на главной странице находится в переменной "slider-in-home-page".
Zeta Web 2.x
Zeta Web → Панель управления сайтом → вкладка Наполнение сайта → вкладка Страницы/Переменные → Переменные.
Zeta Web 3.x
Zeta Web →Панель управления "Контент" → Сайты HTML.
В типовом дизайне представлены 5 изображений:
с областью для названия или описания слайда;
с кнопкой, при клике на которую осуществляется переход на нужную вам страницу;
также верстка подразумевает переход на необходимую страницу через клик на любую часть области слайда - для этого, каждому элементу с классом "carousel__item_link", требуется присвоить значение аттрибута "href" - указать адрес страницы.
В верстке слайдера (на примере типового дизайна) каждый элемент с определенным классом встречается 5 раз - по количеству слайдов. Все, что находится внутри одного элемента с классом "carousel__item" - относится к одному слайду.
Размеры блока-контейнера - 848*480 px.
Соответственно, если вы хотите, чтобы изображение занимало всю отведенную ей область, выбирайте картинки или фото не меньше, указанных выше параметров.
В слайдере типового дизайна используются картинки меньшего размера, чем родительский контейнер. Такое размещение тоже допустимо, изображения при этом будут центрироваться.
На примере ниже: синяя рамка - область внешнего контейнера и допустимого максимального размера изображения (848*480 px). Красная рамка показывает реальные размеры текущей картинки.
Редактирование слайдера
Для изменения количества слайдов требуется, выделенную ниже на скриншоте, область -удалить или скопировать, и вставить в верстку, согласно порядку слайдов, наполнить необходимым текстовым контентом и добавить изображение.
Добавление изображения на слайд
Добавление изображения на слайдер осуществляется в следующем порядке:
Прежде всего, необходимо добавить изображения слайдера в 1С. Для этого переходим в раздел "Картинки и файлы": выбираем или создаем папку, в которой будут храниться картинки слайдов. Добавление реализуется через клик на одноименную кнопку.
После того как картинки загружены в 1С, включим их в переменную slider-in-home-page.
Описан порядок добавления изображения на примере Zeta Web 2.x
Через кнопку "Редактировать наполнение" переходим к визуальному редактору html:
2. Во вкладке "Визуальный редактор HTML" кликаем сначала по изображению, которое нужно заменить, далее через клик на кнопку с зеленым карандашом, переходим к непосредственному выбору новой картинки.
3. В окне "Картинки (ZetaWeb)" нажимаем на кнопку с тремя точками и выбираем ранее загруженное в 1С изображение слайдера в окне "Файлы Zeta Web". В поле класс - выбираем класс .img-responsive. Ширину и высоту картинки оставляем незаполненной, так как все необходимые стили и свойства уже заданы элементу, с указанным выше классом.
4. Сохраняем результат, обмениваемся с сайтом.
Добавление слайдера на страницу
Добавление слайдера на страницу включает следующие этапы:
Zeta Web 2.x
По ссылке меню Zeta Web → Панель управления сайтом → вкладка Наполнение сайта → вкладка Страницы / Переменные.
Откройте окно редактирования наполнения страниц;
Выберите необходимую страницу и нажмите "Редактировать наполнение";
В окне Визуального редактора HTML, через правую область нужно найти переменную slider-home-page и добавить перед переменной banners, если хотите, чтобы слайдер отображался выше баннеров (на примере типового дизайна), и, соответственно, под переменной - для отображения после.
Рекомендуем сначала выделять(например, цифрами "1") во вкладке редактора текста html ту область , в которую будет устанавливаться переменная, чтобы избежать ошибок верстки. После размещения переменной вспомогательные выделения (цифры) - удалить.
В завершении, удалите метки с цифрой "1", сохраните результат и обменяйтесь с сайтом.
Zeta Web 3.x
По ссылке меню Zeta Web →Панель управления "Контент" →вкладка Наполнение сайта → Тексты HTML.
Выберите необходимую страницу и нажмите "Редактировать текст HTML";
В открывшемся окне повторно кликните на кнопку "Редактировать";
Далее следует через правую область найти переменную slider-home-page и перетянууть ее перед переменной banners, если хотите, чтобы слайдер отображался выше баннеров (на примере типового дизайна), и, соответственно, под переменной - для отображения после.
В завершении, сохраните результат и обменяйтесь с сайтом.
На главной странице баннер будет выглядеть следующим образом:
Last updated
