今月のエキスパート Web クリエーター: セール シーズンの商品ページ

マンスリー エキスパート Web クリエーターズ チャレンジの 2 回目の反復では、参加者と表彰台のフィニッシャーを分ける競争が激化しました。

今月の受賞者は、私たちの好奇心を刺激しただけでなく、私たちの注目を集めました。

受賞した専門家に会って、受賞作品の背後にある秘密を解き明かしましょう。

Ecom の受賞者をご紹介します。

Elementorエキスパートの詳細

3^位： Md Firdous Ahmad

審査員のコメント: 「機能的には、WooCommerce 機能 (製品のカスタマイズ、評価など) をしっかりと使用した素晴らしいページです。」

インドの Md Firdous Ahmad 氏は、「独立した Web 開発者兼 UX デザイナーであり、インタラクティブで便利で楽しいユーザー エクスペリエンスを作成することに情熱を傾けており、より接続されたピクセルパーフェクトな世界を作成することに重点を置いています」と述べています。

Md の 3 位のエントリは、もともと Elementor で作成されたもので、「ブラック フライデーのセール中に割引オファーを入手したいユーザーを対象としています」と彼は言います。 「私のインスピレーションは、実用的な楽なユーザー エクスペリエンスを作成することでした。」

Md 氏は、ブレインストーミングを開始するとすぐにアイデアが動き出したことを明らかにしました。

彼は、ユーザー エクスペリエンスを最優先事項としてページを作成しました。

「コントラストが高く、一貫性があり、ユーザーにとってアクセシビリティが高い 2 つの色と 2 つのフォントのみを使用しました」と彼は付け加えます。 「レビュー自体が信憑性を提供するため、ポップアップ フォームを使用して製品をレビューする新しいエクスペリエンスを追加しました。」

このオンライン ファッション ストアのページは、16 歳から 80 歳までの購買力のあるすべての人を対象としており、リード ジェネレーション ファネルとしても機能します。

Md の主な目標は、「ユーザーがアクセスするデバイスに関係なく、どのデバイスでもページをレスポンシブでピクセル パーフェクトにすること」でした。

Hello テーマを使用して Elementor で構築されたこのページは、Jet Engine プラグインも使用して作成されました。 Elementor のテーマ ビルダーとグローバル設定で設計されています。

MD は、ストーリーテリングとビジュアル デザインを専門としています。 「私は驚くほどレスポンシブな WordPress、e コマース Web サイト、人目を引く、リードジェネレーション、およびコンバージョンを作成します」と彼は言います。

「あなたのアイデアを素晴らしいウェブサイトに変えるお手伝いができます。」

• エレメンタリスト 2020年以降
• 20以上のElementor Webサイトを構築
• 入選作品 →
• 専門家プロフィール →
• インスタグラム →
• ポートフォリオ →

共同²位：ビリー・アージェント

審査員のコメント: 「バリエーション、プロモーション ボトム バー、スクロールを促進するインタラクティブなアニメーションなどを備えた優れた単一の製品ページ。」

ロンドン出身のビリー・アージェントは、先月の順位を上げて共同準優勝を果たし、表彰台に上がりました。

Billie は、スタートアップ、中小企業、実店舗向けの設計、開発、マーケティング、SEO、およびホスティング ソリューションの提供を専門とするフルサービスのデジタル エージェンシーである Passionates の共同創設者です。

ファッション ウェアの購入を検討している 18 歳から 40 歳の女性向けに販売されたビリーの 2 位のエントリ「Symbony」は、基本的なジュエリー アイテムとより複雑なアイテムの両方を販売する「象徴的なジュエリー」を表すことを意図しています。

「各作品は手作りで、倫理的に調達され、長持ちするように作られています」と彼女は言います. 「コレクションは世界中の神話にインスパイアされており、各アイテムのデザインに反映されています (現在、ウェブサイトでは基本的なアイテムのみ)。」

Web サイトのデザインは、スムーズで使いやすいユーザー エクスペリエンスを生み出すように選択されたと、Billie 氏は言います。

慣例を破り、製品ページには最も重要な要素のみが掲載されています。 大きな製品グリッドには、さまざまな角度から製品が展示されています。

右側には、レビューの数がすぐに表示されます。 星をクリックすると、より詳細なレビューにスクロールします。

製品ページは、ブランドが何を表しているかについての理解を深めることにより、レビューと信頼要因を通じて潜在的な顧客との信頼関係を構築することを目的としています. 一番の目的は売上アップです。

「私たちは、ユーザーが決定を下すために必要な要素をすべて表示することで、プロフェッショナルなデザインを通じてこれを達成することを目指しました」と Billie 氏は言います。

「今年のブラック フライデーのセールでは、キュートなブラック フライデーの猫を使用しました。その目は、マウス トラックを使用して Web サイトであなたを追跡します。」

猫の尻尾は Lottie のアニメーションであり、ウェブサイトの下部にあるローリング テキスト バナーも同様です。 「この形式を選んだのは、セールス広告が UX に影響を与えないようにするためです」と Billie 氏は付け加えます。

