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

В уроке:

1. Создание и редактирование страницы

2. Настройка страницы

3. Публикация

4. Главная страница школы

5. Блог школы

— Ваня, привет! Как у вас в проекте дела? Созвонились с Виктором?

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

— О чем поговорили?

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

— Все верно вы распределили! А ты сказал, что сайт можно на GetCourse сделать?

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

— Так, давай сначала организационные вопросы закрепим. Постоплату за первый этап проекта ты получил?

— Да, Виктор все во время перевел, все в порядке. Перевод денег мы зафиксировали, чтобы нигде ничего не потерялось.

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

— И это тоже сделали. После созвона я написал краткое резюме в чат, получил ОК от Виктора и Павла.

— Павел уже начал работать над макетом?

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

— Тогда, не размазываясь по тарелке, сразу перейдем к платформе.

B

1. Создание и редактирование страницы

o

— Так, я уже понял, что мне предстоит сделать много работы, чтобы создать этот сайт. Когда я сам покупал обучение по GetCourse, я попал на продающий лендинг, но потом зашел на основной сайт — там и главная страница, и продажа курсов, и мастер-классы, и блог. Для Виктора нам нужно будет создать что-то похожее?

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

— То есть я смогу после завершения основного проекта еще что-то делать для Виктора?

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

— Да, давай, я готов.

— Смотри, перед тобой сейчас — новый слон. Его тоже нужно есть по кусочкам. И самый первый кусочек, с которого все начинается, — это создание страницы. Дальше мы уже будем ее редактировать, наполнять контентом, но сначала просто создадим.

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

1. Перейди в Раздел Сайт — Вкладка Страницы.

2. Нажми кнопку Добавить страницу. Здесь ты можешь выбрать создание пустой страницы или страницы по одному из предустановленных шаблонов.

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

3. Укажи в настройках страницы:

— название страницы (является служебным и скрыто от учеников);

— адрес страницы (латинскими буквами).

В итоге ссылка, ведущая на страницу, будет состоять из двух частей: адреса твоего аккаунта и адреса страницы, который ты указал.

Лучше использовать короткие и говорящие имена, а при указании нескольких слов разделять их дефисом вместо нижнего подчеркивания — это полезно для SEO-продвижения страницы.

Обзор функций

— Ура, я страницу создал! Знаешь, вроде такое простое действие, а все равно хочется себя по голове погладить.

— В этом и смысл разбивать большие задачи на маленькие и понятные. За этим принципом целая наука, работа наших гормонов (в частности дофамина и кортизола). Можешь в свободное время загуглить сам, либо, если у тебя возникнут трудности в нашем рабочем процессе, я дам пару подсказок.

— Я и сам почитаю, и от твоих советов не откажусь. Но пока что мне очень хочется двигаться дальше, давай продолжим. Какой наш следующий шаг?

— Закину тебе один из способов существенно упростить себе жизнь — для создания страниц можно использовать шаблонные элементы (выбрать из имеющихся либо добавить свои) и структурировать страницы с помощью папок. Мы будем с этим сталкиваться и дальше, но сейчас я тебе покажу пример, как с помощью папки можно создать общий хедер и футер для всех страниц сайта.

— Стоп-стоп-стоп, вот здесь ты потерял меня. Что такое хедер и футер?

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

B

Общие шапка (header) и подвал (footer) для страниц

Как создать header?

1. Создай новую страницу, выбрав при создании первый вариант без шаблона Пустая страница. Укажи для неё название header.

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

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

В открывшемся окне во вкладке Навигация выбери блок Статичное меню.

3. В добавленном блоке нажми Настройки.

В настройках блока ты сможешь:

— указать название компании,

— загрузить изображение — логотип компании,

— добавить ссылку на главную страницу.

i

Ниже в разделе Блок меню можно:

— задать выравнивание для меню,

— отредактировать записи и контакты,

— добавить кнопки при необходимости.

По умолчанию для каждой Записи указаны примеры адресов страниц:

Указанных здесь страниц изначально в аккаунте нет.

Чтобы ссылки в этом блоке заработали, необходимо создать отдельные страницы под каждую ссылку — Услуги, Цены, Контакты.

Можно создать страницы с указанными адресами или указать в настройках записей ссылки на другие — ранее созданные в аккаунте страницы.

4. После внесения изменений нажми на кнопку Сохранить и закрыть.

5. Опубликуй страницу, нажав на соответствующую кнопку в правом верхнем углу страницы.

Как создать footer?

1. Вернись в раздел Сайт — Страницы и создай новую Пустую страницу с названием footer.

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

