Инструкция по работе с кастомным сайтом на Тильде проект Шлокамрита

На главной странице проекта Шлокамрита перейдите в Товары

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

После этого появится дубликат данного курса

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

1 — Здесь пишите название курса, но не забывайте, что оно не должно быть слишком длинным
2 — Здесь пишите описание курса, старайтесь написать текст того же объема, +- пару слов не принципиальна
3 — здесь укажите ссылку на общий телеграм чат либо текущий, который скопировался, либо другой. В этот чат будет отправляться человек если на текущий момент нет свободных групп

Ниже как выглядят два пункта выше в рамках странички

Следующие параметры

1 — это изображение обложка курса, она берется из сервиса Figma
2 — здесь в качестве цены ставите 0
3 — здесь в качестве количества товара удаляете все числа, чтобы остался знак бесконечности

Чтобы заменить картинку под цифрой 1, нужно перейти в Figma, найти Шаблоны обложек для курсов

Скопировать самую последнюю обложку, выделить скопированную и справа нажать на Image

У вас появится окно, где нужно навести курсор на картинку и нажать на синюю кнопку Upload from computer

Далее выбрать нужное фото с компьютера после чего картинка обновится

Если у вас картинка исказилась, то поиграйте параметрами Fill \ Crop что позволит растянуть картинку как вам нужно

Далее нажмите на готовую обложку. Затем справа вкладка Export, затем установит размер экспорта 1,5х от текущего, формат JPEG, затем нажмите на кнопку Export …..

После этого обложка сохранится на ваш компьютер. Теперь вернитесь в Тильду и нажмите кнопку Заменить фото

И загрузите новую обложку с вашего компьютера

После чего картинка в товаре поменяется. Как только она поменялась нажмите Сохранить и закрыть, либо Сохранить

Теперь на главной курс отображается с картинкой, которую вы указали

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

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

Далее в карточке товара идем ниже и убеждаемся что у него стоит категория Программы действующие

Если данный курс не актуален, то удалите данную категорию, далее где Выберите раздел установите Программы закрытые. Не забудьте сохранить изменения.

Следующий шаг, это заполнить доступные группы на обучение. Для этого спуститесь до вкладки Характеристики.

Здесь Группа обучения, это своего рода слот в форме при записи на курс. А ее значение справо записывается в таком формате: название слота;ссылка

Рассмотрим на примере: 7:00 ведущая Снежана Лоцман;

Здесь до точки с запятой: 7:00 ведущая Снежана Лоцман — это название слота как оно выглядет в форме

А после точки с запятой идет ссылка https://t.me/+4CSsUonyY1k4ODIy куда автоматически перейдет человек после нажатия на кнопку Записаться в группу

Чтобы удалить слот нажмите справа на кнопку корзины — 1

Чтобы добавить новый слот, нажмите на Добавить характеристику — 2
Обратите внимание на цифру 3, ей обозначил точку с запятой. Слева от неё и справа нет пробелов. Это важно.

Последним этапом идет линкование товара — курса с его страницей

Для этого под цифрой 1 укажите латиницей как хотите чтобы отрывалась ваша будущая страница. А под цифрой 2 укажите значения id товара, который вы можете взять под цифрой 3. Запишите себе данный id и ссылку, они вам понадобятся дальше.

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

Ранее мы слинковали товар, и у нас есть следующие данные:
— ссылка курса https://slokamrita.com/rassvetveri?uid=693372912512
— id товара — 693372912512

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

Далее выбираете каким шаблоном воспользоваться

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

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

Далее в новом окне нужно перейти на вкладку Действия и нажать на Дублировать страницу

Далее нажмите на Перейти к новой странице

Вы перейдете на новую страницу и вверху нажмите на Настройки

Укажите название программы, как оно будет отображаться в поисковых системах, это цифра 1
Под цифрой 2 надо указать описание страницы, таким оно будет отображаться в поисковых системах.
Под цифрой 3 нужно указать ссылку, которую вы копировали, в данном случае мы копировали следующее https://slokamrita.com/rassvetveri?uid=693372912512

Но вам нужно взять только rassvetveri
Это в моем примере, у вас будет свое название, его и вставляйте

Далее переходим на вкладку 4 — Бейджик. Сюда под цифрой 1 загружаем нашу обложку курса

Затем переходим на вкладку Дополнительно — 2. И здесь в качестве Папка выбираем папку сайта Курсы. Далее листаем в самый низ и нажимаем Сохранить изменения

После чего нажимаем Опубликовать страницу

На данном этапе курс полностью создан, и он будет открываться корректно по ссылке https://slokamrita.com/rassvetveri?uid=693372912512

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

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

На главной проекта нужно перейти в Потоки

Далее нажать на раздел Курсы

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

Опускаемся вниз и нажимаем на кнопку Дублировать

После этого появится новый пост. Нажмите на него

Первое что нужно сделать это привязать пост к странице курса. Для этого листаем вниз и открываем вкладку Дополнительно — цифра 1. Здесь под цифрой 2 укажите id товара который вы копировали в конце пункта 1.1 когда создавали курс как товар. У меня это 693372912512

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