デフォルトの WooCommerce バリエーション ドロップダウンからの UX を改善するために、Billie 氏は、「『Variation Swatches for WooCommerce』という名前の無料のプラグインを使用して、選択フィールドを金属タイプの視覚的な色に変換し、リング サイズの番号付きの円に変換しました」と述べています。

「さまざまな場所のリング サイズを表示する Elementor を使用して、「サイズ ガイド」ポップアップも作成しました」と彼女は言います。

より詳細な情報を含めるために、JetEngine でカスタム製品フィールドが追加されました。 その下には、信頼要素を含むカスタム アイコンがあります。 最後に関連商品をJetWoobuilderで表示。

このページは、Astra テーマを使用して Elementor で構築され、WooCommerce、WooCommerce のバリエーション スウォッチ、Jet Engine、Jet WooBuilder、Jet SmartFilters、および JetTabs プラグインも使用して作成されました。 Elementor の Theme Builder で設計されています。

Billie のデジタル エージェンシーである Passionate は、シニア エキスパートの幅広い専門知識を網羅しています。 「そのため、プロジェクトの複数の側面を同時に計画して作業することができ、全体的なタイムラインとコストを最適化できます」と Billie 氏は言います。

• 2017年以来のエレメンタリスト
• 130以上のElementor Webサイトが構築されました
• 入選作品 →
• 専門家プロフィール →
• フェイスブック→
• ポートフォリオ→

共同²位：サイモン・ベリー

審査員のコメント: 「高度な製品セレクションとパーソナライゼーション、優れたビジュアル、デスクトップとモバイルの両方でのスムーズな UX を備えた、単一製品の素晴らしいファミリー ストアです。」

サセックスに拠点を置く Simon Berry は、妻の Kate と一緒にウェブ デザインとデジタル マーケティングのビジネスを家族で営む共同経営者です。 Simon は、2019 年のブラック フライデー ディール中に「2 年前に Elementor に切り替えました」。

サイモンの次点エントリーは、2020 年 3 月にパンデミックのロックダウンが始まったときに妻が裁縫を始めたときに生まれました。この趣味はすぐに小さなビジネスに変わりました。

「そのため、オンライン ストアを作成する必要がありました」と彼は言います。 「彼女は倫理的に作られた、明るく楽しくカラフルなプリントの子供服を作っているので、ウェブサイトにもこれを反映させる必要がありました。」

英国の夫と妻のデュオは、ウェブサイトに彼らの心の特別な部分を追加しました。 彼女はカメラの前にいるのが好きだと思います！」 サイモンは認める。 「だから、たくさんのモーション エフェクトを使用して、サイトや製品ページをナビゲートする際に楽しくて幸せな気分になるようにしました。」

季節や特別なプロモーションによって変更されるファブリックの選択肢が非常に多かったため、さまざまな購入オプションとファブリックすべてに対応するために、完全にカスタマイズされた動的なテンプレートを作成する必要がありました。

「これは、Elementor と ACF Pro を介してループと動的タグを使用して、各製品ページに正しい WooCommerce 製品情報を入力することを意味していました」と Simon 氏は言います。

「WC 製品編集ページにもいくつかのカスタム オプションを追加したので、表示するために必要なすべてが可能になり、顧客がオーダーメイドの選択を行えるようになりました。」

このウェブサイトは、倫理的なファブリック、プリント、デザインを最大限に活用することに重点を置いて、退屈なハイストリートの「男の子は青、女の子はピンク」から脱却したい保護者のために作成されました。

主な顧客層は保護者、特に母親であったため、「サイトや製品ページをブラウジングしている間、彼らが笑顔になるように、UI/UX でこれを利用することにしました。」

これは完全に機能する Web ストアであり、毎日注文を受け付けているため、ライトボックス機能を使用して表示する高品質の画像など、ユーザーが見ているものに興奮することが注文の生成に役立つことを知っていました。

サイモンは、「そして、それはうまく機能しているようです」と言います。

Web サイトには、ダッシュボードの CPT を介して追加されたファブリック ギャラリー用の追加機能があり、カテゴリにグループ化され、割り当てられた製品ページとメインのギャラリー ページの両方に自動入力されます。

製品ページに新しい生地や季節の生地を自動的に表示し、メインのギャラリー ページにさまざまなメーカーを表示することで、Simon は新しい生地を Web サイトに追加するのにかかるワークフローの時間を短縮することができました。

Hello テーマを使用して Elementor で構築されたこのページは、ACF Pro、Dynamic.ooo、Ele Custom Skins、WooCommerce、および Rank Math プラグインも使用して作成されました。 Elementor のテーマ ビルダーとグローバル設定で設計されています。

Simon は、オンライン デジタル マーケティングおよびビジネス開発ソリューションの提供において 14 年以上の経験を持ち、中小企業がオンラインでの認知度を高めるのに役立ちます。 自動車、慈善団体、公益事業、取引、建設、小売。

