Техническая поддержка 8 800 555 6342
Положение об оказании услуг технической поддержки
CMS.S3

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

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

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

Для начала предлагаем Вам ознакомиться с общим ознакомительным видео.

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

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

Плавающие настройки

Предпросмотр

Переход в родительский контейнер

Скрытие элементов блоков

Редактирование фона блоков

Добавление видео

Фотогалерея

Как подключить всплывающую форму

Изменение стилей для разных разрешений

Ссылки и якори

Размещение разных изображений в блоках

Работа с тенью

Шаг 1

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

278186061_7498_5d9c57accc2ef.png

Шаг 2. Встроенное редактирование содержимого блока

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

278186061_7499_5d9c583acbf85.png

Настройки внешнего вида содержимого блока

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

278186061_7500_5d9c58a81f3c0.png

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

Кнопка

Значение

К каким элементам блоков относится

Какие настройки доступны

 

  Текст


 
  • Простые тексты,
  • Заголовки,
  • Тексты кнопок,
  • Тексты форм (подписи к полям и пр. тексты, используемые в формах), 
  • Тексты различных флагов, меток, лейблов.

Настройки отображения текста:

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

Очистить форматирование


 
  • Простые тексты,
  • Заголовки,
  • Тексты кнопок,
  • Тексты форм (подписи к полям и пр. тексты, используемые в формах), 
  • Тексты различных флагов, меток, лейблов.

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

Тег заголовка


 

Заголовки

Выбор тега для заголовка — Вы можете выбрать один из следующих тегов и пометить им заголовок: H1/H2/H3/H4/H5/Div/P.

Ссылка

  • Текст (любой - просто текст, в форме, заголовке, лейбле),
  • Кнопка.

Настройки ссылки:

  • Тип ссылки:
    • Ссылка - вставка простой ссылки, имеет следующие настройки:
      • Адрес ссылки,
      • Открывать ссылку в новом или в текущем окне,
      • Закрыть ссылку от индексации поисковыми ботами (добавляет ссылке атрибут noindex).
    • Всплытие блока - вставка ссылки, при клике на которую во всплывающем окне отобразится блок, якорь которого Вы укажете.
      • Якорь - тут Вам необходимо указать якорь блока, который должен всплывать при клике (о том как работать с якорями, читайте ниже).
    • Скролл до блока - в данном случае при клике по ссылке посетитель просто будет перебрасываться на указанный блок.
      • Якорь - как и в случае выше, тут нужно указать якорь блока, на который должна перебрасывать ссылка.

Рекомендуем ознакомиться  с видео о ссылках и якорях.

Фоновый цвет

Все элементы

Параметры цветового оформления блока:

  • Тип заливки - укажите как должен быть окрашен фон элемента:
    • Без заливки - бесцветный фон,
    • Сплошной цвет - одним цветом,
      • Цвет - цвет фона,
    • Градиент - двумя цветами с перетеканием одного цвета в другой,
      • Цвет 1 - первый цвет фона,
      • Цвет 2 - второй цвет фона,
      • Угол - угол перетекания одного цвета в другой.

Фон блока

  • Блок с фоновой картинкой
  • Блок с фоновым видео

Настройки фоновой картинки:

  • Изображение - выбор картинки для фона,
  • Повторение - режим повторения картинки,
    • Не повторять - картинка размещается на фоне один раз, 
    • Повторять по оси X - картинка повторяется горизонтально в один ряд,
    • Повторять по оси Y - картинка повторяется вертикально в один ряд,
    • Повторять - картинка повторяется по всему фону,
  • Заполнение - определяет размер фоновой картинки,
    • По умолчанию - размер картинки соответствует реальным размерам изображения,
    • Растянуть - картинка растягивается под размеры фона,
    • Вписать - картинка вписывается в размеры фона,
  • Выравнивание по оси X - выравнивание картинки по левой/правой стороне, по  центру,
  • Выравнивание по оси Y - выравнивание картинки по верхней/нижней границе, по центру, 
  • Фиксировать - позволяет зафиксировать изображение таким образом, что при прокрутке страницы, фон блока будет как бы статично располагаться не относительно блока, а относительно всей страницы.
  • Тип заливки - работает по аналогии с фоновым цветом, перекрывая в том числе изображения (без заливки/ сплошной цвет/ градиент, а также цвета и угол градиента - подробнее читайте в информации о "Фоновом цвете").

