Diviのテーマビルダーを使用して、すべてのページに下部ページの連絡フォームを自動的に追加する方法

公開: 2020-01-12

Webサイトに含めるすべてのページの設定で忙しい場合は、訪問者の移動を容易にするために、各ページの最後に連絡フォームを含めることをお勧めします。もちろん、Diviを使用すると、ページ自体に連絡フォームを追加できますが、プロセスを合理化したい場合は、それも可能です。今日のDiviチュートリアルでは、下部ページの連絡フォームをすべてのページに一度に自動的に追加する方法を紹介します。また、固定された右下のアイコンとアンカーリンクを自動的に追加して、ユーザーが表示しているページの連絡先セクションに自動的にリダイレクトします。ページテンプレートも無料でダウンロードできます！

それを手に入れましょう。

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

一番下のページのお問い合わせフォーム

モバイル

一番下のページのお問い合わせフォーム

ページテンプレートを無料でダウンロード

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

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

無料でダウンロード

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

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

チュートリアルの概要

選択したレイアウトパックを使用して、Webサイトのページを設定します
ページのデザインスタイルを設定すると、下部のページのお問い合わせフォームでデザインスタイルを再利用できます。
一番下のページのお問い合わせフォームを追加するには、最初にすべてのページ専用の新しいテンプレートを作成する必要があります
テンプレートが作成されたら、Diviのビジュアルビルダーを使用してテンプレートの本体の作成を開始できます。
すべての一意のページコンテンツが各ページに表示されるようにするために、投稿コンテンツモジュールを追加します
投稿コンテンツモジュールには、動的ページデザイン全体が含まれています
投稿コンテンツモジュールの下に、お問い合わせフォーム用の別のセクションを追加します
お問い合わせフォームをデザインし、セクションに一意のCSSIDを追加するようにします。このCSSIDを使用してアンカーリンクを作成します
ボーナス：各ページの右下隅に固定アイコンを追加し、そのアイコンをその特定のページの連絡先セクションにリンクします

1.選択したレイアウトパックを使用してWebサイトページを設定する

私たちが採用しているアプローチは、あなたが構築するあらゆる種類のウェブサイトで機能します。ただし、この特定のチュートリアルでは、Magazine LayoutPackのデザインスタイルを使用しています。他のWebサイトでこのアプローチを使用している場合は、必要に応じてデザインを自由に調整してください。

2. Diviテーマビルダーに移動し、新しいページテンプレートを追加します

Diviテーマビルダーに移動し、新しいページテンプレートを追加します

WebサイトのDiviThemeBuilderにアクセスします。そこで、新しいテンプレートを追加します。

一番下のページのお問い合わせフォーム

一番下のページのお問い合わせフォームをすべてのページに表示する場合は、この新しいテンプレートをすべてのページで使用してください。特定のページに表示したり、特定のページから除外したりすることもできます。

使用場所：すべてのページ

一番下のページのお問い合わせフォーム

テンプレート本体の作成を開始します

新しいテンプレートを作成したら、カスタムボディの作成を開始できます。

一番下のページのお問い合わせフォーム

3.ページコンテンツをテンプレート本文に追加します

セクション設定

間隔

テンプレートエディタ内に、セクションがあります。そのセクションを開き、デフォルトの上部と下部のパディングをすべて削除します。

トップパディング：0px
ボトムパディング：0px

一番下のページのお問い合わせフォーム

新しい行を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

一番下のページのお問い合わせフォーム

サイジング

モジュールをまだ追加せずに、行設定を開き、行がセクションコンテナの幅全体を占めるようにします。

カスタムガター幅を使用：はい
側溝幅：1
幅：100％
最大幅：100％

一番下のページのお問い合わせフォーム

間隔

すべての行のデフォルトの上下のパディングも削除します。

トップパディング：0px
ボトムパディング：0px

一番下のページのお問い合わせフォーム

投稿コンテンツモジュールを列に追加

行の列に投稿コンテンツモジュールを追加して続行します。このモジュールは、作成したすべての動的ページコンテンツを表します。

一番下のページのお問い合わせフォーム

4.下部ページの連絡フォームをテンプレート本文に追加します

新しいセクションを追加

グラデーションの背景

投稿コンテンツモジュールを含むセクションの下に、別の通常のセクションを追加します。このセクションは、お問い合わせフォーム専用です。セクション設定を開き、グラデーションの背景を追加します。

色1：#ffffff
色2：＃ffc077
開始位置：50％
終了位置：50％

一番下のページのお問い合わせフォーム

CSS ID

CSSIDも含めます。

CSS ID：連絡先

一番下のページのお問い合わせフォーム

