Создание лендинга на AXL и сравнение с GetCourse

В этой статье я буду сравнивать функционал для вёрстки лендингов на GetCourse и AXL (и немного Tilda). Где проще и удобнее? Какие есть фишки, особенности и в чем отличия?

Наверно, логичнее было бы, чтобы эту статью написала Кира Ким, как дизайнер-верстальщик (кто не знает Киру? Киру знают все!). Но задача по сборке ленда на AXL прилетела именно ко мне.

И сразу оговорюсь, что пишу с учетом того, что вы знакомы с конструктором GetCourse и знаете все его плюсы и минусы.

Суть поставленной задачи

Дано: Онлайн-школа на GetCourse.es для Латинской Америки.

Проблема: Медленная загрузка лендов, видео и курсов.

Задача: Найти решение по ускорению загрузки платформы.

Решение: Перенести лендинг с GetCourse на платформу AXL и протестировать скорость загрузки.

Сейчас расскажу о своих впечатлениях.

Для начала давайте посмотрим на общую логику работы с сайтами на GetCourse и AXL и сравним их.

На GetCourse

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

• нельзя создать некоторые свои страницы, т.к. они уже являются системными, например, /sales;

• страница /mainpage на домене 1 и на домене 2 по факту будет одной и той же страницей. Можно, конечно, сделать редиректы и настроить блоки через видимость, чтобы на разных доменах на этой странице был отличающийся контент, но это «ну такое».

На примере нашей Академии (АМиП — Академия маркетинга и продюсирования).

У нас несколько клубов и курсов размещены на одном аккаунте Геткурс:

Обратите внимание на адрес в строке браузера и найдите 5 отличий:

Конечно, для каждого клуба хочется свою страницу домен/club, а для каждого курса — домен/course. Но в итоге мы вынуждены создавать «папки» для каждого клуба/курса и получается паровоз типа домен/info/club, домен/leadgen/club и т.п.

На AXL

Здесь другая логика.

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

Здесь можно создавать на разных доменах разные сайты со своей структурой и т.д.

И это то, что нужно в нашей ситуации с несколькими доменами, клубами и курсами!

На AXL домен1/club и домен2/club — это будут совершенно разные сайты со своим контентом, счетчиками Яндекса и т.д. Но при этом они будут внутри одного аккаунта. Это очень удобно.

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

Выбор блоков

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

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

Интересная особенность конструктора AXL

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

Что это значит?

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

А вот на AXL ты можешь добавлять любые элементы в любое место. Хочешь видео вместо фотки — пожалуйста! Хочешь 5 фоток (зачем? надо!) — ставь на здоровье!

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

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

Посмотрите на скрин. Не очень красиво? Согласен. Но функционально же!))

Вот так уже лучше, да?

Это сделано на AXL. То же самое я (т.е. Кира) делал и на Getcourse. Только там для подобной визуализации потребовалось очень много CSS. И чтобы в дальнейшем что-то заменить или поправить, нужно разбираться в стилях.

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

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

Начну с очень крутого элемента в конструкторе AXL: картинка + текст.

Картинка может быть слева, справа, сверху. Это единый элемент и он очень полезен, когда есть необходимость именно в таком сочетании. Чтобы сделать подобное в GetСourse приходилось добавлять CSS. А тут создание стилизации на уровне «потыкать мышкой» — сделал картинку меньше, сделал ее в кружке или квадратике, заменил её на иконку... Каеф!

Мне это очень пригодилось для создания вот этого элемента в колонках:

Еще один крутой элемент, который позволяет делать интересные блоки — Группа.

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

Как это работает?

Пример 1

У нас есть элемент Группа, который мы помещаем в нужное нам место блока, а в нем 4 элемента Текст. При этом в группе эти 4 элемента мы можем расположить как горизонтально, так и вертикально относительно друг друга.

Пример 2

У нас есть Группа 1. Внутри нее горизонтально расположены Группа 1_1 и Группа 1_2. В Группа 1_1 размещено вертикально несколько элементов, а в Группа 1_2 несколько элементов горизонтально.

Разместить такую Группу 1 можно в любом блоке. Где пригодится? Например, в меню или подвале. Можно заменить Группами Колонки. Зачем? Пока нет идей, но можно же!

