WoodMartログイン登録ポップアップスタイルのカスタマイズチュートリアル

作動中ウッドマートのテーマEコマースサイトを構築する際、ログイン/登録ポップアップウィンドウはユーザーが最も早く目にするインターフェースの一つです。もしこのポップアップがブランディングにそぐわないスタイルであれば、ユーザーの第一印象を損なうことになります。カスタマイズ様式化されたアプローチにより、このモジュールはブランドのビジョンに沿ったものとなり、全体的なプロ意識と認知度を高めている。

ステップ1：ログイン/登録ポップアップを有効にしてプレビューする

始める前に、テーマの設定でWoodMartが有効になっていることを確認してください！ポップアップウィンドウログイン機能：

WordPressのバックエンドに移動し ウッドマート > テーマ設定.
とおす マイアカウント 設定ページ。
ダニ ログイン/登録タブ(ポップアップログイン機能を有効にする）。

保存後、あなたのウェブサイトのホームページにアクセスし、右上の「ユーザーアイコン」をクリックし、ポップアップウィンドウが正常にポップアップすることを確認してください。

この時点で表示されているポップアップのスタイルは、WoodMart がデフォルトで提供するベースルックです。

ステップ2：テーマ設定パネルで基本的なスタイルを調整する

WoodMartのパワーは、コードを書かなくてもテーマパネルで多くのスタイルを調整できることです：

入り込む WoodMart > テーマ設定 > スタイリング > ボタンポップアップウィンドウのボタンの色、フォントサイズ、角丸などを統一的に変更することができます。

出向く スタイリング > フォーム枠線の色、入力テキストの色、背景色など、フォームの入力ボックスのスタイルを変更することができます。

ある ヘッダービルダー トップポップアップのログインポータルの場合、アイコンのスタイルやラベルのフォントを変更することもできます。

ポップアップウィンドウのスタイルをサイト全体の配色と統一し、ブランドカラーのメイントーンを強調すると同時に、ボタンテキストと背景のコントラストに気を配り、ユーザーに見えないようにすることをお勧めします。

ステップ3：カスタムCSSで細部をさらに装飾する

内蔵のセットアップが需要を満たさない場合は、少し追加することができる。カスタムCSSを使用して、より細かいスタイル調整を行うことができます。一般的なカスタマイズの例をいくつかご紹介します：

ポップアップ・ウィンドウの背景色と角丸の変更

.wd-popup.popup-login{。
  background-colour: #ffff；
  box-shadow: 0 10px 30px rgba(0,0,0,0.1)；
  box-shadow: 0 10px 30px rgba(0,0,0,0.1); }.
}

入力ボックスのボーダーとフォーカスの状態を変更する

.woocommerce-form .form-row input.input-text { {.form-row入力.入力テキスト
  border: 1px solid #ccc；
  input-text { border: 1px solid #ccc; border-radius: 6px；
  input-text { border: 1px solid #ccc; border-radius: 6px; padding: 10px; font-size: 14px; font-size: 14px
  font-size: 14px; }.
}

.woocommerce-form .form-row input.input-text:focus { 以下のようになります。
  box-shadow: 0 0 0 1px #162ae8; }.
  box-shadow: 0 0 0 1px #162ae8; }；
}

ボタンの色とフォントの変更

.button.wd-login-submit{。
  background-colour: #162ae8；
  font-weight: 600; font-weight: 600; wd-login-submit { background-colour: #162ae8; color: #fff; wd-login-submit
  
  border-radius: 6px; }.
}

.button.wd-login-submit:hover{。
  background-color: #0d1cb0; } .button.
}

上記のCSSコードを WordPressバックエンド > 外観 > カスタマイズ > 追加CSS で保存し、フロントページを更新して効果を確認する。

ステップ4：多言語または多段階フォームのサポート（オプション）

あなたのウェブサイトが多言語ユーザーを対象としている場合、次の利点を活用できます。 WPML もしかしたら ポリラン WoodMartはこれらのプラグインと互換性があり、対応するログイン/登録フォームのテキストを翻訳するだけです。

また、最初のステップでメールアドレスを記入し、2番目のステップでパスワードを設定するなど、登録プロセスを複数ステップのフォームにしたい場合は カスタムログインポップアップショートコード に統合されたサードパーティのポップアップ・プラグインを使用することもできます。ウッドマートのポップアップをトリガー構造に追加した。

ヒント：過剰なカスタマイズは避け、シンプルで使い勝手の良いものにする！

カスタム・スタイルは、ブランドを視覚的に強化することができるが、デザインをやりすぎて、ブランドを損なわないようにしなければならない。けいしきユーザビリティの。いくつかの提案を紹介しよう：

入力ボックスは、境界がはっきりしていて、コンパクトになりすぎないように十分なスペースがあること。
すべてのボタンは、明瞭なテキスト、対照的な色、明白なクリック・フィードバックを持つことが推奨されます。
ポップアップコンテンツが多い場合は優先順位をつけるモバイル・レスポンシブこぼれないようにする。

概要

WoodMartのログイン/登録ポップアップのスタイルをカスタマイズするのは、複雑なことではありません。カラーフォントを少し最適化したい場合でも、視覚的なスタイルを徹底的に統一したい場合でも、組み込みの微調整と少しのCSSで可能です。明確な考え方と少しの調整で、あなたのウェブサイトの第一印象はさらに良くなるでしょう。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：[email protected]
④ 勤務時間: 月～金、9:30～18:30、祝日休み