Инструкция по настройке Кракена

29 Августа 2018
145
Если вы пробрели или только надумали приобретать сайт мультилендинг на конструкторе Кракен, вам пригодится следующая информация:
Я оказываю платные услуги по консультации и настройке сайта на конструкторе Кракен.
Обращайтесь ко мне!
Настроем сайт мультилендинг на конструкторе Кракен 1с Битрикс.

Создание нового лендинга

Конструктор лендингов – это важнейшая часть решения КРАКЕН. Он позволяет без программиста создавать посадочные страницы с уникальным дизайном и набором блоков. Перед созданием и редактированием лендингов, внимательно изучите эту инструкцию.

Через режим редактирования

Через админку Битрикса

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

Шаг 1. Задайте базовые настройки блока

Шаг 2. Определитесь с типом блока

Шаг 3. Загрузите свою информацию

Шаг 4. Дизайн блока

Резюме по добавлению блока

Порядок блоков и их разновидности

Порядок блоков

Разновидности блоков

Кнопки в блоках

Действия при нажатии на кнопку

Боковая колонка на лендингах

Меню внутри страницы

Прикрепление баннеров

Быстрый доступ к настройкам блоков

Встраивание лендинга в сайт

Лендинг как главная страница

Добавление лендинга в меню

Лендинг вместо шаблонной страницы

Особенности SEO-оптимизации

Главный заголовок страницы

Дублирование при использовании в качестве шаблонной страницы

Работа с демо-контентом

  1. Правило 1. Не удаляйте наши примеры лендингов

  2. Правило 2. Не изменяйте наши примеры

Кастомизация (для разработчиков)

Тип блока «Описание»

Модальные окна

Вставка html кода в любые поля

Свои стили и скрипты

Обновления решения

Создание нового лендинга

Добавить новый лендинг можно двумя способами.

Через режим редактирования

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

Picture1.png
и откройте панель со списком лендингов.
Picture2.png

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

Picture3.png

В открывшейся панели задайте произвольное название для новой страницы и задайте идентификатор.

Picture4.png

Идентификатор - это слово или слова, написанные без пробелов (допускаются латинские буквы, цифры, знак дефис “-“ и подчеркивание “_”), которые станут частью адреса страницы.

Picture5.png

И название лендинга и его идентификатор можно поменять в дальнейшем при необходимости. После нажатия кнопки «создать лендинг» страница будет создана.

Через админку Битрикса

Второй способ создать новую страницу-лендинг – это в админке Битрикса зайти в раздел

«конструктор лендингов» и нажать кнопку «Добавить страницу».

Picture6.png

Далее, надо заполнить поля «название для администратора» и «символьный код». Другие заполнять на данном этапе не обязательно.

Picture7.png

После сохранения страница будет создана. На вновь созданном лендинге не будет блоков, зато будет

«заглушка» с кратким напоминанием о том, что надо сделать дальше.

Picture8.png

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

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

Picture9.png

либо через админку Битрикса, нажав кнопку «добавить блок».

Picture10.png

В любом случае в итоге, вы попадёте на страницу редактирования блока.

Picture11.png

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

Picture12.png
Шаг 1. Задайте базовые настройки блока

Обязательны только поле с «названием для администратора» (то есть, для вашего удобства) и «тип

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

Шаг 2. Определитесь с типом блока

Перед добавлением информации выберите типа блока - «Первый блок», «Цифры и факты», «Видео» и так далее. Типов блоков уже достаточно много, и в обновлениях мы будем добавлять ещё. При выборе типа блока, исходите из той информации, которую вы хотите разместить. Например, для фотографий используйте «фотогалерею», для информации о ваших сильных сторонах –

«преимущества», для отзывов – тип «цитата» и так далее.

Picture13.png

Проявляйте фантазию. Разумеется, никто вам не мешает использовать блок с «контактами», чтобы, например, показать на карте выполненные вами объекты. Чтобы развить фантазию, просмотрите, какие типы блоков и для чего мы используем в наших многочисленных примерах.

Шаг 3. Загрузите свою информацию

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

Picture14.png

У некоторых типов блоков есть переключатель внешнего вида.

Picture15.png

Например, «отзывы» могут быть показаны в виде слайдера, а могут и в расширенном виде.

Picture16.png

Шаг 4. Дизайн блока

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

Picture17.png

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

Особое внимание обращаем на настройки отступов.

Picture18.png

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

Резюме по добавлению блока

Чтобы создать блок надо:

0. Нажать кнопку добавления

1. Задать общие настройки

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

3. Заполнить вкладку, соответствующую типу блока

