ドロップダウンログインフォームをDiviヘッダーに追加する方法

公開: 2021-08-01

メンバーシップWebサイトを構築している場合は、ログインエクスペリエンスを検討することが非常に必要です。もちろん、訪問者にデフォルトのWordPressログインページの使用を許可することはできますが、ヘッダーにログインフォームを含めることで、訪問者が簡単に使用できるようにすることもできます。この場合、ヘッダーのスペースを節約できるように、クリック時にログインフォームをトリガーする必要があります。それがまさに今日のDiviチュートリアルでお見せするものです。グローバルヘッダーを最初から作成し、ドロップダウンログインフォームを含めます。 JSONファイルも無料でダウンロードできます！

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

プレビュー

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

デスクトップ

ドロップダウンログインフォーム

モバイル

ドロップダウンログインフォーム

グローバルヘッダーテンプレートを無料でダウンロード

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

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

無料でダウンロード

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

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

1.新しいグローバルヘッダーテンプレートを作成します

Diviテーマビルダーに移動します

WordPressWebサイトのバックエンドにあるDiviThemeBuilderにアクセスすることから始めます。そこで、「グローバルヘッダーの追加」をクリックします。

ドロップダウンログインフォーム

新しいグローバルヘッダーを追加する

ドロップダウンメニューが表示されます。ゼロからビルドを開始するには、「グローバルヘッダーのビルド」を選択して続行します。

ドロップダウンログインフォーム

2.ヘッダーデザインを作成する

セクション＃1を追加

背景画像

テンプレートエディタに入ると、すでにそこにセクションがあります。セクション設定を開き、背景画像をアップロードするか、背景色を使用します。

ドロップダウンログインフォーム

間隔

セクションの[デザイン]タブに移動し、次に上部と下部のパディングを変更します。

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

ドロップダウンログインフォーム

セクションに行を追加

カラム構造

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

ドロップダウンログインフォーム

サイジング

モジュールをまだ追加せずに、行設定を開き、次のようにサイズ設定を変更します。

カスタムガター幅を使用：はい
側溝幅：1
列の高さを等しくする：はい
幅：
- デスクトップ：80％
- タブレットと電話：95％
最大幅：2580px

ドロップダウンログインフォーム

間隔

次に、パディング値を変更します。

トップパディング：0px
ボトムパディング：0px
左パディング：1％
右パディング：1％

ドロップダウンログインフォーム

主な要素CSS

列を自動的に垂直方向に揃えるために、CSSコードの次の行を[詳細設定]タブの行のメイン要素に追加します。

display: flex;
justify-content: center;
align-items: center;

ドロップダウンログインフォーム

ソーシャルメディアフォローモジュールを列1に追加

ソーシャルネットワークを追加する

1列目のソーシャルメディアフォローモジュールから始めて、モジュールを追加します。選択したソーシャルネットワークを追加します。

ドロップダウンログインフォーム

各ソーシャルネットワークの背景色を個別に変更する

次に、各ソーシャルネットワークの背景色を個別に白に変更します。

背景色：#ffffff

ドロップダウンログインフォーム

アイコン設定

一般的なモジュール設定に戻り、デザインタブのアイコンの色を変更します。

アイコンの色：＃141414

ドロップダウンログインフォーム

国境

次に、境界線の設定でいくつかの角の丸い設定を適用します。

すべてのコーナー：100px

ドロップダウンログインフォーム

ボタンモジュールを列2に追加

コピーを追加

2列目では、必要なモジュールはボタンモジュールのみです。選択したコピーをいくつか追加します。

ドロップダウンログインフォーム

ボタンの配置

次に、モジュールの配置を変更します。

ボタンの配置：右

ドロップダウンログインフォーム

ボタンの設定

次に、ボタンのスタイルを設定します。

ボタンにカスタムスタイルを使用する：はい
ボタンのテキストサイズ：12px
ボタンのテキストの色：#ffffff
ボタンの背景色：＃ff4700
ボタンの境界線の幅：0px
ボタンの境界線半径：0px
ボタンの文字間隔：2px

ドロップダウンログインフォーム

ボタンフォント：プラタ
ボタンのフォントスタイル：大文字

ドロップダウンログインフォーム

間隔

そして、次のパディング値を間隔設定に適用して、ボタン設定を完了します。

トップパディング：16px
ボトムパディング：16px
左パディング：24px
右パディング：24px

ドロップダウンログインフォーム

セクション＃2を追加

背景色

前のセクションのすぐ下に別のセクションを追加し、次の背景色を使用します。

背景色：＃fff4ef

ドロップダウンログインフォーム

間隔

次に、[デザイン]タブでデフォルトの上下のパディングをすべて削除します。

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

ドロップダウンログインフォーム

行＃1を追加

カラム構造

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

ドロップダウンログインフォーム

サイジング

モジュールをまだ追加せずに、行設定を開き、次のようにサイズ設定を変更します。

列の高さを等しくする：はい
幅：
- デスクトップ：80％
- タブレットと電話：95％
最大幅：2580px

ドロップダウンログインフォーム

間隔

