CTA[追従型]は、ページスクロールに応じて表示されるフローティングボタンです。デザインは、縦書きの長方形と画像表示が可能な四角形フローティングボタンから選べます。CTA[追従型]は、Webブラウザの右端に表示されます。

CTA[追従型]設定

WordPress管理画面にログイン後、Emanon設定>メニュー名「CTA設定[追従型]一覧」・「CTA設定[追従型]追加」をご覧ください。

CTA[ページ]・CTA[メルマガ]表示設定

CTA[追従型]一覧

CTA[追従型]追加で設定されたCTAを確認・更新ができます。

CTA設定[追従型]一覧
CTA設定[追従型]一覧の表示例

レイアウト設定

CTA[追従型]のレイアウトやアニメーションの指定ができます。Emanon Premium ver1.4.8からCTA[追従型]にブロックエディタ対応のスタイルを追加しています。

レイアウト 長方形

レイアウト 長方形は、縦書き形式のCTAです。ボタンを縦に2つ配列できるレイアウトです。CTA[追従型]設定[1]CTA[追従型]設定[2]の項目にそれぞれ入力することで、ボタンが縦に2つ表示されます。

長方形レイアウト

レイアウト 四角形

レイアウト 四角形は、リード文付付きのCTAです。アイキャッチ用の画像を表示できるレイアウトです。レイアウト 四角形はCTA[追従型]設定[1]の設定が反映されます。アイコン画像は、CTAのアイキャッチとして表示されます。タイトルリード文は、アイキャッチの下部に表示されます。

四角形レイアウト
レイアウト 四角形の表示例

レイアウト 四角形[ブロックエディタ]

レイアウト 四角形[ブロックエディタ]は、CTAにブロックを自由に配置できる自由度の高いCTA[追従型]のレイアウトです。

下記の表示例は、見出しブロック[Emanon]と段落ブロック(WordPress本体のブロック)、ボタン:複数[Emanon]と FAQブロックを配置した例です。

レイアウト 四角形[ブロックエディタ]の表示例

ブロックエディタのブロックを自由に配置できますが、CTAの横幅が決まっているのでデザインに注意しながら作成してください。例えば、ボタンブロックは3つ以上並列配置するとデザインが崩れます。

下記の画像は、CTA[追従型]編集ページの画像キャプチャーです。レイアウトをレイアウト 四角形[ブロックエディタ]に指定することで、ページ本文に配置したブロックがCTA[追従型]に反映されます。

CTA[追従型]編集ページ

CTA[追従型]を表示するページの内容に合わせて、FAQブロックやボタンブロックの複数配置などを行うことで、Webサイト訪問者のニーズに寄り添ったCTAの設置が可能になります。

レイアウト ボタン

レイアウト ボタンは、アイコンまたは画像をボタンとして表示するCTAです。ボタンレイアウトCTA[追従型]設定[1]の設定が反映されます。フローティングボタンとして利用を想定しており、電話番号の発信や特定ページへリンク設定が可能です。パソコンとスマホで表示スタイルが異なります。

電話番号を設定する場合、アイコンタグに icon-phoneを入力し、タイトルに電話番号を設定。URLには、tel:0312345678の形式でリンクを設定します。下記図は、電話番号発信の表示例です。

スマホ表示例
パソコン表示例

レイアウト ボタン:フッター

Webサイトのフッター(下部)に表示される帯型のCTAです。ボタンとマイクロコピーを表示できます。CTAを強調したい場合に、おすすめのレイアウトです。背景色や透過率の指定、ボタンやマイクロコピーの配色も可能です。

レイアウト ボタン:フッターの表示例

レイアウト ボタン:フッター[ブロックエディタ]

CTAにブロックを自由に配置できる帯型のCTA[追従型]のレイアウトです。Webサイトのフッター(下部)に表示されるため、CTAの高さが130pxで指定されています。

レイアウト ボタン:フッター[ブロックエディタ]の表示例

ブロックエディタのブロックを自由に配置できますが、CTAの高さが決まっているのでデザインに注意しながら作成してください。例えば、複数のブロックを縦に配置するとデザインが崩れます。

アニメーション[PC]とアニメーション[SP]:レイアウトボタンのみに適用

CTAがページスクロールに応じてフェードインとフェードアウトするアニメーションの設定です。有効[PC]を有効にすると、パソコンでWebサイトを閲覧した場合にアニメーション効果が適用されます。

アニメーション[SP]:レイアウト 「ボタン」および「ボタン:フッター」に適用

アニメーション[SP]:レイアウト 「ボタン」および「ボタン:フッター」に適用無効にすると、CTA[追従型]のボタンとボタン:フッターのフェードアニメーションが停止され、常時表示されます。

CTA[追従型]の長方形レイアウトと四角形レイトアウトは、スマホでWebサイトを閲覧した場合、フェードアニメーションは常に適用されます。

デバイス表示設定

スマホ・タブレット・パソコン単位でCTA[追従型]の表示を指定できます。

全てのデバイスでCTA[追従型]を表示したい場合、デバイス表示設定は未設定にします。

CTA[追従型]表示設定

WordPress管理画面のメニュー名「CTA表示設定」をご覧ください。CTA[追従型]表示設定で、フロントページ・ブログページ・投稿ページ・固定ページ・アーカイブページにCTA[追従型]を一括指定できます。詳細はCTA表示設定をご覧ください。