Divi：ログインフォームでグローバルヘッダーを作成する方法

でグローバルヘッダーを作成する必要がありますフォーム DIVIで接続？

の作成フォームヘッダーへのログインは、 ユーザーエクスペリエンス.

ユーザーがいつでもどのページからでもログインできるため、サブスクリプション Web サイトやオンラインストアに最適です。ウェブサイト.

このチュートリアルでは、フォームカスタムヘッダー上のユーザーのオンラインログイン。始めましょう！

概要

これは、このチュートリアルで作成するログインフォームを使用したカスタムヘッダーのクイックプレビューです。

これは、ユーザーがログインしたときに表示される「ログアウト」メッセージとリンクです。

新しいグローバルヘッダーの追加

物事を進めるには、新しいグローバルヘッダーを作成する必要があります。サイトのWeb. これを行うには、WordPress ダッシュボードに移動し、Divi > Theme Builder に移動します。

オンウェブサイトのテンプレートデフォルトでは、[グローバルヘッダーの追加] をクリックしてから、[グローバルヘッダーの作成] をクリックします。

水平ログインフォームを使用したDiviグローバルヘッダーデザイン

セクションをカスタマイズする

グローバルヘッダーレイアウトエディターから、パーソナライズされたヘッダーを作成できます。ウェブサイト何もないところからのスタート。まず、通常セクションの設定を開き、以下を更新します。

左の背景のグラデーションカラー：
右の背景のグラデーションカラー：
グラデーション方向：48度

内側の余白：上10px、下10px、左20px、右20px

ヘッダーの応答性を高めるために、次のカスタムCSSをメインセクション要素に追加します。

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

最初の行にヘッダーロゴを追加します

セクションの準備ができたので、最初の行を追加できます。

行を追加

セクションの列に行を追加します。

ロゴ画像付きの画像モジュールを追加する

XNUMX列の行に、画像モジュールを追加します。ここにヘッダーロゴを追加します。

画像と画像モジュールのマージンを更新する

次のように画像設定を更新します。

画像：[ロゴを追加（約64 x 64ピクセル）]

マージン：20px右

行のパラメーターを更新する

先に進む前に、回線設定を開き、以下を更新してください。

カスタムガター幅を使用：はい
列間隔：1
最大幅：25％
配置：左

内部マージン：0px上、0px下

XNUMX行目に水平ログインフォームを追加

行を追加

最初の行の準備ができたので、エディターで最初の行が左側のセクションの25％を占めることに気付くでしょう。これは基本的に、ヘッダーロゴに指定された行になります。ログインフォームと右側のメニューのセクション行を作成する必要があります。

セクションの列に構造を持つXNUMX番目の行を追加します。

ログインフォームを追加する

XNUMX列の行の中に、「接続」モジュールを追加します。

デフォルトのコンテンツを削除する

ログインモジュールの設定で、偽のタイトルと本文のコンテンツを削除します。

ログインフォームとCSSのカスタムクラスを追加します

ログインフォームの設計に取り掛かる前に、まずCSSクラスとカスタムCSSをLoginモジュールに追加しましょう。これにより、Diviの組み込みオプションを使用してフォームのデザインを仕上げる前に、フォームの基本的なオンライン構造が設定されます。

ガイドもご覧ください 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を追加できます。

チュートリアルもご覧ください DIVIを使用してブログモジュールを使用してブログページを作成する方法

ヘッダーレイアウト設定を開き、次のカスタム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により、ログインフィールドとボタンがインラインで（水平方向に）表示され、「パスワードをお忘れですか？」というメッセージが表示されます。が非表示になり、フィールド間に小さなマージンが追加されます。