間隔設定のパディング値も変更します。

トップパディング：5px
ボトムパディング：5px
左パディング：2％
右パディング：2％

ドロップダウンログインフォーム

列2の設定

背景色

次に、列2の設定を開き、タブレットと電話にのみ背景色を適用します。

デスクトップ：/
タブレットと電話：＃f2e8e3

ドロップダウンログインフォーム

間隔

小さい画面サイズにも上部と下部のパディングを追加しています。

トップパディング：
- タブレットと電話：25px
ボトムパディング：
- タブレットと電話：25px

ドロップダウンログインフォーム

メニューモジュールを列1に追加

メニューを選択

次に、メニューモジュールを行に追加します。お好みのメニューを選択してください。

ドロップダウンログインフォーム

ロゴをアップロード

メニューモジュールにロゴをアップロードします。

ドロップダウンログインフォーム

背景色を削除する

次に、メニューの背景色を削除します。

ドロップダウンログインフォーム

メニューテキスト設定

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

メニューフォント：プラタ
メニューテキストの色：＃111821
メニューテキストサイズ：18px
メニューラインの高さ：1.4em
テキストの配置：右

ドロップダウンログインフォーム

ドロップダウンメニューの設定

ドロップダウンメニューの設定も変更します。

ドロップダウンメニューの背景色：＃fff4ef
ドロップダウンメニューの線の色：＃191919
ドロップダウンメニューのテキストの色：＃191919
モバイルメニューの背景色：＃fff4ef
モバイルメニューのテキストの色：＃191919

ドロップダウンログインフォーム

アイコン設定

次に、アイコン設定でアイコンの色を変更します。

ショッピングカートのアイコンの色：＃191919
検索アイコンの色：＃191919
ハンバーガーメニューアイコンの色：＃191919

ドロップダウンログインフォーム

サイジング

そして、次のサイズ設定を適用して、モジュール設定を完了します。

ロゴの最大幅：50px
幅：100％

ドロップダウンログインフォーム

3.ドロップダウンログインフォームを追加し、機能をクリックします

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

表題を加える

ヘッダーの基盤が構築されたので、ログインドロップダウントリガーとフォームの作成に集中できます。最初に必要なのは、行の2列目にある宣伝文句です。ここでは、タイトルを追加します。

ドロップダウンログインフォーム

アイコンを選択

次に、アイコンを選択します。

ドロップダウンログインフォーム

アイコン設定

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

アイコンの色：#ffffff
円のアイコン：はい
円の色：＃ff4700
画像/アイコンの配置：左

ドロップダウンログインフォーム

タイトルテキスト設定

次に、タイトルテキストのスタイルを設定します。

タイトルフォント：ラト
タイトルフォントの太さ：重い
タイトルフォントスタイル：大文字
タイトルテキストサイズ：12px
タイトル文字の間隔：3px

ドロップダウンログインフォーム

アニメーション

また、アニメーション設定でこのモジュールのデフォルトのアニメーションを削除します。

画像/アイコンアニメーション：アニメーションなし

ドロップダウンログインフォーム

宣伝文のタイトルCSS

そして、[詳細設定]タブの宣伝文のタイトルに上部マージンを追加します。

margin-top: 10px;

ドロップダウンログインフォーム

ポジション

最後になりましたが、モジュールを位置設定に再配置します。

位置：絶対
場所：センター

ドロップダウンログインフォーム

行＃2をセクション＃2に追加します

カラム構造

ログインフォームを追加するには、前の行の下に次の列構造を持つ新しい行を使用します。

ドロップダウンログインフォーム

サイジング

モジュールをまだ追加せずに、行設定を開き、次のようにサイズ設定を変更します。

列の高さを等しくする：はい
最大幅：2580px

ドロップダウンログインフォーム

間隔

パディング値も変更します。

トップパディング：0px
ボトムパディング：0px
左パディング：2％
右パディング：2％

ドロップダウンログインフォーム

ログインモジュールを列2に追加します

コンテンツを削除する

ログインモジュールを列2に追加します。コンテンツボックスが空であることを確認します。

ドロップダウンログインフォーム

背景色

次に背景色を変更します。

背景色：＃ff4700

ドロップダウンログインフォーム

フィールド設定

デザインタブに移動し、フィールドのスタイルを設定します。

フィールド背景色：rgba（0,0,0,0）
フィールドテキストの色：rgba（255,255,255,0.73）
フィールド左パディング：0px
フィールド右パディング：0px
フィールドフォント：ラト
フィールドテキストサイズ：16px

ドロップダウンログインフォーム

フィールドラインの高さ：1.8em
すべてのコーナー：0px
フィールド下部境界線幅：1px
フィールド下の境界線の色：#ffffff

ドロップダウンログインフォーム

ボタンの設定

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

ボタンにカスタムスタイルを使用する：はい
ボタンのテキストサイズ：12px
ボタンのテキストの色：#ffffff
ボタンの背景色：＃141414
ボタンの境界線の幅：0px
ボタンの境界線半径：0px
ボタンの文字間隔：2px
ボタンフォント：プラタ

ドロップダウンログインフォーム

