マンスリーテンプレートキット#2:美しいフィットネスウェブサイトを構築する

公開: 2019-09-03

先月、私たちはElementorテンプレートキットの毎月のシリーズの最初のものをリリースしました。 私たちのコミュニティからの反応は素晴らしかったです。 多くのユーザーがこのリリースに夢中になり、さらに多くのことを望んでいました。

Introducing-Elementor

今月は、プロのジム専用のウェブサイトキット全体を形にしてリリースすることにしました。 あなたのプロテインシェイクをつかみ、それらの上腕二頭筋を曲げて、その鉄をポンプでくみます! このキットはきっとあなたをバフにさせるでしょう。

このキットは、すべてのElementor Proユーザーに100%無料で提供され、次のものが含まれます。

  • 7コンテンツページ
  • ヘッダーとフッターのテンプレート
  • ポップアップテンプレート
  • 404テンプレート
  • 単一およびアーカイブテンプレート
  • 〜60のCC0画像を無料で使用
  • 9オリジナルアイコン
  • 2つのうまく設計されたお問い合わせフォーム
  • 幅広いアニメーションとモーションエフェクト

このキットを使用する理由

Why-Use-This-Kit

以前のキットと同様に、このテンプレートキットを完成させる過程で手抜きをしていません。 それは単なる目玉である以上のことのために作られています。 Elementorのキットをテンプレートの海で際立たせる利点は次のとおりです。

  • プロフェッショナルなデザイン–すべてのページ、セクション、ウィジェットは、ベストプラクティスを念頭に置いて使用および編集されています。
  • 豊富な要素の配列–キットにはさまざまなElementor機能が含まれています。 これらには、ポップアップ、ブレンドモード、視差スクロール、ナビゲーターなどが含まれます。
  • 画像の最適化–すべての画像サイズが最適化されています。
  • 名前付きセクション–ナビゲーターで各レイヤーに名前を付けたので、ページ上のすべての要素を簡単に特定して選択し、何が何をするのかを知ることができます。
  • 100%モバイル対応–すべてのアセットはモバイル対応を念頭に置いて構築されています。

ジムテンプレートキット:大胆で活気のあるデザイン

毎月のテンプレートキットを使用して、ユーザーに幅広いデザインを提供できるようにしたいと考えています。 これが、以前のデジタルエージェンシーキットとはまったく異なるジムテンプレートキットをリリースすることにした理由です。

以前のキットはミニマルでシンプルでしたが、このキットは大胆で鮮やかな色と印象的な要素が含まれています。 運動とスポーツについて話しているので、テンプレートの多くの要素に動きを取り入れました。 スポーツやレクリエーションは視覚的なカテゴリに分類されるため、多くの画像も含まれています。

鮮やかなブルーとイエローのネオンカラーが大胆なデザインに貢献しています。 また、世界中のジムでアスリートがよく着用している色にも対応しています。
タイポグラフィも私たちのデザインにふさわしく、「レーシングサンセリフ」が特徴です。
キットの大胆で鮮やかなデザインは、他の分野向けにカスタマイズするのを難しくするかもしれません。 ただし、コーチング、ヨガ、その他のアクティビティ関連の分野などのトピックには最適な場合があります。

アセットを調べて、何が含まれているかを見てみましょう。

ジムのホームページテンプレート:クールな視差効果

Home-page

あなたはあなたがホームページで見る最初のヒーローセクションを愛さなければなりません。 上半身裸でバフな運動愛好家のイメージは無視できず、すぐに来場者の注目を集めます。 メッセージングは​​同じ考えに適合し、「できる限り最高になりなさい」のような動機付けの力の文章があります。

スクロールすると、エクササイズマシンの実際の動きをシミュレートするように画像が移動します。

動きのテー​​マを継続する微妙なアニメーションの使用など、ページの残りの部分には多くの注目すべき要素があります。 カードのような画像が前後に配置され、分割線がページのさまざまな領域を分割します。

アバウト&トレーナーページ:ジムクルーにスポットライトを当てる

gym-about-trainer

あなたはジムのaboutページではるかに視覚的になることができます。 このページは、ウィジェットや背景にまたがる、いくつかの単語とたくさんの画像を使用して、ジムのストーリーを伝えています。

すべての適切なジムは、その最も価値のある所有物であるトレーナーを強調する必要があります。 このテンプレートでは、TRXトレーナーであるMariaMoralesを強調しました。 このページには、プログレスバーを使用したマリアのスキルが示され、下部に別の召喚状の代替案が含まれています。

クラスとフィットネスページ:情報を表示するクリエイティブな方法

Classes

あなたはボディービルダー以上のCrossFitの人ですか? このページには、クラス、リスト、さらには投稿に使用できる素敵なレイアウトがあります。 下部にある証言カルーセルは、ジムの有効性の社会的証明として機能します。

このページはフィットネスクラス向けですが、訪問者が簡単に消化して読みやすい方法でコンテンツが豊富なページを作成する方法の優れた例として役立ちます。 異なる背景色を使用した各セクションの明確な分離、およびアイコンリスト、プログレスバー、アコーディオン、および列コンテンツの巧妙な使用により、このページの見栄えが良くなります。 このページには、訪問者がスクロールしてサインアップするように促す粘着性のあるサイドバーも含まれています。

価格、ニュース、連絡先ページ:キットページの完成

Blog+Post+contact+pricing

このページでは、エクササイズとスクロール効果の一致を繰り返しました。 これは、ウェイトリフティング効果を生み出すのに役立ちます。 ジムの最新情報を毎日入手する必要があるスポーツマニアのために、フィットネスに関する最近の記事を視覚的に表示するニュースページを作成しました。

新しい加入者の絶え間ない流れなしには、ジムは生き残れません。 そのため、お問い合わせページには、営業時間、お問い合わせフォーム、住所、その他の連絡先の詳細が含まれています。

体のケアをする前に、中身のケアをしてください(駄洒落でごめんなさい)。

404ページ:画像は「0」として機能します

このページでは、404ページを構成する「4」と「4」の間にクリエイティブに配置された画像カルーセルをクリエイティブに使用しています。

ヘッダーとフッター:これらのネオンカラーを見逃すことはできません

Header+Footer

ジムのヘッダーは粘着性があり、キット全体の同じデザインに従います。 フッターについては、USP、連絡先の詳細、連絡フォーム、ソーシャルメディアのリンクを含む長期的なデザインを採用しました。

ポップアップ:クールなアニメーションボックス

ヘッダーの[参加]リンクをクリックすると、ポップアップが表示されます。 このキットでは、通常は箱入りのポップアップから抜け出し、ジムの特別な夏のセールのために、より興味深いレイアウトを作成しました。

キットの入手方法

うまく設計されたサイトは、うまく設計された体を刺激します! Elementor Proをお持ちの場合、この最先端のキットを楽しむために必要なことは、Elementorにアクセスし、テンプレートライブラリを開いて、「Gym」を検索することだけです。

次に見たいテンプレートは何ですか? 以下のコメントでお知らせください。