Выбери на вкладке Вставка блок Подвал.

В настройках этого блока можно отредактировать наполнение колонок:

— загрузить логотип аккаунта в блоке Изображение,

— в текстовых блоках указать ссылки на страницы с договором оферты и политикой конфиденциальности (эти страницы необходимо создать заранее), контактные данные и другую необходимую информацию.

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

3. После внесения изменений нажми на кнопку Сохранить и закрыть.

4. Опубликуй страницу.

— А как сделать, чтобы это отображалось теперь на сайте?

— Тебе нужно создать папку, поместить в нее header и footer и сохранить.

— Ага, я понял. Сейчас попробую.

Как включить отображение header и footer для страницы сайта?

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

Редактирование страницы

t

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

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

Добавить новый блок можно с помощью кнопки с изображением знака «+» рядом с другим блоком. Блоки можно копировать, удалять, изменять порядок расположения, перемещая выше или ниже.

i

Видимость блоков

Отображение блока на странице можно настроить в зависимости от условий:

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

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

Экспорт и импорт блоков

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

g

Экспортируя блок, ты копируешь его код:

А затем вставляешь этот код с помощью кнопки импорта под другим блоком:

t

Сохранение шаблона блока

Готовый блок можно сохранить со всеми настройками как шаблон и в дальнейшем пользоваться при создании страниц. Новый блок появится в отмеченных категориях.

e

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

c

2. Настройка страницы

o

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

Параметры страницы

Сначала изучим основные параметры в настройках страницы:

n

Заголовок — это то, что будет отображаться в title страницы (название вкладки в браузере рядом с фавиконом).

t

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

Шрифт текста на странице / Шрифт заголовка на странице — здесь можно выбрать шрифт, которым будут написаны все тексты и заголовки на странице. Это может быть как один и тот же шрифт, так и разные.

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

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

e

og:title / og:description — эти параметры позволяют настроить отображение страницы при публикации в социальных сетях.

og:image позволяет добавить превью-картинку для отображения в социальных сетях. Для загрузки лучше заранее подготовить изображение, чтобы оно корректно отображалось в разных соцсетях — например, под формат Facebook необходимо использовать разрешение 1200х628 пикселей.

Пример отображения поста в Telegram:

n

Дополнительные настройки

Помимо основных есть также дополнительные параметры страницы.

t

Давай посмотрим, какие возможности они предоставляют:

,

— В поле Страница доступна можно ограничить доступ пользователей к данной странице. Из выпадающего списка можно выбрать варианты:

— всем,

— зарегистрированным,

— гостям,

— никому.

— В поле Адрес для редиректа тех, кому страница недоступна можно вставить ссылку на другую страницу. Тогда пользователи, которым страница недоступна, вместо нее попадут на указанную в этом поле страницу.

— Чтобы скрыть от учеников боковое меню Личного кабинета при просмотре страницы, выбери в настройке Показывать боковое меню в режиме просмотра вариант Сотрудникам.

Неавторизованные пользователи боковое меню не видят вне зависимости от настроек.

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

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

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

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

— Поле Теги в разделе HEAD может быть использовано, например, для размещения записи, подтверждающей владение доменом. Также в этот раздел можно добавлять, например, код мета-тегов с ключевыми словами, скриптами, пикселями (мы рассмотрим это подробно в следующих модулях).

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

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

Темы страниц, шрифты

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

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

В этом случае можно объединить страницы в одну папку.

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

Для создания темы в раскрывающемся списке рядом с Деревом сайта выбери Темы — Добавить тему.

t

На вкладках CSS-стили и код Javascript можно прописать собственные стили и скрипты, которые будут использованы в теме.

На вкладке Шрифты — подключить различные шрифты с сайта Google Fonts.

y

l

Давай рассмотрим порядок действий для подключения шрифта к теме.

e

a

Если необходимо использовать на странице больше двух шрифтов, свой шрифт можно настроить для каждого блока через меню Стиль — Подробные настройки при помощи CSS-кода.

,

Чтобы подключить тему к странице, ее необходимо указать в настройках папки:

d

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

e

3. Публикация страницы

s

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

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

Чтобы опубликовать страницу и сделать ее видимой на сайте, нужно нажать кнопку Опубликовать в правом верхнем углу.

i

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

g

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

n

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

Обновление кэш ссылки в соцсетях

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

,

— Я буду задавать глупые вопросы, но что такое кэш?

— Задавай все вопросы! С радостью отвечу :) Кэш — это некий буфер для временного хранения информации и для быстрого доступа к каким-либо данным, командам. Если коротко, то он нужен для правильной работы сайта и для того, чтобы браузер постоянно не запрашивал все эти коды.

