Створюйте інтерактивні дизайни за допомогою коду Canva

Цю статтю перекладено за допомогою машинного перекладу. Повідомте нас про помилки в разі їх виявлення.

Canva Code дає змогу створювати адаптивні інтерактивні дизайни без технічних проблем із написанням коду. Canva Code можна використовувати двома способами:

Створюйте інтерактивні дизайни коду
- Створюйте повні інтерактивні дизайни, як-от цільові сторінки, інформаційні панелі або портфоліо, а також редагуйте й публікуйте як вебсайти в Редакторі Canva
Додавайте інтерактивні елементи коду до своїх дизайнів
- Створюйте інтерактивні елементи, як-от вікторини, калькулятори або діаграми, до іншого дизайну й повторно використовуйте їх у кількох дизайнах.

Поради:

Докладніше про те, як ця функція впливає на використання ШІ.
Дізнайтеся, як написати кращі підказки, щоб максимізувати вашу надбавку на ШІ.

Створюйте інтерактивні дизайни коду

Використовуйте тип дизайну «Код» , якщо хочете створити повноцінний інтерактивний дизайн.

Створюйте цільові сторінки, інформаційні панелі, портфоліо тощо
Редагуйте й уточнюйте їх у редакторі Canva
Опублікувати як адаптивний вебсайт

На головній сторінці Canva виберіть Код. Відкриється редактор Canva.
У редакторі Canva спочатку опишіть дизайн на
вкладці ШІ Canva. Запитайте щось на кшталт «Створення інтерактивного зручного трекера вправ».
Крім того, на
вкладці «Шаблони» ви також можете переглядати або шукати шаблони для початку.
Удосконалюйте його за допомогою
ШІ Canva або прямого редагування. Перегляньте розділ Редагування інтерактивних дизайнів і елементів у Canva Code, щоб дізнатися, як це зробити.

Додавайте інтерактивні елементи коду до своїх дизайнів

Перейдіть до ШІ Canva та виберіть «Код» , щоб створити один інтерактивний компонент.

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

На головній сторінці Canva виберіть
ШІ Canva.
У полі «Запит» опишіть інтерактивний елемент коду, який потрібно створити. Дізнайтеся більше про запити на основі ШІ тут.
Виберіть </> Код.
Натисніть клавішу Enter на клавіатурі або
кнопку «Надіслати». ШІ Canva готує дизайн на основі вашого запиту.
Після створення дизайну коду виберіть Використати в дизайні.
У розділі Додати як елемент до виберіть тип документа, щоб додати його як інтерактивний елемент Code.
Щоб покращити дизайн, згенерований Canva Code, запитайте про уточнення у вікні чату на бічній панелі.

Примітка. Ви можете отримати доступ до версій дизайнів у чаті за допомогою ШІ Canva.

Редагуйте інтерактивні дизайни й елементи, згенеровані Canva Code

Удосконалюйте дизайн, створений Canva Code, за допомогою інструментів у редакторі. Перегляньте розділ «Редагування інтерактивних дизайнів і елементів, створених у Canva Code», щоб дізнатися більше.

Перегляньте й опублікуйте дизайн

Виберіть

Попередній перегляд, щоб взаємодіяти з дизайном. Щойно все буде налаштовано добре, ви можете опублікувати його як вебсайт. Дізнайтеся, як публікувати вебсайти Canva Code й керувати ними.

Примітка. Інтерактивність працює, коли дизайн переглядається в Canva або публікується як вебсайт.

Отримайте доступ до версій Canva Code, а також керуйте ними

Щоразу, коли ви оновлюєте дизайн Canva Code за допомогою запиту, Canva автоматично зберігає нову версію в одному чаті. Це дає змогу повернутися до попередніх ітерацій, продовжити редагування з попередньої версії або скопіювати згенерований код для зовнішнього використання.

Переглянути історію версій

На головній сторінці Canva відкрийте
ШІ Canva.
На панелі запитів виберіть </> Код , щоб переглянути чати Canva Code на бічній панелі. Примітка.
- Розпізнати чати Canva Code можна за значком </> поруч із ними.
Відкрийте ланцюжок чату
в Canva Code. На бічній панелі перегляньте доступні версії (наприклад, Версія 1, Версія 2 тощо).

Примітка. Якщо продовжити запит у тому самому чаті, автоматично створюється нова версія.

Використовуйте попередню версію

Відкрийте ланцюжок чату Canva Code.
Виберіть потрібну версію.
Виберіть Використати в дизайні , щоб продовжити редагування цієї версії в Canva.

Перегляньте та скопіюйте код

Ви можете переглянути базовий код, згенерований Canva Code, і скопіювати його для повторного використання за межами Canva.

У стрічці Canva Code (Код Canva) увімкніть перемикач Show code t (Показати код).
Виберіть Копіювати код, щоб зберегти його в буфері обміну.

Обмеження Canva Code

Canva Code підтримує всі мови, доступні в Canva, окрім користувачів canva.cn.
Canva Code використовуватиме вказівки лише з опису, який ви ввели або використали. Що більше контексту й інструкцій ви надасте, то кращим буде результат.
Код можна скопіювати й повторно використовувати ззовні, але його не можна експортувати як файл або безпосередньо редагувати в Canva.

Чи можна повторно використовувати код за межами Canva?

Так. Скопіюваний код можна використовувати у власних проєктах. Його створено для Canva, але ви можете адаптувати його для зовнішніх інструментів або робочих процесів.

Чи можу я використовувати свої твори з Canva Code для комерційного використання?

У стосунках між вами та Canva і в межах, дозволених законом, ви володієте вхідними й вихідними матеріалами для наших функцій ШІ (зокрема, кодом Canva та створеними кодами Canva), і Canva не буде висувати жодних претензій щодо права власності на ваші вхідні або вихідні дані. (зокрема, створені коди Canva). Щоб отримати докладні відомості та повні умови, перегляньте наші Умови використання продуктів на основі ШІ.

Хто може бачити, що я створюю за допомогою Canva Code?

Лише ви можете бачити свої бесіди за допомогою Canva Code. Коли ви натискаєте Використати в дизайні, створюється новий дизайн із цією версією, і ви можете поділитися дизайном (включно з кодом Canva) за допомогою

кнопки «Поділитися».

Якщо ви публікуєте дизайн на вебсайті, контроль доступу керується параметрами, які ви налаштовуєте під час публікації вебсайту.

Чи можу я керувати доступом моєї команди до Canva Code?

Якщо ви адміністратор, викладач або дизайнер бренда, ви можете вибрати, хто має доступ до Canva Code у вашій команді або класі.

Не можете знайти код Canva на домашній сторінці? Дізнайтеся більше про обмеження доступу до коду Canva.

Чому рядки коду не змінюються?

У Canva Code тепер використовується редагування на основі diff, що означає, що оновлюються лише необхідні рядки коду, а не весь блок повторно створюється. Це призводить до пришвидшення зворотного зв’язку, коли ви вносите невеликі зміни в логіку дизайну.

Якщо після надсилання запиту рядки коду не змінюються, це означає, що Canva працює у фоновому режимі, щоб застосувати лише необхідні зміни. Зачекайте, поки Canva Code завершить створення іншої версії.

Інформація знадобилася?

Користь була

Користі не було

Довідка