Skip to main content

Создание структуры страницы и добавление всех блоков и элементов

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

В аккаунте переходим в раздел «Страницы → Добавить страницу». 


Из предложенных вариантов, выбираем «Пустая страница», вносим название, нажимаем добавить страницу и переходим в редактор страницы. 


Добавление всех блоков и элементов

Справка по перечню всех элементов по порядку:

1. Блок «Якорная ссылка» (#before)

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

2. Блок «Форма»

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

  1. Заголовок
  2. Текст
  3. Дополнительно → HTML
  4. Дополнительно → Предложение по условию
  5. Поле пользователя → Email
  6. Поле пользователя → Телефон
  7. Поле пользователя → Свое поле (в примере текстовое доп. поле «Введите свой телеграм»)
  8. Кнопка (вращать колесо)

3. Блок «Якорная ссылка» (#after)

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

4. Блок «Текст и заголовок»

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

  1. Изображение исходного колеса
  2. Заголовок
  3. Текст
  4. Таймер

5. Блок «CSS код» — Системные стили колеса
6. Блок «CSS код» — общее оформление вида страницы, стили и дизайн
7. Блок «JavaScript код» — Системный код колеса
8. Блок «JavaScript код» — Позиционирование сообщения о необходимости заполнения полей формы.

— Системные блоки, которые формируют колесо фортуны, его отображение.

Далее пошагово нужно будет добавить все эти блоки на странице 

согласно порядка указанному в списке.

1. Добавление якорной ссылки

В редакторе страницы нажимаем «Все блоки → навигация → якорь».


В настройках указываем название якоря «#before» и нажимаем сохранить.

2. Добавление формы

В редакторе страницы нажимаем «Все блоки → форма → обычная форма».


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


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

Между заголовком и полем пользователя, добавляем блок «Дополнительно → HTML» в нем позже будет расположен код колеса.


Под блоком HTML добавляем блок «Дополнительно → Предложение по условию» в нем позже будут добавленны предложения которые будут формировать сектора колеса фортуны.

3. Добавление якорной ссылки

Аналогично первому пункту, в редакторе страницы нажимаем «Все блоки → навигация → якорь». 

В настройках указываем название якоря «#after» и нажимаем сохранить.

4. Добавление блока «Текст и заголовок» (Заглушка)

В редакторе страницы нажимаем «Все блоки → текст → текст и заголовок».

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

Последним элементом добавляем блок «Дополнительно → HTML» в нем позже будет расположен код таймера.

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

5. Добавление блоков с кодами

Блоки (5,6,7,8) CSS и JS кода мы добавим в следующем уроке с помощью импорта кода на странице. 

No Comments
Back to top