Divi Code AI — ваш личный помощник по программированию в Divi

Хорошие новости для веб-дизайнеров и разработчиков: появилось новаторское дополнение к набору инструментов Divi AI . В октябре 2023 года Divi анонсировала новое дополнение к своему набору инструментов искусственного интеллекта — Divi Code AI, инструмент, который упрощает веб-разработку в экосистеме Divi. Divi Code AI обладает уникальной способностью писать код, генерировать CSS и оказывать неоценимую помощь в настройке веб-сайтов Divi с помощью Visual Builder. Теперь пользователи могут воспользоваться опытом опытного веб-разработчика, хорошо разбирающегося в тонкостях каждого модуля Divi. В этом блоге рассказывается, как Divi Code AI меняет опыт веб-дизайна Divi , обещая большую эффективность и больший уровень удовольствия.

Настройте веб-сайт с помощью AI-кодирования

Пользователи могут легко заметить новый значок AI, расположенный под полями кода Divi. Просто щелкнув этот значок, люди могут передать Divi AI свои конкретные требования. В зависимости от настраиваемого элемента и характера редактируемого поля Divi AI оперативно адаптирует свои ответы в соответствии с поставленной задачей.

Например, когда пользователь хочет включить градиентный текст в заголовок (функция дизайна, изначально недоступная в Divi), он может просто попросить Divi AI сгенерировать необходимый CSS. Через несколько мгновений заголовок украшен потрясающим эффектом градиента.

Пользователи могут участвовать в постоянном диалоге с Divi AI, чтобы точно настроить результат. В видео-демонстрации пользователь почувствовал, что первоначальный градиент несколько приглушен, и, соответственно, попросил Divi AI усилить его. Результат теперь представляет собой идеальный градиент, обеспечивающий желаемую яркость.

Создание пользовательских элементов

Модуль Code выделяется как яркая звезда Divi Code AI, способный легко обрабатывать HTML, CSS и JavaScript. Пользователи могут просто попросить Divi AI создать всплывающее окно с 30-секундной задержкой, приглашая посетителей подписаться на их информационный бюллетень, с возможностью свободно описывать внешний вид всплывающего окна. За считанные секунды Divi AI без особых усилий генерирует код, в результате чего появляется привлекательное и эффективное всплывающее окно, привлекающее внимание посетителей веб-сайта.

Divi AI может похвастаться широким спектром возможностей, когда дело касается модулей кода. Он может легко включать в себя такие функции, как эффект ввода для заголовка вашего героя или преобразование раздела Divi в удобную, закрывающуюся плавающую боковую панель. Как только пользователи знакомятся с взаимодействием с Divi AI, перед ними открывается царство захватывающих возможностей.

Вариант CSS в свободной форме для всех модулей

Они реализовали примечательное улучшение во всех модулях Divi — функцию CSS свободной формы, которая позволяет пользователям стилизовать модуль в фокусе и любые базовые элементы с помощью псевдокласса «селектор». Например, при редактировании модуля Blurb вы можете легко применить тень блока и настроить внешний вид его элементов IMG и H3, создав правила CSS, подобные приведенным ниже:

selector { <span class="webkit-css-property" aria-label="CSS property name: box-shadow">box-shadow</span><span class="styles-name-value-separator">: </span><span class="value" aria-label="CSS property value: 0 10px 20px 0 #000">0 10px 20px 0 #000</span><span class="styles-semicolon">; }</span>
 
selector img { border-radius: 100px; border: 5px solid #000; }
 
selector h3 { margin-top: 20px; }

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

Настройка CSS с помощью искусственного интеллекта

Использование Divi Code AI в новой области CSS свободной формы оказалось замечательным опытом. В видео-демонстрации ниже пользователи могут увидеть, как Divi AI легко выполняет последовательность настроек. Инструкции ясны: преобразование изображения в круглую форму, добавление тонкой тени от прямоугольника, наложение на изображение полупрозрачного градиента и применение анимации увеличения при наведении курсора.

Благодаря глубокому пониманию Divi AI структур модулей Divi и знанию CSS эти сложные задачи обычно успешно решаются с первой попытки или значительно приближаются к желаемому результату.

Кодовая база Диви

Что отличает Divi Code AI, так это точная настройка кодовой базы модулей Divi, что дает явное преимущество по сравнению с другими большими языковыми моделями. Благодаря знакомству с классами модулей Divi и выводами HTML, он превосходно понимает неоднозначные запросы и распознает термины, специфичные для Divi, в подсказках пользователя.

Например, в видео, представленном ниже, пользователь поручает Divi Code AI создать CSS для настройки внешнего вида модулей Blurb и Button. Впечатляет то, что Divi Code AI инстинктивно распознает природу элементов Blurb и Button, точно определяя соответствующие классы. Такая точность позволяет ему обеспечить точные настройки с самой первой попытки.

Удобное кодирование

Divi Code AI предлагает удобные быстрые действия для точной настройки вашего кода. Всего одним щелчком мыши он может автоматически оптимизировать, форматировать и улучшать совместимость со старыми браузерами. Кроме того, у вас есть возможность изменять код с помощью подсказок, открывая безграничные творческие возможности.

Облачная библиотека фрагментов кода

Хотя Divi AI, возможно, и не безупречен, он позволяет пользователям продолжать разговор и сотрудничать с AI для достижения желаемого результата. Пользователи также могут запросить «повторную попытку». С каждой попыткой Divi AI выдает немного разные результаты, часто находя желаемое решение после нескольких попыток.

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

Подведение итогов

Divi Code AI — это больше, чем просто технологический прогресс; это меняет правила игры в мире веб-дизайна. Он предлагает пользователям возможность использовать возможности опытного интерфейсного веб-разработчика прямо из Divi Visual Builder .

Независимо от того, являетесь ли вы опытным веб-дизайнером или новичком в этой области, Divi Code AI открывает двери для повышения эффективности и настройки. Погрузитесь в будущее веб-дизайна с помощью Divi Code AI.