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

公開: 2019-11-24

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

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

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

1.アトリエ1318

このサイトはJudithAugustinによって提出されました。これは1ページのデザインです。セクションのナビゲーションメニューは、スクロールすると浮かぶ垂直方向に配置されたテキストのリストです。ヒーローセクションでは、フルスクリーンの背景画像が真の視差で表示され、右下隅に次のセクションと重なるアニメーションの回転ロゴが表示されます。多くのセクションが情報とリンクを提供します。背景色は黒と白の間で交互になり、クラスの紹介としてスタイル付きのタイトルと番号を含むいくつかのセクションがあります。作業は、ホバー時に説明を表示するギャラリースライダー内に表示されます。ギャラリーの画像は、Instagramで画像を見ることができるタブを開きます。

サイトを訪れる

2.技術法務

このサイトはAleksandraPaleckaによって提出されました。これはハイライトにたくさんの太字の赤を使用しています。ヒーローセクションでは、背景画像が白黒で表示され、片側にCTAがあり、反対側に赤の線で描かれたボックスがあり、2つの角が開いています。このシンプルなものがレイアウトにどれほど視覚的な魅力を与えるかは驚くべきことです。次のいくつかのセクションには、スクロールするとフェードアウトするドットパターンの背景があります。これらのセクションは、赤のハイライトが付いた白黒写真に囲まれたいくつかのCTAを示しています。ハイライトには、赤いオーバーレイ、仕切り、線で描かれたボックス、ボタンのある画像が含まれます。これと同じボックスデザインを使用して、箇条書きに番号を付けます。赤いオーバーレイは、コールCTAの作成にも使用されます。私はこれで赤を使うのが大好きです。

サイトを訪れる

3.リッジコミュニティ教会

このサイトはJamesSmithによって提出されました。大きなロゴとタグラインがオーバーレイされたフルスクリーンの背景ビデオを再生します。メガメニューは左側に配置され、右側にはソーシャルフォローリンクとテキストの上にアイコンが付いたいくつかのCTAが含まれています。リンクはビデオの下部に表示され、ホバーオーバーレイが含まれています。歓迎セクションには、埋め込まれたビデオと、両方の詳細を表示するためのリンク付きのイベントが表示されます。イベントはスライダー内にカードとして表示されます。 [イベント]ページのイベント自体は、サイドバーに詳細が表示されたカスタム投稿タイプとして表示されます。信念はアコーディオンの中に示されています。私はこれの赤いハイライトが好きです。

サイトを訪れる

4.メディアを降りる

このサイトはJamesSmithによって提出されました。ヒーローセクションには、湾曲した仕切りとスタイル付きの垂直ナビゲーションを備えた全幅スライダーが表示されます。いくつかのスライドには、仕切りと重なる画像があります。サービスは宣伝文で表示され、2色のカスタムアイコンが含まれています。メガメニューには、宣伝文と同じタイトルの同じアイコンが含まれています。別のスライダーは、最近のプロジェクトを示しています。このスライダーの上部には湾曲した仕切りがあり、角が丸いスライドが表示されます。小さいスライダーは、背景から離れるのに十分なほど暗い色のブロック内にクライアントのロゴを表示します。サービスページには、ギャラリーグリッドを使用した例が表示されます。

サイトを訪れる

5.ドクターライフヘルス

このサイトはOskarKopecによって提出されました。製品とCTAは、ヒーローセクションの全幅スライダー内に表示されます。スライドには、画像を際立たせる側面に沿った背景画像が含まれています。次のセクションでは、さまざまな製品に対するいくつかのCTAを示します。これらのCTAには内側を指す影があり、接続されていても互いに離れています。次のいくつかのセクションでは、スライダー内の小さな画像として製品を示しています。情報セクションには、オーバーレイに説明付きの画像が表示されます。記事ページには、ボックスシャドウのあるカテゴリの画像が表示され、タイトルと説明が含まれています。

サイトを訪れる

6.共同メディア

