[Урок 10] Подключаем блок Instagram к сайту

Всем привет! Сегодня мы научимся подключать instagram к нашему сайту. Мы подключим специальный блок, настроим интеграцию фото из нужного инстаграм-профиля и отредактируем расположение фото в блоке. Погнали учиться)

Такой результат мы получим в конце урока

Выбираем нужный блок

Нажимая на кнопку "Все блоки" ищем подраздел "Соцсети". Там нас интересует блок SN403 "Лента инстаграм". Помещаем её на нашу страницу.

Основные настройки блока

Открываем настройки и идём по пунктам :

Размер контейнера - параметр отвечает за настройки размера блока по ширине.

- 100% ширины

- 100% ширины с отступами в 40пх по краям

- 12 колонок

Пробуем каждый из вариантов, смотрим как это выглядит. Я выберу "100% ширины с отступами в 40пх по краям".

Отступ между колонками - отступ между фотографиями из Инстаграма.

  • 0 пикселей
  • 10 пикселей
  • 20 пикселей
  • 40 пикселей

Покажу наглядно:

Выберу 10 пикселей и идём дальше.

Количество блоков в ряду - количество фото в одном ряду (по горизонтали)

Я поставлю 5 блоков.

Количество изображений - количество фото, которое будет отображаться в целом. Максимум их можно выбрать 20, но я поставлю всего 10.

Показывать подпись при наведении - при наведении на карточку фото будет показываться её оригинальное описание, взятое из Инстаграм.

Оригинальное соотношение сторон изображений - в инстаграм давно можно заливать не только квадратные фото, но и фото с любым соотношением сторон. Нажимая на эту галочку, фото будут отображаться в оригинальном соотношении. Если же мы оставим поле галочки пустым - фото будут обрезаться до квадратных. Я ставить галочку не буду.

Убрать отступ снизу под галереей - убирает белое поле в подвале блока. Можете убрать, можете нет, всё зависит от дизайна. Я убирать не буду.

Анимация - анимация отображения фото в нашей галерее. Можете поставить абсолютно любой эффект.

Цвет фона блока - белый цвет, по моему мнению здесь будет лаконичнее всего. Но вы так же можете выбрать любой цвет, нажав на палитру.

Тут вроде всё, переходим к настройкам контента.

Подключаем Instagram профиль

Нажимаем на кнопку "Контент" и видим такое окно :

Жмём "Подключить Instagram" и тильда подключается к инстаграм профилю, в котором вы залогинены в своём браузере. У меня был профиль кафетерия моих старых заказчиков - я подключу его.

Готово! Мы оформили блок с Instagram. Не забывайте импровизировать и тестировать другие варианты визуального отображения данного блока. Всем успехов!)