バーのコンテンツと要素
バーに配置できる6つの要素、並べ替え方、グループで1つのバナーに2つのメッセージを表示する方法を説明します。
Content パネルは、ビルダーのレールの最初のアイコンです。バーに表示するすべての内容を設定します。
要素は、このリストの順に、バーの左から右へ並びます。
追加と並べ替え
Section titled “追加と並べ替え”- Add element をクリックすると、6種類の要素のメニューが開きます。新しい要素はリストの末尾に追加されます。
- 行の左にあるハンドルをドラッグして移動します。バーの表示は、ここでの順序に従います。
- 行にカーソルを合わせると、複製と削除のボタンが表示されます。
- 行をクリックすると、右側のカラムに設定が開きます。
メッセージです。文字、サイズ、太字、斜体、下線、独自の色を設定できます。
色を空のままにすると、バー自体の文字色が適用されます。そのため、バーのスタイルを変更すると、メッセージもそれに合わせて変わります。
Countdown
Section titled “Countdown”バー内に表示されるライブタイマーです。3つのモードがあります。
| モード | お客様に表示される内容 |
|---|---|
| Count down to a date | すべてのお客様に同じ残り時間が表示されます |
| Fixed minutes per visitor | お客様ごとに、アクセスした時点から独自のタイマーが始まります |
| Daily recurring | 指定した曜日の2つの時刻の間に実行されます |
また、表示する単位(日、時間、分、秒)、数字の下に単位のキャプションを表示するかどうか、キャプションの内容も選択できます。キャプションを空白にすると、英語のデフォルトが使用されます。
When the timer ends では、ゼロになったときの動作として、バナーを非表示にする、ゼロのまま表示する、再スタートする、のいずれかを選択します。
Button
Section titled “Button”ラベルとアクションで構成されます。
| クリックしたとき | 動作 |
|---|---|
| Open a link | お客様をURLに移動します |
| Scroll to a section | CSSセレクタで指定した、現在のページ内の位置に移動します |
| Apply a discount code | お客様のカートにコードを適用します |
リンクの場合は Open in a new tab もオンにでき、ストアを開いたまま別のタブでリンクが開きます。
そのほかはスタイルの設定です。形(角型、角丸、ピル型)、フォントサイズ、サイズのプリセット、太字/斜体/下線、背景、ラベルの色、枠線を設定できます。
Discount code
Section titled “Discount code”コードそのものを、破線の枠で囲んで表示します。Copy on click をオンにすると、お客様はクリックするだけでコピーできます。選択や入力は不要です。
枠線のスタイル、角の丸み、独自の色でスタイルを設定できます。
ロゴやバッジです。URLを貼り付けるか、ファイルをアップロードすると、フィールドが自動で入力されます。高さと代替テキストを設定します。
代替テキストは、スクリーンリーダーが読み上げる内容であり、画像を読み込めなかったときに表示される内容でもあります。
Line break
Section titled “Line break”表示されるものはありません。これ以降の要素は新しい行から始まるため、長いバーを窮屈な1行ではなく、2行に分けて表示できます。
2つの要素の間にドラッグすると、好きな位置でバーを分割できます。
1つの要素、2つの画面
Section titled “1つの要素、2つの画面”Line break以外の要素を開くと、Style セクションの先頭に Device settings があります。目、デスクトップ、スマートフォンの3つのアイコンです。
Device settingsはStyleの先頭にあり、その下の設定はすべて、選択したアイコンに従います。
目のアイコンは通常の設定で、両方の画面に適用されます。
デスクトップとスマートフォンのアイコンを選ぶと、その下の設定がその画面だけに適用されます。スマートフォンを選んでフォントサイズを12にすると、スマートフォンだけが12になり、デスクトップは目のアイコンで設定した値のままです。Style のすべての設定がこのように分けられます。フォントサイズ、Countdownの数字とラベルのサイズ、その色と表示する単位、Imageの高さ、Buttonの形とサイズ、Discount codeの枠線と色などです。
画面を選ぶと、Hide on desktop または Hide on mobile のトグルも表示されます。これを使うと、長い文章や画像など、スマートフォンに合わない要素を、2つ目のバナーを作らずに非表示にできます。もう一方の画面では引き続き表示されます。
Line breakには Style セクションがないため、代わりにシンプルな Show on の設定があります。Both screens、Desktop only、Mobile only から選択します。
グループ: 1つのバナーで2つのメッセージ
Section titled “グループ: 1つのバナーで2つのメッセージ”要素リストの下に Add group があります。
通常は1つのグループです。2つ目を追加すると、バーが切り替わりながら表示されます。最初のグループ、次に2つ目のグループ、そしてまた最初に戻ります。各グループには独自の要素があるため、1つのバナーで「Free shipping over $50」と「Sale ends tonight」を交互に表示できます。
切り替えの速さや、クロスフェードにするかスライドにするかは、アニメーションとグループで設定します。