Приветствую вас в своем ДзЫнь.Блоге. Сегодня снова будем наводить красоту и необычность в аккаунте нашей школы. Речь пойдет о странице тренингов. Если вы помните, стандартный вариант выглядит примерно так
В поисках решения задачи я наткнулась на статью проекта “Укротитель геткурса”, в которой предлагалось невероятно простое решение. В это статье разберем как можно сделать кабинет тренингов таким
Ребята предложили на странице тренингов реализовать полноценный лендинг, в котором есть меню:
Доступные тренинги
Магазин
Оферта
Частые вопросы
Оферта и ЧаВо-это отдельные страницы, созданные заранее. Доступные тренинги и магазин-якорные ссылки.
Таким образом, наши пользователи видят что им доступно и что им может быть доступно. Не знаю как вам, а на мой взгляд-это гениально)
Переходим к реализации проекта! Самое крутое-что не нужно изощряться и изучать коды. Все что нам потребуется-это канва или любой другой инструмент для создания картинок и раздел “Страницы” на геткурс.
Приготовление
В графическом редакторе (в моем случае-канва), готовим картинки для разделов "Доступные тренинги" и "Магазин".
Количество картинок для каждого раздела должно соответствовать количеству ваших продуктов. В раздел “Доступные тренинги” добавляем еще одну картинку по типу “УПС, у вас нет доступа”.
Для раздела “Доступные тренинги” размер картинок 50 на 300 пикселей; для “Магазина”- 200 на 300 пикселей (можно взять 200 на 250).
Для того, чтобы все отображалось корректно-нужно настроить сегменты пользователей. Для этого идем в раздел “Пользователи-сегменты” и создаем новые сегменты для каждого продукта плюс один для тех, кто не имеет доступа ни к одному продукту.
Пишем название сегмента и указываем условие сегмента: участник тренинга. И выбираем нужный тренинг.
Проводим такую настройку для каждого тренинга.
Для тех, кто не имеет доступа к тренингам делаем следующие условия:
Выбираем через “И” участник тренинга, проставляем в каждой карточке отдельный тренинг и добавляем в каждой карточке “НЕ”.
Обратите внимание! НЕ добавляем именно для каждого тренинга, а не для всего блока целиком!
Теперь переходим в раздел “Страницы” геткурса. Добавляем новую страницу.
Выбираем шаблон “Пустая страница”. Добавляем имя и адрес. Жмем “Добавить”. Переходим к редактированию.
Сразу публикуем.
Далее идем в раздел “Все блоки”-”Навигация”. Выбираем меню. У меня статичное.
Выбираем настройки блока и переходим к редактированию
Мне нужны 4 блока, поэтому я добавлю еще один.
В первую и вторую записи ставлю якорные ссылки, в третью и четвертую-ссылки на заранее созданные страницы с офертой и ЧаВо
Контактные данные удаляем
Меню готово.
Теперь добавляем якорь для раздела “Доступные тренинги”.
Переходим в раздел “Все блоки”-”Навигация”-”Якорь”
Открываем настройки блока и пишем имя якоря. У меня это dostup. Сохранить и закрыть.
Теперь нужен заголовок. Выбираем блок текст с заголовком, удаляем текст, идем в настройки блока, меняем размер и текст заголовка,выравниваем его по левому краю и добавляем отступ сверху 25 пикселей.
Далее меняем стиль блока. Мне нужно, чтобы слева не было отступа, выравнивание по левому краю, отступ сверху и снизу по 15 пикселей и светло-серый фон блока fafafa
Следующий блок-изображение.
Кликаем на картинку и добавляем нужную с ПК или из хранилища, если картинки были загружены ранее. Размер изображения должен быть небольшой, чтобы не занимать много места. У меня высота-50 пикселей. Главное правило-один тренинг-один блок с картинкой.
Переходим в настройки блока. Удаляем подпись к картинке, добавляем скругление углов на 16 пикселей, выравниваем по левому краю и добавляем отступ сверху 25 пикселей. Сохранить и закрыть.
Стиль блока настраиваем как в блоке “Заголовок”.
Теперь делаем копии блока с изображением по количеству ваших продуктов плюс один. У меня всего получилось 5 блоков: 4 тренинга и один УПС.
В каждом меняем картинку на нужную. Должно получиться как на скрине ниже.
Теперь заходим в настройки каждого блока и добавляем действие при клике на картинку-переход по ссылке.
Идем в раздел тренингов, правой кнопкой мыши кликаем по нужному тренингу и копируем ссылку.
Возвращаемся в настройки блока и добавляем ссылку. Сохранить и закрыть.
Проводим такие манипуляции с каждым блоком тренингов. В блок УПС ставим якорь.
Далее-настройка показов блока по сегменту. Идем в каждый блок из раздела “Доступные тренинги” и настраиваем видимость блока.
Показывать только, если пользователь в сегменте. И выбираем нужный сегмент (свой для каждого блока). Сохраняем.
Теперь добавляем еще один якорь для раздела “Магазин” по аналогии с якорем для раздела “Доступные тренинги” и импортируем блок заголовка. Заходим в настройки блока “Доступные тренинги” и выбираем “Экспортировать блок”
Копируем появившийся код
Далее внизу страницы выбираем “Импорт” и в открывшееся окно вставляем скопированный код. Жмем “Импортировать”
Теперь меняем текст и цвет фона блока.
Для добавления разделов магазина идем “Все блоки”-”Плитка”-”Картинка - подзаголовок - заголовок - текст - кнопка”
Идем в настройки блока. Количество записей должно быть равно количеству ваших платных продуктов. У меня их 4. В каждом меняем картинку, подзаголовок, заголовок, описание и ссылку-куда ведет кнопка. Цвет и текст на кнопке один для каждой записи.
В результате у меня получилось так
Публикуем изменения.
Теперь идем на уровень выше в настройки страницы.
Открываем дополнительные настройки
Страница доступна только зарегистрированным пользователям.
Если пользователь не авторизован-его будет редиректить на страницу входа. ссылку взять в системных страницах
Добавляем ее в поле “Адрес для редиректа тех, кому страница недоступна”. Показывать боковое меню в режиме просмотра всем пользователям. И ставим галочку “Обновлять вживую у пользователей”
В поле “Теги в разделе HEAD” ставим тег <meta name ="robots" content="noindex,nofollow"/>
Он скрывает данную страницу от поисковой выдачи.
Сохраняем настройки
Выделяем поле “Доступные тренинги”. Добавляем блок.
Выбираем “Системные”-”Редирект”
Копируем адрес нашей только что созданной страницы
Идем в настройки блока “Редирект” и добавляем туда полученную ссылку. Настраиваем видимость редиректа для всех пользователей и скрывать от админов
Сохраняем настройки
Для проверки настроек входим под любым пользователем и переходим в раздел тренинги. У меня все работает.
Вот и все.
Было полезно? Ставь палец вверх и сохраняй статью в своих соц.сетях
Посмотреть видео урок по этой теме можно тут
Нужна настройка или консультация? Обращайтесь.
Сделать это можно любым удобным способом:
ВК vk.me/krista_ap
Телеграм @krista_ap
89966906964
Ватсап Кристина