このサイトはRobinKestingによって提出されました。アイコン、リンク、ボタンなどに多くの太字の黄色を使用しています。いくつかの背景には湾曲した仕切りがあり、行とモジュールの多くには目立つようにボックスの影があります。ヒーローセクションでは、片側にCTAが表示され、反対側にグラフィックが表示されます。イントロダクションには、埋め込みビデオとスタイル付きのテキストブロックが付属しています。番号付きの宣伝文句のセットは、それらを使用する利点を示しています。番号はタイトルの後ろに配置されています。また、Instagramで画像を開くスタイル付きギャラリー、FAQを作成するための切り替え、スタイル付きニュースレターフォーム、ボタンが重なるスタイル付きフッターも含まれています。

サイトを訪れる

7.ビショップトン犬のウォーキングサービス

このサイトはJamieShanksによって提出されました。ヘッダーは、クリック可能な電子メールと電話番号を含むバーを最初の画像の上部に追加します。ページの残りの部分は、ほぼフルスクリーンの一連の画像です。画像は犬が遊んでいる様子を示しており、オーバーレイにはCTAやその他の情報が含まれています。テキストが配置されている領域は暗くなります。スタイル付きの連絡先フォームも背景画像の上に配置されます。この画像はさらに暗くなりますが、中央が透けて見えます。ブログにはカード内の投稿が表示され、続きを読むボタンのボックスシャドウが含まれています。ブログカテゴリページには検索機能が含まれています。後ろから上へのボタンを上向きにした足のグラフィックも含まれています。

サイトを訪れる

8. IWOOD

このサイトはJulienFerlaによって提出されました。メニューには、CTAを強調するための色のブロックが含まれています。それは実際に遊ぶのが楽しい面白いヒーローセクションを持っています。タイトルテキストと背景画像は、マウスに反応して移動します。 3つの丸で囲まれた（2色の）ドットはそのまま残ります。各ドットは画像内のアイテムの1つに配置され、ホバーするとアイテムの名前が表示されます。スリムなセクションは、ポリシーとショップへのリンクを提供します。これに続いて、テキストのいくつかの大きなセクションがあります。テキストにはピンク色の単語がいくつか含まれており、テキストのセクションは交互の仕切りで互いに分割されています。製品に関する大きなセクションには、テキスト、画像、およびスライダーが表示されます。ヘッダーの下にあるものと一致するスリムなCTAが含まれています。これは、テキストと色をエレガントに使用しています。

サイトを訪れる

9. Cody Goodin

このサイトはNicoleMarieZinnantiによって提出されました。このサイトは、すっきりとしたレイアウトを提示するために、多くの空白と最小限のデザインを使用しています。ヒーローセクションには、パターン化された背景の片側にCTAが含まれています。次のセクションでは、片側にグラフィックを、反対側にCTAを示します。私は特にスキルセクションが好きです。交互に2列にスキルが表示されます。それぞれのセグメントには2色のアイコンがあり、その下にタイトルと説明があります。次に、スキルは別の種類のフォントで反対側に一覧表示されます。 Aboutセクションは、スタイル付きの仕切りとグラフィックでサイトを終了します。カスタムフッターは、両側にリンクを配置します。

サイトを訪れる

10. Elsebeth Egholm

このサイトはRikkeEkelundによって提出されました。ヒーローセクションでは、視差のあるパターン化された背景画像と、オーバーレイ内の一連のレビューに対する本とCTAの画像が表示されます。他の本は、詳細を読むためのリンク付きの交互のレイアウト内に表示されます。著者に関するセクションでは、一方に情報が表示され、もう一方には詳細を読むためのリンクと画像が表示されます。すべての連絡先情報は、作者のフルスクリーン写真の上に配置されます。私は本のページが好きです。それらは、本のトーンを設定するのに役立つ暗い背景の上に、片面に本を、もう片面に説明を表示します。このサイトには、スタイル付きのトップに戻るボタンと、右側にスタイル付きのスライダーバーがあります。私は赤いハイライトが大好きです。

サイトを訪れる

結論

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

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

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

Mascha Tace /shutterstock.comによる注目の画像