メインコンテンツまでスキップ

レイアウトを作成

レイアウトは、ページ上で提案がどのように表示されるかを決定します。最も一般的なレイアウトタイプは、オーバーレイと埋め込みです。

レイアウトを追加

  1. my.rokt.com にログオンします。
  2. 取引をクリックします。
  3. レイアウトをクリックします。
  4. レイアウトを追加を選択します。 レイアウトを追加
  5. レイアウトテンプレートを選択します。

テンプレートをデザイン

注記

画面の上部にあるボタンを使用して、レイアウトのデスクトップビューとモバイルビューを切り替えることができます。

  1. レイアウトの名前を入力します。

  2. テーマをパーソナライズします:

    1. 設定

      設定説明
      提案レイアウトに表示する提案の最小および最大数を設定します。
      頻度制限訪問者が戻ってきたときにレイアウトを抑制する期間を設定します。
      言語レイアウトを表示する言語を選択します。
      プラットフォームレイアウトを表示するプラットフォームを選択します。
    2. 一般スタイル

      設定説明
      背景レイアウトの背景色を設定します。
      外枠外枠の太さ半径を設定します。
      間隔レイアウトの余白パディングをピクセル(px)で設定します。
      上部の区切り線上部の区切り線のデザインパラメータを設定します。
      上部の余白が >0 の場合のみ上部の区切り線が表示されます
      下部の区切り線下部の区切り線のデザインパラメータを設定します。
      下部の余白が >0 の場合のみ下部の区切り線が表示されます

      一般スタイル設定

    3. 進捗トラッカー

      設定説明
      進捗トラッカーを表示オンまたはオフを切り替えます。
      進捗トラッカーの外観レイアウト内の進行状況を表示するために、番号付き塗りつぶしされた円、またはダッシュを選択します。
      開始位置進捗トラッカーを表示し始める場所を選択します。最初または2番目の広告から開始します。
      番号付きカウンターの開始番号これは開始位置の設定に直接関連します。最初の広告から番号を付け始めることを選択した場合、ここで1を選択します。2番目から開始する場合は2を選択します。
      場所進捗トラッカーを配置する場所をまたはから選択します。
      訪問済み進捗トラッカーでどの広告が訪問済みかを示す色を設定します。
      未訪問進捗トラッカーでまだ訪問されていない広告を示す色を設定します。

      進捗トラッカーの設定

    4. テキストスタイル

      ドロップダウンからレイアウトに使用するフォントを選択します。

      最初は少数のフォントから選択できますが、以下の手順で自分のブランドフォントをアップロードすることもできます。

      カスタムフォントを追加する

      :::注意

      このプロセスを始める前に、フォントファイル (.tff, .otf, .woff, または .woff2) をダウンロードしておく必要があります。

      :::

      以下の手順でフォントをレイアウトに追加できます:

      1. カスタムフォントを管理をクリックします。
      2. 新しいフォントを追加をクリックします。
      3. フォントを使用するプラットフォームを選択します(複数選択可)。
      4. アップロードをクリックし、ファイルを検索して選択します。
      5. (オプション)オプションスタイルを表示をクリックし、フォントの太字または斜体バージョンをアップロードします。
      6. 保存をクリックします。

      これで新しいフォントがドロップダウンから選択可能になります。

      レイアウトの各テキストセクションでフォントサイズ、色、マークダウンスタイリング(太字、斜体、または下線オプション)などのテキストプロパティを編集できます。どのテキストセクションを編集しているのか理解するためには、レイアウトおよびエディタ内に表示されている名前を確認してください。この例では、レイアウトのタイトルセクションを編集しています。

      レイアウトのテキストスタイル

    5. ボタン

      設定説明
      一般
      フォントボタンに使用したいフォントとフォントサイズを選択します。
      ボタンの半径ボタンのエッジがどれくらい丸くなるかを決定します。0 pxだと四角いエッジになり、16 pxだと最も丸いエッジになります。
      ボタンサイズボタンの最小の高さと幅を設定します。
      CTAの文字ケース入力されたとおりに表示する入力されたとおりに、各単語の最初の文字を大文字として表示するタイトルケース、またはすべての文字を大文字で表示する大文字から選択します。
      フォーメーションポジティブまたはネガティブの応答を最初に表示するか選択します。
      モバイルビューモバイルデバイスでボタンをスタックまたはアンスタックで表示するか選択します。
      プライマリおよびセカンダリ
      これらを使用して、ボタンのスタイルや色を個別に設定できます。
    6. ハイパーリンク

      設定説明
      フッター
      デスクトップデフォルトデスクトップで表示される場合、レイアウトのフッター内のハイパーリンクのデフォルトのスタイルと色を設定します。
      デスクトップホバーデスクトップで表示される場合、レイアウトのフッター内のハイパーリンクのホバースタイルと色を設定します。
      モバイルデフォルトモバイルデバイスで表示される場合、レイアウトのフッター内のハイパーリンクのスタイルと色を設定します。
      一般
      デフォルトレイアウトの本文内のハイパーリンクのデフォルトスタイルを設定します。
      ホバーレイアウトの本文内のハイパーリンクのホバースタイルを設定します。
    7. オファー終了時の動作

      設定説明
      コンテンツ
      タイトルレイアウトの最終ページのタイトルを設定します。つまり、すべてのオファーが提示された後です。
      メッセージレイアウトの最終ページで表示されるメッセージを追加します。
      スタイル
      テキストの配置レイアウトの最終ページのテキストの配置を設定します。
  3. セクションを個別に設定します。

    1. ヘッダー

      設定説明
      コンテンツ
      テキストレイアウトのヘッダーセクションに表示されるテキストを追加します。
      **このテキストは、レイアウトで黒 (#000000) でレンダリングされます。
      スタイル
      背景ヘッダーの背景色を設定します。
      ボーダー(オプション) ヘッダーの重み半径、およびを設定します。
      ヘッダーのスペーシングヘッダーのマージンパディングをピクセル (px) 単位で設定します。
      テキストの配置ヘッダーのテキストの配置を設定します。
      セクションディバイダートグルオンにすると、ヘッダーの下に水平線が表示されます。

      レイアウトのヘッダー

    2. オープニングパラグラフ

      設定説明
      コンテンツ
      最初の段落これは事前にテキストが入力されていますが、編集可能です。
      第二段落(オプション) 必要に応じてさらにテキストを追加するスペースです。
      スタイル
      背景オープニング段落の背景色を設定します。
      境界線(オプション) オープニング段落の境界線の太さ半径、およびを設定します。
      オープニング段落の間隔オープニング段落のマージンパディングをピクセル(px)単位で設定します。
      テキストの配置オープニング段落のテキストの配置を設定します。
    3. Offers

      設定説明
      スタイル
      背景オファーの背景色を設定します。
      境界線(オプション) オファーの境界線の太さ半径、およびを設定します。
      オファーの間隔オファーのマージンパディングをピクセル(px)単位で設定します。
      設定
      画像レイアウトに画像を表示するタイミングと場所を決定します。
      配置コンテンツの配置を選択します。
      クリエイティブコピーの位置クリエイティブコピーを表示する場所を選択します。
      ボタンボタンの配置を選択します。
      否定的な反応で閉じるこのトグルを選択すると、いずれかのクリエイティブに否定的な反応がある場合、レイアウトが閉じます。
      反応タイプ表示される反応のタイプを選択します。
    4. 確認メッセージ

      設定説明
      確認メッセージを表示確認メッセージをすべてのポジションで表示するか、ポジション2以降にのみ表示するか、全く表示しないかを選択します。
    5. クロージング段落

      設定説明
      コンテンツ
      テキスト(オプション) レイアウトのボタンの下に表示されるクロージング段落のテキストを入力します。
      2つのテキストボックスがあり、1つはポジション1用、もう1つはポジション2+用です。すべてのポジションにテキストを表示したい場合は、両方のテキストボックスを完成させる必要があります。
      スタイル
      背景クロージング段落の背景色を設定します。
      境界線(オプション) クロージング段落の境界線の太さ半径、およびを設定します。
      クロージング段落の間隔開始段落のマージンパディングをピクセル(px)単位で設定します。
      テキストの配置クロージング段落のテキストの配置を設定します。
      セクション区分トグルをオンにすると、クロージング段落の下に水平線を表示します。必要に応じて、区分のスタイルを設定します。
    6. フッター

      設定説明
      設定
      リンクフッターに表示するリンクを選択します。
      リンク表示テキストクライアントプライバシーポリシーの表示を有効にした場合に表示するテキストを入力します。
      URLクライアントプライバシーポリシーの表示を有効にした場合にプライバシーポリシーの URL を入力します。
      スタイル
      背景フッターの背景色を設定します。
      境界線(オプション)フッターの境界線の重み半径を設定します。
      閉じ段落のスペーシングフッターのマージンパディングをピクセル (px) 単位で設定します。
      テキストの配置フッター内のテキストの配置を設定します。
      モバイルビューでのリンクモバイルビューでリンクをスタックするか、インラインで表示するかを選択します。
  4. 保存して閉じるをクリックして、レイアウトをRoktに送信して承認を受けます。

この記事は役に立ちましたか?