Как сделать лэндинг (посадочную страницу) в… Битрикс24.Сайты

Данная публикация открывает цикл статей «Как сделать лэндинг в…». Этот мини сериал цикл представляет собой рассказ о том, как мы будем создавать один и тот же пример посадочной страницы на базе разных платформенных конструкторов.

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

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

Будем рады пообщаться с вами в комментариях к статьям, отвечать на ваши вопросы и дискуссировать по этим темам.

Исходные данные. Задание на разработку.

Мы сделали простой прототип, состоящий из нескольких блоков. Большой делать не стали, так как у нас нет задачи создать идеальный и всеобъемлющий лэндинг. Задача протестировать основные инструменты платформ и удобство их использования. На основе чего вы сможете сделать вывод подходит вам такой конструктор или нет.

Вот такой прототип

Прототип на создание лендинга

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

Платформа первая. Битрикс24.Сайты

Начнем с нового сервиса (beta версия), который появился всего пару месяцев назад и является частью корпоративного портала Битрикс24.Это Битрикс24.Сайты.

Стоимость и тарифы

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

Полноценное использование конструктора сайтов можно начать с тарификации Проект+ за 990 руб/месяц. В этом случае вы сможете создать до 5 отдельных сайтов с привязкой своего домена и с неограниченным количеством страниц.Бесплатно тоже можно, он без своего домена и только 1 сайт.

Первой знакомство

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

Битрикс24.Сайты выбор шаблона

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

Интерфейс

Сверху нам дается возможность просматривать страницу сразу в трех вариациях адаптации. Очень актуально для современного сайта.

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

Битрикс24.Сайты выбор блоков

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

Создаем наш сайт

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

Битрикс24.Сайты

Какие-то операции можно выполнять непосредственно в самом блоке сразу на странице. Например, добавлять или удалять пункт меню. Или работать с текстом.

Битрикс24.Сайты редактирование

Битрикс24.Сайты

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

Битрикс24.Сайты дизайн

Мы так же не смогли сделать шапку как у себя в прототипе – чтобы телефон был справа от меню. Так как нет возможности добавить что-то свое в существующий блок. На наш взгляд это сильно ограничивает разработку и если у вас есть определенное задание, что и как должно выглядеть, то скорее всего вы не сможете реализовать все по плану. Это существенный минус.

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

Битрикс24.Сайты

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

Битрикс24.Сайты

В один из моментов сохранения у нас случился вот такой конфуз

Битрикс24.Сайты ошибка

Видимо какой-то системный сбой. Пришлось все вручную исправлять.

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

Настраиваем сайт

Есть возможность ряда настроек. Например, подключить счетчик Яндекс.Метрики и Google Analytics или настроить мета теги страницы. Настроек немного, но они нужные.

Битрикс24.Сайты настройки

Итоги

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

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

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

В попытках максимально следовать прототипу, у нас получился вот такой сайт - https://testvj.bitrix24.site/