Emanon Premiumのウィジェットは、セクションエリアに配置を想定した[Es]の名称から始まるウィジェットと、サイドバーやフッターの配置を想定した[E]の名称から始まるウィジェットの2種類があります。

デモページのフロントページ設定

当サイト(デモサイト02)のフロントページがどのような手順で設定されているか解説します。手順に記載の詳細マニュアルへのリンクも合わせてご確認ください。

ファーストビュー設定

ファーストビューとは、フロントページの最初に表示される箇所です。下記画像に記載の番号に沿って設定手順をご案内します。

(1)アクセス・SNSフォローボタンの設置

アクセスの表示は、WordPress管理画面>Emanon設定>「CTA」で設定します。

  1. アクセス[ヘッダー]の表示を有効にする
  2. アクセス[ラベル]に文言を入力する
  3. アクセス[URL]に店舗住所や会社住所の記載がある固定ページのURLを入力する。
  4. レイアウトをヘッダー[右]にする

詳細は、Emanon設定 CTAをご確認ください。

次にSNSフォローボタンの表示手順です。WordPress管理画面>「Emanon設定」>「SNS」に移動します。

  1. SNSプロフィールURL設定にて各SNSアカウントのURLを入力
  2. SNSフォロー設定のSNSフォローボタンで表示したいSNSにチェックをいれる
  3. SNSフォローボタン[ヘッダー]の表示をヘッダー[右]に設定

詳細は、Emanon設定 SNSをご確認ください

(2)ロゴの設定

外観 >カスタマイズ >「サイト基本情報」をクリックし、ロゴマークの画像をアップロードします。

次にロゴマーク(サイト名)の表示位置とヘッダーメニューの表示位置を指定します。WordPress管理画面>Emanon設定>「レイアウト」に移動しヘッダーレイアウト1行に指定します。最後に、オーバーレイ[フロントページ]有効にします。

オーバーレイ[フロントページ]の設定時にロゴ画像を白抜きにしたい場合、外観>カスタマイズ>配色設定>「ヘッダー設定」に移動し、ロゴカラー[白]有効にします。SNSアイコンを白に指定する場合、SNSアイコンカラー[白]有効にしてください。

(3)メニューに電話番号を表示

WordPress管理画面の外観メニューに進み、カスタムメニューに電話番号と電話用のリンクを設定します。

WordPress管理画面の外観>メニュー

カスタムリンクのURLtel:電話番号(例 tel:0300000000)をハイフンなしで入力してください。

次にメニュー区切り線と電話番号用のCSSを追加します。メニュー編集画面のCSS class (オプション)に下記CSSを挿入し保存します。

ep-menu-item-border-left ep-menu-item-tel
CSS Class(オプション)

CSS class (オプション)にCSSを追加することでメニューの左側に区切り線が表示され、電話番号のフォントサイズが1.125remになります。

メニュー区切り線の配色は外観>カスタマイズ>配色設定で指定できます。詳細は配色設定をご覧ください。

CSS class(オプション)が表示されない場合

メニューの編集画面にCSS class(オプション)の項目が表示されていない場合、メニュー設定画面の右上にある表示オプションからCSSクラスにチェックを入れてください。

(4)メニューの強調

WordPress管理画面の外観メニューに進み、メニュー編集画面の指定メニュー項目にチェックを入れるとメニュー項目に背景色を指定できます。詳細は、ヘッダーメニュー・ヘッダーメニュー[ドロップ]の設定をご覧ください。

メニューのデザイン設定

メニュー項目をマウスオーバーするとアニメーションを表示することができます。設定は、WordPress管理画面>外観>カスタマイズ>デザイン設定のヘッダーメニュー設定で行います。詳細は、デザイン設定をご覧ください。

(5)ファーストビューの設定

デモサイト02のファーストビューは、画像スライダーを使用しています。アニメーション効果[スライダー]スライドに指定し、アニメーション効果[テキスト]は、フェードインに指定しています。背景色[透過率]0.45区切りデサイン2重ウェーブ区切り線#ffffffを設定しています。

詳細は、画像スライダー設定をご確認ください。

(6)ヘッダーニュース

WordPress管理画面>Emanon設定>「ヘッダーニュース」で設定に移動し、表示件数[PC]を3件、表示件数[SP]を1件に指定します。タイトルとURLは最大5件まで入力が可能です。

詳細は、Emanon設定 ヘッダーニュースをご確認ください。

(6)ハンバーガーメニュー設定

ハンバーガーメニューを表示する場合、ドロワーメニューの指定必須です。外観>メニューの「メニューの位置」でドロワーメニュー[SP・タブレット]を有効にしてください。

