Наполнение и редактирование блоков (шаблон Nordic Lidda) ^#3264

Данная инструкция относится только к новым лендингам, созданным на основе шаблона Nordic Lidda, поддерживающего все описанные ниже возможности.

Чтобы перейти к работе с содержимым или с настройками какого-либо блока, необходимо навести курсор на нужный блок, на нужную его часть (например, на текст в блоке или на форму) и нажать на этот элемент - он подсветится штриховкой.

Некоторые элементы блока (текстовое наполнение) можно редактировать прямо в блоке. Для этого просто установите курсор в необходимое вам место и начните ввод/исправление.

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

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

Кнопка	Значение	К каким элементам блоков относится	Какие настройки доступны
	Текст	Простые тексты, Заголовки, Тексты кнопок, Тексты форм (подписи к полям и пр. тексты, используемые в формах),  Тексты различных флагов, меток, лейблов.	Настройки отображения текста: Выбор шрифта, Размер шрифта, Высота строки (проще говоря, межстрочный отступ в процентах), Цвет текста, Выделение шрифта - жирным, курсивом, подчеркиванием, зачеркиванием, Выравнивание (по правой/левой стороне, по центру, по ширине).
	Очистить форматирование	Простые тексты, Заголовки, Тексты кнопок, Тексты форм (подписи к полям и пр. тексты, используемые в формах),  Тексты различных флагов, меток, лейблов.	Дополнительные настройки отсутствуют, кнопка просто сбрасывает примененные к тексту настройки до стандартных.
	Тег заголовка	Заголовки	Выбор тега для заголовка — вы можете выбрать один из следующих тегов и пометить им заголовок: H1/H2/H3/H4/H5/Div/P.
	Ссылка	Текст (любой - просто текст, в форме, заголовке, лейбле), Кнопка.	Настройки ссылки: Тип ссылки: Ссылка - вставка простой ссылки, имеет следующие настройки: Адрес ссылки, Открывать ссылку в новом или в текущем окне, Закрыть ссылку от индексации поисковыми ботами (добавляет ссылке атрибут noindex). Всплытие блока - вставка ссылки, при клике на которую во всплывающем окне отобразится блок, якорь которого вы укажете. Якорь - тут вам необходимо указать якорь блока, который должен всплывать при клике (о том как работать с якорями, читайте ниже). Скролл до блока - в данном случае при клике по ссылке посетитель просто будет перебрасываться на указанный блок. Якорь - как и в случае выше, тут нужно указать якорь блока, на который должна перебрасывать ссылка.
	Фоновый цвет	Все элементы	Параметры цветового оформления блока: Тип заливки - укажите как должен быть окрашен фон элемента: Без заливки - бесцветный фон, Сплошной цвет - одним цветом, Цвет - цвет фона, Градиент - двумя цветами с перетеканием одного цвета в другой, Цвет 1 - первый цвет фона, Цвет 2 - второй цвет фона, Угол - угол перетекания одного цвета в другой.
	Фон блока	Блок с фоновой картинкой Блок с фоновым видео	Настройки фоновой картинки: Изображение - выбор картинки для фона, Повторение - режим повторения картинки, Не повторять - картинка размещается на фоне один раз,  Повторять по оси X - картинка повторяется горизонтально в один ряд, Повторять по оси Y - картинка повторяется вертикально в один ряд, Повторять - картинка повторяется по всему фону, Заполнение - определяет размер фоновой картинки, По умолчанию - размер картинки соответствует реальным размерам изображения, Растянуть - картинка растягивается под размеры фона, Вписать - картинка вписывается в размеры фона, Выравнивание по оси X - выравнивание картинки по левой/правой стороне, по  центру, Выравнивание по оси Y - выравнивание картинки по верхней/нижней границе, по центру,  Фиксировать - позволяет зафиксировать изображение таким образом, что при прокрутке страницы, фон блока будет как бы статично располагаться не относительно блока, а относительно всей страницы. Тип заливки - работает по аналогии с фоновым цветом, перекрывая в том числе изображения (без заливки/ сплошной цвет/ градиент, а также цвета и угол градиента - подробнее читайте в информации о "Фоновом цвете"). Настройки фонового видео: Тип видео фона: Изображение - см. выше, Видео-файл, Выбор видео из раздела "Медиа", Выбор заглушки из "Иллюстраций (на случай если видео не загрузится) Тип заливки - работает по аналогии с фоновым цветом, перекрывая в том числе изображения (без заливки/ сплошной цвет/ градиент, а также цвета и угол градиента - подробнее читайте в информации о "Фоновом цвете"). Видео с Youtube, ID видео - вставка id видео (буквенно-числовая комбинация из адреса видео, идущая после знака "=", например, rFHU13JCO8c), Тип заливки - работает по аналогии с фоновым цветом, перекрывая в том числе изображения (без заливки/ сплошной цвет/ градиент, а также цвета и угол градиента - подробнее читайте в информации о "Фоновом цвете").
	Рамка	Все элементы	Настройки рамки блока: Включение/выключение рамки (осуществляется через "переключатель" над настройками), Цвет - выбор цвета для рамки, Толщина - толщина рамки в пикселах, Радиус (общий/ подробный) - тут задается скругление углов рамки (можно задать скругление для всех углов сразу или же для каждого отдельно).
	Тень	Любой элемент	Включение/выключение рамки (осуществляется через "переключатель" над настройками), Цвет - выбор цвета тени, Сдвиг по X - тут вы можете отрегулировать, куда будет падать тень по горизонтальной оси, Сдвиг по Y - аналогично, но уже по вертикальной оси, Размытие - задает уровень расплывчатости, "нечеткости" тени, Распыление - определяет размер тени.
	Иллюстрация	Любые иллюстрации и иконки, кроме фоновых	При нажатии просто открывается раздел иллюстраций, где можно выбрать картинку для блока.
	Видео	Любые видео, кроме фоновых	Параметры видео: Тип видео: Видео-файл - выбор загруженного в систему файла из раздела "Медиа", Автозапуск - видео запускается сразу при просмотре блока, Повтор - после окончания видео начинает проигрываться с начала. Видео с Youtube - вставка id видео (буквенно-числовая комбинация из адреса видео, идущая после знака "=", например, rFHU13JCO8c), Автозапуск - видео запускается сразу при просмотре блока, Панель управления плеером - на сайте отображается панель youtube (громкость, бегунок видео и пр.).
	Размер	Любые картинки и видео, если дизайн предполагает возможность редактирования размера Логотипы	Высота картинки/видео в пикселах, Ширина картинки/видео в пикселах, Режим пропорционального изменения размеров (иконка со звеном) - если отметить иконку, изменение одного параметра (например, высоты) повлечет за собой пропорциональное изменение второго параметра (соответственно, ширины). Сброс до оригинального размера - по кнопке "Отмена".
	Отступы блока	Все блоки (относится именно к настройкам блоков целиком, а не к отдельным элементам в блоке)	Размер внутренних отступов в пикселах (можно как задать один общий размер, так и отдельно верхний и нижний).
	Переход на уровень выше	Все элементы	При нажатии отображаются настройки элемента, родительского по отношению к тому, который был выбран до этого (например, если нажать на данную кнопку при редактировании отдельного текстового элемента, вместо настроек данного элемента выведутся все общие настройки блока).
	Анимация	Все блоки (настройка влияет на анимацию появления всего блока, а не отдельных его элементов)	Типы анимации - выбор эффекта, с которым будет появляться блок при прокрутке лендинга (нет анимации, скольжение, появление, увеличение, скачок), Направления анимации - укажите, откуда будет появляться блок (право, лево, верх, низ).

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

