Работа с блоками "Медиа"
Блоки этого раздела предназначены для размещения медиа-контента (изображений и видео) на странице сайта или лэндинга

В данной инструкции будут описаны общие принципы размещения контента в блоках "медиа" и особенностях настроек некоторых из них.

Сами же блоки бывают всего нескольких типов:

  • Блоки изображений
  • Блоки видео-контента

Рассмотрим эти типы по порядку.

Блоки изображений.

Рассмотрим блоки этой категории с остановкой на особенностях некоторых из них.

M01: Изображение

В данный блок загружается одно изображение. Данное изображение может быть ссылкой

Размеры блока. Изображение уменьшается по ширине до 1160 пикселей, если изображение уже, то не растягивается. По высоте изображение не обрезается.

M01-2: Изображение с подписью

В данный блок загружается одно изображение. Изображение может быть ссылкой.

У блока также присутствет поле для ввода текста (небольшое описание). Подпись можно выравнивать по левому краю или по центру в настройках блока.

Размеры блока. Изображение уменьшается по ширине до 1160 пикселей. По высоте изображение не обрезается

M01-3: Изображение растягивается на всю ширину

В данный блок загружается одно изображение. 

Размеры блока. Изображение растягивает по ширине на весь экран. По высоте изображение не обрезается.

M02: Изображение с текстом в 2-4 столбца

В данный блок загружается любое количество изображений. Изображение может быть ссылкой.

У данного блока есть возможность указания количество слайдов в строку и формат выводимого изображения (будет обрезать изображение по краям слайда или сохранять пропорции). Все это указывается в настройках блока.

У блока также присутствует поле для ввода заголовка и текста. Шрифт заголовка слайда настраивается. Можно центрировать

Текстовый блок с редактором. 

Шрифт текста и заголовков текстового блока настраивается. заголовок текстового блока возможно выравнивать по центру или по левой стороне

Размеры слайда зависят от настроек выбранных в разделе "Вид блока" настроек. 

M04: Изображение с текстом

В данный блок загружается одно изображение. Изображение может быть ссылкой.

В настройках блока меняется местами элементы текста и изображения и выбирается размер поля изображения

Текстовый блок с редактором. 

Шрифт текста и заголовков текстового блока настраивается. заголовок текстового блока возможно выравнивать по центру или по левой стороне

M04-2: Текст с изображением в ноутбуке

В данный блок загружается одно изображение..

У блока также присутствет поле для ввода заголовка и текста (небольшое описание). 

Размеры блока. Изображение растягивает по ширине до 516 пикселей. По высоте изображение обрезается по центру до 322 пикселей

M05: Изображение на 1/2 экрана с текстом

Блок растягивается на ширину всего экрана. Изображение и текст занимает по половине экрана.

Элементы блока (изображение и текст) меняются местами в настройках блока.

У текстового блока есть выбор цвета подложки и прозрачность.

Текстовый блок с редактором

Высота блока задается в процентном соотношении к высоте экрана, на котором будет происходить просмотр.

M06: Изображение с текстом во весь экран

В этом блоке может быть 3 изображения. Одно заполняет половину монитора, и два по 1/4.У каждого изображения может быть своя ссылка заголовок и текст.

В настройках блока можно задавать цвет подложки и прозрачность

Размеры изображений зависят только от экрана, на котором будет производиться просмотр страницы.

M09: Галерея в 2-4 столбика

В данный блок загружается любое число изображений.

Заголовок общий для всех слайдов. Можно настраивать шрифт и выбирать выравнивание по центру или по левому краю

У данного блока есть возможность выбора от 2-х до 4-х слайдов в строку и формат выводимого изображения (будет обрезать изображение по краям слайда или сохранять пропорции). Все это указывается в настройках блока.

Есть настройка для изображений "увеличивать при клике"

Размер слайдов зависит от выбранных настроек блока. 

M10: Изображения с текстом во весь экран

В блок можно загрузить любое количество изображений.

Высота изображений задается в соотношении к высоте экрана. Ширина определяется тем, какое количество слайдов выбрано в строку. Т.е. 1/2, 1/3 или 1/4 экрана. Изображение обрезается по ширине, оставляя только центральную часть

В настройках блока можно задавать цвет подложки и прозрачность

M11: Полноэкранная галерея

В блок можно загрузить любое количество изображений.

