Diviでカスタムグローバルヘッダーのインラインログインフォームを設計する方法

公開: 2019-12-30

ヘッダーのインラインログインフォームを作成すると、ユーザーエクスペリエンスが大幅に向上します。ユーザーがいつでもサイトのどのページからでも簡単にログインできるため、メンバーシップサイトやオンラインストアに最適です。このチュートリアルでは、カスタムヘッダーユーザーであるDivi ThemeBuilderのインラインログインフォームを設計する方法を紹介します。これを行うには、単純なレスポンシブグローバルヘッダーを作成し、Diviのログインモジュールを使用してヘッダーの右上にコンパクトなインラインログインフォームを設計します。ビルドには少しカスタムCSSが必要ですが、すべてが整ったら、Diviの組み込みデザインオプションを使用して、ヘッダーデザインに一致するようにインラインログインフォームを簡単にカスタマイズできます。

始めましょう！

スニークピーク

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

インラインログインフォーム

そして、これがタブレットと電話のディスプレイのインラインログインフォームです。

インラインログインフォーム

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

インラインログインフォーム

インラインログインフォームのヘッダーレイアウトを無料でダウンロード

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

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

無料でダウンロード

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

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

レイアウトをページにインポートするには、zipファイルを抽出し、テーマビルダーの移植性オプションを使用してjsonファイルの1つをDiviテーマビルダーに追加するだけです。

チュートリアルに行きましょう。

始めるために必要なもの

まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。開始する必要があるのはこれだけです。 Divi Theme Builderを使用して、新しいヘッダーテンプレートレイアウトを最初から作成します。

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

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

デフォルトのWebサイトテンプレートで、[グローバルヘッダーの追加]、[グローバルヘッダーの作成]の順にクリックします。

インラインログインフォーム

次に、[最初からビルド]オプションを選択します。

インラインログインフォーム

インラインログインフォームを使用したDiviグローバルヘッダーの設計

セクションのカスタマイズ

グローバルヘッダーレイアウトエディターを形成すると、サイトのカスタムヘッダーを最初から完全に作成できます。開始するには、通常のセクションの設定を開き、以下を更新します。

背景グラデーションの左の色：
背景グラデーションの正しい色：
グラデーション方向：48度
パディング：上10px、下10px、左20px、右20px

インラインログインフォーム

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

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

インラインログインフォーム

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

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

行を追加する

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

インラインログインフォーム

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

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

インラインログインフォーム

イメージモジュールのイメージとマージンを更新する

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

画像：[ロゴを追加（約64px x 64px）]

インラインログインフォーム

マージン：右20px

インラインログインフォーム

行設定を更新する

先に進む前に、行の設定を開き、以下を更新します。

カスタムガター幅を使用：はい
側溝幅：1
幅：25％
行の配置：左
パディング：0px上、0px下

インラインログインフォーム

インラインログインフォームを2行目に追加する

行を追加する

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

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

インラインログインフォーム

ログインフォームを追加

1列の行の中に、ログインモジュールを追加します。

インラインログインフォーム

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

ログイン設定で、モックのタイトルと本文の内容を削除します。

インラインログインフォーム

ログインフォームのカスタムクラスと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上、0px下

インラインログインフォーム

ログインフォームのデザイン設定

これで、ログインフォームの設定を更新する準備が整いました。ログインフォームモジュールの設定を開き、以下を更新します。

背景色を使用：いいえ

インラインログインフォーム

フィールドとリンクテキスト

フィールド背景：色：rgba（255,255,255,0.2）
フィールドテキストの色：#ffffff
フィールドフォント：ラト
フィールドテキストサイズ：14px
テキストの配置：右
リンクフォント：ラト
リンクフォントスタイル：下線
リンクテキストの色：＃ff3190

インラインログインフォーム

ボタンのデザイン

ボタンのテキストサイズ：15px
ボタンの背景色：＃ff3190
ボタンの境界線の幅：0px
ボタンフォント：ラト
ボタンのパディング：上2px、下2px
マージン：15px下
パディング：上0px、下0px、左0px、右0px

インラインログインフォーム

2行目にメニューを追加する

メニューモジュール

インラインログインフォームを配置すると、そのすぐ下にメニューを追加できます。

ログインフォームモジュールの下にメニューモジュールを追加します。

インラインログインフォーム

メニューモジュール設定

メニュー設定を次のように更新します。

背景色：rgba（0,0,0,0）
メニューフォント：ラト
メニューフォントの太さ：太字
メニューテキストの色：#ffffff
メニューテキストサイズ：16px
テキストの配置：右
ドロップダウンメニューの背景色：#ffffff
ドロップダウンメニューの線の色：rgba（0,0,0,0）
ドロップダウンメニューのテキストの色：＃000000
モバイルメニューの背景色：#ffffff
モバイルメニューのテキストの色：＃000000
ショッピングカートのアイコンの色：#ffffff
検索アイコンの色：#ffffff
ハンバーガーメニューアイコンの色：#ffffff

インラインログインフォーム

インラインログインフォームヘッダーの保存

ヘッダーレイアウトエディタを終了する前に、必ずレイアウトを保存してください。

次に、テーマビルダーの設定も保存します。

最終結果

それでおしまい！

それでは、最終結果を確認しましょう。最終結果を表示するには、Webサイトのページにアクセスするだけです。

これがデスクトップディスプレイのヘッダーです。

インラインログインフォーム

タブレットディスプレイのインラインログインフォームヘッダーは次のとおりです。

インラインログインフォーム

そして、これが電話ディスプレイのインラインログインフォームです。モバイルメニューにも注目してください。

インラインログインフォーム

そして、これがユーザーがログインすると表示されるものです。

インラインログインフォーム

最終的な考え

インラインログインフォームを備えたこのカスタムグローバルヘッダーは、メンバーシップサイトやオンラインストアに間違いなく役立ちます。ほんの少しのカスタムCSSで、Diviのログインモジュールを、あらゆるWebサイトのヘッダー内にうまく収まるエレガントなインラインログインフォームに変換することができました。うまくいけば、これはあなたの次のプロジェクトに役立つでしょう。

コメントでお返事をお待ちしております。

乾杯！

Diviでカスタムグローバルヘッダーのインラインログインフォームを設計する方法

スニークピーク

インラインログインフォームのヘッダーレイアウトを無料でダウンロード

無料でダウンロード

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

始めるために必要なもの

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

インラインログインフォームを使用したDiviグローバルヘッダーの設計

セクションのカスタマイズ

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

行を追加する

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

イメージモジュールのイメージとマージンを更新する

行設定を更新する

インラインログインフォームを2行目に追加する

行を追加する

ログインフォームを追加

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

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

ヘッダーレイアウト設定にカスタムCSSを追加する

行設定

ログインフォームのデザイン設定

フィールドとリンクテキスト

ボタンのデザイン

2行目にメニューを追加する

メニューモジュール

メニューモジュール設定

インラインログインフォームヘッダーの保存

最終結果

最終的な考え

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