新しい行を追加

カラム構造

セクションに新しい行を追加して続行し、次の列構造を使用します。

一番下のページのお問い合わせフォーム

テキストモジュール＃1を列1に追加します

H2コンテンツを追加する

最初の列に必要な最初のモジュールはテキストモジュールです。お好みのコンテンツを入力してください。

一番下のページのお問い合わせフォーム

H2テキスト設定

モジュールの[デザイン]タブに移動し、H2テキスト設定を次のように変更します。

見出し2フォント：Montserrat
見出し2フォントの太さ：太字
見出し2のテキストの色：＃000000
見出し2テキストサイズ：70px（デスクトップ）、48px（タブレット）、36px（電話）
見出し2行の高さ：1.2em

一番下のページのお問い合わせフォーム

サイジング

最大幅も追加します。

最大幅：750px

一番下のページのお問い合わせフォーム

テキストモジュール＃2を列1に追加します

コンテンツを追加する

選択したコンテンツを含む別のテキストモジュールを列1に追加します。

一番下のページのお問い合わせフォーム

テキスト設定

モジュールのテキスト設定を次のように変更します。

テキストフォント：Cardo
テキストフォントの太さ：太字
テキストの色：rgba（0,0,0,0.03）
テキストサイズ：150px（デスクトップ）、100px（タブレット）、60px（電話）
テキスト行の高さ：1em

一番下のページのお問い合わせフォーム

間隔

また、さまざまな画面サイズの間隔設定を試してみてください。

上マージン：-0.8em（デスクトップ）、-100px（タブレット）、-80px（電話）
左マージン：-0.8em（デスクトップとタブレット）、-60px（電話）

一番下のページのお問い合わせフォーム

お問い合わせフォームを列2に追加

必要なすべてのフィールドを追加

2番目の列で必要なモジュールは、お問い合わせフォームモジュールのみです。必要な数のフィールドを追加し、メールアカウントもモジュールにリンクします。

一番下のページのお問い合わせフォーム

名前とメールフィールドを全幅に変える

名前とメールアドレスのフィールドを全幅に変えて続行します。

全幅にする：はい

一番下のページのお問い合わせフォーム

フィールド設定

一般的な連絡先フォームの設定に戻り、フィールドの背景色を変更します。

フィールドの背景色：#ffffff

一番下のページのお問い合わせフォーム

ボタンの設定

次にボタンの設定を変更します。

ボタンにカスタムスタイルを使用する：はい
ボタンのテキストサイズ：14px
ボタンのテキストの色：#ffffff
ボタンの背景色：＃000000（デフォルト）、＃ff2a38（ホバー）
ボタンの境界線の幅：8px

一番下のページのお問い合わせフォーム

ボタンの境界線の色：rgba（0,0,0,0）
ボタンの境界線半径：0px
ボタンの文字間隔：2px
ボタンのフォントの太さ：超太字
ボタンのフォントスタイル：大文字
ボタンアイコン：リストで検索

一番下のページのお問い合わせフォーム

国境

境界線の半径も追加します。

すべてのコーナー：5px

一番下のページのお問い合わせフォーム

ボックスシャドウ

そして、微妙なボックスシャドウを追加して、モジュールの設定を完了します。

ボックスシャドウブラー強度：50px
ボックスシャドウスプレッド強度：-4px
影の色：rgba（0,0,0,0.08）

一番下のページのお問い合わせフォーム

ボーナス：固定された右下のアンカーアイコンをテンプレート本体に追加

新しいセクションを追加

間隔

次に、右下の固定アイコンを各ページに追加するには、別の通常のセクションを追加する必要があります。セクションを開き、デフォルトの上部と下部のパディングをすべて削除します。

トップパディング：0px
ボトムパディング：0px

一番下のページのお問い合わせフォーム

Zインデックス

セクションのzインデックスも増やします。これにより、アイコンがすべてのページコンテンツの上に表示されたままになります。

Zインデックス：99999

一番下のページのお問い合わせフォーム

新しい行を追加

カラム構造

次の列構造を使用して、セクションに新しい行を追加します。

一番下のページのお問い合わせフォーム

サイジング

行設定を開き、行がセクションの幅全体を占めるようにします。

カスタムガター幅を使用：はい
側溝幅：1
幅：100％
最大幅：100％

一番下のページのお問い合わせフォーム

間隔

デフォルトの上下のパディングもすべて削除します。

トップパディング：0px
ボトムパディング：0px

一番下のページのお問い合わせフォーム

宣伝文モジュールを列に追加

タイトルとコンテンツボックスを空のままにします