Ширина изображения в блоке 1/5 ширины экрана. Высота изображений остается пропорциональной.

У блока есть настройка "Увеличивать при клике"

M12: Было / стало

Данный блок отображает 2 фотографии, которые разделены пополам бегунком, который можно двигать для просмотра одного и второго изображения. Он хорошо показывает результаты работы (к примеру ремонт).

Цвет бегунка (светлый и темный) и соотношение сторон изображений регулируется в настройках блока

M14, М15, М16, М17, М18: Блок с изображениями

В данные блоки загружаются изображения по секциям. У каждого блока свое количество секций и размеров секций. Без ссылок.

M19: Блок с изображениями

Блок под 2 изображения. У каждого изображения может быть своя ссылка.

Размеры блоков 760 на 500 пикселей и 360 на 500 пикселей.

M20: Блок с изображениями

Блок под 3 изображения. У каждого изображения может быть своя ссылка.

Размеры блоков 760 на 500 пикселей и два блока 360 на 230 пикселей.

M21: Блок с изображениями

Блок под 4 изображения. У каждого изображения может быть своя ссылка.

Размеры блоков 260 на 500 пикселей, 560 на 500 пикселей и два блока 260 на 230 пикселей.

Gl01: Галерея с поясняющим текстом и кнопкой

В данный блок можно загрузить любое количество слайдов. Изображения растягиваются до 760 пикселей по ширине и обрезаются до 570 пикселей по высоте.

Перелистывать слайды блока можно непосредственно блоке либо при нажатии на кнопку полноэкранного режима (в таком случае не обрезаются изображения слайдов)

Текстовый блок с редактором

Кнопка, которая выступает ссылкой.Внешний вид кнопки настраивается в настройках блока.

Gl02: Галерея с прокруткой

В данный блок можно загрузить любое количество слайдов.

Изображения, которые не попадаю в экран, доступны при прокрутке в сторону

Есть общий блок заголовков для всех слайдов и настройка "увеличивать при клике"

Размеры изображений по ширине - 360 пикселей. По высоте изображения пропорционально расстягиваются

Gl03: Изображения по категориям

В данный блок можно загрузить любое количество слайдов. У данного блока есть несколько галерей, который открываются при нажатии на ссылку на галерею.

Настройки этого блока несколько отличается от настроек остальных блоков галерей.

  1. Номера галерей
  2. Название - ссылка для перехода к галерее
  3. Галерея изображений
  4. Удаление галереи

M22: Логотипы с прокруткой

В данный блок можно загрузить логотипы. У каждого лого есть свое поле ссылки

M23: Изображение с текстом и кнопкой

Блок состоит из двух равных частей: изображение и текстовая часть с кнопкой.

размер изображения 580 на 700 пикселей. Изображение растягивается по высоте, по ширине изображение обрезается.

В текстовой части располагаются заголовок, текст и кнопка - ссылка

M23-2: Изображение с подписью и прокруткой

В данный блок можно загружать столько слайдов, столько вам хочется.

У блока есть общий заголовок и подзаголовок для всех слайдов. У каждого слайда есть собственный заголовок и текстовая подпись.

Размеры слайдов 660 на 370 пикселей. Изображения обрезаются по высоте.

Прокрутка слайдов делается нажатием на стрелку.

M23-3: Изображение с подписью и прокруткой

В данный блок можно загружать столько слайдов, столько вам хочется.

У блока есть общий заголовок и подзаголовок для всех слайдов. У каждого слайда есть собственная текстовая подпись.

Размеры слайдов 560 на 560 пикселей. Изображение растягивается пропорционально.

Прокрутка слайдов делается нажатием на стрелку.

M24: Квадратные изображения с прокруткой

В данный блок можно загружать столько слайдов, столько вам хочется.

У блока есть общий заголовок для всех слайдов. 

Размеры слайдов 310 на 310 пикселей. Изображение растягивается пропорционально.

Прокрутка слайдов делается нажатием на стрелку или кнопку под центральным слайдом.

M25: Текст и изображения с поочередной прокруткой

Работа этого блока проявляется, когда текстового контента меньше, чем графического. Показать работу блока, в данном случае, намного проще чем пытаться рассказать, что будет происходить.

Наглядно:

Размер блока изображений - 460 пикселей. По высоте изображения пропорционально растягиваются. Изображения и текст можно зеркально менять местами в настройках блока