Первоклассные Плагины для Интернет-Маркетинга
и Развития Онлайн-Бизнеса

MemberLux 2.0 [Часть 1. Дизайн]

Представляем Вашему вниманию первую часть обновления MemberLux 2.0 в котором вас ждет полностью обновленный Внешний вид! Уверен что Вы останетесь очень довольными! =)

Начну с того что мы круто недооценили объем робот и переоценили свои силы, в результате чего делали обновление гораздо дольше чем планировали изначально! Но тем не менее, делаем дело до завершения!

Содержание:

1  Обновленный внешний вид страницы Авторизации и Регистрации

2  Новый внешний вид Панели управления

2.1  Поиск

2.1.1  Страница результатов поиска

2.2  Новая Активация

2.3  Расписание

2.4  Задать вопрос

3  Шапка

4  Рубрики и Подрубрики

5  Материалы

6  Материалы Автотренингов

7  Контент материалов 

7.1  Домашние задания

7.2  Вложения

7.3  Пройден / Не пройден, Следующий и Предыдущий уроки

8  Прогресс курса

9  «Хлебные крошки»

10  Постраничная навигация Рубрик и Материалов

11  Комментарии с новой загрузкой файлов

12  Адаптивность

13  Настройки Интерфейса 2.0

14  Языковой модуль MemberLux

15  Главная (Стартовая страница)

16  Переключаем интерфейс c версии 1.0 на 2.0

17  Как обновить плагин?

 

 

— 1 —

Обновленный внешний вид страницы Авторизации и Регистрации

Обновили дизайн кнопок и форм на страницах регистрации и авторизации

2-Логин

 

 

— 2 —

Новый внешний вид Панели управления

Панель 20 - Админ

 
Панель управления находится в самом верху страницы 🙂 О красивых папочках поговорим совсем скоро!

Пример демонстрирует авторизацию Администратора, который может войти в Консоль WordPress а также редактировать материалы, теперь данные элементы выглядят следующим образом:

Панель-Админ

Перейти-в-консоль-WordPress — перейти в консоль WordPress

Редактировать — редактировать материал

Если посмотреть на аналогичную панель у Пользователя, то она будет лишена первых двух опций так как они доступны только Администратору!

панель-Пльзователя

 

 

— 2.1 —

Поиск

Поиск находится на панели управления и раскрывается после клика по нему:

Поиск

После того как вы напишите что либо в строке поиска, достаточно нажать на клавиатуре Enter или кликнуть на иконку поиска для того чтобы увидеть его результаты:

Текст Поиска

 

 

— 2.1.1 —

Страница результатов поиска

Как только вы написали в строке поиска запрос и нажали Enter или кликнули на иконку, вас перенаправит на страницу Результатов поиска:

Страница результатов

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

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

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

  1. Типы магазинов Великобритании и США.
  2. Поиск магазина. Полезные фразы.

 

 

— 2.2 —

Новая активация

Как вы возможно уже заметили, на панели управления нету некоторых элементов которые были в предыдущем интерфейсе! На самом деле они есть, просто теперь они находятся здесь:

Профиль Активация

Активация стала позволять не только смотреть на свои «пин-коды» но и понимать к каким рубрикам они предоставляют доступ:

Активация

 

Активация-ПодробнееОбратите внимание на стрелочку которая
находится возле каждого Уровня доступа,
кликнув по ней откроются
подробные сведения о нем:

 

Активация-Детали 

 

 

— 2.3 —

Расписание

расписание (панель) Кликая на «Расписание» откроется календарь:

расписание

 

 

— 2.4 —

Задать вопрос

Мы убрали все всплывающие окна (pop-up) с интерфейса и заменили их выдвижными панелями. 

Задать вопрос

 

 

— 3 —

Шапка

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

Шапка

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

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

Во всем остальном принцип работы шапок остался прежним.

Шапка и Лого настройки

 

 

— 4 —

Рубрики и Подрубрики

Теперь они выглядят как Папки, а также обладают рядом индикаторов:

Рубрики и Подрубрики

Задача индикаторов давать заранее некоторое понимание о том что находится внутри, на скриншоте ниже я подчеркнул каждый из существующих в данный момент:

