(↑Pinterestでシェアお願いします!)

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

執筆者 | 更新日 2020年02月10日 | Elementor Proの使い方 | 2 コメント

Elementor Proのログインウィジェットは、WordPressのデフォルトのログインページとは別にログインページを作成したいときに使います。

【限定】Elementor Proの使い方を動画で網羅的に学びませんか?こちらから無料でコースを受講できます。

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

Elementor Pro ログインウィジェット コンテンツ Form Fields

Label

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

Input size

  • 微小
  • 特大

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

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

Elementor Pro ログインウィジェット コンテンツ ボタン

テキスト

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

サイズ

  • 微小
  • 特大

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

配置

  • 中央
  • 均等割付

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

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

Elementor Pro ログインウィジェット コンテンツ 追加オプション

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:パスワード

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

スタイルのフォーム設定

Elementor Pro ログインウィジェット スタイル フォーム

Rows Gap

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

Links Color

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

Links Hover Color

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

スタイルのLabel設定

Elementor Pro ログインウィジェット スタイル Label

スペース

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

文字色

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

書体

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

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

コンテンツのFields設定

Elementor Pro ログインウィジェット スタイル Fields

文字色

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

書体

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

背景色

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

ボーダー色

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

ボーダー幅

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

ボーダー丸み

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

スタイルのボタン設定

Elementor Pro ログインウィジェット スタイル ボタン

文字色

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

書体

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

背景色

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

ボーダータイプ

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

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

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

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

ボーダー丸み

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

テキストパディング

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

Elementor Pro ログインウィジェット スタイル ボタン 1

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

文字色

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

背景色

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

ボーダー色

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

アニメーション

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

スタイルのLogged in Message設定

Elementor Pro ログインウィジェット スタイル Logged in Message

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

文字色

文字の色を設定します。

書体

書体を設定します。

Elementorの使い方を動画レクチャーで網羅的に学びませんか?
 

無料でオンラインコースを受講できます。

・Elementorのウィジェットの使い方

・ランディングページの作り方

・テンプレートの使い方

 

以下のボタンから、無料でオンラインコースに登録し、今すぐアクセスしてください。

2 コメント

  1. Naoki

    ログインページを作るのがかんたんなのはわかるのですが、肝心の会員登録ページを作成する方法がわからないため、困っています。教えていただけますか?

    返信する
    • 根本耕輔

      Naokiさん
      コメントありがとうございます。Elementorのログインウィジェットだけでは、会員登録ページを作成することはできません。専用のプラグインが必要です。機会があれば、YouTubeに解説動画をアップしたり、ブログ記事としてアップさせていただきたいと思います。

      返信する

コメントを提出

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

Elementorの使い方を"無料"で学びませんか?

プロのようなランディングページが作れるElementorの使い方が無料で受講できます。

Elementor Proの使い方

無料でElementor Proの使い方を

網羅的に学びませんか?
 

基本的なウィジェットの使い方から、ページを作成する方法までカバーしています。デザイン性の高いランディングページの作成を考えている方にオススメです。 下のボタンから無料で受講できます。

かっこいいLP作りたくないですか?