На этой странице собрал набор правил и инструкций, как собрать кейс для сайта.
Почему бы не делать кейсы уникальными? Так же интереснее их читать.
Во-первых, чтобы собирать новые кейсы как на конвейере. У нас было много проблем со старыми кейсами, которые старались оформлять «поинтереснее». Долго писали → долго оформляли → редко выкладывали. И придерживаться одного стиля было очень сложно. Поэтому все новые кейсы минималистичны, придерживаются четкой структуры и делаются по шаблону.
Во-вторых, чтобы стиль кейсов соотвествовал стилю сайта. Поверх стилей тильды, при выгрузке кейса на сайт, накладываются новые стили, которые прописаны для отдельных блоков. Поэтому, чем больше будем использовать в тильде различных блоков — тем сложнее будет поддерживать консистентность.
На этой странице собраны почти все блоки, которые используются при сборке кейсов.
Почему бы не делать кейсы уникальными? Так же интереснее их читать.
Во-первых, чтобы собирать новые кейсы как на конвейере. У нас было много проблем со старыми кейсами, которые старались оформлять «поинтереснее». Долго писали → долго оформляли → редко выкладывали. И придерживаться одного стиля было очень сложно. Поэтому все новые кейсы минималистичны, придерживаются четкой структуры и делаются по шаблону.
Во-вторых, чтобы стиль кейсов соотвествовал стилю сайта. Поверх стилей тильды, при выгрузке кейса на сайт, накладываются новые стили, которые прописаны для отдельных блоков. Поэтому, чем больше будем использовать в тильде различных блоков — тем сложнее будет поддерживать консистентность.
На этой странице собраны почти все блоки, которые используются при сборке кейсов.
Гуглдок со всеми собранными кейсами:
https://docs.google.com/spreadsheets/d/1dgjdx01U83...
Зеленые — те что выложены и все в них ОК, желтые — те что выложены и в них что-то не ОК, остальные не сделаны.
https://docs.google.com/spreadsheets/d/1dgjdx01U83...
Зеленые — те что выложены и все в них ОК, желтые — те что выложены и в них что-то не ОК, остальные не сделаны.
Шаблон кейса
Первая часть кейса — краткие результаты, в ней 7 кусков, которые всегда одни и те же, всегда в одном и том же порядке:
1) обложка (надзаг, заг и картинка)
2) 3-4 фактоида про результаты
3) описание сайта, со ссылкой и задача
4) интересности на подложке
5) результаты-графики, редко с текстом опсиания
6) отзыв: текст или видео. Этого блока может не быть.
7) Рыжий CTA
Вторая часть кейса — подробности.
8) Блок «мы можем рассказать больше»
9) ссылка-спойлер
10) Текстовое описание с картинками. Тут блоков совсем мало: 2 типа заголовков, текст, картинки. Обычно этого достаточно. В паре кейсов встречаются особые вставки.
Есть 2 типа кейса: короткий и подробный.
Короткий состоит из кусков 1–7, в подробном есть все 10.
Разница еще в том, что при загрузке на сайте к ним применяются разные шаблоны страницы, об этом подробней в комменте про выгрузку на сайт.
Первая часть кейса — краткие результаты, в ней 7 кусков, которые всегда одни и те же, всегда в одном и том же порядке:
1) обложка (надзаг, заг и картинка)
2) 3-4 фактоида про результаты
3) описание сайта, со ссылкой и задача
4) интересности на подложке
5) результаты-графики, редко с текстом опсиания
6) отзыв: текст или видео. Этого блока может не быть.
7) Рыжий CTA
Вторая часть кейса — подробности.
8) Блок «мы можем рассказать больше»
9) ссылка-спойлер
10) Текстовое описание с картинками. Тут блоков совсем мало: 2 типа заголовков, текст, картинки. Обычно этого достаточно. В паре кейсов встречаются особые вставки.
Есть 2 типа кейса: короткий и подробный.
Короткий состоит из кусков 1–7, в подробном есть все 10.
Разница еще в том, что при загрузке на сайте к ним применяются разные шаблоны страницы, об этом подробней в комменте про выгрузку на сайт.
Наполнение кейса
Идеальный вариант сборки нового кейса — сделать дубликат уже готового нового кейса и заменить в нем содержимое.
Как сделать дубликат кейса:
1) в списке страниц «Страницы УМ» выбираете любую страницу с новым кейсом (они в конце списка, в начале — старые).
2) Выбираете «Настройки» → «Действия» → «Дублировать страницу».
3) На новой странице сразу в настройках меняете ее имя и дальше просто меняете контент.
Идеальный вариант сборки нового кейса — сделать дубликат уже готового нового кейса и заменить в нем содержимое.
Как сделать дубликат кейса:
1) в списке страниц «Страницы УМ» выбираете любую страницу с новым кейсом (они в конце списка, в начале — старые).
2) Выбираете «Настройки» → «Действия» → «Дублировать страницу».
3) На новой странице сразу в настройках меняете ее имя и дальше просто меняете контент.
Стили текста
На этой странице, даже в предпросмотре, все выглядит довольно погано. Но когда кейс будет залит на сайт, к нему применятся новые стили сайта и все будет ок. Как уже говорил, это сделано для того, чтобы типографика в кейсах соотвествовала типографике сайта.
Все оформление, которое задается в тильде мешает нормально оформлять кейс нашими стилями, поэтому, в тильде не используем панель стилей. Но есть несколько исключений. Что можно менять безболезненно:
— жирность текста;
— выравнивание;
— добавлять тексту ссылки.
Остальные изменения либо будут проигнорированы, либо сломают типографику кейса и придется чистить стили в тильде, что не всегда удается.
На этой странице, даже в предпросмотре, все выглядит довольно погано. Но когда кейс будет залит на сайт, к нему применятся новые стили сайта и все будет ок. Как уже говорил, это сделано для того, чтобы типографика в кейсах соотвествовала типографике сайта.
Все оформление, которое задается в тильде мешает нормально оформлять кейс нашими стилями, поэтому, в тильде не используем панель стилей. Но есть несколько исключений. Что можно менять безболезненно:
— жирность текста;
— выравнивание;
— добавлять тексту ссылки.
Остальные изменения либо будут проигнорированы, либо сломают типографику кейса и придется чистить стили в тильде, что не всегда удается.
Все тексты в кейсе прогоняем через типограф!
Типографика — важная часть стиля нашего сайта.
Каждый висячий предлог дает -10 к скиллу типографики.
Каждый неоттипографленный текст убивает котенка.
Выберите близкий аргумент, или придумайте свой — неважно, но текст типографьте всегда. Достаточно выделить текст и жмакнуть на иконку книги в панели стилей тильды.
Типографика — важная часть стиля нашего сайта.
Каждый висячий предлог дает -10 к скиллу типографики.
Каждый неоттипографленный текст убивает котенка.
Выберите близкий аргумент, или придумайте свой — неважно, но текст типографьте всегда. Достаточно выделить текст и жмакнуть на иконку книги в панели стилей тильды.
Иллюстрация для кейса и первого экрана
Сейчас все что есть собрано в этом файле: https://www.dropbox.com/s/ilgkol1i7urxfrg/%D0%B3%D...
Стиль простой, думаю клепать подобные иллюстрации тоже будет несложно. Если что-то не получается, обратите внимание вот на что:
— соотношение рыжих, серых кругов и черных линий. Рыжий круг — акцент, его не должно быть много. Серое пятно — фон, его можно побольше.
— выдерживайте визуальный вес иллюстрации. Например, баумолл сильно выбивается: слишком легкий и пустой.
— деталей должно быть не слишком мало, но и не слишком много. Баумолл и ЭКО примитивны, поэтому немного не дотягивают. А у сейфа наоборот многовато деталей (но он хорош).
— желательно делать картинку плоской или с простой геометрией пространства. На картинке с кабелями вообще непонятно что за перспектива, генератор справа от медведя повернут в 3/4 да еще и наклонен — это слишком сложно.
Некоторые кейсы — брендовые, поэтому в иллюстрации к ним надо использовать логотип. У иоллы и ревитеха это более-менее ОК, у баумолла сдлеано погано.
Как добавить иллюстрацию в кейс, смотри в комментарии в блоке с желтой рамкой.
Сейчас все что есть собрано в этом файле: https://www.dropbox.com/s/ilgkol1i7urxfrg/%D0%B3%D...
Стиль простой, думаю клепать подобные иллюстрации тоже будет несложно. Если что-то не получается, обратите внимание вот на что:
— соотношение рыжих, серых кругов и черных линий. Рыжий круг — акцент, его не должно быть много. Серое пятно — фон, его можно побольше.
— выдерживайте визуальный вес иллюстрации. Например, баумолл сильно выбивается: слишком легкий и пустой.
— деталей должно быть не слишком мало, но и не слишком много. Баумолл и ЭКО примитивны, поэтому немного не дотягивают. А у сейфа наоборот многовато деталей (но он хорош).
— желательно делать картинку плоской или с простой геометрией пространства. На картинке с кабелями вообще непонятно что за перспектива, генератор справа от медведя повернут в 3/4 да еще и наклонен — это слишком сложно.
Некоторые кейсы — брендовые, поэтому в иллюстрации к ним надо использовать логотип. У иоллы и ревитеха это более-менее ОК, у баумолла сдлеано погано.
Как добавить иллюстрацию в кейс, смотри в комментарии в блоке с желтой рамкой.
Что мы сделали в этом кейсе
Результат-фактоид 1
1790 → 9311
1790 → 9311
Результат-фактоид 2
22 000 → 92 000 грн
22 000 → 92 000 грн
Результат-фактоид 3
>3000 запросов
>3000 запросов
Eurotools — магазин инструментов с точками в Киеве и Запорожье и доставкой по всей Украине.
Задачи: увеличить трафик и продажи по Украине.
Задачи: увеличить трафик и продажи по Украине.
Это блок про всякие интересности. Немного текста, самые важные фразы можно выделить жирностью. Параграфы отбиваете переносами.
Украина → основное продвижение в Гугле. При этом рост в Яндексе не дает пропорционального роста трафика
15 000 товаров, 250 категорий и несколько тысяч страниц фильтров. А еще безумно высокая конкуренция с федералами и агрегаторами
Украина → основное продвижение в Гугле. При этом рост в Яндексе не дает пропорционального роста трафика
15 000 товаров, 250 категорий и несколько тысяч страниц фильтров. А еще безумно высокая конкуренция с федералами и агрегаторами
Результаты
Подпись к графику
Подпись к графику
Отзыв клиента
Разберемся в специфике, улучшим сайт и поднимем продажи по Украине
Мы можем рассказать больше
По ссылке ниже — вторая часть кейса. В ней мы уже подробнее рассказываем, как и что сделали, чтобы добиться результата. Если вам интересно почитать остросюжетную техническую нудятину, просим:
Показать крамольные подробности ↓↓↓
Скрытие подробностей под спойлер
После сборки подробностей не забудь добавить все блоки под спойлер.
Для этого в блоке «Показать крамольные подробности» идешь в «Контент», и там под инпутом «ID блоков» есть мааааленькая ссылка «выбрать блоки» (удобно, а?).
После сборки подробностей не забудь добавить все блоки под спойлер.
Для этого в блоке «Показать крамольные подробности» идешь в «Контент», и там под инпутом «ID блоков» есть мааааленькая ссылка «выбрать блоки» (удобно, а?).
Подробности кейса. Заг 2 уровня
Заг 3 уровня
— Тысячи страниц фильтров не подходили для продвижения: не было ЧПУ, страницы не индексировались.
— Много страниц фильтров → много похожих страниц в индексе Гугла.
— Много страниц фильтров → много похожих страниц в индексе Гугла.
Добавление страницы на сайт
1) Опубликовать кейс в тильде
2) Создать новую страницу в админке на сайте УМ (раздел страницы) https://up-advert.ru/wp-admin/edit.php?post_type=p...
3) Заполнить заголовок и опубликовать страницу
4) Подключить тильду
4.1 кнопка «Включить тильду для этой страницы».
4.2. выбрать страницу из списка с сайта УМ. Если в списке нет нужной, нужно нажать белую кнопку внизу «Обновить список». После выбора страницы нажать белую кнопку внизу «Сохранить»
5) заполнить урл (поле "Постоянная ссылка" под заголовком страницы)
6) Важно! Справа в блоке «Свойства страницы» выбрать правильный шаблон:
— для короткого кейса «кейс на тильде (короткий)»
— для длинного «кейс на тильде (со спойлером)»
7) Жмакнуть синюю кнопку вверху страницы «Обновить», проверить новую страницу.
1) Опубликовать кейс в тильде
2) Создать новую страницу в админке на сайте УМ (раздел страницы) https://up-advert.ru/wp-admin/edit.php?post_type=p...
3) Заполнить заголовок и опубликовать страницу
4) Подключить тильду
4.1 кнопка «Включить тильду для этой страницы».
4.2. выбрать страницу из списка с сайта УМ. Если в списке нет нужной, нужно нажать белую кнопку внизу «Обновить список». После выбора страницы нажать белую кнопку внизу «Сохранить»
5) заполнить урл (поле "Постоянная ссылка" под заголовком страницы)
6) Важно! Справа в блоке «Свойства страницы» выбрать правильный шаблон:
— для короткого кейса «кейс на тильде (короткий)»
— для длинного «кейс на тильде (со спойлером)»
7) Жмакнуть синюю кнопку вверху страницы «Обновить», проверить новую страницу.
Какие могут быть косяки
Не применились стили и вообще страница кривая — скорее всего, забыли указать шаблон
В конце страницы 2 рыжих CTA-блока, или его нет вообще — неправильно указан шаблон
Некоторые блоки в кейсе со странным размером шрифта или стилями текста — нужно чистить кейс в тильде, использовать только блоки из стандартного набора.
Иллюстрация не появляется на странице кейса — нужно проверить правильность указания пути в блоке с желтой рамкой.
Иллюстрация наезжает на текст — или править размер блока заголовка (уменьшать кол-во колонок), или добавлять белое поле иллюстрации.
Будет что-то еще — пишите мне, я не все помню, с чем сталкивался.
Не применились стили и вообще страница кривая — скорее всего, забыли указать шаблон
В конце страницы 2 рыжих CTA-блока, или его нет вообще — неправильно указан шаблон
Некоторые блоки в кейсе со странным размером шрифта или стилями текста — нужно чистить кейс в тильде, использовать только блоки из стандартного набора.
Иллюстрация не появляется на странице кейса — нужно проверить правильность указания пути в блоке с желтой рамкой.
Иллюстрация наезжает на текст — или править размер блока заголовка (уменьшать кол-во колонок), или добавлять белое поле иллюстрации.
Будет что-то еще — пишите мне, я не все помню, с чем сталкивался.
Последний шаг! Добавление кейса в плитку кейсов
После того как страница кейса выложена на сейт, все согласовано можно добавлять кейс в плитку (если он не скрытый)
1) Создаешь новый кейс в админке (раздел кейсы) https://up-advert.ru/wp-admin/edit.php?post_type=c...
2) Заполняешь заголовок (берешь из заголовка кейса)
3) Заполняешь описание (берешь из описания сайта со страницы кейса)
4) указываешь урд кейса (без домена!)
5) в поле «иконка» пишешь что угодно, оно нерабочее
6) в поле метки пишешь теги, которые добавятся кейсу (см как сделано у других кейсов)
7) добавляешь изображение (та же иллюстрация, что в кейсе)
В конце есть поле «где показывать». Если ничего не указать, кейс появится только на странице кейсов. Если указать страницу сео, плитка кейса появится еще и на ней. Но пока вывод новой плитки на старых страницах не настроен, лучше не трогать этот параметр.
После того как страница кейса выложена на сейт, все согласовано можно добавлять кейс в плитку (если он не скрытый)
1) Создаешь новый кейс в админке (раздел кейсы) https://up-advert.ru/wp-admin/edit.php?post_type=c...
2) Заполняешь заголовок (берешь из заголовка кейса)
3) Заполняешь описание (берешь из описания сайта со страницы кейса)
4) указываешь урд кейса (без домена!)
5) в поле «иконка» пишешь что угодно, оно нерабочее
6) в поле метки пишешь теги, которые добавятся кейсу (см как сделано у других кейсов)
7) добавляешь изображение (та же иллюстрация, что в кейсе)
В конце есть поле «где показывать». Если ничего не указать, кейс появится только на странице кейсов. Если указать страницу сео, плитка кейса появится еще и на ней. Но пока вывод новой плитки на старых страницах не настроен, лучше не трогать этот параметр.