— Почти понял, но не совсем.

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

— Окей, метафора уложилась. А тогда получается, что если я один раз опубликую сайт у себя в соцсетях, то он навсегда останется таким? А если я его изменю?

— Если ты изменишь страницу, то кэш для нее тоже можно обновить. Поэтому и нужно знать, как все это работает, какие есть инструменты.

Для Facebook — Open Graph Object Debugger.

• вставить ссылку;
• нажать Получить новую информацию о URL.

Для VK — pages.clearCache.

• вставить ссылку;
• нажать Выполнить.

Для Telegram — бот @webpagebot.

• дай боту команду /updatepreview;
• отправь ему ссылку, кэш которой нужно обновить;
• обязательно перезапусти свой Telegram-клиент;
• после этого ссылка обновится.

Другие мессенджеры обычно обновляют кэш ссылки сами через некоторое время.

4. Главная страница сайта

a

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

— А, это та, которую я вижу первым делом, когда перехожу по ссылке на сайт?

— Да. Здесь есть две опции. Можно оставить настройки по умолчанию, а можно задать какую-то конкретную страницу, которую команда заказчика хочет показать первой. Например, продающий лендинг. Я тебе сейчас все покажу.

Главная страница школы открывается, когда пользователь переходит по адресу аккаунта, например architectofsites.getcourse.ru.

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

— Для гостей — это страница ввода логина и пароля

https://адрес_аккаунта/cms/system/login

— Для авторизованных — это страница тренингов

https://адрес_аккаунта/teach/control/stream

При необходимости можно задать другую главную страницу аккаунта. Для этого необходимо перейти в раздел Управление сайтом и во вкладке Настройки прописать адрес той страницы, которую надо сделать главной. Например, страницу лендинга /home.

n

Обрати внимание:

— если в настройках указать адрес страницы без слэша (например, home) — страница будет открываться без указания её полного адреса, в адресной строке при переходе отобразится только адрес аккаунта (например, https://аккаунт_школы.getcourse.ru);

— если в настройках указать адрес со слэшем (например, /home) — страница в адресной строке будет открываться с указанием полного адреса (например, https://аккаунт_школы.getcourse.ru/home).

d

5. Блог школы

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

— Это механика и для привлечения клиентов через поисковые системы, и для усиления доверия к компании, и для утепления тех, кто хочет купить, но все сомневается. Хорошая идея. Предложи ее Виктору, а я покажу, что нужно на платформе сделать.

В твоем аккаунте в разделе Сайт/Страницы доступна настройка собственного блога.

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

s

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

Блог доступен пользователям по адресу http://аккаунт_школы.getcourse.ru/blog. Изменить этот системный адрес не получится, зато его легко запомнить.

Редактировать блог ты можешь в разделе Страницы.

e

Настройка блога

В блоге можно установить общую шапку (header) и подвал (footer) для всех страниц.

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

q

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

Создание записей в блоге

Перед публикацией можно дополнительно настроить пост, нажав справа вверху кнопку Настройки:

o

1. Изменить заголовок.
2. Указать краткую аннотацию к посту — она будет выводиться под его названием в общем списке постов.
3. Указать автора — по умолчанию указывается имя авторизованного пользователя, который редактирует статью.
4. Добавить теги — по ним пост можно будет найти с помощью поиска по блогу.
5. Изменить шрифты —для текста и заголовков записи.
6. Добавить превью-картинку — она будет отображаться вместе с превью под названием поста в общем списке постов.
7. Изменить статус поста — позволяет сделать пост черновиком (статус Черновик), скрыть его от пользователей (статус Завершено) или указать, что пост нуждается в проверке (статус На модерации).
8. Указать дату публикации — если эта дата еще не наступила, то пост будет скрыт от пользователей, пока дата не наступит.
9. Указать дату, после которой пост будет недоступен для просмотра — это может быть удобно для постов об акциях или для новостей, срок актуальности которых ограничен.
10. Указать og:Image — эта картинка будет выводиться в соцсетях, если пользователи поделятся постом. Эта картинка может совпадать с картинкой-превью.

Лента комментариев и кнопки Поделиться

f

Для каждого поста внизу страницы сразу выводятся комментарии и кнопки для репоста во Вконтакте, Facebook и Twitter.

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

Вывод постов блога на страницы сайта

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

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

Итоги урока

• Разобрался в функционале страниц на GetCourse.
• Научился редактировать блоки на сайте.
• Умею публиковать изменения на сайте.
• Знаю как создать главную страницу онлайн-школы.
• Понял, как работать с блогом школы.