Click-to-Call、Eメール、SMS、方向リンクを備えたDiviモバイルコンタクトバーを作成する方法

公開: 2020-06-04

世界がモバイルデバイスで生活しているので、モバイルエクスペリエンスを利用するクリック可能な連絡先リンクをWebサイトに提供することは理にかなっています。 Click-to-Callリンクのようなこれらの連絡先リンクは、シングルクリックで携帯電話で通話を開始できます。 道順リンクのような他のものは、Googleマップで会社の住所への道順を開くことができます。 これらはユーザーにとって本当に便利であり、特定のビジネスにとっては必須です。

このチュートリアルでは、Click-to-Call、Eメール、SMS、およびルートリンクを使用してDiviモバイルコンタクトバーを作成する方法を紹介します。 これを行うには、Divi Builderを使用して、グローバルフッターのバーとボタンをデザインします。 次に、各連絡先リンクにカスタムURLを追加して、必要な機能を提供します。

始めましょう！

スニークピーク

これは、このチュートリアルで構築するデザインの概要です。

diviモバイルコンタクトバー

diviモバイルコンタクトバー

レイアウトを無料でダウンロード

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする
無料でダウンロード

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

固定コンタクトバーテンプレートのダウンロードをDiviサイトに追加する方法

警告！：このテンプレートを追加すると、DiviサイトのデフォルトのWebサイトテンプレート（ある場合）が上書きされます。 ライブサイトで何も台無しにしないように、これをテストサイトに追加することをお勧めします。

固定フッターバーテンプレートを自分のWebサイトにインポートするには、ダウンロードzipファイルを解凍してJSONファイルにアクセスします。

次に、WordPressダッシュボードに移動し、Divi> ThemeBuilderに移動します。

次に、ページの右上にある移植性アイコンをクリックします。

移植性ポップアップ内で、解凍したばかりのJSONファイルを選択し、[インポートする前にバックアップをダウンロードする]オプションを選択します。これは、以前にデフォルトのWebサイトテンプレートに上書きしたくないものがある場合に備えてです。

次に、[インポート]ボタンをクリックします。

diviモバイルコンタクトバー

最後に、テーマビルダーの変更を保存し、ライブページを表示して、固定フッターバーを確認します。

diviモバイルコンタクトバー

それでは、チュートリアルに取り掛かりましょう。

パート1：グローバルフッターの作成

このチュートリアルでは、Divi Theme Builderを使用して、モバイルコンタクトバーをグローバルフッターに追加します。 まず、Divi> ThemeBuilderに移動します。 次に、デフォルトのWebサイトテンプレート内のグローバルフッターエリアをクリックします。 ドロップダウンから、[グローバルフッターの作成]を選択します。

diviモバイルコンタクトバー

注：グローバルフッターが既にある場合は、グローバルフッターを開いて編集し、現在のフッターに加えて連絡先バーを追加できます。

「最初から構築」オプションを選択します。

diviモバイルコンタクトバー

パート2：固定コンテンツバーの作成

Global Footer Layout Editor内で、デフォルトのセクションに1列の行を追加して設計プロセスを開始します。

diviモバイルコンタクトバー

セクション設定

モジュールの追加を開始する前に、セクション設定を開き、次のように設定された高さを指定します。

  • 高さ：80px

diviモバイルコンタクトバー

これは、固定行が最終的に停止するページの下部にスペースを作成するために重要です。 また、デフォルトの上部と下部のパディングも削除します。

  • パディング：0px上、0px下

diviモバイルコンタクトバー

行設定

セクションの準備ができたので、固定コンタクトバーとして機能するように行をカスタマイズする準備が整いました。 行の設定を開き、以下を更新します。

バックグラウンド

  • 背景色：＃751136

diviモバイルコンタクトバー

サイズ

  • 側溝幅：1
  • 幅：100％
  • 最大幅：100％
  • 高さ：継承

行は固定されますが、ページの下部のスペースに行が適切に含まれるように、行の高さを親セクションの高さと一致させる必要があります。 これを行うには、高さの「継承」というテキストを入力する必要があります。

diviモバイルコンタクトバー

間隔

  • パディング：上0px、下0px、左15％、右15％

diviモバイルコンタクトバー

カスタムCSS

行内のコンテンツが垂直方向に配置されたままであり、モバイルで列が壊れないようにする必要があります。 これを行うには、次のカスタムCSSを行のメイン要素に追加します。 

display:flex;
flex-wrap:nowrap;
align-items:center;

diviモバイルコンタクトバー

固定ポジショニング

画面の下部に浮くように行を固定するには、次のように左下の位置に固定位置を指定する必要があります。

  • 位置：固定
  • 場所：左下
  • Zインデックス：99999

diviモバイルコンタクトバー

パート3：Call-to-Click、Eメール、SMS、および方向リンクの構築

連絡先バーが完成したので、カスタムURLとともにクリック可能な連絡先ボタンを追加する準備が整いました。

Click-to-Callボタンの設計

作成する最初の連絡先ボタンは、Click-to-Callボタンです。 それを作成するには、新しい宣伝文モジュールを列に追加します。

diviモバイルコンタクトバー

コンテンツ

[コンテンツ]タブで、次のようにタイトルとアイコンを宣伝文に追加します。

  • タイトル：電話
  • アイコンを使用：はい
  • アイコン：電話

diviモバイルコンタクトバー

バックグラウンド