Рубрики-и-Подрубрики Индикаторы

 

№1 Инд_комментарии — Индикатор Комментариев

Данный индикатор показывает сумму всех комментариев со всех материалов находящихся в данной рубрике, если же такой индикатор стоит на Рубрике с Подрубриками (На Папке с Подпапками) тогда он будет учитывать сумму всех материалов со всех вложенных рубрик (подпапок).

Важный момент! MemberLux далее поддерживает комментарии Cackle, однако в данный момент Индикатор Комментариев не считает их. В случаях когда включены Cackle — данный индикатор будет автоматически Скрыт. Такое странное решение обусловлено тем что в ином случае будут Глюки в Скорости работы системы в целом, скорее всего мы найдем решение в одном из ближайших обновлений.

№2 Инд_Просмотры — Индикатор Просмотров

Работает также как и Комментарии, считает просмотры всех материалов вложенных в рубрику.

№3 Инд_ПрогрессКурса — Индикатор Прогресса Курса

Немного ниже будет целый раздел посвященный прогрессу курса, по этому здесь не буду детализировать данный индикатор.

№4 Инд_доступ  — Доступ открыт

Доступно 100% материалов, находящихся в данной рубрике (или в её подрубриках)

№4 Инд_доступ_частичный — Доступ ограничен

Доступна только часть материалов в рубрике (или в её подрубриках)

№4 Инд_доступ_закрыт — Доступ закрыт

100% материалов в данной рубрике недоступно (или в её подрубриках)

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

№5 Инд_НазваниеРубрики — Название рубрики

№6 Инд_фоновоеизображениеРубрики — Фоновое изображение

№7 Инд_Подрубрики  — Внутри Вложенные Рубрики

№8 Инд_Рубрика — Внутри только Материалы

Также у рубрик появились «Стикеры». Их цель акцентировать внимание, так как рубрики с включенными стикерами сразу бросаются в гала. Очень пригодится во время Акций! 

Пример стикера с текстом «НОВИНКА!» на рубрике:

Снимок экрана 2017-11-17 в 09.54.41

Текст можно написать какой угодно, также можно менять цвета стикеров и текстов на них!

Внутри рубрики можно увидеть её Заголовок, Подзаголовок и Описание:

Описание_Рубрики

Кликая на кнопку «Подробнее» раскроется Описание рубрики:

Развернутое_Описание_Рубрики

ВАЖНО! Существует целый ряд настроек для Рубрик и их Индикаторов, о них я расскажу в самом последнем разделе данного анонса, посвященном Настройкам 2.0!

 

 

— 5 —

Обычные материалы

Материалы как и рубрики обрели новый внешний вид и индикаторы:

Материалы

Также они имеют ряд своих индикаторов:

Обычный-Материал-Индикаторы

Доступ-Открыт-Индикаторы

Недоступный_Материал-Индикаторы

 

№1 Инд_номер_материала — Порядковый номер

№2 Инд_Тип_материала — Тип контента внутри материала

№2 Инд_Тип_Видео —Видео контент

№2 Инд_Тип_Аудио —Аудио контент

№2 Инд_Тип_Текст —Текстовый контент

№3 Инд_Доступ_Открыт —Доступ открыт 

№3 Инд_Доступ_Закрыт —Доступ закрыт

№4 Инд_просмотров —Количество просмотров

№5 Инд_комментариев —Количество комментариев

№6 Инд_дата —Дата публикации материала

№7 —Название материала

№8 —Краткое описание

№9 Инд_наведение_открыто —Наведение мышкой на Открытый материал

№10 Инд_наведение_закрыто —Наведение мышкой на Закрытый материал

 

ВАЖНО! Существует целый ряд настроек для Материалов и их Индикаторов, о них я расскажу в самом последнем разделе данного анонса, посвященном Настройкам 2.0!

 

 

— 6 —

Материалы Автотренингов

Я решил отделить данные материалы в отдельный раздел, так как они отличаются от обычных:

Материалы_Автотренингов

На картинке выше показан автотренинг состоящий из 4-х уроков и с возможностью видеть недоступные материалы, которые еще предстоит пройти. Материалы Автотренингов отличаются от обычных индикатором Статуса Домашнего Задания:

Инд_Доступный_автотренинг

