ディビデザインショーケース：2019年9月からの新規提出

公開: 2019-10-02

毎月開催されるDiviShowcaseでは、コミュニティメンバーが作成した10のAwesome DiviWebサイトをご覧いただけます。毎月、コミュニティから提出された最高のDivi Webサイトを紹介します。今日は、9月の上位10のWebサイトを紹介します。投稿全体を通して、私を各Webサイトに引き付ける私のお気に入りのデザイン機能のいくつかを指摘します。

私はあなたがそれらを好きであることを願っています！

ディビデザインショーケース：2019年9月からの新規提出

1.さまよう花嫁

このサイトはKelseySpectreによって提出されました。花のアートワークでレイアウトを囲みます。ヘッダーは、ハンバーガーメニューを左側に、CTAを右側に配置します。スライダーには設定の写真が表示され、垂直に配置されたナビゲーションが含まれます。テキストモジュールはこれと重複し、サービスを表示するためのスタイル付きリンクを使用して会社に関する情報を提供します。この下には、エレガントなフォントのタグラインが付いたセクションがあります。 About情報のあるセクションには、前のセクションと重なる画像が含まれています。お客様の声は、片側に名前が付いた全幅のセクションに表示されます。私は、サイトの他の部分と同じデザインに従い、カードのように表現するテキストモジュールを含む下部のCTAが好きです。カスタムフッターには、Instagramフィードが埋め込まれています。

サイトを訪れる

2. RHN CPA

このサイトはGuillaumeBourdagesによって提出されました。私が最初に気づいたのはメニューでした。ヘッダー要素はブロックされており、CTAが含まれていますが、目立つのはメガメニューです。メニュー項目にカーソルを合わせると、片側に画像が表示された全幅のセクション、ボタン付きの説明、およびテキストリンクのいくつかの列が表示されます。ヒーローセクションには、説明とCTAを含む大きな活字のタグラインを含むフルスクリーン画像が表示されます。スクロールすると、CTAを含む大きなグラフィックが表示されます。オーバーレイに名前の付いたカードとして写真を表示する[場所]セクションが好きです。いくつかのフルスクリーンセクションには、片側に画像があり、反対側に情報があります。お客様の声は、フルスクリーンのスライダー内に表示されます。また、スタイル付きの連絡先セクションと画像付きのカスタムフッターもあります。

サイトを訪れる

3.アイリサ

このサイトはクリスティヒルによって提出されました。これはシンプルでユニークなレイアウトです。ヒーローセクションは4つの列に分かれています。最初はロゴを表示します。次の3つは、カテゴリの画像を表示します。カテゴリ名はそれらの上に表示されます。名前または画像をクリックすると、そのカテゴリのギャラリーに移動します。次のセクションでは、写真家に関する情報を提供し、テキストマスク付きの丸で囲んだ画像を含めます。これに続いて、埋め込まれたInstagramフィードと、ソーシャルフォローボタン付きのロゴがあります。ギャラリーページには画像がモザイクで表示され、プライマリメニューの下にセカンダリメニューのように見えるフィルターが含まれています。

サイトを訪れる

4.アランツァー

このサイトはAranzerConstructionによって提出されました。ヒーローセクションには、画面上を移動するときにマウスカーソルに続く複数のレイヤーに画像とグラフィックが表示されます。 Learn About Usセクションには、情報と、Aboutページにリンクし、番号付きの宣伝文を使用してそれらを操作するプロセスを示すボタンが含まれています。宣伝文の別のセクションは、会社を使用することの利点を示しています。サービスのセクションには、CTAと作業のイメージが表示されます。また、カスタムフッターのすぐ上に見積もりをリクエストするためのCTAも含まれています。リクエストCTAもメニューに表示されます。ブログページには、最新の記事の投稿スライダーが表示されます。 [サービス]ページには、重なり合う画像が交互に多数表示されます。

サイトを訪れる

5.ラティチュードパーク

このサイトはRustyRichによって提出されました。ヒーローセクションには、背景画像とグラデーションオーバーレイが含まれています。このオーバーレイには、片側に特大のテキストが表示されたタグラインと、それぞれにグラデーションの背景が表示されたリンクのリストが含まれています。バッジとフォームがヒーローセクションと重なり、会社に関する情報を提供します。宣伝文のセクションはCTAとして機能します。プロジェクトセクションでは、画像とタイトルを使用した作業の例を示します。お客様の声は、サイト全体のテキストと一致する青色の背景の上に3列のセクションで表示されます。スケジューリングCTAは、視差の背景画像の上に配置されます。ブログセクションには、青いタイトルを含むシンプルなカードの最後の3つの投稿が表示されます。これらのページは、色と価格表をうまく利用しています。

サイトを訪れる

6.サラアントワープ

