の作成 フォーム ヘッダーのインライン ログインは、ユーザー エクスペリエンスを大幅に向上させることができます。 ユーザーはいつでも、どのページからでもログインできるため、会員制サイトやオンライン ストアに最適です。
このチュートリアルでは、 フォーム Diviテーマビルダーのカスタムヘッダーを使用してオンラインで。 これを行うには、単純な応答性の高いグローバル ヘッダーを作成し、 フォーム Divi のログイン モジュールを使用して、ヘッダーの右上にあるコンパクト オンライン ログイン。 ビルドにはカスタム CSS コードが少し必要ですが、すべての準備が整ったら、Divi の統合サービスのデザイン オプションを使用して、オンライン ログイン フォームをカスタマイズして、任意のヘッダー デザインに簡単に一致させることができます。
結果の概要
これは、このチュートリアルで作成するオンラインログインフォームを使用したカスタムヘッダーの概要です。
そして、これがタブレットと電話の画面にあるオンラインログインフォームです。
ユーザーがログインしたときに表示されるログアウトメッセージとリンクは次のとおりです。
始めるために必要なもの
まだ行っていない場合は、 Diviテーマをインストールしてアクティブにします 。 始めるために必要なのはこれだけです。 Divi Theme Builderを使用して、新しいヘッダーテンプレートレイアウトを最初から作成します。
新しいグローバルヘッダーの追加
物事を進めるには、新しいグローバル ヘッダーを作成する必要があります。 サイトのWeb. これを行うには、WordPress ダッシュボードに移動し、Divi > Theme Builder に移動します。
オン ウェブサイトのテンプレート デフォルトでは、[グローバル ヘッダーの追加] をクリックしてから、[グローバル ヘッダーの作成] をクリックします。
次に、[最初から作成]オプションを選択します。
オンラインログインフォームを使用してDiviグローバルヘッダーを設計する
セクションのカスタマイズ
グローバルヘッダーレイアウトエディターから、サイトのカスタムヘッダーを完全に作成できます。 開始するには、通常のセクション設定を開き、以下を更新します。
- 左の色の背景のグラデーション：
- 右の背景のグラデーション：
- 勾配方向：48度
- パディング：上部10ピクセル、下部10ピクセル、左側20ピクセル、右側20ピクセル
カスタムヘッダーの応答性を高めるために、セクションのメイン要素に次のカスタムCSSを追加します。
display:flex;justify-content:center;align-items:center;
最初の行にヘッダーロゴを追加します
セクションの準備ができたので、最初の行を追加できます。
行を追加する
セクションの列に行を追加します。
ロゴ画像付きの画像モジュールを追加する
単一列の行に、イメージモジュールを追加します。 ここにヘッダーのロゴを追加します。
画像と画像モジュールのマージンを更新する
次のように画像設定を更新します。
- 画像：[ロゴを追加（約64ピクセルx 64ピクセル）]
- マージン：20px右
行パラメーターの更新
先に進む前に、行の設定を開き、以下を更新してください。
- カスタムのガター幅を使用：はい
- 側溝幅：1
- 幅：25％
- 行の配置：左
- パディング：0px high、0px low
XNUMX行目にオンラインログインフォームを追加する
行を追加する
最初の行の準備ができたので、エディターで最初の行が左側のセクションの25％を占めることがわかります。 これは基本的にヘッダーロゴの指定行になります。 フォームのセクション行と右側のオンラインログインメニューを作成する必要があります。
セクションの列に構造を持つXNUMX番目の行を追加します。
ログインフォームを追加する
列の行に、ログインモジュールを追加します。
デフォルトのコンテンツを削除する
ログイン設定で、偽のタイトルと本文コンテンツを削除します。
ログインフォームとカスタムCSSクラスを追加する
オンラインログインフォームの設計に取り掛かる前に、まずカスタムCSSクラスとCSSクラスをログインモジュールに追加しましょう。 これにより、Diviの組み込みオプションを使用してフォームに最終的なデザインを加える前に、フォームの基本的なオンライン構造を設定できます。
[詳細設定]タブで、次のCSSクラスを追加します。
- CSSクラス：header-login-form
接続記述CSS領域に次のカスタムCSSを追加します。
margin-bottom: 0px !important
次に、ログインフォームのCSS領域に次のカスタムCSSを追加します。
width: 100%;
次のカスタムCSSを[接続フィールド] CSSボックスに追加します。
padding: 5px 4% !important
カスタムCSSをヘッダーレイアウト設定に追加する
ログインフォームモジュールにカスタムCSSクラスが追加されているため、この特定のログインフォームのみをターゲットとするカスタムCSSを追加できます。
ヘッダーレイアウト設定を開き、次のカスタムCSSを追加します。
.header-login-form .et_pb_login_form form {display: flex;justify-content: flex-end;align-items: center;}.header-login-form .et_pb_login_form .et_pb_contact_form_field {padding-bottom: 0px;margin-right: 5px;}.header-login-form .et_pb_forgot_password {display:none;}
このCSSにより、ログインフィールドとボタンがインラインで（水平方向に）表示され、「パスワードをお忘れですか？」リンクが非表示になります。 »そして、フィールド間に小さなマージンを追加します。
ライン設定
オンラインログインフォームに最後の仕上げをする前に、次のように行パラメーターを更新しましょう。
- カスタムのガター幅を使用：はい
- 側溝幅：1
- 行揃え：直線
- パディング：0px high、0px low
ログインフォームの設計設定
これで、ログインフォームの設定を更新する準備が整いました。 ログインフォームモジュールの設定を開き、以下を更新します。
- 背景色を使用：いいえ
フィールドとリンクのテキスト
- フィールドの背景：色：rgba（255,255,255,0.2）
- フィールドのテキストの色：#ffffff
- 野外警察：ラト
- フィールドテキストサイズ：14ピクセル
- テキストの配置：右
- リンクフォント：Lato
- リンクフォントスタイル：下線
- リンクテキストの色：＃ff3190
ボタンデザイン
- ボタンのテキストサイズ：15px
- ボタンの背景色：＃ff3190
- ボタンの境界線の幅：0px
- ボタンのフォント：Lato
- ボタンのパディング：上部に2ピクセル、下部に2ピクセル
- マージン：15ピクセル低
- パディング：上部に0px、下部に0px、左側に0px、右側に0px
メニューをXNUMX行目に追加する
メニューモジュール
オンラインログインフォームを用意したら、すぐ下にメニューを追加できます。
ログインフォームモジュールの下にメニューモジュールを追加します。
メニューモジュールの設定
次のようにメニュー設定を更新します。
- 背景色：rgba（0,0,0,0）
- メニューフォント：ラト
- メニューのフォントの太さ：太字
- メニューテキストの色：#ffffff
- メニューのテキストサイズ：16px
- テキストの配置：右
- ドロップダウンメニューの背景色：#ffffff
- ドロップダウンメニューの線の色：rgba（0,0,0,0）
- ドロップダウンメニューのテキストの色：＃000000
- モバイルメニューの背景色：#ffffff
- モバイルメニューのテキストの色：＃000000
- カートアイコンの色：#ffffff
- 検索アイコンの色：#ffffff
- ハンバーガーメニューアイコンの色：#ffffff
ログインフォームのヘッダーを保存する
ヘッダーレイアウトエディタを終了する前に、必ずレイアウトを保存してください。
次に、テーマジェネレーターの設定も保存します。
最終結果
それでおしまい！
それでは、最終結果を見てみましょう。 最終結果を表示するには、単にあなたのページにアクセスしてください サイトのWeb.
これがデスクトップ画面のヘッダーです。
これがタブレット画面のオンラインログインフォームのヘッダーです。
そして、これが電話スクリーンのオンラインログインフォームです。 モバイルメニューにも注意してください。
そして、これはユーザーがログインしたときに表示されるものです。
最終的な考え
オンライン ログイン フォームを備えたこのカスタム グローバル ヘッダーは、あらゆる会員サイトやオンライン ストアに間違いなく役立ちます。 ほんの少しのカスタム CSS を使用して、Divi のログイン モジュールを、あらゆるヘッダーに見栄えのするエレガントなオンライン ログイン フォームに変換することができました。 サイトのWeb。 これがあなたの次のプロジェクトに役立つことを願っています。
コメントでお返事をお待ちしております。
あなたの健康に！
