ビジュアルエディタで要素を追加する方法

テストパターンに新しく要素を追加したい場合、通常はコーデイングの知識が必要となります。

しかし、VWOのビジュアルエディタの LIBRARY 機能を使うことで、コーディングの知識が無くても用途に応じた要素を追加することができます。

エディタのインターフェースは簡単に利用できるよう作られているため、開発チームに頼ることなく要素の追加が可能になります。

追加可能な要素は、3つに分類できます。

Basic（基本的な要素）

基本的なUI要素として、List Item（リスト項目）、Bulleted List（箇条書きリスト）、Content Block（ブロック要素）Button（ボタン）、Numbered List（番号付きリスト）、Image（画像）があります。

使用例：新しいCTAボタンをLPに追加してページ上の動線を簡単にする

Typography (文字組み要素)

文字組みに関連する要素として、Paragraph（段落）、Heading（見出し）、Blockquote（引用）、Link （リンク）があります。

使用例：開催中のプロモーション情報に段落を追加して、関連情報を表示する

Form (フォーム要素)

フォーム要素としては、Label（ラベル）、Input（テキストフィールド）、 Textarea（テキストエリア）、Form Button（フォームボタン）があります。詳しい利用方法については、フォームウィジェットの利用をご参照ください。

使用例：お客様アンケートに新しい質問を追加するために、ラベルと対応するテキストフィールドを追加する

ビジュアルエディタで新しい要素をWebページに追加していく手順をみていきましょう。

追加する要素をクリックし、マウスを動かしてどこに要素を追加するか決定します。マウスが動いている間紫の線とツールチップが表示され、どの要素がどこに追加されるか「Add 要素名 before/after/inside マウスがホバーしている要素のタイプ」という形で表示します。