№1 инд_неначат —Материал ожидает изучения

№1 инд_проверяется —Домашнее задание проверяется

№1 инд_неправильно —Домашнее задание неправильное

№1 инд_выполнено —Домашнее задание выполнено

 

инд-отмеченный-выполненный-автотренинг

№2 После того как условия прохождения урока выполнены — на нем появится «Галочка». О ней я расскажу больше очень скоро так как данный индикатор также есть и у обычных материалов и появляется при определенных условиях!

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

Закрытый_Материал_Автотренинга

Если навести мышкой на такой урок, появится подсказка объясняющая причину недоступности такого материала:

наведение_на_закрытый_автотренинг

ВАЖНО! Материалы автотренингов имеют парочку настраиваемых опций, о них в самом последнем разделе данного анонса, посвященном Настройкам 2.0!

 

 

— 7 —

Контент материалов

Кликнув на материал, обучающимся откроется его контент:

 контент-3-вкладки

Также в примере выше видно много других «интересных штучек» кроме контента в виде пары строк текста, аудио и видео. По умолчанию всегда открывается вкладка Контент, однако на странице материала могут быть еще Вложения, Домашние задания, Прогресс курса, Переходы на Следующий и Предыдущий уроки и комментарии.

При этом вы можете оставить только те элементы, которые вам необходимы! Например убрать со страницы все кроме контента, однако об этом немного позже, когда речь пойдет о настройках Интерфейса MemberLux 2.0, а сейчас рассмотрим все элементы подробно:

 

 

— 7.1 —

Домашние задания

Здесь студенты сдают Домашку 🙂

Домашнее задание

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

Домашка_Ответить_файлы_текст

После того как студент отвечает на вопрос сразу сработает индикатор проверки домашнего задания:

Домашка_Отправил_ответ_проверяется

Индикатор будет менять свой цвет в зависимости от статуса домашнего задания:

Инд_дз_проверяется —Домашнее задание проверяется

Инд_дз_проверяется_2

Инд_дз_выполнено —Домашнее задание выполнено

Инд_дз_выполнено_2

Инд_дз_неправильное —Домашнее задание неправильное

Инд_дз_неправильное_2

Также вы можете обсуждать ваш ответ с наставником на той же вкладке:

Снимок экрана 2017-11-16 в 07.39.16

 

 

— 7.2 —

Вложения

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

Прикрепить можно много файлов и система идентифицирует вложения по их форматам (расширениям) и присвоит им соответствующие иконки:

Вложения

На самом деле вы свободны добавлять сколько хотите и каких хотите файлов! Плюс во вложения как вы возможно заметили можно прикрепить Архив .ZIP и .RAR форматов, что в свою очередь позволяет архивировать в них все что угодно!

 

 

— 7.3 —

Пройден / Не пройден, Следующий и Предыдущий уроки

Этот элемент влияет на индикаторы прогресса курса и помогает понять какие уроки уже были пройдены, какие еще нет и сколько Процентов Курса уже Пройдено. 

В примере ниже студент находится на первом уроке курса, состоящем например из 6-ти уроков:

 Студент_Первый

В нем он увидит обсуждаемый сейчас переключатель между контентом и комментариями:

ИНД_ПройденНепройден

Слева переключатель, который «отмечает» уроки пройденными:

ПройденНепройденСоло

По средине прогресс курса который сейчас равен 0% и Справа возможность перейти на следующий урок. Здесь нет возможности перейти на предыдущий так как Студент на Самом Первом Уроке! Предыдущего попросту нету 🙂

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

Если же кликнуть на него в обычном материале, а именно как на примере выше, то он изменит свое значение с «Не пройден» на «Пройден» и прогресс курса заполнится на 17%

ПройденПервыйУрок

Кликая по ссылке «Следующий Урок»,  студент переместится уже на второй урок:

НеПройденВторой

Отмечая урок пройденным % прогресса снова растет:

ПройденВторойУрок

Данное переключение двухстороннее и если студент Случайно отметили урок пройденным, он легко сможет исправить это!

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

1_2_птичка

Как вы видите на материалах появляются «Галочки» или «Птички» если угодно 🙂