Настройки фонового видео:

  • Тип видео фона:
    • Изображение - см. выше,
    • Видео-файл,
      • Выбор видео из раздела "Медиа",
      • Выбор заглушки из "Иллюстраций (на случай если видео не загрузится)
      • Тип заливки - работает по аналогии с фоновым цветом, перекрывая в том числе изображения (без заливки/ сплошной цвет/ градиент, а также цвета и угол градиента - подробнее читайте в информации о "Фоновом цвете").
    • Видео с Youtube,
      • ID видео - вставка id видео (буквенно-числовая комбинация из адреса видео, идущая после знака "=", например, rFHU13JCO8c),
      • Тип заливки - работает по аналогии с фоновым цветом, перекрывая в том числе изображения (без заливки/ сплошной цвет/ градиент, а также цвета и угол градиента - подробнее читайте в информации о "Фоновом цвете").
278186061_7568_5dc3c21bcdd74.png

Рамка 

Все элементы

Настройки рамки блока:

  • Включение/выключение рамки (осуществляется через "переключатель" над настройками),
  • Цвет - выбор цвета для рамки,
  • Толщина - толщина рамки в пикселах,
  • Радиус (общий/ подробный) - тут задается скругление углов рамки (можно задать скругление для всех углов сразу или же для каждого отдельно).

Тень

Любой элемент

  • Включение/выключение рамки (осуществляется через "переключатель" над настройками),
  • Цвет - выбор цвета тени,
  • Сдвиг по X - тут Вы можете отрегулировать, куда будет падать тень по горизонтальной оси,
  • Сдвиг по Y - аналогично, но уже по вертикальной оси,
  • Размытие - задает уровень расплывчатости, "нечеткости" тени,
  • Распыление - определяет размер тени.

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

Иллюстрация

Любые иллюстрации и иконки, кроме фоновых

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

Больше информации в видеоинструкции по ссылке.

Видео

Любые видео, кроме фоновых

Параметры видео:

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

Размер

  • Любые картинки и видео, если дизайн предполагает возможность редактирования размера
  • Логотипы
  • Высота картинки/видео в пикселах,
  • Ширина картинки/видео в пикселах,
  • Режим пропорционального изменения размеров (иконка со звеном) - если отметить иконку, изменение одного параметра (например, высоты) повлечет за собой пропорциональное изменение второго параметра (соответственно, ширины).
  • Сброс до оригинального размера - по кнопке "Отмена".

Отступы блока

Все блоки (относится именно к настройкам блоков целиком, а не к отдельным элементам в блоке)

Размер внутренних отступов в пикселах (можно как задать один общий размер, так и отдельно верхний и нижний).

Переход на уровень выше

Все элементы

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

Анимация

Все блоки (настройка влияет на анимацию появления всего блока, а не отдельных его элементов)

  • Типы анимации - выбор эффекта, с которым будет появляться блок при прокрутке лендинга (нет анимации, скольжение, появление, увеличение, скачок),
  • Направления анимации - укажите, откуда будет появляться блок (право, лево, верх, низ).

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

278186061_7746_5e05ce845c05f.png

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

Наполнение блока

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

278186061_7501_5d9c5b60ad3cc.png

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

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

Пример наполнения 1. Продукты и услуги

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

278186061_7671_5de7850212322.png

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

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

 

278186061_7569_5dc3f557be512.png

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

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

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

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

278186061_7570_5dc3ff529b47b.png

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

phpVHU1LY

Пример наполнения 2. Продающий блок

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

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

278186061_7672_5de7856070a7c.png

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

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

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

Настройки блока

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

278186061_7502_5d9c5cdf41449.png

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

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

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

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

phpVHU1LY

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

Перемещение блока

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

278186061_7503_5d9c5d0c2b1f2.png

Дополнительные возможности

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

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

278186061_7504_5d9c5d5e3df8d.png

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

278186061_7524_5daef20670be1.png

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

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

278186061_7505_5d9c5d8221159.png

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

278186061_7506_5d9c5da2e7841.png

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

278186061_7507_5d9c5dc62246c.png