「私はウェブサイトのデザイン、e コマースの開発、および SEO を専門としていますが、顧客ベースの拡大を支援するためにビジネス開発にも熱心に取り組んでいます」と彼は言います。

「私たちは、新しいプロジェクトに取り組み、顧客をビジネスに引き付ける創造的で魅力的な方法を考え出すのが大好きです。」

• 2019年以来のエレメンタリスト
• 構築された30以上のElementor Webサイト
• 入選作品 →
• 専門家プロフィール →
• フェイスブック →
• ポートフォリオ →

第¹位およびコミュニティ チョイスの勝者: Rodrigo Valdez

審査員のコメント: 「評価、時限プロモーション、コンバージョン ポップアップ、製品説明、CTA の適切な広がりを備えた優れたメイクアップ製品ページ。 本物みたい！」

今月のグランド チャンピオン ウェブ クリエーターおよびコミュニティ チョイスの受賞者は、パラグアイ出身の独立したクリエイティブである Rodrigo Valdez です。

過去 5 年間だけでも、企業、著名人、地元の市場代理店と提携して 50 以上のレスポンシブ Web サイトを作成してきたロドリゴは、たまたまベテランのエレメンタリストでもあります。

Rodrigo は、1 位の製品ページのインスピレーションについて次のように説明しています。 対象は女性でした。」

彼は、典型的な物語を混乱させたかったと述べています。

ターゲット ユーザーは、健康および美容製品のオンライン購入を探している 15 歳から 50 歳までの女性です。 購入を促進することとは別に、ウェブサイトはブランドの露出を増やすようにも設計されました.

「Web サイトは、Lacoste や Calvin Klein などのオンライン ストアなどの Web サイトからインスピレーションを得ています」と Rodrigo 氏は言います。速度。"

サイバー ウィークやブラックフライデーなどのプロモーションの週に焦点を当てたホームページのデザインは、いくつかの人気商品を強調することで、ストア全体が割引されていることをユーザーに示しています。 各製品には、注目の割引があります。

状況に応じて、ポップアップは、ユーザーがホームページまたは (非製品) ページで一般的にアクションを実行するのに役立ちます。

「私は、プロモーションにサブスクライブする方法でユーザーにメールアドレスを尋ねることで、リードジェネレーションを探していました」と Rodrigo 氏は明かします。

「製品ページでは、ポップアップがアクティブになり、オファーが終了するまでの残り時間カウンターが表示されます (「カートに追加」または「購入」アクションを促進するため)。」

Kadence WP テーマを使用して Elementor で構築されたこのページは、Elementor、Elementor Pro、FlyingPress、Flying Images、SaveSVG、および Jet Compare Wishlist プラグインを使用して作成されました。 Elementor のグローバル スタイリングとテーマ ビルダーを使用して設計されました。

Rodrigo のサービス リストには、パフォーマンスの高い Web サイトの作成や、既存の Web サイトを最適化してパフォーマンスと速度を向上させることが含まれます。

彼のコミットメントは、「MADE IN IDEALS」のエクスペリエンスを作成することです。クライアントと、それを構築することを選択したチームのためにエクスペリエンスを作成するという決定が非常に重要であることを理解しているからです。

「それが、私たちがあなたに約束する理由です。あなたのプロジェクト、ユーザー、そしてチームのために最善を尽くし、常に正しいことをするよう努めることです」と Rodrigo は言います。 「私たちの品質基準は、#MadeInIDEALS 製品に署名する前に最高レベルのままです。」

「私たちは、素晴らしい旅の仲間となるさまざまな人々と協力しています。」

• 2018年以来のエレメンタリスト
• 構築された60以上のElementor Webサイト
• 入選作品 →
• 専門家プロフィール →
• インスタグラム →
• ポートフォリオ →

次回のマンスリー エキスパート チャレンジ: すべてを支配する 1 つのフォーム

受賞者の皆様、そして参加者の皆様に心から感謝いたします。

次回のマンスリー エキスパート チャレンジでは、Elementor の Form Builder を使用して究極のフォームを作成するチャンスです。 創造力を存分に発揮して、フォームを使ってどれだけ独創的であるかを世界に示しましょう。

審査員団とコミュニティ メンバーは、フォームのコンテキスト、ユーザー フロー、クリエイティブなデザインをチェックし、実際に機能することを確認するためにフォームを試します。 当社の内部パネルは、カスタムの「ありがとう」ページを使用する人にもボーナス ポイントを与えます。

入力方法は次のとおりです。

• Elementor Experts Networkプロフィール ページで最高のフォームを披露してください。
• 「 Experts Challenge – Elementor Form Builder Edition 」というラベルを付けます。
• Elementor Expert のリンクをハブの公式投稿にドロップします。
• 当社の利用規約を必ず遵守してください。

提出は、 11 月 30日午後 6 時(GMT+3)から12 月 14日まで受け付けています。

すべての受賞者は、 12 月 22 日に公式ハブおよびFacebook コミュニティ ページで発表されます。

手遅れになる前に、デザインを作成してエントリーを送信してください。