Промостраница для Ремейка

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

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

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

оформления геткурса за 2 дня

Если просмотреть всю страницу, можно поймать впечателение, что мы просто продаём красивую картинку. Мы кричим «Красиво, красиво, красиво — дай 100к». В целом я пытался на лендинге показать какой был страшный геткурс и какой он стал крутой с Ремейком.

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

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

Промостраница для Ремейка 1

Посыл «Бери дизайн за 100к» никуда не делся, просто немного изменился формат.

Переосмысление

В какой-то момент я понял, что сделал фигню. Глядя на этот лендинг, было не понятно, что мы продаём, в чем вообще ценность. Почему это должны купить? Почему предприниматель должен вложить в нас сотку, а не в маркетинг?

Решил опросить клиентов и составить картину продукта с их стороны.

Мнение клиентов

Мы запускали сайт не на пустом ожидании, что клиенты будут — они уже были. Они покупали продукт и до запуска лендинга. Мы думали, что они покупают его из-за красивого дизайна. На самом деле это не так.

Кто лучше знает, что хорошего в нашем продукте, как не наши клиенты? Ведь они почему-то отдали 100к за продукт, даже без лендинга. Я поговорил с ними и вот, что они сказали о Геткурсе и нашем оформлении:

  • В старом дизайне ученики не могли найти нужный курс и уроки, с Ремейком стало легче найти и количество обращений в поддержку уменьшилось
  • У нас две школы, для одной делали индивидуальную разработку, а для другой заказали Ремейк. С индивидуальной разработкой много головняка, костылей и косяков. Ремейк работает стабильно.
  • Наша цель — отстроится от конкурентов, у которых все одинаково в стандартном стиле геткурса. Создать хорошее впечатление, что это не стандартный геткурс или очередной обезличенный геткурс, а именно наш геткурс.
  • От учеников меньше вопросов. Мы отличились от конкурентов, показали уровень лидеров рынка, отзывы стали лучше, меньше нагрузка на тех.поддержку.
  • Это вообще не про красоту. Нам важен был бренд, удобство. Хороший дизайн это показатель серьезной школы, которой можно доверять. Нас всегда бесило, когда надо было делать скриншоты и из-за некрасивого видео каждый раз было стремно их выкладывать, потому что дизайн некрасивый. Он портил впечатление, даже если сайт был красивый.

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

Создание ценности

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

Большую часть контента я сосредоточил на выгоде для владельцев школ. Да, мы Ремейк делали в основном для пользователей, чтобы им было приятнее и удобнее пользоваться Геткурсом. А изначальная выгода для владельцев была в экономии денег и времени по сравнению с индивидуальной разработкой.

статья про ремейк

Дизайн лендинга

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

Расскажу о ключевых блоках лендинга

Промостраница для Ремейка 2

Первый блок

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

Промостраница для Ремейка 3

Что вообще такое Ремейк?

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

Промостраница для Ремейка 4

Как он выглядит

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

Промостраница для Ремейка 5

Преимущества для владельца

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

Промостраница для Ремейка 6

Преимущества для админов

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

Промостраница для Ремейка 7

Преимущества для учеников

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

Промостраница для Ремейка 8

Исправили баги

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

Промостраница для Ремейка 9

Школы с Ремейком

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

Промостраница для Ремейка 10

Почему купить выгоднее

Если владелец школы не осознал ценность продукта, здесь я кратко подвожу итоги чётко по списку.

Промостраница для Ремейка 11

Процесс установки

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

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

Мы знаем над чем нужно работать в продукте. Эти блоки масштабируемые и разбирая список задач мы будем задавать себе вопросы: «Это принесет кому-то пользу? А какую пользую это принесет?». А потом добавил этот блок в лендинг. Эти 3 блока — база для продажи продукта. Именно в этих блоках владелец будет составлять ценность продукта и сравнивать их с суммой сделки.

Полный дизайн лендинга

Промостраница для Ремейка 12

Полезности для карточек уроков и тренингов в GetCourse

Скрыть кол-во уроков на карточке тренинга

.stream-title + div b { display: none; }

Скрыть имя основного преподавателя на карточке тренинга
(код для JavaScript-блока)

$(".stream-title + div").each((i,el)=>{
    $(el).html((i,t)=>{return t.replace("Dmitry Space.", "")});
});

* Моё имя нужно заменить на имя преподавателя

Убрать иконки на карточках урока

html .lesson-list .state-icon-block {
  display: none;
}

