ドキュメントCommercePage Builder

要素 – HTMLコード

Last update: Fri May 17 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • トピック：

作成対象：

  • 初心者
  • 中級
  • ユーザー

の使用 HTMLコード HTML、CSS、JavaScript コードのスニペットをに追加するコンテンツタイプ Page Builder ステージ. 例えば、ページ上の要素に適用できるカスタムHTMLを追加し、CSS クラスを宣言することができます。 また、サードパーティのプロバイダーから受け取ったロゴ、ボタン、バナーのコードのスニペットを追加する場合もあります。

HTMLコード ツールボックス

HTMLコード ツールボックス

ツール
アイコン
説明
移動
移動アイコン {width="25"}
HTMLコードコンテナをページ上の別の有効な場所に移動します。
設定
設定アイコン {width="25"}
「HTMLコードを編集」ページが開きます。このページで、コンテナのプロパティを変更できます。
Hide
アイコンを非表示 {width="25"}
HTMLコードコンテナを非表示にします。
表示
アイコンを表示 {width="25"}
非表示のHTMLコードコンテナを表示します。
複製
アイコンを複製 {width="25"}
HTMLコードコンテナをコピーします。
削除
アイコンを削除 {width="25"}
HTMLコードコンテナとそのコンテンツをステージから削除します。
NOTE
非表示の要素はデータベースに保存され、顧客には表示されません。 ただし、これらの要素は、サイトをクロールする検索エンジンやその他のボットには表示されます。 また、非表示の属性を持つ API 呼び出しを通じてリクエストされた場合、ステージから削除しない限り、コンテンツの一部として返されます。

HTMLコードを追加

次の例は、埋め込み方法を示しています Google フォント 現在のスタイルシートを上書きするカスタム見出しクラスをコーディングし、宣言します。

手順 1:Google フォントを選択する

  1. にアクセスします Google フォント サイトを選択し、使用するフォントファミリーを選択します。

  2. に埋め込む生成されたコードをコピーします。 <head> ページの「」セクションを選択し、一時的にテキストエディターに貼り付けます。

    • 埋め込みフォントコード
    • CSS ルール

  3. 各見出しクラスにフォントファミリルールを追加し、見出しクラスを <style> タグ。

    このコードはに貼り付けられます Page Builder.

    code language-html 
    <style>
   h1 {color: teal; font-family: 'Khand', sans-serif; }
   h2 {color: teal; font-family: 'Khand', sans-serif; }
   h3 {color: teal; font-family: 'Khand', sans-serif; }
</style>

手順 2：ページへのコードの追加

  1. が含まれる Admin ストアのサイドバー、に移動します Content > Elements>Pages.

  2. フォントを使用できるページを探し、編集モードで開きます。

  3. 下にスクロールして、 Content セクション。

  4. が含まれる Page Builder パネル、展開 Elements をドラッグして HTML Code ステージ上の行、列またはタブセットへのプレースホルダー。

    赤いガイドラインを使用して、行、列、タブセット内の別のコンテンツコンテナの前または後にディバイダーを配置します。

    HTMLコードプレースホルダーのステージへのドラッグ {width="600" modal="regular"}

  5. HTMLコンテナにカーソルを合わせてツールボックスを表示し、 設定 （ 設定アイコン {width="20"} ）、アイコンです。

  6. テキストボックスに、準備した埋め込みGoogle フォントコードおよびスタイル宣言を貼り付けます。

    読みやすくするために、スペースを 2、3 個入力してコードをインデントできます。

    HTMLコードとスタイル {width="500" modal="regular"}

  7. 必要に応じて、残りの設定を更新します（を参照）。 HTMLコード設定の変更 （詳細はこちら）。

  8. 右上隅のをクリックします。 Save 設定を適用し、 Page Builder ワークスペース。

    新しいフォントは、ブラウザーを使用してページを表示するとレンダリングされます。