このサイトはChristianMauererによって提出されました。これは面白い雑誌のデザインです。ヒーローセクションには、サイトのタイトルと画像を囲むタグラインを含む全画面画像が表示され、場所は縦に表示され、三角形は挿入された紹介文を作成します。スクロールすると、メニューと、クライアントが紹介されているメディアロゴ、ボタン、紹介文、サイト所有者の画像が表示されたセクションが表示されます。次のセクションは、大きなタイトルが縦に印刷された画像と所有者からの引用を示しています。いくつかのセクションには、大きなタイトルと複数列のレイアウトまたは互いに重なり合う多数の画像、およびCTAが含まれています。フレーム付きの画像、ドロップキャップ、真の視差の背景を作成するテキスト、詳細を読むためのボタンを備えた紹介文のセクションが好きです。

サイトを訪れる

7.Ultratekソリューション

このサイトはEtiennede LaRucheによって提出されました。ヒーローセクションでは、片側にCTAが表示され、反対側に3つのスタイル付きカラーシェイプが背後にあるスタイル付きシェイプの画像が表示されます。商品セクションには、ボックスの影とホバーに境界線を追加する効果のある商品が表示されます。 2つの大きな画像には、片側に色付きの境界線と、境界線に一致するオーバーレイのテキストが含まれています。会社のロゴは、ボックスの影が付いたスリムなセクションで表示されます。いくつかのセクションには、テキストモジュールと宣伝文を含むCTAが含まれています。下部のセクションが好きです。画像には、テキストモジュールと重なり、その上のセクションと重なる1つのコーナーに色の斑点があるボックスシャドウが含まれています。また、ホバー時に片側にカラーバーを追加するドロップダウンメニュー項目も気に入っています。

サイトを訪れる

8. Mepack-cz

このサイトはTomašOrliczekによって提出されました。画面はページ全体で2色に分割され、左側が黒、右側が白になっています。ヒーローセクションでは、中央に6軸ロボットが表示され、画像の上に製品名が表示されます。黒側に表示されるテキストは白で、白側に表示されるテキストは黒です。次のセクションでは、中央に別のロボットを表示し、両側に宣伝文を表示し、説明のために画像の中央にテキストモジュールを表示します。別のロボットがこれからぶら下がっていて（GLaDOSスタイル）、ソーシャルメディアアイコンが付いたフッターにつながります。ソーシャルメディアアイコンは、ハンバーガーアイコンをクリックするとメニューの上部にも表示されます。製品ページには、背景が黒と白が交互になっている各ロボットが表示されます。製品ページには、片側にコントローラーがあり、反対側に仕様があるロボットが表示されます。

サイトを訪れる

9.ゴールマスターフィットネス

このサイトはSteveLavineによって提出されました。ヒーローセクションには、オーバーレイにテキストが含まれるフルスクリーンの背景画像が表示されます。テキストは興味深い連動文字を使用しています。スクロールするとロゴが変わります。次のセクションでは、サイトの目的に関する情報を提供するために3つの画像を表示します。 [概要]セクションには、片側にボタンがあり、反対側に埋め込まれたビデオがあり、それらを区切る線で情報が表示されます。全幅の証言はこれに続き、サイトに一致するようにスタイル設定された境界線のある丸で囲まれた画像が含まれています。私は成功の4つの柱を示すセクションが好きです。次のセクションにつながる背景画像の上に、上部にアイコン、下部に画像の宣伝文句が表示されます。タイムラインは、片側に画像、反対側に箇条書きを交互に配置して作成されます。真ん中にロゴが表示され、進むにつれて色が塗りつぶされます。いくつかの画像がさまざまなページにリンクしています。

サイトを訪れる

10.恐れる

このサイトはTobiasDrevenstedtによって提出されました。サイト全体で多くの色要素とアニメーションを使用しています。ヒーローセクションでは、片側にCTAが表示され、反対側に画像が表示されます。いくつかのテキストモジュールが画像の上に配置され、製品に関する仕様やその他の情報を提供します。ロゴスライダーは、このセクションと次のセクションに重なっており、サービスの興味深いグラフィックが含まれています。情報はスタイル付きトグル内で提供されます。私は次のCTAが好きで、背景が暗く、一隅が色になっています。色はCTAのボタン内でも使用されます。ソリューションの宣伝文も好きです。ホバーするとアニメーション化されて色に変わるグレー表示のグラフィックが含まれます。サービスは、片側の色を含むトグル内に表示されています。サービスのカテゴリは、マルチカラーのアイコンを使用します。また、スタイル付きフィルターを備えた産業セクションも気に入っています。

サイトを訪れる

結論は

これは、9月のコミュニティDiviWebサイトのベスト10の提出物です。これらのサイトは素晴らしく見えます、そしていつものように私たちはあなたの提出に対してみんなに感謝したいと思います！

独自のデザインを検討したい場合は、エレガントなテーマのドットコムでネイサンの編集者にメールしてください。メールの件名は必ず「DIVISITESUBMISSION」にしてください。

コメントもよろしくお願いします！これらのウェブサイトについてあなたが好きなことを教えてください。彼らがやったことがあれば、ブログで教えてほしいと思います。

Doppelganger4 /shutterstock.com経由の注目の画像