На последнем уроке курса отсутствует ссылка для перехода на следующий урок так как он есть последний:

Последний урок

Цифра 34% осталась неизменной со второго урока так как я отметил только первые два как пройденные, а остальные нет. 

 

 

— 8 —

Прогресс курса

№1 Первая область для просмотра прогресса курса находится в самих материалах:

Последний урок

№2 Следующая область внутри самих рубрик, когда вы видите список материалов:

Рубрика-прогресс-курса

№3 И последняя на самой рубрике:

Рубрика_ИНд_ПК

 

 

— 9 —

«Хлебные крошки»

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

Например «Диск Д / Фильмы / Приключения» 🙂

В Интерфейсе MemberLux 2.0 «Хлебные кроки» являются основным элементом навигации по системе:

Хлебные_крошки

Пример выше говорит о том что вы сейчас находитесь на странице материала «Словарь. Airport Vocabulary», которая находится в рубрике «Полет в самолете», ей предшествует рубрика Аэропорт а перед ней Главная страница со списком всех рубрик.

Т.е. с помощью именно такой навигации, как нам кажется, перемещаться в предыдущие разделы или же сразу на Главную страницу будет очень удобно.

Обратите внимание на Иконки в навигации, они разные для Рубрик, для Материалов и Главной страницы:

КрошкиОнли

 

 

— 10 —

Постраничная навигация Рубрик и Материалов

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

Постраничная навигация Рубрик:

 

пагинация_рубрики

Постраничная навигация Материалов:

пагинация_материалы

 

 

— 11 —

Комментарии с новой загрузкой файлов

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

Вы можете прикрепить один или несколько файлов к комментарию, вот так выглядит процесс загрузки:

ФайлЗагруж

Загрузку можно прервать нажав на кнопку «Отмена» возле загрузки файла.

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

ФайлЗагрузился

Отправляя комментарий с прикрепленным файлом, другие участники обучения смогут видеть и скачивать его:

ОтправилиКоммент

ВАЖНО! Все файлы загруженные пользователями, хранятся в папке wp-content/uploads/files

Список поддерживаемых форматов: 

mp3, mp4, wmv, doc, docx, xls, xlsx, ppt, pptx, pages, numbers
 

 

 

— 12 —

Адаптивность Интерфейса

Интерфейс MemberLux 2.0 прекрасно себя ощущает на всех экранах современной компьютерной и телефонной техники!

Если сделать скриншоты всех страниц системы в разных размерах — данный анонс будет Гигантским 🙂 По этому я добавлю один пример в нескольких размерах! Хочу еще добавить, что в плане Адаптивности мы постарались более чем!

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

 

№1 Большой планшет:

большой планшет

 

№2 Средний планшет:

Планшет средний

 

№3 Мобильные устройства (Телефоны)

С учетом того что мобильные это самые маленькие экраны, и если под телефон хорошо адаптирован интерфейс, то на экранах больше тем более все отлично 🙂 По этому я все таки выложил изобилие скриншотов адаптации под Телефон, так как она самая сложная:

МЕНЮ-ЛевоеМЕНЮ-Правое


Маленький телефонТелефон_МатериалыТелефон_Урок.png


Телефон_ФАЙЛЫ_ДЗ Телефон_ДЗТелефон_Активация


 

 

— 13 —

Настройки Интерфейса MemberLux 2.0

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

В рамках данного Анонса я рассмотрю только те настройки, которые связанные с 2.0, т.е. новые! 🙂 А ориентировочно в течение ближайшей недели появятся полностью новые уроки по работе с новым MemberLux 2.0

 

№1 Отключаем возможность загружать файлы в комментариях

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

Снимок экрана 2017-11-16 в 15.55.40

 

№2 Отключаем Поиск

Снимите птичку с «Отображать» чтобы скрыть поиск:

Снимок экрана 2017-11-16 в 16.06.29

 

№3 Прячем расписание занятий

Поставьте птичку в опции «Спрятать расписание» чтобы скрыть его:

Снимок экрана 2017-11-16 в 16.08.51

 

№4 Постраничная навигация

Включаем или отключаем и меняем её цветовую палитру. 

