Создавайте интерактивные дизайны с помощью кода 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 код, с помощью инструментов редактора. Ознакомьтесь с разделом Редактировать интерактивные дизайны и Элементы, созданные с помощью Canva код, чтобы узнать Еще.

Предварительный просмотр и публикация дизайна

Нажмите

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

Примечание. Интерактивный контент работает, когда дизайн просмотреть на 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 код: Поддержка всех языков, доступных в 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 Code в вашей команде или классе.

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

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

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

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

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

Полезно

Не полезно

Помощь