Главная / Редактирование сайта / Хочу создать страницу / Конструктор лендингов / Наполнение и редактирование блоков (шаблон Nordic Lidda)

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

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

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

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

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

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

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

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

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

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

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

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

Фотогалерея

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

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

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

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

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

Шаг 1

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

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

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

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

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

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

Кнопка

Значение

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

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

 

  Текст


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

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

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

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


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

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

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


 

Заголовки

Выбор тега для заголовка — вы можете выбрать один из следующих тегов и пометить им заголовок: 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 (громкость, бегунок видео и пр.).

Размер

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

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

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

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

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

Все элементы

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

Анимация

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

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

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

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

Воспроизвести ключевое действие

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

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

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

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

Копирование и удаление элементов списка

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

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

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

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

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

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

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

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

278186061_7671_5de7850212322.png

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Была ли статья вам полезна?
Укажите, пожалуйста, почему?
Комментарий