Данный блок замещает собой содержимое поля настроек темы код инфо-блоков (HTML):
Для чего нужен блок
- В поле блоков редактировать проще.
- Чтобы после сброса настроек темы дизайна (например после обновления темы) не пришлось восстанавливать содержимое.
Код инфо-блоков
Исходный код инфо-блоков такой:
<!-- Первый инфо-блок --> <li class="item bullet-item"> <i class="bullet-icon fa fa-truck"></i> <div class="bullet-body"> <div class="bullet-heading">Доставка по России</div> 111Мы доставим ваш заказ курьером по Москве и Петербургу или службой экспресс-доставки по всей России. </div> </li> <!-- Второй инфо-блок --> <li class="item bullet-item"> <i class="bullet-icon fa fa-truck"></i> <div class="bullet-body"> <div class="bullet-heading">Оплата онлайн</div> Оплатите заказ банковской картой, наличными в ближайшем платежном терминале или наличными. </div> </li> <!-- Третий инфо-блок --> <li class="item bullet-item"> <i class="bullet-icon fa fa-truck"></i> <div class="bullet-body"> <div class="bullet-heading">Магазин в Москве</div> Будем рады видеть вас в нашем магазине по адресу г. Москва, ул. Крымский Вал, д. 3, стр. 2. </div> </li>
Каждый инфо-блок – это то, что находится между тегами <li></li>
Вы можете создать большее количество блоков по аналогии.
Чтобы поменять иконку измените в теге <i class="bullet-icon fa fa-truck"></i> классы, выделенные жирным, на классы иконок, которые можно использовать с этих сайтов:
FontAwesome.io. Пример: <i class="bullet-icon fa fa-shopping-basket"></i>
WebHostingHub.com Пример: <i class="bullet-icon icon-piggybank"></i>.
За расположение и внешний вид инфо-блоков отвечают настройки темы:
Начиная с версии темы 1.5.6 буллеты из этого блока будут также появляется на каждой тестовой странице приложения Сайт.
Подробности в этой инструкции: Буллеты (промо-блоки) на страницах приложения Сайт
19 комментариев
Здравствуйте! А как сделать иконку цветной? Заранее спасибо!
Добавьте в код кнопки атрибут style со свойством color.
Например:
Где #DE4E51 – это код цвета.
Добрый день.
Подскажите, пожалуйста, можно ли сделать так, чтобы в инфоблоках отображалось значение переменных? Конкретно у нас используется плагин SEO-регионы, и часть текста на страницах подставляются с помощью переменных, в зависимости от выбора региона (витрины), например название города и телефоны. Попробовали поместить эти переменные в инфоблоки, тема их игнорирует просто пропуская.
Спасибо.
Добрый день!
Недавно задавали этот вопрос.
Прочтите мой последний комментарий.
Спасибо. Вопрос решен.
Владимир, а как добавить инфо-блоки на страницы магазина? Как на страницы сайта - информация есть, а вот про магазин что-то не могу найти
Галина, эти блоки включаются в настройках темы для магазина.
Это странно, что вы не видите, потому что они по умолчанию включены.
Это на Главной, там включилось. А мне нужны другие страницы магазина (у нас это разные услуги). То есть у нас есть страницы не Сайта, а Магазина
Так там же, ниже посмотрите.
Показывать инфо-блоки на страницах категорий, показывать инфо-блоки на страницах товаров.
Если на текстовые страницы добавлять, то такой возможности – нет.
Вы можете самостоятельно вставить какой угодно контент в редакторе страницы.
То есть, только через редактор. ОК
Спасибо
Владимир, здравствуйте! Как сделать более компактным этот инфо-блок в карточке товара?
У меня получилось так. Некрасиво и занимает много места
Код блока:
<!-- Первый инфо-блок -->
<li class="item bullet-item">
<i class="fa fa-shopping-cart"></i>
<div class="bullet-body">
<div class="bullet-heading">Самовывоз</div>
Бесплатно
</div>
</li>
<!-- Второй инфо-блок -->
<li class="item bullet-item">
<i class="fa fa-male"></i>
<div class="bullet-body">
<div class="bullet-heading">Курьер пн-пт от 3000</div>
Бесплатно
</div>
</li>
<!-- Третий инфо-блок -->
<li class="item bullet-item">
<i class="fa fa-male"></i>
<div class="bullet-body">
<div class="bullet-heading">Курьер пн-пт менее 3000</div>
300 руб.
</div>
</li>
<!-- Четвертый инфо-блок -->
<li class="item bullet-item">
<i class="fa fa-rocket"></i>
<div class="bullet-body">
<div class="bullet-heading">Срочная доставка</div>
450 руб.
</div>
</li>
Как сделать похожим на такой вариант:
1. более компактно с меньшим межстрочным интервалом и в одну строчку по каждой услуге (иконка- услуга-цена)
3. стоимость услуги выделить жирным
Здравствуйте, Юрий!
Что-то у вас там не так...
Инфо блоки на странице товара должны выглядеть так:
Без слайдера
Со слайдером
Вот вам на всякий случай код блоков. Поменяйте там только текст и иконки. Разметку не трогайте.
Вам подойдут вот такие режимы отображения блоков:
1. Выберите вариант без слайдера.
2. Удалите из кода блоков иконки:
Но учтите, что блоки едины – и на главной, и на странице товара.
3. Добавьте в блок prostore.user_css код:
Если слишком близко друг к другу, то увеличьте margin-bottom: 5px;
К сожалению, вёрстка именно таким образом, как вы указали на скриншоте, не входит в обязанности бесплатной службы поддержки.
Попробуйте заказать в каталоге экспертов.
Владимир, сделал как Вы написали. Получается так:
Как слово БЕСПЛАТНО поднять на уровень выше, чтобы получилось так:
Тренируюсь пока на 1-м инфо-блоке:
<!-- Первый инфо-блок -->
<li class="item bullet-item"> <i class="bullet-icon fa fa-shopping-cart"></i>
<div class="bullet-body">
<div class="bullet-heading">САМОВЫВОЗ Бесплатно</div>
</div>
</li>
Что в нем надо изменить?
Владимир, получается все в кучу. Не понятно для покупателя
Как все услуги по доставке выровнять в 5 строчек по количеству иконок?
Код выглядит сейчас так:
<!-- Первый инфо-блок -->
<li class="item bullet-item"> <i class="bullet-icon fa fa-shopping-cart"></i>
<div class="bullet-body">
<div class="bullet-heading">САМОВЫВОЗ</div>
Бесплатно
</div>
</li>
<!-- Второй инфо-блок -->
<li class="item bullet-item">
<i class="bullet-icon icon-user"></i>
<div class="bullet-body">
<div class="bullet-heading">Курьер пн-пт от 3000 руб</div>
Бесплатно
</div>
</li>
<!-- Третий инфо-блок -->
<li class="item bullet-item">
<i class="bullet-icon icon-user"></i>
<div class="bullet-body">
<div class="bullet-heading">Курьер пн-пт менее 3000 руб</div>
350 руб
</div>
</li>
<!-- Четвертый инфо-блок -->
<li class="item bullet-item">
<i class="bullet-icon fa fa-rocket"></i>
<div class="bullet-body">
<div class="bullet-heading">Срочная доставка</div>
450 руб
</div>
</li>
<!-- Пятый инфо-блок -->
<li class="item bullet-item">
<i class="bullet-icon fa fa-building-o"></i>
<div class="bullet-body">
<div class="bullet-heading">Почта России + ПВЗ</div>
По тарифу
</div>
</li>
Вот вам готовый блок кода:
Если нужно больше значений, копируйте все теги между <tr> тегами и вставляйте их после тега </tr>.
Отлично! Спасибо большое!
Владимир, здравствуйте! Только сейчас заметил, что после вставки этого кода в блок prostore.bullets вызывает показ этой информации во всех текстовых страницах, созданных в приложении сайт. Как это исправить?
Вот пример: https://mamam-detkam.ru/site/garantii/