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

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

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

<div class="builder-item part-image " data-animation-mode="no" data-item-name="field60070" data-param="items/parts/field60070" data-setting-editable="true" data-title="Элемент" id="bkmrk-"><div class="image-box" data-img-src="//fs-thb01.getcourse.ru/fileservice/file/thumbnail/h/2cb3986c3685e27b5a0bcae3feddba9b.png/s/s1200x/a/143493/sc/431" data-img-title="" id="bkmrk--1">![](https://fs-thb01.getcourse.ru/fileservice/file/thumbnail/h/2cb3986c3685e27b5a0bcae3feddba9b.png/s/s1200x/a/143493/sc/431)<div class="lt-image-caption" data-editable="true" data-param="items/parts/field60070/inner/image/caption">  
</div></div></div>Из предложенных вариантов, выбираем «Пустая страница», вносим название, нажимаем добавить страницу и переходим в **редактор страницы**.

<div class="builder-item part-image " data-animation-mode="no" data-item-name="field916" data-param="items/parts/field916" data-setting-editable="true" data-title="Элемент" id="bkmrk--2"><div class="image-box" data-img-src="//fs-thb02.getcourse.ru/fileservice/file/thumbnail/h/2f130e1f7269c897c147cce26c1c00e3.png/s/s1200x/a/143493/sc/140" data-img-title="" id="bkmrk--3">![](https://fs-thb02.getcourse.ru/fileservice/file/thumbnail/h/2f130e1f7269c897c147cce26c1c00e3.png/s/s1200x/a/143493/sc/140)<div class="lt-image-caption" data-editable="true" data-param="items/parts/field916/inner/image/caption">  
</div></div></div>Добавление всех блоков и элементов

<div class="builder-item part-header " data-animation-mode="no" data-item-name="field11385" data-param="items/parts/field11385" data-setting-editable="true" data-title="Элемент" id="bkmrk-%D0%A1%D0%BF%D1%80%D0%B0%D0%B2%D0%BA%D0%B0-%D0%BF%D0%BE-%D0%BF%D0%B5%D1%80%D0%B5%D1%87%D0%BD%D1%8E%C2%A0%D0%B2"><div class="f-header f-header-26" data-editable="true" data-param="items/parts/field11385/inner/text"><u>Справка по перечню всех элементов по порядку:</u></div></div>**1. Блок «Якорная ссылка» (#before)**

*<span class="redactor-inline-converted">— Данный блок необходим, чтобы добавить якорную ссылку, которая переместит экран пользователя к блоку «Заглушке», который появится после использованной попытки.</span>*

<div class="builder-item part-separator " data-animation-mode="no" data-item-name="field44057" data-param="items/parts/field44057" data-setting-editable="true" data-title="Элемент" id="bkmrk--4">---

</div>**2. Блок «Форма»**

*<span class="redactor-inline-converted">— Основной блок в котором будет установленно колесо фортуны, а так же сам обработчик формы для запуска процесса, добавления групп и т.д. Это все будет описано в следующих уроках.</span>*

<div class="builder-item part-text " data-animation-mode="no" data-item-name="field26242_58_72" data-param="items/parts/field26242_58_72" data-setting-editable="true" data-title="Элемент" id="bkmrk-%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA-%D0%A2%D0%B5%D0%BA%D1%81%D1%82-%D0%94%D0%BE%D0%BF%D0%BE"><div class="text-large f-text" data-editable="true" data-param="items/parts/field26242_58_72/inner/text">1. Заголовок
2. Текст
3. Дополнительно → HTML
4. Дополнительно → Предложение по условию
5. Поле пользователя → Email
6. Поле пользователя → Телефон
7. Поле пользователя → Свое поле (в примере текстовое доп. поле «Введите свой телеграм»)
8. Кнопка (вращать колесо)

</div></div><div class="builder-item part-separator " data-animation-mode="no" data-item-name="field52063" data-param="items/parts/field52063" data-setting-editable="true" data-title="Элемент" id="bkmrk--5">---

</div>**3. Блок «Якорная ссылка» (#after)**

*<span class="redactor-inline-converted">— Аналогично блоку под №1, только теперь мы будем перемещать пользователя к блоку-форме с колесом фортуны. Можно использовать в ссылках, чтобы пользователь попадал сразу в нужное место. Например в демонстрации мы использовали данную ссылку, когда пользователь нажимал кнопку для еще одной попытки. </span>*

<div class="builder-item part-separator " data-animation-mode="no" data-item-name="field21171" data-param="items/parts/field21171" data-setting-editable="true" data-title="Элемент" id="bkmrk--6">---

</div>**4. Блок «Текст и заголовок»**

<span class="redactor-inline-converted">*—* </span>*Блок «Заглушка», он будет показан после перезагрузки страницы, после того как пользователь сделает попытку вращения колеса. В нем будет указан таймер до следующей попытки, а так же изображение самого колеса и текст.*

<div class="builder-item part-text " data-animation-mode="no" data-item-name="field26242_58_72_23" data-param="items/parts/field26242_58_72_23" data-setting-editable="true" data-title="Элемент" id="bkmrk-%D0%98%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B8%D1%81%D1%85%D0%BE%D0%B4%D0%BD%D0%BE%D0%B3"><div class="text-large f-text" data-editable="true" data-param="items/parts/field26242_58_72_23/inner/text">1. Изображение исходного колеса
2. Заголовок
3. Текст
4. Таймер

</div></div><div class="builder-item part-separator " data-animation-mode="no" data-item-name="field52914" data-param="items/parts/field52914" data-setting-editable="true" data-title="Элемент" id="bkmrk--7">---

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

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

<div class="builder-item part-separator " data-animation-mode="no" data-item-name="field18916" data-param="items/parts/field18916" data-setting-editable="true" data-title="Элемент" id="bkmrk--8">---

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

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

<div class="builder-item part-separator " data-animation-mode="no" data-item-name="field13028" data-param="items/parts/field13028" data-setting-editable="true" data-title="Элемент" id="bkmrk--9">---

</div>#### 1. Добавление якорной ссылки

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

<div class="builder-item part-image " data-animation-mode="no" data-item-name="field98028" data-param="items/parts/field98028" data-setting-editable="true" data-title="Элемент" id="bkmrk--10"><div class="image-box" data-img-src="//fs-thb02.getcourse.ru/fileservice/file/thumbnail/h/de8001ec0a06ef24658e0f219de476d9.png/s/s1200x/a/143493/sc/195" data-img-title="" id="bkmrk--11">![](https://fs-thb02.getcourse.ru/fileservice/file/thumbnail/h/de8001ec0a06ef24658e0f219de476d9.png/s/s1200x/a/143493/sc/195)<div class="lt-image-caption" data-editable="true" data-param="items/parts/field98028/inner/image/caption">  
</div></div></div>В настройках указываем название якоря «#before» и нажимаем сохранить.

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

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

<div class="builder-item part-image " data-animation-mode="no" data-item-name="field47026" data-param="items/parts/field47026" data-setting-editable="true" data-title="Элемент" id="bkmrk--12"><div class="image-box" data-img-src="//fs-thb02.getcourse.ru/fileservice/file/thumbnail/h/e0f4da8da5c208658614f0d961129a37.png/s/s1200x/a/143493/sc/98" data-img-title="" id="bkmrk--13">![](https://fs-thb02.getcourse.ru/fileservice/file/thumbnail/h/e0f4da8da5c208658614f0d961129a37.png/s/s1200x/a/143493/sc/98)<div class="lt-image-caption" data-editable="true" data-param="items/parts/field47026/inner/image/caption">  
</div></div></div>После появления формы на странице указываем свой заголовок, добавляем необходимые поля пользователя (Email, телефон), даем название кнопке и оформляем ее.

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

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

<div class="builder-item part-image " data-animation-mode="no" data-item-name="field12246" data-param="items/parts/field12246" data-setting-editable="true" data-title="Элемент" id="bkmrk--15"><div class="image-box" data-img-src="//fs-thb02.getcourse.ru/fileservice/file/thumbnail/h/fac713a1111ff7f505c7afab221fc622.png/s/s1200x/a/143493/sc/265" data-img-title="" id="bkmrk--16">![](https://fs-thb02.getcourse.ru/fileservice/file/thumbnail/h/fac713a1111ff7f505c7afab221fc622.png/s/s1200x/a/143493/sc/265)<div class="lt-image-caption" data-editable="true" data-param="items/parts/field12246/inner/image/caption">  
</div></div></div>Под блоком HTML добавляем блок «Дополнительно → Предложение по условию» в нем позже будут добавленны предложения которые будут формировать сектора колеса фортуны.

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

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

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

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

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

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

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

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

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

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