ElementorCloudログインページをカスタマイズする方法

Blair Jersyer Elementor Jul 27, 2022

Elementor Cloudをしばらく使用している場合は、「シンプル」に見えるログインページが表示されている可能性があります。 シンプルさが好きなのは事実ですが、オリジナルでユニークなアイテムが好きです。 家の入り口のように機能するログインページに関しては、他の家の玄関ドアとは異なる必要があります。

このチュートリアルでは、ElementorCloudWebサイトのログインページをカスタマイズする方法を紹介します。 しかし、最初に、本当にこれが必要かどうかを見てみましょう。

カスタムログインPage?を作成する理由

なぜ確かに! さて、私が上で述べたように、私たちは皆、その際立ったユニークなものを持ちたいと思っています。 メンバーシップで非常に成功しているeコマースWebサイトを作成するとします。 他のElementorCloudログインページのように見えるログインページを持っていても大丈夫ですか?絶対にありません。

カスタマイズされたホームページを持つことの利点の1つは、顧客の心にブランドを強化することです。これは明らかに良い点です。 ログインページをカスタマイズするために使用できる方法にジャンプしましょう。

素晴らしいウェブサイトを作成します

最高の無料ページビルダーElementor を使用

今すぐ始める

LoginPress

LoginPressは、WordPressのログインページをカスタマイズできる無料のWordPressプラグインです。 このモジュールのおかげで、バックグラウンドやログインフォームを変更したり、他の認証メカニズム(pro)を追加したりできるようになります。 たとえば、ユーザーがGoogle、Twitter、Linkedinなどを使用してログインできるようにすることができます。

このプラグインはWordPressリポジトリで無料ですが、いくつかの機能を含むプレミアムバージョンもあり、年間49ドルで利用できます。

主な機能

  • カスタムログインの背景
  • カスタムロゴ
  • ソーシャルログイン
  • ログインページフッターを追加する
  • 美しいボタン
  • 多様なログインフォームスタイル
  • 許可されていないページ
  • カスタムウェルカムメッセージ

ElementorCloudログインページの背景の変更

まず、ほとんどが白いElementorCloudページを変更することから始めます。 プラグイン(無料版も含む)をダウンロードすると、「 LoginPress 」という名前のメニューが表示されます。 そこから、「カスタマイザー」をクリックします。

これにより、テーマカスタマイザーに似たカスタマイザーが開きます。 そこから「背景」をクリックします。

デフォルトでは、プラグインには、使用できる事前定義された背景が付属しています。 ただし、必要に応じて独自の背景をアップロードすることもできます。

完了したら、変更を保存します。

Elementorログインボタンを非表示にする方法

ログインボタンを使用すると、Elementorアカウントを持っている人なら誰でもログインできます(Webサイトへのアクセスを許可する必要があります)。 顧客が自分で作成したアカウントで常にログインするようにしたい場合は特に、このオプションは必要ない場合があります。

ここでは、CSSオプションを使用して、Elementorのログインボタンを表示するセクションを非表示にします。

次のコードをCSSテキストエリアに貼り付ける必要があります。

.lwe-button-container {
    display: none !important;
}

この瞬間から、次のようなログインページが表示されます。

Elementor管理バーを非表示にする方法

ログインページの上に、ElementorおよびElementorブランドへのリンクとWebサイト名を示す管理バーが表示されます。 これを非表示にする場合は、同じCSSセクションに次のCSSスニペットを追加できます。

.e-admin-bar {
    display:none!important;
}

これを行うと、フォームが上部に近くなりますが、これはあまり美しくありません。 次に必要なのは、フォームを中央に配置して、モバイルとデスクトップのどちらでもより魅力的に見えるようにすることです。

そのためには、CSSセクションにも次のコードを貼り付ける必要があります。

body.login {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

カスタムロゴを追加する方法

残念ながら、ロゴオプションはElementorCloudログインページでは機能しません。 これは、WordPressではなくElementorによって作成されているためです。 したがって、プラグインはそのロゴを効果的に更新しません。

ロゴを変更するには、最初にWordPressアイコンを非表示にして、ロゴを挿入する必要があります。 次のコードは、デフォルトのWordPressアイコンを非表示にします。


#wp-logo i.dashicons {
    display:none !important;
}

JavaScriptを使用して、ロゴを挿入します。 ここで最初に行うことは、メディアにロゴをアップロードし、URLをロゴにコピーすることです。

同じセクションにCSSがあるので、次のJavaScriptコードを挿入します。

// we'll create the image
let image = document.createElement( 'img' );
image.src = 'https://codewatchers.elementor.cloud/wp-content/uploads/2022/07/site-logo-1.png';

// we'll give some style but this is optional
image.style.cssText="background:#333;margin: 15px 0;";

// we'll add the image to the logo section
document.querySelector( '#wp-logo' ).appendChild( image );

// we'll disable the default logo height
document.querySelector( '#wp-logo' ).style.cssText="height:auto";

最後に、次のようなログインページが表示されます。

トラブルシューティング

背景の編集が機能しない場合があります。 CSSコードを使用して背景を編集する必要があります。 まず、前と同じように、使用する背景をアップロードして、CSSスニペットに追加する必要があります。

body.login {
    background-image: url(https://codewatchers.elementor.cloud/wp-content/plugins/loginpress/img/gallery/img-3.jpg) !important;
    position: relative;
}

「ttps://codewatchers.elementor..../gallery/img-3.jpg」というテキストを実際の背景に置き換えて、設定を保存してください。

このチュートリアルの終わりまでに、 ElementorCloudのログインページをカスタマイズできるようになることを願っています。