4. Подобрать настройки дизайна, которые вам нравятся

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

Picture19.png

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

Picture20.png

Порядок блоков и их разновидности

Порядок блоков

Когда на лендинге несколько блоков, их порядок можно редактировать с помощью настройки

«порядок блока на странице». Чем меньше число, тем выше блок.

Picture21.png

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

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

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

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

«сохранить». Обращаю внимание, что для того, чтобы всё работало корректно, порядковые номера блоков не должны повторяться.

Picture22.png

Разновидности блоков

С точки зрения группировки информации есть 3 разновидности блоков.

Большинство типов блоков – это простые блоки. Они никак автоматически не группируются между собой. К таким блокам относятся следующие типы:

  • · Описание

  • · Преимущества

  • · Цифры и факты

  • · Видео

  • · Фотогалерея

  • · Контакты

  • · Открытая форма

  • · Переключатель

  • · Клиенты и партнёры

Вторая разновидность – это составные блоки. Если они находятся рядом по сортировке, то они начинают автоматически объединяться в группу. К ним относятся блоки с типами:

  • · Первый блок

  • · Тариф

  • · Цитата

  • · Баннер

«Первый блок» объединяется в слайдер, «тарифы» объединяются в колонки, «цитаты» собираются в слайдер, а «баннеры» вида «живые плитки» собираются в группы.

Picture23.png

«Базовые настройки блока» и «настройки дизайна» для объединённого блока берутся от первого элемента.

И третья разновидность – это блоки-привязки. Они позволяют показать на вашем лендинге набор элементов из других разделов сайта:

  1. · Каталога товаров

  2. · Блоги / новости / акции

  3. · Вопрос-ответ

  4. · И сотрудники

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

Picture24.png

Вид блока с товарами на сайте

Picture25.png

Кнопки в блоках

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

Для этого, к каждому блоку можно добавить одну или несколько кнопок.

Picture26.png

Большинство типов блоков используют настройки кнопки, указанные во вкладке «настройки блока»

Picture27.png

У некоторых типов («Первый блок», «тарифы», «баннер» и др.) настройки кнопок находятся в своей вкладке.

Действия при нажатии на кнопку

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

Каждая кнопка может:

· Вызвать форму захвата

· Перекинуть пользователя к другому блоку лендинга, на котором он находится

· Переслать пользователя на другой лендинг или другой сайт

· Открыть модальное окно с произвольным содержимым

· Открыть ЛИД-опрос (если у вас куплен наш одноимённый модуль)

Обращаем внимание, что если вы хотите, чтобы с кнопки стояла ссылка на другой лендинг,

сделанный на Кракене, то выбирайте именно действие «переход на лендинг» и выбирайте нужный лендинг из списка.

Picture28.png

Таким образом, вы избежите возникновения 404-х ошибок в будущем, если у лендинга будет для каких-то целей изменен адрес (идентификатор).

Боковая колонка на лендингах

Меню внутри страницы

Бывают случаи, когда информации на странице много, и посетителю нужно помочь в ней

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

Picture29.png

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

Picture30.png

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

Выбрать местоположение колонки с меню можно в общих настройках лендинга.

Picture31.png

Колонка с меню может быть справа или слева.

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

Picture32.png

Прикрепление баннеров

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

Picture33.png

Сами баннеры надо предварительно создать в соответствующем разделе в админке.

Picture34.png

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

Picture35.png

Быстрый доступ к настройкам блоков

Когда лендингов на сайте становится с десяток, а количество блоков переваливает за сотню,

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

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

Picture36.png

У «живых плиток» в этом режиме также появляются кнопки быстрого уменьшения и увеличения.

Picture37.png

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

Встраивание лендинга в сайт

  Когда лендинг наконец готов, время добавить его в структуру сайта.

Лендинг как главная страница

Главная страница сайта, сделанного на КРАКЕН’е – это всегда лендинг. Если вы хотите сделать тот или иной лендинг главной страницей, то зайдите в его настройки и включите соответствующую опцию.

Picture38.png

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

Picture39.png




Добавление лендинга в меню

Добавление лендинга в главное меню сайта делается в настройках меню.

Picture40.png

При добавлении в меню ссылки на лендинг обязательно выбирайте пункт «Перейти на лендинг». Таким образом, вы избежите возникновения 404-х ошибок в будущем, если у лендинга будет для каких-то целей изменен адрес (идентификатор).

Picture41.png

Лендинг вместо шаблонной страницы

Уникальной возможностью КРАКЕНа является то, что вместо любой шаблонной страницы – новости, статьи, товара, акции вы можете использовать сделанный на нашем конструкторе лендинг.

