О редакторе Studio
5 мин. чтения
Представляем наш новый редактор Studio — идеальную платформу, созданную для профессионалов, чтобы легко создавать сайты для клиентов. Благодаря интуитивно понятному интерфейсу вы сможете с легкостью редактировать и полностью контролировать каждый пиксель, гарантируя, что каждая деталь соответствует вашему видению.
Используйте возможности адаптивного ИИ для создания сайтов, которые привлекают внимание на любом экране или устройстве, обеспечивая потрясающий пользовательский опыт каждый раз.
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/9432a2ad-f01d-4a3d-ae53-370c37e15e62/2023/08/01/87b3cde8-2926-48bd-b9e6-287d3d225be1/5942a54d-db2b-4633-82b4-be1da61e3de4.png)
Создавайте адаптивные сайты для своих клиентов
Редактор Studio предоставляет множество практичных инструментов, чтобы ваши сайты выглядели великолепно на всех экранах. Это означает, что вы можете сосредоточиться на дизайне и тратить меньше времени на подбор правильных единиц измерения для каждого элемента.
Настройте элемент так, как вы хотите, чтобы он выглядел на компьютере, а затем выберите адаптивное поведение, которое соответствует вашим потребностям. Адаптивное поведение гарантирует его автоматическую подстройку под различные размеры экрана.
Нужен более точный контроль?
Используйте расширенные адаптивные настройки измерения для того, чтобы изменить размер и расположение элементов на каждом экране.
![Пример доступного адаптивного поведения для элемента в панели инспектора](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/31/480813e7-683a-441d-916a-4271242c95e5/223607bc-fd3d-4f27-b8dd-4c00b647aeca.png)
Чтобы ускорить процесс, используйте инструмент адаптивного лейаута для группирования связанных элементов на основе сетки CSS или flex-контейнера. Например, сетки удерживают элементы в своих ячейках, тем временем как соединение элементов в стек сохраняет их вертикальный или горизонтальный порядок.
![GIF, показывающий, как перетаскивать линии сетки на холсте, чтобы легко добавлять столбцы и строки.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/31/845e0d91-be97-4254-ac13-8fff41653250/a93cecf3-f329-4204-b3a8-2e5d1349d73b.gif)
Повторно используйте дизайн для максимальной эффективности:![Скриншот, показывающий как сохранить созданный элемент в качестве ассета в библиотеке](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/31/c538f56a-581e-48fb-9631-cbc7de73d6d4/b3d6b051-e708-4b09-ac41-207ede8e8f84.png)
Создайте свои собственные ассеты, например, готовые секции и шаблоны сайта, чтобы сохранять, делиться и повторно использовать их на других сайтах.
![Скриншот, показывающий как сохранить созданный элемент в качестве ассета в библиотеке](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/31/c538f56a-581e-48fb-9631-cbc7de73d6d4/b3d6b051-e708-4b09-ac41-207ede8e8f84.png)
Совместно работайте над сайтами в реальном времени
Редактор Studio - это платформа для совместной работы в реальном времени, которая позволяет участникам команды одновременно работать над одним и тем же сайтом. Вы можете редактировать макет, дизайн и содержимое страниц или элементов, не отменяя действий других пользователей.
![Скриншот, показывающий 3 аватара в верхней части редактора Studio, это означает, что 3 человека работают над одним сайтом одновременно.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/31/c04ff946-7aff-43c3-8de4-4826759f6cea/87b42d14-72f2-40e9-b824-ead72e027b32.png)
Изменения, внесенные другими пользователями, появятся в вашем редакторе в течение нескольких секунд. Это сводит к минимуму конфликты и позволяет эффективно взаимодействовать с участниками команды и клиентами.
![Скриншот, на котором коллега выбирает элемент и видно как он выглядит в редакторе.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/31/96536afd-e0a2-461e-a55d-7cea5a05c881/6bd46763-68b4-4027-b515-c19cdb569f9a.png)
Вы также можете решать любые проблемы, которые возникают у клиентов или участников команды, непосредственно на холсте. Используйте панель Комментариев для управления любой коммуникацией относительно сайта, не выходя из редактора. Это отличная возможность для команды и клиентов делиться отзывами и вместе решать вопросы.
![Пример того, как клиент оставляет комментарий об ошибке на странице, чтобы команда сайта могла исправить ее](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/31/a974954d-bfc8-45b0-9a4c-885ebb685774/28459475-e92d-4813-8a8b-87afed0d6c05.png)
Оживите ваш дизайн с помощью анимаций
Включение анимации в ваш дизайн действительно может вывести сайт на новый уровень. Редактор Studio предлагает 5 различных типов анимации, в зависимости от того, когда вы хотите, чтобы они появлялись.
Вы можете сделать так, чтобы анимация появлялась, когда посетители наводят курсор, нажимают или прокручивают элемент. Можно также добавить к нему анимацию входа, которая запускается при загрузке элемента, или анимацию, которая воспроизводится по кругу - и все это без единой строчки кода.
![Пример опубликованного сайта с анимацией, примененной к нескольким элементам](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/31/9b1bbc5c-c987-47e4-bc86-eb1efc5317f8/bdfb8ee0-bc3c-4bc7-b2cd-7fe0977b297d.gif)
Используйте возможности искусственного интеллекта
Искусственный интеллект - это не просто модное выражение. Редактор Studio предлагает набор возможностей на основе ИИ, которые позволяют значительно ускорить процесс создания сайта.
Создайте адаптивный макет
Сделайте страницы и секции адаптивными одним нажатием. Наш инструмент ИИ анализирует текущий макет, а затем устанавливает адаптивную структуру, которая придаёт ему идеальный вид. Это означает, что вам не требуется проверять каждый размер экрана и тратить время на решение проблем с дизайном.
![Пример превью, которое вы видите после того, как инструмент адаптивного ИИ сгенерировал макет](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/19/f3b7db02-1465-41d3-9d20-0f4ef34c3e05/b0e47886-11b9-4536-957a-183928dc050d.png)
Сгенерируйте текст
Наш инструмент по созданию текста ИИ интегрирует Chat GPT от OpenAI непосредственно в редактор. Введите несколько деталей, чтобы создать запрос и получите индивидуальные предложения контента для вашего проекта. Это поможет вам сэкономить время в процессе написания без потери качества.
![GIF, показывающий, как применить текст, предложенный ИИ к абзацу.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/06/28/e6ed137b-63e8-4170-a95d-ccce1e264d59/ee602f9f-0fc3-473b-bfe8-cf37b10e7f63.gif)
Сгенерируйте изображения
Нужны уникальные изображения, которые не встречались еще нигде? Опишите изображение, которое вам нужно, и получите несколько предложений для использования на сайте. Чтобы результаты соответствовали именно тому, что вы ищете, мы предлагаем несколько стилей на выбор - иллюстрацию, 3D, крупный план, фото и многое другое.
![Скриншот панели создания изображений ИИ и четырех вариантов изображения на основе добавленного описания.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/5c3e602a-8647-41f7-bb22-686374bf97ce/2023/07/05/83b4c490-7df1-4b0e-b1fd-911f43972efd/be0247c8-ef76-47eb-8a2a-ab50d284730e.png)
Управляйте большим объемом контента в CMS без кода
CMS (система управления контентом) позволяет хранить огромные объемы контента, создавать динамические шаблоны страниц и принимать ввод данных от посетителей. После передачи сайта ваши клиенты могут использовать CMS для обновления и добавления контента, не затрагивая дизайн.
![Скриншот, показывающий подключения набора данных в репитере.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2023/07/18/c13a139a-35e2-4886-bb8a-06fa3e8730a5/96d62b0e-1410-44ed-9005-591a4d12e5bf.png)
Добавьте свой собственный код CSS
Добавление CSS к элементам открывает совершенно новые возможности стиля. Это позволяет создавать уникальный дизайн и анимацию, обеспечивая при этом максимальную адаптивность.
Выберите элемент на холсте, затем выберите один из глобальных классов, чтобы начать. Не нашли подходящий вариант? Вы можете добавить собственные классы в код.
![Пример глобальной страницы css в редакторе с выбором кнопки и отображения доступных классов CSS](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/31/d7e2c13e-3473-4ffc-a199-0bafe92fd3c0/525402cd-7ec2-4097-ba60-b13c36c6a932.png)
Была ли статья полезна?
|