Одна из кнопок на верхней панели позволит вам, оставаясь в режиме редактирования, перемещаться по вкладкам или менять слайды в блоках.

К примеру, представим, что вы добавили на страницу блок со слайдером и отредактировали первый слайд, а теперь хотите, не заходя в отдельные окна, попасть на следующий слайд и отредактировать его. Для этого вам необходимо выделить кнопку пролистывания на слайдере и на верхней панели нажать на кнопку "Воспроизвести ключевое действие" - как это изображено на скриншоте ниже. Вы попадете на следующий слайд и сможете работать уже с ним.

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

Кроме того, вы можете переключаться между вкладками с помощью комбинации "ALT+левая кнопка мыши".

В случае если вы используете блок с каким-либо списком (список преимуществ и т.д.), вы можете прямо в редакторе лендинга удалять или копировать элементы списка.

Для этого выделите нужный элемент и затем нажмите на соответствующую кнопку на верхней панели.

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

В зависимости от блока наполнение может быть абсолютно разным. Ниже мы приводим несколько примеров (прочие блоки вы можете править по аналогии с представленными ниже).

После нажатия на кнопку редактирования откроется окно, в котором вам будут доступны следующие настройки:

В поле "Заголовок" введите заглавие для блока торговых предложений (например, "Мы предлагаем", "Новинки", "Популярное"...).

Чтобы добавить позицию в список предложений, нажмите на кнопку "+".

Откроется окно добавления торгового предложения, где вам будет необходимо заполнить следующие поля:

