Всем привет, в связи с большим объёмом работы (взялся на свою голову за доработку двух интернет магазинов, работы много а денег…) времени на написание новых статей катастрофически не хватает, но что то же нужно написать, поэтому я решил выделить немного времени на второй вариант вывода ссылок на социальные сети нашего интернет магазина.
в прошлый раз (тыц) мы с вами использовали иконочный шрифт, ну а в этот раз пожалуй воспользуемся изображениями (картинками), надеюсь статья вам понравится.
Для подбора разнообразных иконок я использую вот этот замечательный ресурс: flaticon.com, мой выбор пал вот на такие иконки:
P.S. — Для примера я взял всего 4 иконки, так как их вставка очень проста и вы сможете самостоятельно встроить на сайт нужное вам количество иконок.
Откроем свой файловый менеджер (рекомендую использовать FileZilla, это простой и удобный файловый менеджер) и переходим: ../image/catalog/, создадим внутри новый каталог social (задаём права доступа к новой папке 700) и поместим в него наши крутые иконки.
P.S. — все ваши иконки соц. сетей должны располагаться по этому адресу: ../image/catalog/social/
Заходим в админку вашего интернет магазина и переходим: Модули / Расширения -> Модули / Расширения -> Текстовый блок — HTML -> Добавить и заполняем:
- Название модуля: Мы в социальных сетях (2 вариант)
- Заголовок: Мы в социальных сетях (2 вариант)
- Статус: Включено
В поле Текст переключаемся на Code View (иконка </>) и заполняем:
<div class="col-xs-12 col-sm-12 social-icons"> <a href="ваша ссылка"><img src="image/catalog/social/facebook.png" alt="Facebook" title="Facebook"></a> <a href="ваша ссылка"><img src="image/catalog/social/vk.png" alt="В Контакте" title="В Контакте"></a> <a href="ваша ссылка"><img src="image/catalog/social/twitter.png" alt="twitter" title="twitter"></a> <a href="ваша ссылка"><img src="image/catalog/social/instagram.png" alt="instagram" title="instagram"></a> </div>
После заполнения вновь нажимаем Code View и только после этого нажимаем кнопку Сохранить.
Теперь переходим: Дизайн -> Макеты -> Home -> Редактировать -> Верх страницы -> Мы в социальных сетях (2 вариант) -> Добавить -> Сохранить
Смотрим на результат:
Неплохо, но нужно отцентрировать и добавить отступы между иконками, для этого откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и в конец файла добавим эти строки:
.social-icons {
text-align: center;
}
.social-icons {
margin: 10px 0;
}
.social-icons a + a {
padding-left: 10px;
}
.social-icons img:hover {
opacity: 0.5;
}
Чистим все кеши (в том числе и браузера) и смотрим результат.
На этом всё, следите за выходом новых статей в нашей группе в ВК.
Живой пример (обновляется одновременно с выходом новых статей): https://about-all.ru
