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

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

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

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

Поради:

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

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

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

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

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

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

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

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

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

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

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

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

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

Виберіть

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

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

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

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

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

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

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

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

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

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

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

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

Обмеження Canva код

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

Що робити, якщо мій вебсайт Canva код не публікується?

Якщо ваш вебсайт Canva Code великий або складний, завеликий віджет може перешкодити його публікації. Ви можете спробувати спростити вебсайт або розділити контент на менші вебсайти або сторінки.У тому самому чаті Canva Code спробуйте ввести запит Canva ШІ:

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

Коли Canva код згенерує оновлену версію, спробуйте опублікувати її знову.

Підказка: Розбиття контенту на менші вебсайти або сторінки може допомогти, оскільки кожен опублікований сайт містить менше вмісту. Якщо ви розділите свій вебсайт на окремі опубліковані вебсайти, вам доведеться керувати їхніми URL-адресами та ділитися ними окремо.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Користь була

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

Довідка