それに白い背景色を与えます：

  • 背景色：#ffffff

diviモバイルコンタクトバー

デザイン設定

[デザイン]タブにジャンプし、次のように設定を更新します。

アイコン
  • アイコンの色：＃751136
  • アイコンのフォントサイズを使用：はい
  • アイコンフォントサイズ：2em

diviモバイルコンタクトバー

タイトルフォント
  • Titeフォントスタイル：TT
  • タイトルテキストの配置：中央
  • タイトルテキストの色：＃751136
  • タイトルテキストサイズ：1em

diviモバイルコンタクトバー

本文のサイズ

お気づきの方もいらっしゃると思いますが、「em」の長さの単位を使用して宣伝文の要素のサイズを変更しています。 これは、本文のサイズに関連しています。 したがって、（本文テキストが表示されていない場合でも）宣伝文の本文テキストのサイズを調整すると、em長さの単位ですべての宣伝文要素のサイズが調整されます。 これは、各要素を個別に調整することなく、ボタンのサイズを変更するための便利な方法です。

次のように本文を更新します。

  • 本文サイズ：12px

diviモバイルコンタクトバー

サイズ

次のように、宣伝文に設定された高さと幅を指定します。

  • 幅：4.5em
  • モジュールの配置：中央
  • 高さ：4.5em

diviモバイルコンタクトバー

パディングとコーナー
  • パディング：0.5emトップ

diviモバイルコンタクトバー

ボックスシャドウ
  • ボックスシャドウ：スクリーンショットを参照
  • ボックスシャドウの水平位置：0px
  • ボックスシャドウの垂直位置：2px
  • 影の色：rgba（255,255,255,0.55）

diviモバイルコンタクトバー

カスタムCSS

宣伝文モジュールのコンテンツを垂直方向の中央に配置するには、次のカスタムCSSをメイン要素に追加します。 

display:flex;
align-items:center;

そして、次の宣伝文画像を追加して、宣伝文アイコンの下の間隔を取り除きます。 

margin-bottom: 0.3em;

diviモバイルコンタクトバー

通話リンクURLの追加

携帯電話で通話を開始する通話リンクURLを追加するには、プレフィックス「tel：」の後に番号を追加します。

  • モジュールリンクURL：tel：555-555-5555

diviモバイルコンタクトバー

メールボタンのデザイン

メールボタンを作成するには、列全体を複製します。

diviモバイルコンタクトバー

メールアイコンとリンクURLの追加

次に、列2の重複する宣伝文を新しいタイトルとアイコンで更新します。

モバイルアプリでメールを開始する通話リンクURLを追加するには、プレフィックス「mailto：」の後にメールアドレスを追加します。

  • モジュールリンクURL：mailto：[メール保護]

diviモバイルコンタクトバー

SMS（テキストメッセージ）ボタンのデザイン

SMSボタンを作成するには、列2を複製します。

diviモバイルコンタクトバー

SMSアイコンとリンクURLを追加する

次に、列2の重複する宣伝文を新しいタイトルとアイコンで更新します。

モバイルアプリでメールを開始する通話リンクURLを追加するには、プレフィックス「sms：」の後にメールアドレスを追加します。

  • モジュールリンクURL：sms：+15555555555

diviモバイルコンタクトバー

道順ボタンのデザイン

SMSボタンを作成するには、列3を複製します。

道順アイコンとリンクURLの追加

次に、列3の重複する宣伝文を新しいタイトルとアイコンで更新します。

Googleマップを介してルート案内を開始する通話リンクURLを追加するには、これらのルート案内URL構造を使用します。

このチュートリアルでは、ユーザーの現在地からカリフォルニア州マウンテンビューのGooglePlexへの道順を生成する道順リンクを追加します。

  • モジュールリンクURL： 
    https://www.google.com/maps/dir/?api=1&destination=1600+amphitheatre+pkwy+mountain+view+CA

diviモバイルコンタクトバー

URLに自分のアドレスを追加するには、URLの「destination =」の後のテキストを置き換え、単語をプラス（「+」）記号で区切ってください。

diviモバイルコンタクトバー

ボタンをクリックすると、次のようなものが表示されます…

diviモバイルコンタクトバー

デスクトップのセクションを非表示

連絡先バーをモバイルデバイスにのみ表示したいので、デスクトップのセクション全体を無効にすることができます。 これを行うには、セクション設定を開き、以下を更新します。

  • 無効にする：デスクトップ

diviモバイルコンタクトバー

最終結果

diviモバイルコンタクトバー

diviモバイルコンタクトバー

その他の連絡先リンク

HTML5を使用すると、電話番号に制限されません。 電子メール、メッセージング、ファックスなど、他の召喚状をアクションに追加できます。HTML5プロトコルには次のものが含まれます。

tel：–電話をかける
mailto：–メールアプリを開く
callto：Skypeを開く
SMS：–テキストメッセージを送信する
ファックス：–ファックスを送信する

また、必要に応じて、DirectionsURLにターゲットを絞ったWazeリンクを追加することもできます。

最終的な考え

コンタクトバーは、ユーザーがモバイルデバイスから簡単に連絡できるようにしたい企業のWebサイトに追加するのに最適なようです。 また、リンクURLの構造に慣れると、必要な任意のタイプの連絡先リンクに設定されます。

詳細については、電話リンクに関する投稿をご覧ください。

コメントでお返事をお待ちしております。

乾杯！