Elementor Proのログインウィジェットの使い方

コンテンツのForm fieldsの使い方

Label

「表示」でラベルを表示し、「非表示」でラベルを非表示にします。

Input size

• 微小
• 小
• 中
• 大
• 特大

フィールドの大きさを変更します。上記の5つの大きさが用意されています。

コンテンツのボタン使い方

テキスト

ログインボタンのテキストを変更します。

サイズ

• 微小
• 小
• 中
• 大
• 特大

ボタンの大きさを変更します。上記の5つの大きさが用意されています。

配置

• 左
• 中央
• 右
• 均等割付

ボタンの位置を上記の4種類から設定します。「均等割付」だと、ウィジェットの幅に調整されます。

コンテンツの追加オプション設定

Redirect After Login

「オン」にするとログイン後に、下に記入したURL先のページにリダイレクトされます。

Redirect After Logout

「オン」にするとログイン後に、下に記入したURL先のページにリダイレクトされます。

Lost Your Password

「表示」にすると、「Lost your password?」というパスワードを忘れた場合の文言（リンク付き）が表示され、「非表示」にすると非表示になります。

Remember me

「表示」にすると、「Remember Me」チェックボックスが表示されます。チェックを入れると、入力したユーザー名もしくはEメールアドレスとパスワードがパソコン、あるいはスマホに記憶されます。

Logged in message

「表示」にするとログインしたというメッセージが表示されます。

Custom label

• Username Label：ユーザー名/Eメールアドレス
• Username Placeholder：ユーザー名/Eメールアドレス
• Password Label：パスワード
• Password Placeholder：パスワード

「はい」に切り替えると、デフォルトのラベル名を変更できます。上記のように日本語に変更しておくと良いです。

スタイルのフォーム設定

Rows Gap

フォームやボタン間のスペースを設定できます。

Links Color

「Lost your password?」のリンクの色を変更できます。

Links Hover Color

「Lost your password?」のホバー時（カーソルが置かれた時）のリンクの色を変更できます。

スタイルのLabel設定

スペース

ラベルとフィールド間のスペースを設定できます。

文字色

ラベルのテキストカラーを設定できます。

書体

• フォント
• 大きさ
• 太さ
• 変換
• スタイル
• 装飾
• 行の高さ
• 字間

ラベルの書体の設定ができます。

コンテンツのFields設定

文字色

フィールド内のテキストカラーを設定します。

書体

フィールド内のテキストの書体を設定します。

背景色

フィールドの背景色を設定します。

ボーダー色

フィールドのボーダーカラーを設定します。

ボーダー幅

ボーダーの太さを調節します。

ボーダー丸み

ボーダーの丸みを調節します。

スタイルのボタン設定

文字色

ボタンのテキストカラーを設定します。

書体

ボタンテキストの書体を設定します。

背景色

ボタンの背景色を設定します。

ボーダータイプ

• なし
• 直線
• 2本線
• 点線
• 破線
• 溝

ボタンのボーダータイプを上記の6種類から選びます。

幅

ボーダーの幅を設定します。

色

ボーダーの色を設定します。

ボーダー丸み

ボタンの丸みを調節します。

テキストパディング

ボタンテキストと外枠のスペースを調節します。

「ホバー」では次の項目を設定します。

文字色

マウスカーソルを置いた時の文字色を設定します。

背景色

マウスカーソルを置いた時の背景色を設定します。

ボーダー色

マウスカーソルを置いた時のボーダーの色を設定します。

アニメーション

マウスカーソルを置いた時のアニメーションをドロップダウンから選択できます。

スタイルのLogged in Message設定

ここでは、ログインした際のメッセージの設定をしていきます。

文字色

文字の色を設定します。

書体

書体を設定します。