Также стоит упомянуть, что все элементы тонко настраиваются прямо в редакторе. Хочешь внутренний отступ справа от текста — ставь. О, есть и внутренний, и внешний — отлично. И много других настроек. Подробно останавливаться не буду. И так понятно, что функционал крутой и очень гибкий.

Тут-то я и вспомню Тильду: иногда собираешь блок на ленде — на компьютерах смотрится отлично, а на телефонах ужас. Знакомо? Что обычно делаем? Правильно, копируем блок, подгоняем его под мобильную версию и настраиваем видимость. Работает? Работает.

Заходим в редактор и — о, ужас! 100500 одних и тех же блоков под разные устройства. Нужно поменять текст? Ищи, где он есть, удачи.

На GetCourse, как и на AXL, практически все блоки адаптивные, но все всегда красивые в итоге и нужно что-то допиливать. На GetCourse обычно это делается через CSS. Хотя бывают мастера, которые, как на Тильде, копируют блоки, настраивают видимости и подгоняют под устройства. (Каюсь, сам иногда так делаю, когда лень CSS писать. Оправдан!)

На AXL подошли к этой проблеме с другой стороны — а давайте для каждого элемента блока можно будет ставить свои настройки видимости для определенных устройств и вообще менять их стили.

Да, на GetCourse тоже можно видимость настраивать, но только для целого блока! А если мне одну фотку нужно спрятать — CSS тебе в помощь.

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

Где-то я такое видел... На Платформе LP. А еще в Тильде в Зеро-блоке. Кем же вдохновлялись?

Да, в чём-то конструктор AXL похож на зеро-блок Тильды — есть переключение между мобильной версией и ПК, отдельные настройки для каждого формата и т.п. Но в AXL для расположения элементов есть своя сетка — элемент за элементом, под элементом или около элемента. Нельзя поставить его в произвольное место и, например, надвинуть на элемент, перекрыть другим и т.д., как в зеро-блоке.
Но разработчики AXL обещают и такую штуку сделать. Ждем!

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

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

Блок-вставка Другая страница — очень удобно для случаев, когда есть повторяющийся на многих страницах блок и его часто нужно редактировать. Например, делаем страничку с отзывами, вставляем ее везде через вышеупомянутый блок GetCourse, готово — на всех страницах одинаковые отзывы. Нужно что-то добавить или изменить? Меняем в одном месте, обновляется везде.

Видимость блоков по сегментам. У AXL есть, но пока мало настроек. Я хочу ученикам на ленде показать ЭТО, а не ученикам показать ВОТ ЭТО.

Блок с редиректом. Очень удобная связка блока с редиректом и видимостью по сегментам. Этому сегменту пользователей недоступна эта страница — отправляем на другую.

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

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

Также не хватает отдельных блоков CSS и Javascript — на AXL это все в едином блоке HTML. Добавляя CSS в специальный блок на GetCourse мы сразу после сохранения можем увидеть изменения. А вот в AXL приходится переходить на страницу, чтобы CSS заработал. С JS немного другое неудобство — всё в кучу и не всегда есть понимание, что именно поставили внутрь HTML блока. На GetCourse верстальщику проще это увидеть — открываешь отдельный блок, ага, тут у нас скрипт и, судя по названию, он для отображения времени и т.д.

После переноса на AXL загрузка сайта действительно стала быстрее. Сравните сами.

Было — скорость загрузки на GetCourse:

Стало — скорость загрузки на AXL:

Что касается сборки, конструктор AXL более симпатичен в дизайне (конечно, на вкус и цвет все фломастеры...) и очень дружелюбен для новичка. При этом не нужно знать CSS, чтобы сделать сложные элементы, проще настраивается адаптивность.

Да, не всех настроек пока хватает. Например, прозрачность/затемнение фона в начале/конце блока отсутствует — это только через CSS. Но конструктор развивается и обновляется и, надеюсь, еще порадует нас новыми удобными и полезными фишками.

Когда стартовал мой курс «Скаут AXL», многих интересовал вопрос: на чём мы сделали такой лендинг? Речь про этот: https://startaxl.com/scout

Отвечаю: он на AXL. И отсюда вывод — красоту на AXL делать можно.

А если хотите изучить AXL изнутри, заходите на курс «Скаут AXL». С нами уже Петя Петипак, Ваня Лагунович, Наташа Малкова, Вася Брежнев, Дюша, Стас и ещё около сотни крутых технарей. Присоединяйся к нашей классной компании!