[Урок 10] Подключаем блок Instagram к сайту
Всем привет! Сегодня мы научимся подключать instagram к нашему сайту. Мы подключим специальный блок, настроим интеграцию фото из нужного инстаграм-профиля и отредактируем расположение фото в блоке. Погнали учиться)
Выбираем нужный блок
Нажимая на кнопку "Все блоки" ищем подраздел "Соцсети". Там нас интересует блок SN403 "Лента инстаграм". Помещаем её на нашу страницу.
Основные настройки блока
Открываем настройки и идём по пунктам :
Размер контейнера - параметр отвечает за настройки размера блока по ширине.
- 100% ширины
- 100% ширины с отступами в 40пх по краям
- 12 колонок
Пробуем каждый из вариантов, смотрим как это выглядит. Я выберу "100% ширины с отступами в 40пх по краям".
Отступ между колонками - отступ между фотографиями из Инстаграма.
- 0 пикселей
- 10 пикселей
- 20 пикселей
- 40 пикселей
Покажу наглядно:
Выберу 10 пикселей и идём дальше.
Количество блоков в ряду - количество фото в одном ряду (по горизонтали)
Я поставлю 5 блоков.
Количество изображений - количество фото, которое будет отображаться в целом. Максимум их можно выбрать 20, но я поставлю всего 10.
Показывать подпись при наведении - при наведении на карточку фото будет показываться её оригинальное описание, взятое из Инстаграм.
Оригинальное соотношение сторон изображений - в инстаграм давно можно заливать не только квадратные фото, но и фото с любым соотношением сторон. Нажимая на эту галочку, фото будут отображаться в оригинальном соотношении. Если же мы оставим поле галочки пустым - фото будут обрезаться до квадратных.
Я ставить галочку не буду.
Убрать отступ снизу под галереей - убирает белое поле в подвале блока. Можете убрать, можете нет, всё зависит от дизайна. Я убирать не буду.
Анимация - анимация отображения фото в нашей галерее. Можете поставить абсолютно любой эффект.
Цвет фона блока - белый цвет, по моему мнению здесь будет лаконичнее всего. Но вы так же можете выбрать любой цвет, нажав на палитру.
Тут вроде всё, переходим к настройкам контента.
Подключаем Instagram профиль
Нажимаем на кнопку "Контент" и видим такое окно :
Жмём "Подключить Instagram" и тильда подключается к инстаграм профилю, в котором вы залогинены в своём браузере. У меня был профиль кафетерия моих старых заказчиков - я подключу его.
Готово! Мы оформили блок с Instagram. Не забывайте импровизировать и тестировать другие варианты визуального отображения данного блока. Всем успехов!)