html .lesson-list li .info {
  padding: 0 20px;
  margin: 5px;
  border-left: none;
}

html .lesson-list .user-state-bg {
  background: none;
}

Скрыть картинки у всех карточек уроков

html .lesson-list li table .item-image { display: none; }
html .lesson-list .item-main-td.item-with-image { height: auto; }

Показывать картинки уроков в мобильной версии сайта

@media (max-width: 520px) {
  html .lesson-list li .item-image {
    display: table-cell;
  }
}

Добавить лейбл/ярлычок на карточку урока

.lesson-id-149282656 {
  position: relative;
}

.lesson-id-149282656:after {
  content:url("https://img.icons8.com/nolan/64/cat.png");
  position: absolute;
  top: 5px; right: 5px;
}

* ID урока заменяете на свой

Как сделать полный бэкап страницы в старом конструкторе Getcourse

Мини-инструкция, как сделать полный бэкап страницы в старом конструкторе getcourse.

1. На правой панели в Настройках вида страницы выбираем главный блок.

2. Экспортируем его и сохраняем код экспорта в надёжное место.

3. Этот код просто так не загрузится обратно через Импорт. Поэтому поиском по тексту ищем в нём первое вхождение слова children (с кавычками). Всё что было до него заменяем на:

{"type":"div","xdgetId":"r9274","params":{

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

4. Важно! Стили, которые прописаны в окошке CSS-styles нужно сохранять отдельно, они не будут экспортироваться.


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

Аккордеон на jQuery/JavaScript

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

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

Аккордеон на jQuery/JavaScript 13

Логика

При клике на заголовок элемента, мы ищем его родителя и добавляем ему класс is-active. В то же время удаляем такой класс у остальных элементов. Изначально контект и одна иконка скрыта. В стилях для блока с активным класом меняем отображения внутренних элементов.

Разметка

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

<div class="faqs-list">
  <div class="faq faq-item">
    <div class="faq-header"> 
      <div class="faq-icon">
        <img class="faq-icon-minus" src="./img/svg/faq-icon-minus.svg" alt="">
        <img class="faq-icon-plus" src="./img/svg/faq-icon-plus.svg" alt="">
       </div>
      <div class="faq-title">Заголовок элемента</div>
    </div>
    <div class="faq-text">Текст элемента</div>
  </div>
</div>

В разметке мы должны дать дополнительный класс с приставкой .js, чтобы обращаться к нему из jQuery/Javascript. Дополнительный классы нужен, чтобы другой разработчик его не трогал. Чтобы понимал, что он не для стилей, а для интерактивности.

Нам нужно будет добавить 2 класса:

  • для шапки — js-faq-header,
  • для элемента — js-faq

Проставил классы в той же разметке. Выделил их жирным.

<div class="faqs-list">
  <div class="faq faq-item js-faq">
    <div class="faq-header js-faq-trigger"> 
      <div class="faq-icon">
        <img class="faq-icon-minus" src="./img/svg/faq-icon-minus.svg" alt="">
        <img class="faq-icon-plus" src="./img/svg/faq-icon-plus.svg" alt="">
       </div>
      <div class="faq-title">Заголовок элемента</div>
    </div>
    <div class="faq-text">Текст элемента</div>
  </div>
</div>

Стили

/* Стили по-умолчанию*/
.faq-icon-minus {
  display: none;
}
.faq-text {
  display: none;
}

/* Показываем текст */
.faq.is-active .faq-text {
  display: block;
}

/* Меняем иконку */
.faq.is-active .faq-icon-minus {
  display: block;
}
.faq.is-active .faq-icon-plus {
  display: none;
}

Логика

При клике на faq-header, мы ищем его родителя faq и добавляем ему класс is-active. А у всех остальных удаляем.

JavaScript

// Перебираем каждый элемент шапки
document.querySelectorAll('.js-faq-trigger').forEach(function(trigger) {
    // Получаем родителя, элемент аккордеона
    var parent = trigger.closest('.js-faq');
    
    // клик по шапке
    trigger.addEventListener('click', function(e) {
        
        // если при клике у него уже есть активный класс 
        if (parent.classList.contains('is-active')) {
            // то мы его удаляем
            parent.classList.remove('is-active');
        } 
        // если при клике мы не нашли у элемента активный класс
        else {
            // удаляем у всех элементов активный класс
            document.querySelectorAll('.js-faq').forEach(function(item) {
                item.classList.remove('is-active');
            });            
            // добавляем класс тому элементу, по которому кликнули
            parent.classList.add('is-active');
        }
    })
});

jQuery

// клик по шапке
$('.js-faq-trigger').on('click',function() {
   
    // Получаем родителя, элемент аккордеона
    var parent = $(this).closest('.js-faq');

    // если при клике мы не нашли у элемента активный класс
    if (parent.hasClass('is-active')) {
        // то мы его удаляем
        parent.removeClass('is-active'); 
    }
    else {
        // удаляем у всех элементов активный класс
        $('.js-faq').removeClass('is-active');
        
        // добавляем класс тому элементу, по которому кликнули
        parent.addClass('is-active');  
    }
})

Демо работы

Аккордеон на jQuery/JavaScript 14

Не получается верстать

Любой новый навык — дело практики. Начните с простых макетов и постепенно усложняйте их.

Если вы уже программировали, вам знаком гугл и интрумент отладки. Это уже 80% успеха.

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

Непонятно и сложно постоянно. Но важно, чтобы макет был не на 80% сложный, а на 15%-20%. В начале важно, чтобы это приносило кайф. А будет приносить, когда большую часть вы сделать можете и это не страшно, но вот над 15%-20% надо покумекать.

Цифры в фигме и в верстке выглядят по-разному

Сейчас верстаю проект и наткнулся на проблему — в процессе верстки заметил, что цифры в вёрстке выглядят по-другому. Шрифт и начертания те же, но выглядит нет так.

Цифры в фигме и в верстке выглядят по-разному 15

Я 10 раз проверил шрифт и растерянный не понимал, в чём дело.

Потом зашёл в дополнительные текстовые настройки и нашёл параметр Numbers→Style. Он отвечает за стиль цифр.

Цифры в фигме и в верстке выглядят по-разному 16

В вёрстке за это отвечает css свойство font-variant-numeric со значением lining-nums

.class {
  font-variant-numeric: lining-nums;
}

Под какие контентные области делать дизайн?

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

Я делаю под три разрешения: 1200, 640, 480. Все промежуточные точки верстальщик адаптирует так, чтобы ничего не разваливалось.

После вёрстки я прохожу по всем разрешениям и пишу правки.

Если проект для Тильды — беру сетку Тильды. Если сайт не на Тильде — ориентируюсь на Бутстрап.

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

Обучиться на бесплатных курсах

Реально ли обучиться

Да, реально.

Я учился пару месяцев с нуля, просматривая бесплатные курсы. Начал с «Вёрстка за 1 час» у Хауди Хо. Потом тренировался в HTML Academy, потом смотрел уроки Glo Academy.

Все это время верстал макеты. Искал дизайн в интернете, пробовал верстать. Придумывал страницы и верстал их. Если что-то не получались — гуглил. Это основной навык, постоянно гуглить и искать решения.

Я занимался этим по 6−7 часов в день. Через пару месяцев тренировки, верстал своё портфолио и закинул туда свёрстанные сайты по макетам, которые нашёл на бесплатных стоках.

Портфолио было ужастным, но оно было, это важно. Через две недели на сайте работодатель оставил заявку на сайте. Так я устроился на работу в студию верстальщиком и проработал год. Зарплата была 35 000 рублей.

Можно было расти и дальше, но я выбрал фриланс. Через год работы в студии уволился и ушел на фриланс. Доход поднялся до 60−80 тысяч рублей.

Курсы по вёрстке

Рекомендую то, чем пользовался сам:

Где найти подработку (не фриланс) по вёрстке сайтов, сборке в конструкторах, чтобы руку набить?

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

1. Бесплатные стоки

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

2. Дизайнеры

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

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

Плюс в том, что если вы сверстаете хорошо, дизайнер тоже может захотеть выложить её себе в портфолио. Так он покажет, что может делать не только дизайн, но и закрыть проект под ключ.

Также он упомянет вас в своём проекте.

3. Сайты, которые вас зацепили

Вы можете зайти на сайт и увидеть какой-то элемент: «Хм, интересно, как они его сделали». Обычно я после этого открываю редактор и стараюсь повторить, не подгладывая в консоль разработчика.

4. Сайт-портфолио

Я в начале карьеры начал разрабатывать сайт-портфолио. Использовал html, css, js, cms — wordpress.

Сначала это был простенький лендинг, где была информация обо мне и ссылки на мои работы.

Потом я добавил блог, полноценные кейсы.

На портфолио можно набить руку, потому что оно будет переставать нравится вам спустя месяц — это нормально. Я сделал уже 11 вариантов сайта портфолио. Кайждый раз докручивая или меняя дизайн полностью.

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

Как найти код запрещенных соц. сетей на своём сайте. Beget-хостинг

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

Я думаю, что наши правоохранительные органы запустят какие-то парсеры. Поэтому оставлять иконки — прям расход бабок на штрафы.

Я сначала прошёлся вручную по всем файлам, проверил шапки и подвалы.

Потом узнал о фиче бегета — поиск текста в файлах.

Как найти код запрещенных соц.сетей на своём сайте. Beget-хостинг 17

Идём в файловый менеджер

Как найти код запрещенных соц.сетей на своём сайте. Beget-хостинг 18

Заходим в нужную папку и нажимаем «Поиск текста» в верхней панели

Как найти код запрещенных соц.сетей на своём сайте. Beget-хостинг 19

Откроется окно поиска. Инстукции по полям на скриншоте. В списке найденных кликаете 2 раза и на Бегет будет открывать ту папку.

Как нужно передавать макет в фигме верстальщику?

Добрый день, Игорь!

Когда мне как верстальщику передавали макет в контейнере 1200 — я верстал в таком же контейнере и сайт выглядел одинаково, как на 1200, так и на 1600, 1920.

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

Когда я стал дизайнером, я заметил, что верстальщики берут мои макеты на 1200 и делают «резиновую» вёрстку на своё усмотрение. В итоге сайт на 1920 выглядит совсем не так.

Теперь я заранее предупреждаю об этом.

Хорошо писать верстальщику ТЗ: состояния кнопок, переполнение текста, рефренсы по анимации или эффектам.

Перенос wordpress-сайта

Мне поступила задача перенести сайт на wordpress. Дали архив с файлами wordpress и базу.

Я этого давно не делал и у меня не получалось. Я попросил знакомого и он помог мне в некоторых тонкостях.

Делюсь с вами, потому что я перерыл много статей, но не смог найти

Загрузить файлы на хостинг

Грузить файлы лучше в 2 захода, первый — все файлы кроме папки wp-content/uploads. Там лежат все картинки и часто эта папка занимает 95% всего размера сайта.

Лучше закинуть 200−300мб файлов самого сайта, а потом второй задачей закинуть папку uploads. Пока она загружатеся, вы сможете заняться другими делами.

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

Создать пустую базу

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

Импортировать в пустую базу данные нашей базы

Если у вас phpmyadmin — пользуйтесь импортом базы.

Перенос wordpress-сайта 20

После вход нажмите на кнопку «Импорт».

Перенос wordpress-сайта 21

Прикрепите файл базы

Перенос wordpress-сайта 22

Нажмите кнопку «Вперёд».

Проверить данные для подключения базы

Для уточнения данных для подключения базы, зайдите в файл wp-config.php.

Вам нужно найти следующие строки:


define('DB_NAME', 'название базы данных');
define( 'DB_USER', 'логин от базы данных' );
define( 'DB_PASSWORD', 'пароль от базы данных' );
define( 'DB_HOST', 'хост вашего хостинга' );

И вставить туда данные вашей базы. Эти данные нужно запросить у хостинг-провайдера.

Перенастроить домен

В старой базе лежит информация о старом домене. Она не будет работать, пока мы не поменяем адрес сайта.

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

Переходим в кореть сайта, переходим в файл wp-config.php и находим строчку define ('WP_DEBUG', false).

После неё вставляем текущий код. Менять нужно только ‘https’:

  • Если домен использует ssl — https://
  • Если не использует — http://
define('WP_SITEURL', 'https://' . $_SERVER['HTTP_HOST']);
define('WP_HOME', 'https://' . $_SERVER['HTTP_HOST']);

Заменить активного пользователя

Чтобы получить доступ к админке, надо заменить данные пользователя. Для этого переходиим в wp-users.

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

Перенос wordpress-сайта 23

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

Дальше заходим на страницу: ваш-сайт.ru/wp-login.php — это страница авторизации.

Перенос wordpress-сайта 24

Нажимаем «Восстановить пароль» и восстанавливаем пароль. После этого вы сможете по тому же логину зайти со своим паролем. Если хотите — логин тоже можно поменять, делается тоже двойным кликом.

За подсказку спасибо Дмитрию Воробьеву.