右下のアイコンを表示するには、宣伝文モジュールを使用します。タイトルとコンテンツボックスは空のままにしてください。

一番下のページのお問い合わせフォーム

アイコンを選択

次に、お好みのアイコンを選択します。

一番下のページのお問い合わせフォーム

リンク

モジュールリンクURLにIDを追加して、アイコンを連絡先セクションにリンクします。

モジュールリンクURL：#contact

一番下のページのお問い合わせフォーム

背景色

モジュールの背景色も変更します。

背景色：＃ffc077

一番下のページのお問い合わせフォーム

アイコン設定

モジュールの[デザイン]タブに移動し、アイコンの設定を次のように変更します。

アイコンの色：#ffffff
画像/アイコンの配置：上
アイコンのフォントサイズを使用：はい
アイコンフォントサイズ：30px

一番下のページのお問い合わせフォーム

サイジング

モジュールのサイズ設定も変更します。

幅：100px
モジュールの配置：右

一番下のページのお問い合わせフォーム

間隔

そして、いくつかのカスタムの上部と下部のパディングを追加します。

トップパディング：33px
ボトムパディング：33px

一番下のページのお問い合わせフォーム

国境

次に、境界線の設定に移動し、いくつかの丸い角を追加します。

すべてのコーナー：100px

一番下のページのお問い合わせフォーム

ボックスシャドウ

ボックスシャドウも追加します。

ボックスシャドウブラー強度：50px
ボックスシャドウスプレッド強度：-15px
影の色：rgba（0,0,0,0.23）

一番下のページのお問い合わせフォーム

主な要素CSS

アイコンを修正するために、[詳細設定]タブのモジュールのメイン要素に3行のCSSコードを適用します。

bottom: 20px;
right: 20px;
position: fixed;

一番下のページのお問い合わせフォーム

宣伝文の画像CSS

また、モジュールの画像のデフォルトの下部パディングも削除します。

margin-bottom: 0px;

一番下のページのお問い合わせフォーム

6.すべてのテーマビルダーの変更とプレビュー結果を保存します

ページテンプレートの本文が完成したら、すべての変更を保存し、テーマビルダーを終了して、すべてのページで結果を表示できます。

一番下のページのお問い合わせフォーム

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

デスクトップ

一番下のページのお問い合わせフォーム

モバイル

一番下のページのお問い合わせフォーム

最終的な考え

この投稿では、すべてのページに一度に下部ページの連絡フォームを追加する方法を紹介しました。これを実現するために、新しいページテンプレートを設定し、投稿コンテンツモジュールを含め、テンプレートの最後に連絡先セクションを追加しました。また、訪問者を現在のページの連絡先セクションにリダイレクトするアンカーリンク付きの固定された右下のアイコンも含まれています。ページテンプレートのJSONファイルも無料でダウンロードできました！ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。

Diviのテーマビルダーを使用して、すべてのページに下部ページの連絡フォームを自動的に追加する方法

プレビュー

デスクトップ

モバイル

ページテンプレートを無料でダウンロード

無料でダウンロード

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

チュートリアルの概要

1.選択したレイアウトパックを使用してWebサイトページを設定する

2. Diviテーマビルダーに移動し、新しいページテンプレートを追加します

Diviテーマビルダーに移動し、新しいページテンプレートを追加します

テンプレート本体の作成を開始します

3.ページコンテンツをテンプレート本文に追加します

セクション設定

間隔

新しい行を追加

カラム構造

サイジング

間隔

投稿コンテンツモジュールを列に追加

4.下部ページの連絡フォームをテンプレート本文に追加します

新しいセクションを追加

グラデーションの背景

CSS ID

新しい行を追加

カラム構造

テキストモジュール＃1を列1に追加します

H2コンテンツを追加する

H2テキスト設定

サイジング

テキストモジュール＃2を列1に追加します

コンテンツを追加する

テキスト設定

間隔

お問い合わせフォームを列2に追加

必要なすべてのフィールドを追加

名前とメールフィールドを全幅に変える

フィールド設定

ボタンの設定

国境

ボックスシャドウ

ボーナス：固定された右下のアンカーアイコンをテンプレート本体に追加

新しいセクションを追加

間隔

Zインデックス

新しい行を追加

カラム構造

サイジング

間隔

宣伝文モジュールを列に追加

タイトルとコンテンツボックスを空のままにします

アイコンを選択

リンク

背景色

アイコン設定

サイジング

間隔

国境

ボックスシャドウ

主な要素CSS

宣伝文の画像CSS

6.すべてのテーマビルダーの変更とプレビュー結果を保存します

プレビュー

デスクトップ

モバイル

最終的な考え

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