Далее нам нужно поменять картинку на стартовом экране курса. Для этого находим кнопку Загрузить файл и указываем нужную картинку

Шаблон картинки находится в Figma

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

Не забудьте скопировать frame заранее и поставить его под предыдущим

Чтобы получить карандашный рисунок используйте сервис Funny.Pho.to — Сохранить, поделиться или добавить текст на фото.
Чтобы обработать фото и стереть лишние участки используйте сервис Онлайн Фотошоп на русском бесплатно — удобный фоторедактор без регистрации
Из онлайн фотошопа картинку нужно экспортировать в форме PNG

После того как вы замените картинку вам нужно экспортировать весь frame в формате PNG, масштаб 1х

И теперь заменяйте её в качестве картинки поста в Тильде

Далее в Тильде опускаемся ниже. Убеждаемся что под цифрой 1 стоит нужный раздел, а под цифрой 2 Видимость -> Опубликовано

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

1 — Это название курса на странице, 2 — описание. 3,4,5 — это инфографика.
6,7,8 заполняют на странице основные тезисы программы обучения.

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

Теперь нам нужно перейти в раздел Вы научитесь

Аналогичным образом что делали ранее дублируем любой из постов и нажимаем на полученный дубликат

Далее заполняем название для Себя, чтобы понимать — цифра 1, далее меняем картинку — цифра 2 (шаблон берем в Figma в разделе Шаблоны для слайдера. Картинку экспортируйте в формате JPEG, масштаб 1,5х), далее пишем нужный текст — цифра 3

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

Чтобы задать этому фрагменту цвет нажмите на иконку пипетки

Далее на иконку с красным цветом — цифра 1. Далее Применить — цифра 2

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

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

Аналогичным образом добавляете еще карточки в данный раздел. Если их всего три, то тогда слайдера на странице нет. Если более 3х то тогда автоматически включается слайдер на странице

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

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

Под цифрой 4,5,6 Пишутся Имя Фамилия Отчество, однако здесь можете писать что хотите и как хотите. если у вас только псевдоним, то можете вписать его в Фамилия, а в остальных поставьте обязательно тире. Вообще делайте как вам удобно, здесь названия схематичны для вас. Далее 7 все понятно, можете написать число, можете добавить символов. Слово опыт служения писать не надо, оно уже появится в карточке само. Под цифровой 8 пишется небольшой текст, обратите внимание, что он как один блок считается.

Учтите, что везде на картинке помечал красной чертой пробел после :, не забывайте про него. Ниже пример как выглядят карточки

Далее опускаемся ниже и открываем вкладку Дополнительно, там прописываем id курса

После чего сохраняем изменения

Теперь переходим в раздел Подробная программа и дублируем любой из последних постов

Здесь заполняете название под цифрой 1 как вам удобно, главное потом понимать какой пост для какого курса,. Затем под цифрой 2 ставите Опубликовано

Далее опускаемся ниже и нажимаем на вкладку Дополнительно и прописываем id курса

После этого приступаете к написанию текста в качестве подробной программы

Здесь может быть любой текст по объему и с любым количеством блоков, потому что на странице он по умолчанию скрыт

И только если нажать на кнопку откроется полный текст

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

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

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

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

Ключевой момент! После замены картинки экспортируете всю группу в формате PNG, масштаб 1,5х

Следующим шагом делаем данным пост опубликованным — цифра 1, а вот под цифрой 2 вставляем id ютуб ролика.

Его узнать достаточно просто, допустим у вас есть ссылка на ютуб ролик вида https://youtu.be/tFQWFkfSkcg?si=ED0dbsdA9nZ7ycuF

Перейдите по нему и вы увидите в URL после ?v= несколько символов, это и есть id ролика. Данный id надо указать под цифрой 2

И далее наша любимое действие опускаемся ниже и нажимаем на вкладку Дополнительно и где Имя автора прописываем id курса

Здесь тот же самое, открываем раздел, дублируем самый последний пост

Открываем дубликат и редактируем. Под цифрой 1 название чтобы вам было понятное что это и для какого курса, под цифрой 2 ставим статус опубликовано. Под цифрой 3 пишем короткий текст, учтите что он должен быть как один блок. Причем после слов КОРОТКИЙ ТЕКСТ: как и везде стоит пробел. Старайтесь контролировать объемы текста, можно оставлять как есть, а потом посматривать как он выглядит на странице.

Под цифрой 4, если у вас нет прям большого текста и все влезло нормально в коротки, то после слов ПОЛНЫЙ ТЕКСТ: пишите пробел.

Если у вас все не влезло в коротки текст, то после слов ПОЛНЫЙ ТЕКСТ: ставите пробел и пишите полный текст отзыва и все в одном блоке, пример ниже

Красным выделил один пробел.

Далее опускаемся ниже и открываем вкладку Дополнительно и там в Имя автора прописываем id курса