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

公開: 2019-09-01

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

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

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

1.マトリックスルーフィング

このサイトはChristianMcMinnによって提出されました。フルスクリーンの背景画像を使用して、利用可能な作業の種類を示し、オーバーレイにCTAを配置します。会社に関する情報は、片側に画像、反対側に箇条書きの2列のレイアウトで配置されます。 [続きを読む]ボタンをクリックすると、読者は[会社概要]ページに移動します。同様の2列のセクションには、詳細を読むためのリンクが記載された紹介文が表示されます。サービスは、大きな単色のアイコンが付いた宣伝文で表示されます。情報へのより多くのリンクは、暗いオーバーレイを使用してCTA内に配置されます。フッターには、デフォルトではスクロールしない白黒の全幅マップが含まれています。同じ家に異なる色の屋根が表示されているカラーガイドページが好きです。

サイトを訪れる

2.ブライトワークスグループ

このサイトはBrittBaueによって提出されました。回転するタイトルテキストの後ろに暗い背景パターンがあります。角度の付いた仕切りがヒーローセクションを次のセクションから分離し、垂直テキスト、タグライン、およびサービスを太字の緑色のテキストで表示し、ホバーを拡大します。次のセクションでは、灰色の背景に、上部と下部に角度の付いた仕切りが表示されます。大きなテキストは、読者をCTAダウンロードに導きます。サービスのセクションには、タイトルの垂直方向に配置されたテキストも含まれ、サービスが宣伝文で表示されます。簡単な紹介文のスライダーが大きなタイトルで紹介されています。別の角度の付いたセクションには、クライアントのロゴが表示されます。連絡先セクションはCTAを作成し、連絡先情報を提供します。メニューの中央からロゴがオフセットされているのが好きです。

サイトを訪れる

3.イスラ

このサイトはSaskiaLundによって提出されました。このサイトには、利用可能な休暇スポットの種類を示すために、ヒーローセクションに真の視差の背景画像が含まれています。オーバーレイには、スクリプトフォントのタグラインと、特定の宿泊施設を高度に検索できるタブ付きの検索ボックスが含まれています。ホバー効果のある高くて薄い宣伝文句は、予想される休暇の種類の画像と説明を示しています。スペシャルのセクションでは、スライダーで休暇を表示します。それぞれが画像と説明が付いた背の高いカードで、ホバー効果が含まれています。レンタルのセクションには、画像、説明、情報を含むカード内の場所が表示されます。イベントは全画面スライダーに表示されます。ブログセクションはトールカードのデザインと一致し、ホバー効果も含まれています。雑誌ページには、カテゴリ内の記事が複数列のレイアウトで表示されます。

サイトを訪れる

4.ヘッドシェッド

このサイトはGustavEspenesによって提出されました。 CTAとグラフィックは、真の視差の背景パターンの上に配置されます。グラフィックには、ポップアップオーバーレイでビデオを再生するためのボタンが含まれています。同様のグラフィックが、CTA、宣伝文、背景を含む要素としてサイト全体で使用されています。このサイトには、背景の作成に役立つスタイル付きの仕切りがたくさん含まれています。宣伝文句は互いにオフセットされており、興味深い垂直デザインを作成し、背景に溶け込む色を持っています。質問のセクションには、トグル内に回答が表示されます。宣伝文の別のセクションは、アイコンによる利点を示しています。また、全幅の紹介文スライダー、クライアントのロゴ、スタイル付きの連絡フォームも含まれています。チームメンバー向けの単一列の人物モジュールと、すっきりとしたデザインのブログページが気に入っています。

サイトを訪れる

5.リッチモンドを出現させる

このサイトはChristianSchickによって提出されました。このサイトでは、波状のセクション仕切りとともに多くの緑色のハイライトを使用して、レイアウトに興味深いが最小限のデザインを提供しています。ヒーローセクションは、一方の側にCTAを配置し、もう一方の側にセクションの仕切りと重なる製品例を配置します。次のセクションでは、一方に同様の製品を示し、もう一方に利点を示します。別のセクションには、サービスを表示する花を作成するためのスタイル付きの背景を持つアイコンが表示されます。プロジェクトは複数列のセクション内に表示され、片側に画像、反対側に説明が表示されます。紹介文は、画面の中央に配置され、次のCTAにつながるセクションの仕切りと重なるボックス内に配置されます。カスタムフッターには、ニュースレターフォームと重なる波状の仕切りも含まれています。サイト全体の緑色のハイライトが好きです。