手順 3：ページのプレビュー

  1. が含まれる Currently Active ​セクション、設定​ Enable Page ​対象： Yes.

    ページの有効化 {width="600" modal="regular"}

  2. 右上隅のをクリックします Save 矢印と選択 Save & Close.

  3. グリッドでページを見つけて、を選択します。 View が含まれる Actions ​列。

    新しいフォントファミリーでページ見出しをプレビュー {width="700" modal="regular"}

HTMLコード設定の変更 html-settings

  1. HTMLコンテナにカーソルを合わせてツールボックスを表示し、 設定 （ 設定アイコン {width="20"} ） アイコンをクリックします。

  2. テキストボックスで、必要に応じてコードを編集します。

    HTML、CSS、JavaScript コードがサポートされています。 に属するコードスニペット <head> ページのセクションは、ここに入力できます。

    エディターには、コードに特殊な要素を挿入するボタンもあります。

    table 0-row-2 1-row-2 2-row-2 3-row-2
    ボタン 説明
    ウィジェットを挿入… クリックすると、HTMLテキストボックス内のカーソル位置にウィジェットが挿入されます。
    イメージの挿入… アップロードした画像または Gallery の画像をHTML テキスト ボックスのカーソル位置に挿入するときにクリックします。
    変数の挿入… クリックすると、HTMLテキストボックス内のカーソル位置に変数が挿入されます。

  3. を更新 Advanced ​必要に応じて設定します。

    • 親コンテナ内のコードの位置を制御するには、 Alignment:

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2
      オプション 説明
      Default 現在のテーマのスタイル シートで指定されている線形の既定の設定を適用します。
      Left 親コンテナの左罫線に沿ってリストを配置します。指定したパディングはすべて許可されます。
      Center 親コンテナの中央にリストを揃えます。指定したパディングに対する許容値を使用します。
      Right 親コンテナの右端に沿ってブロックを配置します。指定したパディングは許可されます。

      次の例では、オプションを設定して、レンダリングされたコードブロックに中央揃えを使用します。

      中央揃えのディバイダー {width="600" modal="regular"}

    • を Border コードコンテナの 4 つの辺すべてに適用されるスタイル：

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2
      オプション 説明
      Default 関連付けられたスタイル シートで指定されている既定の罫線スタイルを適用します。
      None コンテナの境界線の表示はしません。
      Dotted コンテナの境界線は点線で表示されます。
      Dashed コンテナの境界線は破線で表示されます。
      Solid コンテナの境界線は実線で表示されます。
      Double コンテナの境界線は二重線で表示されます。
      Groove コンテナの境界線は溝付き線で表示されます。
      Ridge コンテナの境界線は、境界線として表示されます。
      Inset コンテナの境界線は、インセットされた線として表示されます。
      Outset コンテナの境界線は、先頭行として表示されます。

    • 境界線のスタイルを Noneの場合は、次のボーダー表示オプションを入力します。

      table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
      オプション 説明
      Border Color 見本を選択するか、カラーピッカーをクリックするか、有効なカラー名または同等の 16 進数値を入力して、カラーを指定します。
      Border Width 境界線の幅のピクセル数を入力します。
      Border Radius ピクセル数を入力して、境界線の各コーナーを丸めるために使用する半径のサイズを定義します。

    • （オプション）の名前を指定します CSS classes を現在のスタイルシートから取得して、コンテナに適用します。

      複数のクラス名はスペースで区切ります。

    • 次の値をピクセル単位で入力 Margins and Padding コードコンテナの外側の余白と内側のパディングを決定します。

      対応する値を図に入力します。

      table 0-row-2 1-row-2 2-row-2
      コンテナ領域 説明
      Margins コンテナのすべての側面の外側の端に適用される空白スペースの量。 オプション： Top / Right / Bottom / Left
      Padding コンテナのすべての側面の内側の端に適用される空白のスペースの量です。 オプション： Top / Right / Bottom / Left
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d