Divi Code AI - Divi のパーソナルコーディングアシスタント

Web デザイナーと開発者にとって朗報です。Divi AI ツールセットに画期的な追加機能が追加されました。 2023 年 10 月、 Divi は、AI ツールキットに新たに追加された Divi Code AI を発表しました。これは、Divi エコシステム内での Web 開発を簡素化するツールです。 Divi Code AI は、コードを記述し、CSS を生成し、Visual Builder を通じて Divi ウェブサイトをカスタマイズする際に貴重な支援を提供する独自の機能を備えています。ユーザーは、あらゆる Divi モジュールの複雑さに精通した、経験豊富なフロントエンド Web 開発者の専門知識の恩恵を受けることができます。このブログでは、Divi Code AI がDivi の Web デザイン体験をどのように変革し、効率の向上と楽しみのレベルの向上を約束するかを探ります。

AIコーディングでWebサイトをカスタマイズ

ユーザーは、Divi のコードフィールドの下にある新しい AI アイコンを簡単に見つけることができます。このアイコンをクリックするだけで、個人は自分の特定の要件を Divi AI に伝えることができます。カスタマイズされる要素と編集されるフィールドの性質に応じて、Divi AI は当面のタスクに合わせて応答を即座に調整します。

たとえば、ユーザーが見出しにグラデーション テキストを組み込みたい場合、これは Divi ではネイティブに利用できないデザイン機能であり、必要な CSS を生成するように Divi AI にリクエストするだけで済みます。すぐに、見出しが見事なグラデーション効果で装飾されます。

ユーザーは、Divi AI との継続的な対話に参加して、結果を微調整できます。ビデオデモでは、ユーザーは初期の勾配がやや緩やかだと感じたため、Divi AI に勾配を強めるように依頼しました。結果は理想的なグラデーションとなり、望ましい活気が得られます。

カスタム要素の作成

Code モジュールは Divi Code AI の輝かしいスターとして際立っており、HTML、CSS、JavaScript を簡単に処理できる機能を誇ります。ユーザーは Divi AI に 30 秒の遅延ポップアップを作成するようリクエストするだけで、訪問者にニュースレターの購読を勧めることができ、ポップアップの外観を自由に記述できます。 Divi AI はすぐにコードを簡単に生成し、Web サイト訪問者の注意を引く、目を引く効果的なポップアップを作成します。

Divi AI は、コードモジュールに関して幅広い機能を誇ります。ヒーローの見出しのタイピング効果や、Divi セクションを便利で消去可能なフローティング サイドバーに変換するなどの機能を簡単に組み込むことができます。ユーザーが Divi AI との対話に慣れると、エキサイティングな可能性の領域が目の前に広がります。

すべてのモジュール用の自由形式 CSS オプション

彼らは、すべての Divi モジュールにわたって注目すべき機能強化を実装しました。これは、ユーザーが「セレクター」疑似クラスを使用して、フォーカスされているモジュールとその基礎となる要素をスタイルできるようにする自由形式の CSS 機能です。たとえば、Blurb モジュールを編集する場合、以下のような CSS ルールを作成することで、簡単にボックス シャドウを適用し、その IMG 要素と H3 要素の外観を微調整することができます。

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 にとって非常に貴重であることが判明し、リクエストに応え、モジュール全体を簡単にカスタマイズするために必要な柔軟性を実現します。

AI 生成の CSS カスタマイズ

新しい自由形式 CSS 分野で Divi Code AI を活用することは、素晴らしい経験であることがわかります。以下のビデオデモでは、ユーザーは Divi AI が一連のカスタマイズを難なく実行しているのを目撃できます。手順は明確です。画像を円形に変換し、微妙なボックス シャドウを追加し、半透明のグラデーションで画像をオーバーレイし、ホバーでトリガーされるズームイン アニメーションを適用します。

Divi AI は Divi モジュール構造と CSS の習熟度を深く理解しているため、これらの複雑なタスクは通常、最初の試行で正常に処理されるか、望ましい結果に著しく近づくことができます。

ディビコードベース

Divi Code AI の特徴は、Divi モジュール コードベースでの微調整であり、他の大規模な言語モデルと比較して明確な利点を提供します。 Divi モジュール クラスと HTML 出力に精通しているため、あいまいなリクエストを理解し、ユーザー プロンプト内の Divi 固有の用語を認識することに優れています。

たとえば、以下で紹介するビデオでは、ユーザーが Divi Code AI に、Blurb および Button モジュールの外観をカスタマイズするための CSS を作成するように指示しています。印象的なことに、Divi Code AI は Blurb 要素と Button 要素の性質を本能的に識別し、関連するクラスを正確に特定します。この精度により、最初の試行で適切なカスタマイズを実現できます。

便利なコーディング

Divi Code AI は、コードを微調整するための使いやすいクイック アクションを提供します。ワンクリックするだけで、自動的に最適化、フォーマットが行われ、古いブラウザとの互換性が強化されます。さらに、プロンプトを使用してコードを柔軟に変更できるため、創造的な可能性が無限に広がります。

クラウドベースのコード スニペット ライブラリ

Divi AI は完璧ではないかもしれませんが、ユーザーが会話を続け、AI と協力して望ましい結果を調整することができます。ユーザーは「再試行」をリクエストすることもできます。試行するたびに、Divi AI はわずかに異なる結果を生成し、数回の試行後に目的の解決策を発見することがよくあります。

Web 開発の基本を理解している人でも、Divi AI は Web サイトのカスタマイズを迅速化し、これまでは専門家の関与によってのみ達成できた特定の成果を達成できます。

まとめ

Divi Code AI は単なる技術の進歩ではありません。これは Web デザインの世界に大きな変革をもたらします。これにより、ユーザーはDivi Visual Builderから直接、熟練したフロントエンド Web 開発者の機能を利用できるようになります。

経験豊富な Web デザイナーであっても、この分野の初心者であっても、Divi Code AI は効率性とカスタマイズ性の向上への扉を開きます。 Divi Code AI を使用して Web デザインの未来を体験してください。