DiviフッターにEメールオプチンを含める方法

公開: 2021-12-10

ウェブサイトのフッターは、メールオプチンフォームを配置するのに人気の場所です。 Diviには電子メールオプチンモジュールがあるため、これはDiviテーマビルダーを使用した簡単な作業です。この記事では、Diviフッターにメールオプチンを追加する方法を説明します。また、さまざまなレイアウトオプションを作成するDiviメールオプチンモジュール内のいくつかの設定も表示されます。

プレビュー

これが私たちが作成するフッターです。

メールオプティンデスクトップ

メールオプチンフォームがデスクトップでどのように表示されるかを次に示します。このレイアウトの既存の要素をメールオプションに置き換えています。

オプトイン電話にメール

これが私たちのメールオプチンフォームがスマートフォンでどのように見えるかです。

私たちのYoutubeチャンネルを購読する

Diviテーマビルダーテンプレート

メールオプチンをDiviフッターに追加するには、フッターを作成するためのテンプレートが必要です。ゼロから作成することも、ElegantThemesが提供する無料のテンプレートの1つを使用することもできます。それらを見つけるには、ElegantThemesブログで「freefooter」を検索してください。

DiviのNGOレイアウトパック用の無料のヘッダーとフッターテンプレートのフッターテンプレートを使用しています。 フッターをダウンロードして、ファイルを解凍します。 JSONファイルをDiviThemeBuilderにアップロードする必要があります。

フッターテンプレートをアップロードして準備する

Diviフッターをアップロードするには、WordPressダッシュボードの[ Divi] > [ DiviThemeBuilder]に移動します。 Portabilityを選択します。開いたモーダルで、[インポート]タブを選択します。クリックしてファイルを選択し、コンピューター上のJSONファイルに移動します。ファイルを選択し、[ Diviテーマビルダーテンプレートのインポート]をクリックします。

ファイルがアップロードされるのを待ちます。使用したくない場合は、ヘッダーテンプレートを削除できます。クリックして、ビルダーの左上にある変更を保存します。

フッターテンプレートをアップロードして準備する

このチュートリアルでは、右側のボックス領域を電子メールオプチンに置き換えます。同じスタイルを使用するので、Webサイトに溶け込みます。

フッターテンプレートをアップロードして準備する

この要素は、画像モジュール、2つのテキストモジュール、およびボタンモジュールで構成されています。それらを単一のモジュールに置き換えます。デザインキューとして使用する場合は、今すぐ削除するか、終了するまでそのままにしておくことができます。フロントエンドまたはバックエンドで作業できます。

Diviモジュールを使用してDiviフッターにEメールオプティンを追加する

次に、Diviフッターにメールオプチンを追加します。行の最後のモジュールの下にカーソルを合わせ、濃い灰色のプラスアイコンをクリックします。電子メールを検索し、 EmailOptinモジュールを選択します。