Уроки Битрикс: как менять тизеры и иконки в решениях Аспро
Приветствую, друзья!
Сегодня мы поговорим о том, как настроить тизеры. Как поменять иконки. Ну и, как всегда, тренироваться мы будем на решениях от Аспро. Но, в других скажем так, решениях, эта тоже тема будет актуальна.
Тизерами называют такие вот блоки, которые подчёркивают какие-то преимущества. То есть, мы видим разные типы тизеров. Тизеры в социальных сетях, тизеры на YouTube, тизеры в Яндекс. Дзен. То есть, какие-то короткие выжимки, так сказать.
Но, что касается сайта, чаще всего это вот такого плана информационный контент какой-то, который отражает преимущества вашей компании.
Первое, что нам нужно сделать — это залогиниться в админке, как обычно. И включить режим «Правки». Далее мы можем навести на любой из тизеров и нажать кнопочку «Изменить элемент».
Здесь мы можем поменять название элемента. Мы можем поставить ссылку, если хотим. Если она нам не нужна, просто ссылку эту убираем и пишем текст. Таким образом, название — это то, что выделено крупным шрифтом в заголовке, а внизу соответственно, какое-то пояснение.
Я рекомендую всегда для всех тизеров использовать одинаковую длину заголовков и одинаковую длину текста. Тогда это будет визуально смотреться гармонично.
Редактировать данные тизеры можно не только из публичной части, но также из административной панели. Для этого мы переходим непосредственно уже в админку. Выбираем раздел «Контент». Выбираем раздел «Контент». И выбираем пункт «Тизеры». Вот они у нас здесь все лежат, прямо по папочкам разложенные.
То есть, можно использовать, как для главного баннера. Например, в решениях допустим, Аспро мы можем в баннер выводить тизеры.
Можем выводить в посадочные страницы. Находятся у нас посадочные страницы в разделе «Каталог» - Обзоры. Вот здесь они у нас лежат. Выглядят они вот таким образом.
Как видим, здесь тоже есть эти самые тизеры
И само собой, мы можем эти тизеры использовать на главной странице. Вот они здесь у нас лежат все эти четыре тизера. Мы можем редактировать их как из публичной части, так и из админки.
Следующий логичный вопрос, который у вас может возникнуть: хорошо. Вот мы там текст поменяли, здесь текст поменяли. А где брать иконки?
И на помощь нам придёт такой сервис. Он называется AutoDraw (https://www.autodraw.com). То есть, мы заходим на сайт и видим то, что вы сейчас видите на экране.
Что нам даёт такой сервис?
Он нам даёт возможность нарисовать иконки прямо вот от руки. Вот здесь мы выбираем карандашик со звёздочками и, например хотим… Ну, не знаю. Нам нужна иконка дома. Мы кое-как, как получается, рисуем то, что получается. И видим то, что он сам додумывает приблизительно то, что мы хотели нарисовать и предлагает нам какие-то
варианты. Вот, например, так:
Например, так:
Или так:
Очень простая в эксплуатации вот эта программка, вот этот веб-сервис, который может вот так помочь нам на скорую руку сделать какие-то необходимые иконки.
Конечно, в идеале лучше обратиться к дизайнеру, который специализируется именно на иконках. Заказать у него пак этих иконок и сразу, чтобы он вам их сделал в формате SVG. Потому, что здесь есть возможность только сохранить в формате png. Но, тем не менее, на скорую руку так сказать, вполне себе подходящий вариант. Очень простой в эксплуатации.
Мы можем сразу же вот допустим, таким образом сделать себе иконку и её скачать.
Готовая иконка, которую можно разместить на сайте.
Когда будете добавлять себе на сайт иконки, обратите внимание на то поле, куда вы её добавляете. Нам нужно добавить иконку именно в поле «Картинка». Убираем старую картинку, выбираем новую картинку, нажимаем «Применить». И проверяем, что у нас получилось.
Наша картинка появилась.
Если вы поставили свою иконку вот эту новую и у вас картинка здесь не появилась, то проверьте у себя настройку в решении Аспро. Я в ближайшее время выпущу отдельный ролик по вот этому виджету настроек. Но, если сейчас коротко, то переходим в пункт Аспро. Переходим в «Настройки», выбираем «Главная».
И вот здесь есть тизеры. Здесь мы выбираем «Тип изображения» ставим «Картинки».
Потому, что когда мы ставим «Иконки», у нас отображается SVG-вариант, а когда мы выбираем «Картинки», то у нас отображается там png-вариант, JPEG-вариант.
Можно ещё выбрать вариант «Текст». Это такой, универсальный вариант, когда вообще не нужно никаких иконок.
Это будет таким образом выглядеть
Вот, собственно говоря, и всё. Надеюсь, вам этот урок дал какую-то пользу.
Благодарю вас за внимание.
