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

会員制サイトなど閲覧者を限定する場合、サイトにログインさせなければなりません。
そこで活躍するのがこちらの『ログイン』ウィジェットです。

ログインウィジェットは最初からユーザー名、パスワードの入力フォームとログインボタンが1セットになっており、編集タブにて各種設定をするだけで使えるとても便利なウィジェットです。

こちらの記事ではElementor Proウィジェット『ログイン』の使い方を詳しく説明していきます。

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

Elementor Pro『ログイン』ウィジェットの使い方を動画でご覧になりたい方はこちらからどうぞ!

ログインウィジェットの挿入

ログインウィジェットの挿入

『ログイン』ウィジェットをドラッグ&ドロップでカラムに挿入します。

ログインウィジェット挿入後の表示画面

こちらはカラム挿入後の表示画面です。
画面幅いっぱいに表示されます。

カラムを2分割した後の表示画面

ログインフォームのバランス的にはカラムを2分割しウィジェットを挿入すると見栄えも良くなります。

コンテンツタブ・Form Fields

コンテンツタブ・Form Fields

Label

Labelの説明

『Label』とは2つあるテキストバーの上に表示されている

  • Username or Email Address
  • Password

のことです。
こちらはそれらを表示させるかさせないかの選択になります。
※デフォルトは『表示』に設定されています。

Input Size

Input Sizeの説明

『Input Size』とは、『Username or Email Address』と『Password』を入力するフォームのサイズを以下より選択することができます。

  • 微小
  • 小(デフォルト)
  • 特大
Input Sizeを『特大』に設定した時の表示画面

上記はInput Sizeを『特大』にした時の表示画面です。
テキストバーのサイズに比例してテキストバー内の文字のサイズも変更します。

コンテンツタブ・ボタン

コンテンツタブ・ボタン

テキスト

ボタンテキストの変更

『テキスト』はボタン内の文字を変更することができます。
※デフォルトで『ログイン』とカタカナですでに入力されています。

サイズ

ボタンサイズの変更

『サイズ』はボタンのサイズを以下より選択することができます。

  • 微小
  • 小(デフォルト)
  • 特大
ボタンサイズを特大にした時の表示画面

こちらはサイズを『特大』にした時の表示画面です。

配置

『配置』はボタンの配置を変更することができます。
デフォルトは『左』に設定されています。

左 / 中央 / 右

ボタン配置の説明

均等割付

ボタン・均等割付選択時の表示画面

『均等割付』を選択すると、ボタンがカラム幅いっぱいに表示されます。

コンテンツタブ・追加オプション

コンテンツタブ・追加オプション

Redirect After Login

Redirect After Loginの説明

『Redirect After Login』は、ユーザーがログインした後にここで設定したURLのページにユーザーを飛ばすことのできる機能です。
デフォルトでは『オフ』に設定されています。

Redirect After Logout

 Redirect After Logoutの説明

『Redirect After Logout』は、ユーザーがログイアウトした後にここで設定したURLのページにユーザーを飛ばすことのできる機能です。
デフォルトでは『オフ』に設定されています。

Lost your password?

Lost your password?の表示選択

『Lost your password?』はボタンの下に書かれている『Lost your password?』を表示させるかさせないかの選択になります。
※デフォルトでは『表示』に設定されています。

Remember Me

 Remember M絵の表示選択

『Remember Me』はPasswordの下のテキストバー下にある『Remember Me』の表示をさせるかさせないかの選択になります。
※デフォルトは『選択』に設定されています。

尚、『Remember Me』は日本語のサイトにはよく『ログイン状態を保存する』と言ったような書かれ方をしています。
残念ながらRemeber Meのテキストの変更はできません。

Logged in Message

Logges in Messageの表示選択

『Logged in Message』とは、『サイトにログインしています。』というメッセージを画面に表示させるかさせないかの設定です。
※デフォルトは『表示』に設定されています。
尚、このメッセージ表示がどのようなものかを確認するにはプレビュー画面を見る必要があります。

Logged in Messageで『表示』を選択した時のプレビュー画面

上記はプレビュー画面です。
『You are Logged in as NEOMI(Logout)』と表示されています。
これは『あなたはNEOMIとしてログイン中です。』という意味です。