サイトを訪れる

6.サウスサービスコーポレーション

このサイトはメルセデスブガリンによって提出されました。ヒーローセクションには、サービスの利点を示すスライドテキストが含まれています。これは、サービスを選択してヒーローセクションにフォームを配置します。フォームは片側に丸い角を使用し、ヒーローセクションの画像と重なります。次のセクションでは、スタイル付きのコーナーとシャドウを含む宣伝文内のサービスを示します。クライアントのロゴはスライダー内に表示されます。これに続くのは、ソーシャルボタンと従業員がログインできるボタンのある小さなセクションです。メニューには2つの異なるCTAが含まれています。セクションは波状の仕切りで分割されます。 [サービス]ページは同じデザインに従い、スタイル付きのトグルを追加して、各サービスに関する情報を提供します。トグルには、フォームに合わせて片側に丸い角があります。お問い合わせフォームも同様のデザインで、影が目立ちます。

サイトを訪れる

7.ソーシャルバンガロー

このサイトはKelseySpectreによって提出されました。ヒーローセクションでは、1つのコーナーにロゴが表示され、いくつかのコーナーに同様のグラフィックが表示されます。ヘッダーのグラフィックはサイト全体に配置されます。情報とCTAは一方の側に配置され、もう一方の側にはグラフィックが配置されます。メインメニューはこのセクションの下にあり、そのポイントまでスクロールしても画面の上部に表示されたままになります。紹介セクションでは、片側に画像が表示され、反対側にテキストのブロックが重なっています。 CTAはこれに続き、ホバーすると角度が変わるボタンが含まれています。ブログセクションには、サイトに一致する柔らかい色の投稿が表示され、タイトルのスクリプトテキストが含まれています。全幅CTAは、ヘッダーと同じ色とグラフィックを使用し、スクリプト化されたタイトルテキストを背景に配置します。同じ色とフォントを複数のレイアウトで使用するブログページのエレガントなデザインが大好きです。

サイトを訪れる

8.ダウンロードエクアカラオケ

このサイトはジェロシャノンによって提出されました。これは全体にたくさんの漫画のアニメーションがあります。ヒーローセクションでは、背景にアニメーションの漫画が表示され、オーバーレイにCTAが表示されます。グラフィックがセクションディバイダーに重なっており、アニメーション化された宣伝文が互いに垂直方向にオフセットされ、ディバイダーで追跡されて次のセクションにつながります。角度の付いた画像は、購入CTAとブログへのリンクを含む次のセクションにつながります。スターレビューは背景と重なり、別のCTAを提供します。埋め込まれたYouTubeビデオは傾いています。このサイトには、画像や色付きの角度を持ついくつかのCTAに加えて、多くの角度の付いた要素と仕切りが含まれています。

サイトを訪れる

9.繁栄する人物

このサイトはKateBrittonによって提出されました。背景内に色の斑点があり、片側のオーバーレイにスライダーがあります。スライダーのテキストはスライダーの画像と重なり、情報とリンクを提供します。スライダーのコントロールは、左上隅と右下隅に配置されています。次のセクションでは、マルチカラーのテキストと別の背景の斑点を使用して情報を提供します。単色の四角い宣伝文は、番号付きのタイトルを示し、ホバーすると色が変わります。別のCTAは、片側に画像を表示し、反対側に色の斑点とCTAを表示します。予約セクションでは、無地の背景にタイトルが表示され、地図を使用して場所が選択されます。ダウンロードCTAは、画像と重なるブロックに説明を配置します。これは、見事に目立つ大胆な色をたくさん使用しています。

サイトを訪れる

10.ブロックヘッドチャレンジ

このサイトはKeithGreenによって提出されました。ヒーローセクションは、オーバーレイ用のテクスチャフィルターを使用して背景にブロックを表示します。タグラインは特大のテキストを使用しています。メニューには、2つの行動を促すボタンが含まれています。ブロック画像は次のセクションと重なります。次のセクションでは、片側にタイトルを表示し、反対側に色のブロックを表示する全幅のテキスト要素が表示されます。 2つの交互のセクションは、一方の側に画像を表示し、もう一方の側にテクスチャ背景上の情報を表示します。次のいくつかのCTAセクションには、内部が明確なブロックテキストを含むさらに大きなタイトルが含まれています。一部はセクションと重複しています。画像はさらに暗いテクスチャ背景に重なります。私はこれで緑、画像、フォントを使うのが大好きです。

サイトを訪れる

最後に

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

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

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

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