上記の設定が終わりましたら、下記の手順でハンバーガーメニューの表示をおこないます。

  1. 外観 >カスタマイズ > デザイン設定 >「ハンバーガーメニュー設定」に移動
  2. ハンバーガーメニュー[SP・タブレット]の表示にチェックを入れる
  3. ハンバーガーメニュー[追従型]の表示にチェックを入れる

詳細は、デザイン設定をご確認ください。

フロントページセクション[上部]

フロントページ専用のウィジェットを使用する場合、フロントページ用の固定ページを作成・公開し、表示設定ホームページの表示を固定ページに指定してください。

詳細は、 フロントページの表示設定とウィジェット配置をご確認ください。

ファーストビュー以降は、専用ウィジェットとブロックエディタを使用してページをデザインしています。下記はデモサイト02のウィジェット配置です。

  1. [Es]コンテンツボックス画像と文章を配置。
  2. [Es]区切り:左斜めを指定
  3. [Es]リンクボックス:アイコンと説明文付きのボックスを表示。
  4. [Es]区切り:左斜めを指定

[Es]コンテンツボックス

[Es]コンテンツボックスは、上記のように画像と文章を配置するウィジェットです。下記の図はデモサイト02で実際に使用している[Es]コンテンツボックス設定数値です。

[Es]リンクボックス

[Es]リンクボックスは、アイコン(または画像)と文言をボックス形式で表示できるウィジェットです。

固定ページ本文

固定ページの本文にブロックを配置してフロントページを装飾することが可能です。

ダイエットヨガとジムの比較表

WordPress本体テーブルブロックを使用して作成しています。スタイルは背景色[表側]を指定し、表の設定ヘッダーセクションを有効にしています。

所属トレーナー

プラグイン Emanon Premium Blocksの区切りブロック、WordPress本体のメディアとテキストブロック、プラグイン Emanon Premium Blocksの見出し[Emanon]ブロックを組み合わせてデザインしています。

デモサイト02では、Emanon Premium Blocks区切りブロック区切り線[上]右斜めに指定、区切り線[下]右斜めに指定しています。

詳細は、区切りブロックをご確認ください。

メディアとテキストブロックは、「モバイルでは縦に並べる」を有効に指定しています。

トレーナーAの部分は、Emanon Premium Blocks見出し[Emanon]ブロックを使用しています。サブテキストを有効に指定し、チーフトレーナーの文言を入力しています。

詳細は、見出しブロックをご確認ください。

フロントページセクション[下部]

お客様の声から店舗情報までのデザインは、[Es]ウィジェットフロントページセクション[下部]に配置して表現しています。

  1. [Es]お客様の声お客さんの顔写真とコメントを配置。
  2. [Es]区切り:右斜めを指定。
  3. [Es]料金:料金コースを3つ配置。
  4. [Es]区切り:ラインを指定。
  5. [Es]FAQ:よくある質問を8つ配置し、2カラム[PC]を有効化。
  6. [Es]記事スライダー:表示件数[PC]を3、スクロール記事数を5に指定。
  7. [Es]区切り:ウェーブを指定。
  8. [Es]ショートコード:HTMLコード[左配置]に写真画像のHTMを配置。HTMLコード[右配置]に店舗情報に関するHTMLを配置。

店舗情報

店舗情報は、[Es]ショートコードを使用しています。[Es]ショートコードにある2カラム[PC]を有効に指定し、HTMLコード[左配置]HTMLコード[右配置]にそれぞれHTMLコードを自作し入力します。

[Es]ショートコードの設定例

HTMLコード[左配置]の例

<img src="https://xxx.jp/xxx/wp-content/uploads/20xx/xx/xxxx.jpg" alt="ヨガスタジオ" width="800" height="450" loading="lazy">

画像URLはWordPress管理画面のメディアから取得してください。

HTMLコード[右配置]の例

<h2 id="access">店舗情報</h2><div class="c-section-widget__lead">無料体験ヨガの申し込みをお待ちしております。</div><br><ul><li>店舗名:ヨガスタジオ Emanon</li><li>営業時間:10:00 ー 21:00</li><li>休業日:年中無休</li><li>交通機関:東京メトロ 日比谷線 神谷町駅 2番出口から徒歩7分</li></ul>

フッターセクション

フッターセクションは全ページ共通のパーツです。デモサイト02では、[Es]コンタクトをフッターセクションに配置しています。

[Es]コンタクトは、Emanon設定>「CTA」の設定が反映されます。デモサイト02では、[Es]コンタクトレイアウトTEL | ボタン[1]に指定しています。

コピーライトセクション

コピーライトセクションは全ページ共通のパーツです。デモサイト02では、[E]サイトプロフィール[E]SNSフォローを配置しています。

クレジット表記は、フッターエリアの最下部に表示されるコピーライトを表示するパーツです。「Emanon設定」>「レイアウト」>「フッターレイアウト設定」で編集します。

クレジット表記の設定は、 Emanon設定>レイアウトをご確認ください。