Чтобы сделать шаблонную страницу лендингом, зайдите в её настройки и переключите её в режим

«лендинга», а затем выберите ранее созданный для этой цели лендинг из списка. После сохранения не забудьте проверить, что всё заработало.

Picture42.png


Особенности SEO-оптимизации

Главный заголовок страницы (H1)

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

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

Picture43.png

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

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

Дублирование при использовании в качестве шаблонной страницы

Если лендинг используется в качестве новости, статьи, товара или другой страницы шаблонного раздела, то у лендинга появляется 2 адреса. Это плохо для SEO и, чтобы избежать дублирования в общих настройках лендинга, вам нужно включить соответсвующую опцию.

Picture44.png

Она автоматически создаст нужные указания поисковым роботам и уберёт дублирование.

Работа с демо-контентом

После установки КРАКЕНа вам доступны более 20-ти разных примеров лендингов. Они будут служить вам помощью и подсказкой, когда вы только разбираетесь в работе конструктора, а позже станут

базой и источником вдохновения при создании ваших лендингов.

Восстановить демо-контент можно только при полной переустановке КРАКЕНа, поэтому, при работе с ним советуем следовать двум правилам.

Правило 1. Не удаляйте наши примеры лендингов

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

Picture45.png

Правило 2. Не изменяйте наши примеры

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

бесплатного модуля «инфоблоки, инструменты», который есть на маркетплейсе.

Бесплатный модуль копирования — http://marketplace.1c-bitrix.ru/solutions/asd.iblock/

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

Picture46.png

Кастомизация (для разработчиков)

Несмотря на то, что в конструкторе более 350 настроек, бывают случаи, когда для реализации задачи недостаточно стандартного функционала. На этот случай мы предусмотрели ряд возможностей по кастомизации (тонкой адаптации под свои задачи или задачи клиента).

Тип блока «Описание»

Если вам нужно сделать в рамках блока какую-то специфическую компоновку контента, например, вставить супер таблицу или добавить какой-нибудь on-line калькулятор, то для этого в конструкторе есть тип блока «Описание», куда вы можете разместить любой HTML-код или воспользоваться визуальным редактором Битрикса.

Модальные окна

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

Вставка html кода в любые поля

Чтобы наши клиенты не портили свои сайты неуместными огромными розовыми шрифтами или логотипами на пол-экрана мы достаточно жестко задали размеры большинства элементов и

шрифтов. Но при этом для профессионалов, которые точно знают, что делают, мы оставили возможность в любое поле вставлять html-код.

Например, если добавить к заголовку тег подчеркивания текста - <u>слово</u>, на сайте слово станет подчёркнутым. Точно также можно менять размер шрифта, сам шрифт, его цвет и вообще добавить в поле заголовка хоть кусок верстки. Используйте конструкции типа <span style=”…”> Текст</span>,

чтобы делать более сложное формирование.

Picture47.png

Свои стили и скрипты

Конечно, с точки зрения дизайна, правильно, чтобы все страницы сайта имели одну стилистику, но

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

В общих настройках лендинга есть поля для размещения своих CSS-стилей и скриптов. Указанные тут стили и скрипты будут применяться только на этом отдельно взятом лендинге, не затрагивая другие страницы сайта.

Picture48.png

Обновления решения

Мы постарались сделать так, чтобы вы могли дорабатывать решение под себя или клиента, не рискуя потерять все изменения при обновлении.

Для общих правок стилей используйте файл custom.css, для скриптов custom.js или соответствующие поля в общих настройках сайта.

Picture49.png

для интеграции форм захвата со сторонними сервисами по API, используйте файл

/bitrix/modules/concept.kraken/crm.php. Эти файлы не будут затрагиваться при обновлениях, как и содержимое всех стандартных полей конструктора.

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

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

Изучайте наш демо-контент и экспериментируйте. Будущее маркетинга в интернете основано на блочных посадочных страницах, поэтому каждый час, вложенный в изучение и понимание этой технологии, многократно окупится в будущем.


Нажмите для звонка
Ваш заказ готов к оформлению
Бесплатная доставка по РоссииБесплатная доставка по России
Инструкции по установкеИнструкции по установке включены
Помощь в настройкеПомощь в настройке техники
Гарантия 3 годаДополнительная гарантия на 3 года
КешбекКешбек до 20% на бонусную карту
Возврат и обменВозврат и обмен без чека
Гарантированный подарок каждому, кто оформит заказ на сумму более 500 рублей!
+7 965 342-61-46
Консультации по решению