Создавайте интерактивные дизайны с помощью кода Canva

Эта статья была переведена с помощью машинного перевода. Сообщите нам, если найдете ошибки.

Canva Code позволяет создавать интерактивные дизайны без необходимости писать код. Вы можете использовать Canva Code двумя способами:

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

Советы:

Узнайте больше о том, как эта функция влияет на использование ИИ.
Узнайте, как лучше писать подсказки, чтобы максимизировать ваше пособие по ИИ.

Создавайте интерактивные дизайны код

Используйте код типа документа, если хотите создать полноценный интерактивный процесс.

Создавайте целевые страницы, панели инструментов, портфолио и многое другое
Редактируйте и улучшайте в редакторе Canva
Опубликовать как интерактивный сайт

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

Добавляйте интерактивные элементы код в свои дизайны

Перейдите в ИИ Canva , затем код, когда вам нужно создать один интерактивный компонент.

Создавайте викторины, калькулятор, диаграммы и многое другое в виде элементов.
Добавляйте их в презентации, интерактивные доски или другие типы документов. Опубликуйте как сайт или повторно используйте элементы в нескольких дизайнах.

На домашней странице Canva выберите
ИИ Canva.
В поле Подсказка опишите интерактивный элемент кода, который вы хотите создать. Узнайте подробнее о подсказках на основе ИИ здесь.
Выберите </> Код.
Нажмите клавишу Enter на клавиатуре или
кнопку отправки. ИИ Canva подготавливает ваш дизайн на основе вашей подсказки.
Создав дизайн кода, выберите Использовать в дизайне.
В разделе Добавить в качестве элемента в, выберите тип документа, чтобы добавить его в качестве интерактивного элемента Code.
Чтобы улучшить дизайн, созданный с помощью Canva Code, укажите свои улучшения в поле чата на боковой панели.

Примечание. Вы можете получить доступ к версиям дизайна из темы чата с ИИ Canva.

Редактируйте свои интерактивные дизайны и элементы, созданные с помощью Canva код

Улучшите дизайн, созданный с помощью 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 включите переключатель Show code t.
Нажмите Скопировать код, чтобы сохранить его в буфере обмена.

Ограничения Canva код

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

Что делать, если мой сайт Canva Code не публикуется?

Если ваш сайт Canva Code большой или сложный, слишком большой виджет может помешать его публикации. Вы можете попробовать упростить сайт или разделить контент на меньшие сайты или страницы.В том же чате Canva Code попробуйте ввести ИИ Canva с помощью подсказки:

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

После того как Canva Code сгенерирует обновленную версию, попробуйте опубликовать ее снова.

Совет: разделите контент на меньшие сайты или страницы, поскольку каждый опубликованный сайт содержит меньше контента. Если вы разделите свой сайт на несколько опубликованных сайтов, вам нужно будет управлять и делиться их URL-адресами отдельно.

Можно ли повторно использовать код вне Canva?

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

Можно ли использовать свои дизайны из Canva код в коммерческих целях?

В отношениях между вами и Canva и в той степени, в которой это разрешается законом, вы являетесь владельцем своих Загрузок и Материалов для наших функций на основе ИИ (включая Canva код и созданные Canva коды), и Canva не будет предъявлять авторских прав на ваши Загрузки и Материалы. (включая созданные Canva коды). Более подробную информацию и полные условия см. в наших Условиях использования Продуктов на основе ИИ.

Кто может видеть, что я создаю с помощью Canva Code?

Только вы можете видеть свои диалоги в Canva Code. Когда вы нажмете «Использовать в дизайне», будет создан новый дизайн с этой версией, и вы сможете поделиться им (включая Canva Code), нажав

кнопку «Поделиться» .

Если вы публикуете свой дизайн на сайте, контроль доступа осуществляется с помощью настроек, которые вы настраиваете в процессе публикации сайта.

Могу ли я управлять доступом своей команды к Canva код?

Если вы администратор, преподаватель или дизайнер команды, вы можете выбрать, кто в вашей команде или классе сможет получить доступ к Canva Code.

Не удается найти код Canva на главной странице? Подробнее об ограничениях доступа к коду Canva.

Почему я не вижу изменения в строках кода?

Canva Code теперь использует редактирование на основе изменений. Это означает, что обновляются только необходимые строки кода, а не повторно создается весь блок. Это ускоряет получение отзыва при внесении небольших изменений в логику дизайна.

Если вы не видите, что строки кода изменяются после отправки подсказки, это значит, что Canva работает в фоновом режиме, чтобы внести только необходимые изменения. Дождитесь, пока Canva Code завершит создание новой версии.

Информация пригодилась?

Полезно

Не полезно

Помощь