HTMLエレメントの追加.

DXPR Builderを学ぶページを作るコンテンツを追加テキストとメディア

ソーシャル投稿や予約ウィジェットなど、独自のコードを動かす場所をページに用意できます。サードパーティーの埋め込みやカスタムマークアップに対応するエレメントがないときに使います。

HTMLエレメントでページに表示したCNNの記事カード（"Happy 100th Birthday, David Attenborough"と肖像写真付き）

HTMLエレメントの追加

ログインした状態でページを開きます。コンテンツエリアにカーソルを合わせると、ビルダーのコントロールが表示されます。基本操作は最初のページをご覧ください。

カラムにカーソルを合わせ、コントロールバーの+をクリックします。空のページではAdd Elementsをクリックします。Contentタブを開き、HTMLをクリックします。カラムの一番上に追加され、設定ダイアログが開きます。
サービスのEmbedまたはShareメニューから埋め込みコードをコピーし、Raw HTMLエディターに貼り付けます。
ダイアログのSaveをクリックします。次に、コンテンツエリア上部のツールバーにあるSaveをクリックして、ページを保存します。

ダイアログでSaveをクリックすれば、埋め込みはすぐにエディターで動作します。ビルダーもそのスクリプトを実行するためです。動画では、ダイアログを閉じるとすぐに米国の祝日のGoogleカレンダーが表示されています。ページを保存して公開すると、訪問者に表示されます。

エレメントにカーソルを合わせ、コントロールバーのMore > Settingsを開きます。設定項目は次のとおりです。

ContentタブにHTMLがない。 ユーザープロファイルで非表示になっています。管理者にUser Profilesでの有効化を依頼してください。
再読み込み後に消えている。 ページが保存されていません。追加し直し、コンテンツエリア上部のツールバーにあるSaveをクリックします。
埋め込みがプレーンテキストや素の引用で表示される。 埋め込みスクリプトがまだ読み込まれていないか、<script>行が欠けています。数秒待つか、埋め込みコード全体を貼り付け直します。
コードがあるのに訪問者には何も見えない。 サイトが訪問者向けにテキストフォーマットのフィルターを適用しており、そのフォーマットが<script>や<iframe>などのタグを除去しています。編集者にはコードが動作して見えます。管理者にApply text format filters to frontend contentのチェックをGeneral settingsで外すか、テキストフォーマットでそれらのタグを許可するよう依頼してください。その後、公開ページを再読み込みします。
エレメントより下のレイアウトが崩れる。 コードに閉じていないタグがあります。開始タグにすべて対応する終了タグがあるか確認します。

StyleタブでHTMLエレメントの間隔や背景を変更します。