特にログイン操作をした訳でもないのになぜこのように表示されるかというと、自分はすでに自分のサイトにログインをした上でElementorの操作をしているので、ウィジェットを入れた段階ですでにログインをしているということです。

(Logout)ボタン

尚、メッセージ横の(Logout)をクリックするとサイトからログアウトします。

Custom Label

Custom Labelの説明

『Custom Label』はデフォルトでは『いいえ』に設定されていますが、『はい』に設定すると上記画面のように編集タブに新たな項目が追加されます。

Username Label

Username Labelの変更

『Username Label』はユーザーネームを入力するテキストバー上の名称を自由に変更することができます。

Username Placeholder

Username Placeholderの変更

『Username Placeholder』はユーザーネームの入力バー内に表示される文を好きに変更することができます。

Password Label

Password Labelの変更

『Password Label』はパスワードのテキストバー上の『Password』の名称を自由に変更することができます。

Password Placeholder

Password Placeholderの変更

『Password Placeholder』ではパスワードを入力するテキストバー内に表示される文を変更することができます。

スタイルタブ・フォーム

スタイルタブ・フォーム

Rows Gap

Rows Gapの説明

『Raws Gap』はカーソルを横のスラのイドさせることによりカラムの縦幅を拡張または縮小することができます。
上記はRows Gapの値を『40』に設定した時の表示画面です。
※デフォルトの値は『10』に設定されています。

Links Color

Links Colorの説明

『Links Color』はボタン下の『Lost your password?』の色をカラーピッカーより自由に変更することが可能です。

Links Hover Color

Links Hover Colorの説明

『Links Hover Color』は『Lost your password?』にマウスオーバーした時の色を変更することができます。

スタイルタブ・Label

スタイルタブ・Label

スペース

スペースの説明

『スペース』は

  • Username Label⇄Username Placeholder
  • Username Placeholder⇄Password Label
  • Remember Me⇄ログインボタン

の間のスペースをカーソルをスライドさせることにより拡張することが可能です。
※デフォルトの値は『0』に設定されています。
尚、上記のスペースを個別に違う値にすることはできません。

文字色・書体

Labelの文字色・書体の変更

『文字色』及び『書体』は

  • Username Label
  • Password Label
  • Remember Me

の編集になります。

書体の編集の仕方につきましては、【Elementorの『テキストエディター』ウィジェットの使い方】の記事にて詳しく説明をしていますのでそちらを参考にしてください。

スタイルタブ・ Fields

スタイルタブ・Fields

文字色・書体

Fieldsの文字色・書体の変更

こちらのはUsername PlaceholderとPassword Placeholder内の『文字色』と『書体』の変更が可能です。

背景色

Fieldsの背景色の変更

『背景色』はUsername PlaceholderとPassword Placeholderの背景色をカラーピッカーより自由に変更することが可能です。

ボーダー各種

ボーダー(枠線)の編集

『ボーダー』とは枠線のことです。
Username placeholderとPassword placeholderの

  • ボーダー色
  • ボーダー幅
  • ボーダー丸み

を変更することができます。
上記の詳しい変更の仕方については【Elementorの『画像』ウィジェットの使い方】のスタイルタブのセクションをご覧ください。

スタイルタブ・ボタン

スタイルタブ・ボタン

『ボタン』はログインボタンの見た目を各種変更することが可能です。
ボタンの編集の仕方は【Elementorのボタンウィジェットの使い方】のスライルタブのセクションにて詳しく説明をしていますのでそちらを参考にしてください。

スタイルタブ・Logged in Message

スタイルタブ・Logged in Message

Logged in Message』はログイン後に表示されるメッセージのことです。
こちらはLogged in Messageの『文字色』と『書体』の変更ができます。
書体の変更の仕方については【Elementorの『テキストエディター』ウィジェットの使い方】の記事をご覧ください。


『ログイン』は閲覧者を限定したサービスを提供しているサイトの運営には欠かせない機能です。
難しい設定は不要で『ログイン』ウィジェットを挿入するだけでとても簡単に設定ができるので、ぜひ機能的なサイト運営に役立ててみてはいかがでしょうか?

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Elementorの無料ウェブサイトテンプレート
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通