Обратите внимание на первые 2 поля в которых указано значение «-1» (минус один), это означает что материалы и рубрики будут отображаться все, без постраничной навигации, если задать первому полю значение «4» то рубрики будут выводится по 4 на странице, с материалами по аналогии:

Снимок экрана 2017-11-16 в 16.11.50

 

№5 Рубрика

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

3 8

Также можно настроить каждую рубрику Индивидуально!

Например указать каждой Разные изображения, также можно Индивидуально отключать Индикаторы, если вы не хотите например чтобы на Одной Конкретной рубрике было только её название! 

Индивидуальные настройки находятся внутри самих Рубрик:

3 8 individual

 

Заголовок и Подзаголовок рубрики

Здесь стилизируются Заголовки и Подзаголовки Рубрик, также их можно скрыть включив настройку «Не показывать заголовок» или подзаголовок:

3 10

 

Заголовок и Подзаголовок рубрики отображаются Внутри самих рубрик:

Заголовок_Подзаголовок_Рубрики

 

Описание рубрики

Цветовые параметры описания на страницах рубрик, а также возможность скрыть его:

3 9

 

Описание рубрики находится внутри кнопки «Подробнее» и открывается при клике по ней:

Описание_Рубрики

В самих рубриках есть возможность индивидуально настроить блок описания, также здесь есть дополнительная опция для описания — «Зафиксировать открытым»:

Опиание_Индивидуальные

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

Если вам не нужно описаний, выводов на экран Заголовков и Подзаголовков рубрик, то все это можно отключить и получится очень даже симпатичный внешний вид:

ОтключаемЗаголовки

 

№6 Материал

Настройки материалов схожи с настройками рубрик, здесь вы также можете добавить фоновое изображение по умолчанию для всех материалов, настроить отображение Индикаторов на них а также выбрать один из двух способов расположения материалов, в одну или в две колонки:

3 11

 

Расположение в 2 колонки:

ОтключаемЗаголовки

 

Расположение в 1 колонку:

ОднаКолонка

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

Индивидуальные настройки находятся внутри самих Материалов:

Вы можете добавить индивидуальное фоновое изображение материала:

Материал_Индивид_1

Указать индивидуальные настройки индикаторов для материала:

Материал_Индивид_3

А также прикрепить Вложения:

Материал_Индивид_2

 

№7 Прогресс Курса

Здесь находятся настройки Индикаторов Прогресса курса а также их цветовые палитры:

Прогресс_курса

 

— 14 —

Языковой модуль MemberLux

Теперь можно сменить язык интерфейса указав любые нужные вам тексты в полях:

Языковой_Модуль

На примере выше только 6 полей, на самом деле в данный момент их 108 🙂

 

— 15 —

Главная (Стартовая страница)

Стартовая страница теперь называется Главной, отображение контента стартовой страницы имеет несколько опций включая возможность убрать его вовсе:

2 1

Главная страница:

Гланая

Контент главной страницы отображается здесь:

Главная_подробнее

Если в настройках указать «Зафиксировать открытым» то данный блок будет всегда отображаться на главной странице!

 

— 16 —

Как включить новый интерфейс?

После того как установите новую версию у вас появится в настройках возможность выбора интерфейса 1.0 и 2.0:Интерфейс 1 2

Выбираете «Интерфейс 2.0» и нажимаете Сохранить, готово!

 

— 17 —

Как обновить плагин?

  1. Проверьте ограничение на загрузку файлов
  2. Скачате новую версию MemberLux
  3. Перейдите в раздел Плагины
  4. Нажмите «Деактивировать» плагин MemberLux
  5. Затем «Удалить» (данные сохранятся)
  6. Установите скачанную версию
  7. Активируйте
  8. Войтиде в настройки и переключите Интерфейс с 1.0 на 2.0
  9. Готово!

Чтобы проверить ограничения на загрузку файлов войдите в раздел «Медиафайлы», нажмите «Добавить новый» и вы увидите текущее ограничение:

Если значение ниже чем 30M ознакомьтесь с рекомендациями этой статье:
https://wpmag.ru/2013/kak-uvelichit-maksimalnyiy-razmer-faylov-v-wordpress/

 

 

Служба поддержки: support@memberlux.ru

Время работы: пн-пт 11:00 — 19:00 (Московское время)

 



Администратор