Draftium — це чорно-білий інструмент для створення макета вашого майбутнього сайту. З Draftium ви можете сконцентруватися на структурі і вмісті перш ніж перейдете саме до дизайну.

Ця стаття підкаже, як почати працювати з Draftium і опублікувати свій перший прототип.

Крок 1. Вибір шаблону

Зареєструйтеся або увійдіть у наявний акаунт на Draftium.

Натисніть на Створити прототип у правому верхньому куті, щоб відкрити бібліотеку шаблонів:



У новому вікні ви можете вибрати порожній або готовий шаблон для будь-якої бізнес-ніші. Зверніть увагу, що деякі шаблони доступні тільки на Pro підписці.



Підказка: ви можете вибрати шаблон за категорією або просто підібрати той, що сподобався. Всі шаблони на 100% піддаються редагуванню, тож ви зможете змінити їх згідно своїх потреб.

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

Крок 2. Редагування шаблону

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

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

додати/видалити колонки в блоці;
змінити порядок колонок;
змінити відступи;
додати елементи — ті, яких не було в блоці спочатку (наприклад, кнопки, зображення, іконки тощо).

Для того, щоб додати інші блоки, натисніть на іконку «плюс» і оберіть доречний блок з нашої бібліотеки. Натисніть на блок, щоб він з'явився в редакторі:



Ви також можете дещо змінити дизайн блоку в його налаштуваннях, клацнувши на «шестерню» у правому верхньому кутку блоку:



Тут ви можете вибрати колір або картинку для фону, а також анімацію. Пам'ятайте, що Draftium є чорно-білим інструментом, тож ви зможете вибрати тільки монохромні кольори.

Натисніть на контейнер для зображення, щоб додати власне. Ви також зможете змінити розмір контейнера, потягнувши за «важелі» знизу. Щоб змінити накладення кольору на зображення або додати до нього посилання, натисніть на «шестерню»:



Крок 3. Публікація прототипу

Поки ви працюєте в редакторі, всі зміни зберігаються автоматично. Якщо ви хочете скасувати останній крок, натисніть на кнопку «Назад» в редакторі. Це спрацює, якщо ви скасовуєте зміни в межах однієї сесії:



Натисніть на Попередній перегляд, щоб перевірити, як прототип буде виглядати на різних пристроях.

Коли ви будете готові опублікувати прототип, натисніть на Опублікувати. Робіть це кожен раз, коли хочете відобразити зміни в браузері.
Чи була ця стаття корисною?
Скасувати
Дякуємо!