• Название товара/услуги.
• Изображение - картинка товара, иллюстрация услуги, иная тематическая картинка.
• Размер картинки - выберите один из вариантов "Растянуть" (в данном режиме картинка растягивается под размеры области для нее) или "Вместить" (картинка вставляется в область, как бы вписывается в размеры данной области).
• Alt для картинки - альтернативное описание для картинки (оно будет отображаться в случае, если картинка на сайте не прогрузится).
• Небольшое описание товара/услуги - характеристики товара/условия оказания услуги/стоимость.
• Кнопка 1 - при нажатии откроется отдельное окно с настройками кнопки, которая будет выводиться в карточке этого товара или услуги. Кнопка имеет свои настройки (название; режим работы при клике - открывать форму или ссылку; собственно ссылка для открытия при клике; возможность открывать в новом окне или вообще скрыть кнопку из карточки товара).

Кроме того, в списке товаров/услуг вы можете:

• Отсортировать товары/услуги в списке как вам угодно - для этого наведите курсор на метку слева от названия и, зажав кнопку мыши, перетащите пункт на нужную позицию;
• Перейти к редактированию уже добавленного предложения - нажмите на название, откроется окно, в котором вам будут доступны все заполняемые при создании параметры;
• Удалить товар/услугу - для этого просто нажмите на иконку с изображением корзины справа от названия.

В конце не забудьте сохранить изменения.

Тут в окне редактирования вам будут доступны следующие настройки:

• Заголовок блока - введите общий для всего блока заголовок.
• Небольшое описание - текстовое наполнение для блока.
• Заголовок формы - заголовок к прикрепленной к блоку форме.
• Свое видео на фон - тут вы можете выбрать из раздела "Медиа" видеоролик, который будет использоваться в качестве фона.
• Видео из Youtube - вставка id видео (буквенно-числовая комбинация из адреса видео, идущая после знака "=", например, rFHU13JCO8c), которе послужит фоном для блока.

Не забудьте сохранить изменения.

Обратите внимание!

• Рекомендуется использовать только один вид фона из трех доступных - изображение, свое видео или видео с Youtube - не загружая одновременно два или три фона.
• Для наглядности вы также можете ознакомиться с инструкциями к наполнению блоков на старых шаблонах лендингов.

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

Откроется окно с настройками блока.

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

• Поменять местами блоки - если в блоке, два элемента (с одной стороны текст, с другой стороны картинка), эта настройка позволит менять их местами.
• Анимация элементов в блоке - тут вы можете выбрать способ анимации именно для элементов в блоке.
• Количество колонок/преимуществ в ряду - если блок представляет собой некое подобие табличного формата, тут вы сможете задать количество колонок.
• Выравнивание наполнения/блока с текстом/Расположение текста блока - влияет на отображение текстового наполнения блока, выравнивает его по одной из сторон.
• Выравнивание фонового изображения в блоке - как и настройка выше, влияет на то, с какой стороны будет выводиться контент, но в этом случае уже фоновая картинка.
• Фиксировать изображение при скролле сайта - фиксирует изображение таким образом, что при прокрутке страницы, картинка будет как бы статично располагаться не относительно блока, а относительно всей страницы.
• Высота логотипа - определяет размер логотипа, размещенного на блоке.

В конце не забудьте сохранить изменения.

Нажимая на кнопки "вверх" и "вниз", вы сможете изменять положение блока и двигать его относительно остальных блоков на странице.

Якорь -  тут вы можете указать текст для так называемого "якоря", то есть ссылки именно на данный блок на странице. Если вам нужно куда-либо вставить ссылку именно на этот блок, задайте якорь, скопируйте адрес страницы с якорем и вставьте в нужном месте (например, если страница находится по адресу "http://megagroup.ee/landing", а якорь для блока вы указали "request_form", то данный блок будет открываться по ссылке "http://megagroup.ee/landing#request_form").

Чтобы прописать якорь для блока, нажмите на три точки в правом верхнем углу блока и выберите пункт "Якорь".

В открывшемся окне введите текст якоря (только якоря, без адреса страницы целиком) и нажмите "Сохранить" 

Чтобы скрыть блок на сайте, опять же нажмите на три точки и выберите пункт "Скрыть". В конструкторе блок продолжит отображаться, просто будет помечен диагональной штриховкой. На сайте же блок не будет виден. 

Чтобы отобразить блок, нажмите на пункт "Скрыть" повторно.

Чтобы скопировать блок, все в том же меню выберите пункт "Дублировать блок". Ниже будет добавлен точно такой же блок с аналогичным наполнением, вы сможете при необходимости внести в него правки.

Нажав на три точки и выбрав пункт "Удаление", вы сможете удалить ненужный вам блок.