В этой статье я буду сравнивать функционал для вёрстки лендингов на GetCourse и AXL (и немного Tilda). Где проще и удобнее? Какие есть фишки, особенности и в чем отличия?
Наверно, логичнее было бы, чтобы эту статью написала Кира Ким, как дизайнер-верстальщик (кто не знает Киру? Киру знают все!). Но задача по сборке ленда на AXL прилетела именно ко мне.
И сразу оговорюсь, что пишу с учетом того, что вы знакомы с конструктором GetCourse и знаете все его плюсы и минусы.
Суть поставленной задачи
Дано: Онлайн-школа на GetCourse.es для Латинской Америки.
Проблема: Медленная загрузка лендов, видео и курсов.
Задача: Найти решение по ускорению загрузки платформы.
Решение: Перенести лендинг с GetCourse на платформу AXL и протестировать скорость загрузки.
Сейчас расскажу о своих впечатлениях.
Общая логика работы с сайтами
Для начала давайте посмотрим на общую логику работы с сайтами на GetCourse и AXL и сравним их.
На GetCourse
Все находится в одном месте и прикручено к одному домену: админка, тренинги, уроки, страницы сайта и т.д. Да, можно подключить несколько доменов. Но всё равно есть ряд нюансов и ограничений, например:
нельзя создать некоторые свои страницы, т.к. они уже являются системными, например, /sales;
страница /mainpage на домене 1 и на домене 2 по факту будет одной и той же страницей. Можно, конечно, сделать редиректы и настроить блоки через видимость, чтобы на разных доменах на этой странице был отличающийся контент, но это «ну такое».
На примере нашей Академии (АМиП — Академия маркетинга и продюсирования).
У нас несколько клубов и курсов размещены на одном аккаунте Геткурс:
![](http://fs-thb03.getcourse.ru/fileservice/file/thumbnail/h/9d8997cdefd002b6415674e2ae4e3f60.png/s/s1200x/a/557322/sc/206)
Обратите внимание на адрес в строке браузера и найдите 5 отличий:
![](http://fs-thb02.getcourse.ru/fileservice/file/thumbnail/h/35d585f69db162f05b663e75d924170f.png/s/s1200x/a/557322/sc/64)
![](http://fs-thb03.getcourse.ru/fileservice/file/thumbnail/h/f8356c2e99a77ddb58a7affd27576fac.png/s/s1200x/a/557322/sc/364)
Конечно, для каждого клуба хочется свою страницу домен/club, а для каждого курса — домен/course. Но в итоге мы вынуждены создавать «папки» для каждого клуба/курса и получается паровоз типа домен/info/club, домен/leadgen/club и т.п.
На AXL
Здесь другая логика.
Платформа обучения и сайты разделены. Это более удобное решение, когда в одном аккаунте сосуществуют разные проекты и необходимо разделение лендов.
Здесь можно создавать на разных доменах разные сайты со своей структурой и т.д.
![](http://fs-thb02.getcourse.ru/fileservice/file/thumbnail/h/ed78906e55403bb3a8361d3eae43d3ee.png/s/s1200x/a/557322/sc/241)
![](http://fs-thb03.getcourse.ru/fileservice/file/thumbnail/h/7640f242ae14a73887daea220b2e08d1.png/s/s1200x/a/557322/sc/129)
И это то, что нужно в нашей ситуации с несколькими доменами, клубами и курсами!
На AXL домен1/club и домен2/club — это будут совершенно разные сайты со своим контентом, счетчиками Яндекса и т.д. Но при этом они будут внутри одного аккаунта. Это очень удобно.
Конструкторы сайтов
Здесь я больше расскажу о разнице двух платформ. Потому что общий принцип конструктора и часто используемые стандартные блоки для сборки есть и там, и там.
Выбор блоков
На конструкторе GetCourse выбор блоков намного удобнее — они показаны в виде небольших превью, разделены по типу и все блоки раздела видно сразу, можно визуально сравнивать их между собой.
На AXL же готовые блоки идут списком и можно долго и мучительно искать, чтобы найти подходящий. В моменте видно всего 2 блока, так что возможности визуального сравнения тоже нет.
Интересная особенность конструктора AXL
В AXL готовые блоки с определенным набором составляющих по сути нужны только для удобства. Потому что (внимание!) их все можно собрать из любых элементов.
Что это значит?
На GetCourse ты выбираешь блок, далее вставляешь в него свой контент и настраиваешь. Если это блок с отзывами, то можно заменить картинку, текст, заголовок, подзаголовок. И всё. Нельзя без использования javascript добавить в него, например, видео или несколько картинок.
А вот на AXL ты можешь добавлять любые элементы в любое место. Хочешь видео вместо фотки — пожалуйста! Хочешь 5 фоток (зачем? надо!) — ставь на здоровье!
Очень популярный блок — колонки. На GetCourse есть выбор из 6 вариаций этого блока. Но в каждом из них есть свои ограничения. Где-то нельзя добавить еще колонок, где-то в колонку нельзя добавить картинку, видео, кнопку, форму или любой другой нужный вам элемент.
![](http://fs-thb03.getcourse.ru/fileservice/file/thumbnail/h/4d5f738696d0753ad8be5684f9bfd9f1.png/s/s1200x/a/557322/sc/227)
AXL же дает гораздо больше свободы. Есть полуготовые колонки под разные задачи, но и их можно менять по своему усмотрению.
Посмотрите на скрин. Не очень красиво? Согласен. Но функционально же!))
![](http://fs-thb03.getcourse.ru/fileservice/file/thumbnail/h/94818ef34ab6b3eb0ec9413bfd8d2d4e.png/s/s1200x/a/557322/sc/341)
Вот так уже лучше, да?
![](http://fs-thb01.getcourse.ru/fileservice/file/thumbnail/h/3f83071c1bc9e24c3855d6428433e3be.png/s/s1200x/a/557322/sc/98)
Это сделано на AXL. То же самое я (т.е. Кира) делал и на Getcourse. Только там для подобной визуализации потребовалось очень много CSS. И чтобы в дальнейшем что-то заменить или поправить, нужно разбираться в стилях.
И в принципе дальше можно было бы не рассматривать и не сравнивать другие блоки, поскольку любой блок на AXL можно собрать с 0, просто добавляя нужные элементы — текст, заголовок, фото, видео и т.д.
Но я расскажу про элементы, которые больше других порадовали меня своим наличием в конструкторе.
Начну с очень крутого элемента в конструкторе AXL: картинка + текст.
![foto](https://fs.getcourse.ru/fileservice/file/download/a/557322/sc/282/h/6ef05f81dcff1d50b7e04304bd36b7c4.png)
Картинка может быть слева, справа, сверху. Это единый элемент и он очень полезен, когда есть необходимость именно в таком сочетании. Чтобы сделать подобное в GetСourse приходилось добавлять CSS. А тут создание стилизации на уровне «потыкать мышкой» — сделал картинку меньше, сделал ее в кружке или квадратике, заменил её на иконку... Каеф!
![](http://fs-thb02.getcourse.ru/fileservice/file/thumbnail/h/02ad7afb9b0d6d4a2d6505d2c07bb959.png/s/s1200x/a/557322/sc/278)
Мне это очень пригодилось для создания вот этого элемента в колонках:
![](http://fs-thb01.getcourse.ru/fileservice/file/thumbnail/h/b062a365235c818a225320f1cb52ecae.png/s/s1200x/a/557322/sc/119)
Еще один крутой элемент, который позволяет делать интересные блоки — Группа.
С ним нужно работать аккуратно, т.к вложенность групп друг в друга очень запутывает.
Как это работает?
Пример 1
У нас есть элемент Группа, который мы помещаем в нужное нам место блока, а в нем 4 элемента Текст. При этом в группе эти 4 элемента мы можем расположить как горизонтально, так и вертикально относительно друг друга.
Пример 2
У нас есть Группа 1. Внутри нее горизонтально расположены Группа 1_1 и Группа 1_2. В Группа 1_1 размещено вертикально несколько элементов, а в Группа 1_2 несколько элементов горизонтально.
Разместить такую Группу 1 можно в любом блоке. Где пригодится? Например, в меню или подвале. Можно заменить Группами Колонки. Зачем? Пока нет идей, но можно же!
![](http://fs-thb02.getcourse.ru/fileservice/file/thumbnail/h/c3da46b1a051b350e00087163cb2fdc9.png/s/s1200x/a/557322/sc/164)
Также стоит упомянуть, что все элементы тонко настраиваются прямо в редакторе. Хочешь внутренний отступ справа от текста — ставь. О, есть и внутренний, и внешний — отлично. И много других настроек. Подробно останавливаться не буду. И так понятно, что функционал крутой и очень гибкий.
![foto](https://fs.getcourse.ru/fileservice/file/download/a/557322/sc/254/h/47d33339761e815a9d2f0ee99facfd1b.png)
Адаптивность
Тут-то я и вспомню Тильду: иногда собираешь блок на ленде — на компьютерах смотрится отлично, а на телефонах ужас. Знакомо? Что обычно делаем? Правильно, копируем блок, подгоняем его под мобильную версию и настраиваем видимость. Работает? Работает.
Заходим в редактор и — о, ужас! 100500 одних и тех же блоков под разные устройства. Нужно поменять текст? Ищи, где он есть, удачи.
На GetCourse, как и на AXL, практически все блоки адаптивные, но все всегда красивые в итоге и нужно что-то допиливать. На GetCourse обычно это делается через CSS. Хотя бывают мастера, которые, как на Тильде, копируют блоки, настраивают видимости и подгоняют под устройства. (Каюсь, сам иногда так делаю, когда лень CSS писать. Оправдан!)
На AXL подошли к этой проблеме с другой стороны — а давайте для каждого элемента блока можно будет ставить свои настройки видимости для определенных устройств и вообще менять их стили.
![foto](https://fs.getcourse.ru/fileservice/file/download/a/557322/sc/1/h/00659057aef96367e057bfac25736020.png)
Да, на GetCourse тоже можно видимость настраивать, но только для целого блока! А если мне одну фотку нужно спрятать — CSS тебе в помощь.
Еще одна очень крутая фишка AXL — прямо в конструкторе можно переключиться на мобильную версию и вносить правки. Делаем размер шрифта меньше, цвет другой, выравниваем — и это все сохраняется только для мобильной версии! Для ПК и планшета свои настройки.
Где-то я такое видел... На Платформе LP. А еще в Тильде в Зеро-блоке. Кем же вдохновлялись?
![](http://fs-thb01.getcourse.ru/fileservice/file/thumbnail/h/97ff94aa9fadf9c9657067cab358fe0d.png/s/s1200x/a/557322/sc/366)
Да, в чём-то конструктор AXL похож на зеро-блок Тильды — есть переключение между мобильной версией и ПК, отдельные настройки для каждого формата и т.п. Но в AXL для расположения элементов есть своя сетка — элемент за элементом, под элементом или около элемента. Нельзя поставить его в произвольное место и, например, надвинуть на элемент, перекрыть другим и т.д., как в зеро-блоке.
Но разработчики AXL обещают и такую штуку сделать. Ждем!
Обратите внимание, что не всегда отображение в мобильной версии редактора показывает ленд так, как он будет в реальности выглядеть на мобильных устройствах. Поэтому обязательно надо тестить на телефонах и делать правки.
Иногда кажется, что с CSS это можно сделать лучше, т.к. там для стилей можно прописать конкретные размеры экранов.
Каких крутых вещей, которые есть на GetCourse, мне не хватает в AXL
Блок-вставка Другая страница — очень удобно для случаев, когда есть повторяющийся на многих страницах блок и его часто нужно редактировать. Например, делаем страничку с отзывами, вставляем ее везде через вышеупомянутый блок GetCourse, готово — на всех страницах одинаковые отзывы. Нужно что-то добавить или изменить? Меняем в одном месте, обновляется везде.
Видимость блоков по сегментам. У AXL есть, но пока мало настроек. Я хочу ученикам на ленде показать ЭТО, а не ученикам показать ВОТ ЭТО.
Блок с редиректом. Очень удобная связка блока с редиректом и видимостью по сегментам. Этому сегменту пользователей недоступна эта страница — отправляем на другую.
Блок Список уроков тренинга. Очень крутая штука для показа уроков на продающей странице. Не надо вносить изменения на ленд, сделал правки в курсе — обновления отобразились.
Действия с пользователем при заходе на страницу. С помощью этого функционала я сделал очень много крутых механик на GetCourse. Обожаю его. Очень мощный инструмент для интересных воронок.
Также не хватает отдельных блоков CSS и Javascript — на AXL это все в едином блоке HTML. Добавляя CSS в специальный блок на GetCourse мы сразу после сохранения можем увидеть изменения. А вот в AXL приходится переходить на страницу, чтобы CSS заработал. С JS немного другое неудобство — всё в кучу и не всегда есть понимание, что именно поставили внутрь HTML блока. На GetCourse верстальщику проще это увидеть — открываешь отдельный блок, ага, тут у нас скрипт и, судя по названию, он для отображения времени и т.д.
Мои выводы
После переноса на AXL загрузка сайта действительно стала быстрее. Сравните сами.
Было — скорость загрузки на GetCourse:
![foto](https://fs.getcourse.ru/fileservice/file/download/a/557322/sc/305/h/36ad937af9dc08d527e8db8e05633eed.jpg)
![foto](https://fs.getcourse.ru/fileservice/file/download/a/557322/sc/57/h/78a32d463e161cfa91c567484b53a279.jpg)
Стало — скорость загрузки на AXL:
![foto](https://fs.getcourse.ru/fileservice/file/download/a/557322/sc/330/h/05715383c54dca8ad11a4fcd5eecf8c2.jpg)
![foto](https://fs.getcourse.ru/fileservice/file/download/a/557322/sc/70/h/706ea8904649a914469da0e688c4c63f.jpg)
Что касается сборки, конструктор AXL более симпатичен в дизайне (конечно, на вкус и цвет все фломастеры...) и очень дружелюбен для новичка. При этом не нужно знать CSS, чтобы сделать сложные элементы, проще настраивается адаптивность.
Да, не всех настроек пока хватает. Например, прозрачность/затемнение фона в начале/конце блока отсутствует — это только через CSS. Но конструктор развивается и обновляется и, надеюсь, еще порадует нас новыми удобными и полезными фишками.
Когда стартовал мой курс «Скаут AXL», многих интересовал вопрос: на чём мы сделали такой лендинг? Речь про этот: https://startaxl.com/scout
Отвечаю: он на AXL. И отсюда вывод — красоту на AXL делать можно.
А если хотите изучить AXL изнутри, заходите на курс «Скаут AXL». С нами уже Петя Петипак, Ваня Лагунович, Наташа Малкова, Вася Брежнев, Дюша, Стас и ещё около сотни крутых технарей. Присоединяйся к нашей классной компании!
Практический курс «Скаут AXL»: техническая настройка онлайн-школы на AXL с нуля
авторизуйтесь