ボタンのフォントスタイル：大文字
ボタントップパディング：16px
ボタン下部のパディング：16px

ドロップダウンログインフォーム

サイジング

幅も「100％」であることを確認してください。

幅：100％

ドロップダウンログインフォーム

ログインボタンCSS

[詳細設定]タブのログインボタンのCSSボックスに上マージンを適用します。

margin-top: 30px;

ドロップダウンログインフォーム

ポジション

それに応じてモジュールを再配置します。

位置：絶対
場所：右上
垂直オフセット：1px

ドロップダウンログインフォーム

行＃1の宣伝文句モジュールにCSSIDを追加します

必要な要素がすべて揃ったので、クリック機能に集中できます。まず、宣伝文モジュールを開き、次のCSSIDを追加します。

CSS ID：divi-login-toggle

ドロップダウンログインフォーム

行＃2のログインモジュールにCSSIDを追加します

次にログインモジュールを開き、次のCSSIDを適用します。

CSS ID：divi-login-form

ドロップダウンログインフォーム

ログインモジュールの下にコードモジュールを追加する

次に、ログインモジュールのすぐ下にコードモジュールを追加します。

ドロップダウンログインフォーム

スタイルとスクリプトタグを追加する

クリック機能を作成するために、いくつかのCSSおよびJQueryコードを使用します。そのコードを準備するために、スタイルタグ（CSSコード用）とスクリプトタグ（JQueryコード用）を追加します。

ドロップダウンログインフォーム

スタイルタグの間にCSSコードを挿入する

次のCSSコード行をスタイルタグの間に配置します。

#divi-login-toggle {
cursor: pointer;    
}

#divi-login-form {
margin-top: -20px;
visibility: hidden;
opacity: 0;
  
-webkit-transition: all 0.2s ease !important;
-moz-transition: all 0.2s ease !important;
-o-transition: all 0.2s ease !important;
transition: all 0.2s ease !important;
}
  
.show-login-form {
visibility: visible !important;
margin-top: 0px !important;
opacity: 1 !important;
}

ドロップダウンログインフォーム

スクリプトタグの間にJQueryを挿入する

そして、スクリプトタグ間の次のコード：

jQuery(document).ready(function($){

var loginForm =  $('#divi-login-form');

$('#divi-login-toggle').click(function() {

loginForm.toggleClass('show-login-form');

});
});

ドロップダウンログインフォーム

4.Diviテーマビルダーの変更を保存します

すべてが整ったので、あとはDivi Theme Builderの変更をすべて保存して、結果を表示するだけです。

ドロップダウンログインフォーム

プレビュー

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

デスクトップ

ドロップダウンログインフォーム

モバイル

ドロップダウンログインフォーム

最終的な考え

この投稿では、メンバーシップWebサイトを構築するときにヘッダーを使用してクリエイティブにする方法を示しました。具体的には、訪問者がWordPressのログインページにアクセスしなくても自分のアカウントにログインできるドロップダウンログインフォームを含める方法を示しました。ヘッダーテンプレートのJSONファイルも無料でダウンロードできました！ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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

ドロップダウンログインフォームをDiviヘッダーに追加する方法

プレビュー

デスクトップ

モバイル

グローバルヘッダーテンプレートを無料でダウンロード

無料でダウンロード

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

1.新しいグローバルヘッダーテンプレートを作成します

Diviテーマビルダーに移動します

新しいグローバルヘッダーを追加する

2.ヘッダーデザインを作成する

セクション＃1を追加

背景画像

間隔

セクションに行を追加

カラム構造

サイジング

間隔

主な要素CSS

ソーシャルメディアフォローモジュールを列1に追加

ソーシャルネットワークを追加する

各ソーシャルネットワークの背景色を個別に変更する

アイコン設定

国境

ボタンモジュールを列2に追加

コピーを追加

ボタンの配置

ボタンの設定

間隔

セクション＃2を追加

背景色

間隔

行＃1を追加

カラム構造

サイジング

間隔

列2の設定

背景色

間隔

メニューモジュールを列1に追加

メニューを選択

ロゴをアップロード

背景色を削除する

メニューテキスト設定

ドロップダウンメニューの設定

アイコン設定

サイジング

3.ドロップダウンログインフォームを追加し、機能をクリックします

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

表題を加える

アイコンを選択

アイコン設定

タイトルテキスト設定

アニメーション

宣伝文のタイトルCSS

ポジション

行＃2をセクション＃2に追加します

カラム構造

サイジング

間隔

ログインモジュールを列2に追加します

コンテンツを削除する

背景色

フィールド設定

ボタンの設定

サイジング

ログインボタンCSS

ポジション

行＃1の宣伝文句モジュールにCSSIDを追加します

行＃2のログインモジュールにCSSIDを追加します

ログインモジュールの下にコードモジュールを追加する

スタイルとスクリプトタグを追加する

スタイルタグの間にCSSコードを挿入する

スクリプトタグの間にJQueryを挿入する

4.Diviテーマビルダーの変更を保存します

プレビュー

デスクトップ

モバイル

最終的な考え

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