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

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

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

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

1.ポプチン

このサイトはTomerAharonによって提出されました。 このサイトでは、テキストと背景のグラデーションに多くの紫を使用し、ハイライトに同様の赤、黄、青の色合いを使用しています。 メニューには、それらの色のアイコンが付いた宣伝文も含まれています。 ヒーローセクションには、キーワードの入力効果が表示され、CTAのタグラインとメッセージが変更されます。 興味深い機能は、モックアップコンピューター画面の横にある垂直スタックのボタンを交互のレイアウトで表示する一連のセクションです。 いずれかのボタンをクリックすると、モックアップ画面に表示される内容が変わります。 同様のセクションでは、モックアップ画面の上にアイコン付きのタブが表示されます。 このサイトは多言語対応で、7つの言語から選択できます。

サイトを訪れる

2.LVPエンパイア

このサイトはNadzimAl-Rashによって提出されました。 それは黒いテキストの背景にたくさんの日焼けを使用します。 ナビゲーションメニューは、ギャラリーを表示するためのリンクとセッションを予約するためのリンクでシンプルに保たれています。 ホバー効果は、背景を暗い色に変更します。 フェード効果は、スクロールすると、ヒーロー画像や特定のギャラリーなどの画像をフェードインまたはフェードアウトします。 フッターは、目立つが日焼けを補完する濃い緑色の背景を表示します。 上部に日焼けラ​​インとホバー効果のあるナビゲーションメニューが含まれています。 ギャラリーでは、作品を紹介するために大きな画像が1列に表示されます。 予約のページには、複数の場所とそれぞれの地図が表示されます。

サイトを訪れる

3.アンディフック

このサイトはAndyHookeによって提出されました。 サイト全体の背景とテキストに濃い青をたくさん使用しています。 メニューには、サブメニューナビゲーション用のアイコンが表示されます。 ヒーローセクションには、次のセクションと重なる作品のスクリーンショットが表示されます。 また、目立つように真の視差のいくつかの背景パターンが含まれています。 タイトル内のいくつかのキーワードには下線が引かれています。 私は特に、紹介文とスクリーンショット、およびプロジェクトを表示するためのリンクを組み合わせた最近の作業のセクションのセットが好きです。 これらの各セクションは、スクロールすると異なる背景色に切り替わり、濃い青から中程度の青、そしてオレンジに変わります。 ブログやその他のページにも、ホームページと同じ背景パターンが含まれています。 いくつかのページはそれらをアイコンに追加します。

サイトを訪れる

4.Scruffyポッドキャストの南

このサイトはBrentCollierによって提出されました。 このサイトでは、背景とパターンにオレンジとダークブルーをたくさん使用しています。 背景は大胆な色の山のスタイルの描画です。 最新のポッドキャストを備えたスタイル付きオーディオプレーヤーは、ヒーローセクションのタグラインの下に配置されます。 その画像には、ウェブサイトのアートワークと色が含まれています。 別のセクションでは、真の視差で背景パターンを太字で表示します。 スタイル付きのアイコンは、ポッドキャストを聞くことができるさまざまな場所にリンクしています。 連絡先も気に入っています。 片側に異なる色のコンタクトフォームが付いたオレンジ色の背景が含まれていますが、フィールドは2つの色に重なっています。

サイトを訪れる

5.パラブラスクルザダス

このサイトはRuiEdmondによって提出されました。 このサイトでは、背景、ボタン、タイトルに太字の青を使用しています。 ほとんどの場合、セクションが青から白に変わる2列のデザインに従います。 各セクションには、製品の説明とリンクを含むCTAが含まれています。 グラフィックは製品へのリンクを強調します。 パズルはプロジェクトのポストタイプに統合されています。 証言は、スタイル付きの背景で丸で囲まれた画像を表示します。 このサイトには、レイアウトが交互になっている複数のCTAが含まれています。 すっきりとしたデザインは、それぞれが他から際立っていることを保証します。

サイトを訪れる

6.メグロナーガン

このサイトはKurtMaddernによって提出されました。 レイアウトはシンプルで、メニュー、ロゴ、著作権表示、スライダーだけです。 焦点はスライダーにありますが、それはそれに注意を引くために空白を使用します。 スライダーは、画面の右側の3分の2を占めます。 左の3分の1は明確で、サイトのタイトルが上部に、ロゴが下部にあります。 ナビゲーションメニューはスライダーの上にあり、スライダーの左側にある2列にリンクを表示します。 スライダーの右側の上に問い合わせリンクがあります。 スクロールすると、メニューの積み重ねられた列が通常のメニューになり、すべてのリンクが水平方向の行に表示されます。スライダーには、さまざまな幅の画像が表示され、作業が表示されます。 [メモ]ページには、左側に追加された大きな画像とナビゲーションリンクを含むブログ投稿が表示されます。

サイトを訪れる

7.レコバ

このサイトはChristinaOosthuizenによって提出されました。 全体にブランドの青と黄色を使用し、あちこちに赤を少し加えています。 メニューには、青と黄色のアニメーションリンクが含まれています。 ヒーローセクションには、背景に溶け込む商品画像が表示されます。 タグラインは、キーワードが黄色である白の超大型テキストで作成されます。 他のタイトルは、テキストを黄色と青で配置します。 大きなボタンは、目立つ黒い実線の影で表示されます。 このサイトには、多くのスタイル付きカウンター、宣伝文、紹介文、一致するお問い合わせフォーム、ソーシャルボタンも含まれています。 製品のグラフィックを2色で表示するセクションが特に好きです。 一方の背景は、もう一方の製品の色と一致しています。 連絡先ページも同様のデザインを使用しています。

サイトを訪れる

8. PlantVibe

このサイトはDJWheelerによって提出されました。 このサイトでは、セクションの背景、グラフィック、テキストのブランド色に緑を使用しています。 ヒーローセクションには、片側に画像を、反対側に情報を表示する交互のレイアウトのCTAを備えたスライダーが含まれています。 グラフィックとテキストを備えたシンプルなCTAは、スタイル付きのパターンで緑の背景の上に表示されます。 コレクションのセクションには、製品スライダーのさまざまなオプションが表示されます。 このスライダーには、タイトル、リンク、およびナビゲーションの濃い緑色のハイライトが含まれています。 お問い合わせフォームでは、送信ボタンに同じ緑色を使用しています。 製品写真でさえ、それらをウェブサイトのデザインの一部にするために特定のセクションで使用される背景色を持っています。

サイトを訪れる

9.アルメデス

このサイトはThomasvan derWoldeによって提出されました。 このサイトでは、ナビゲーションメニューの背景、グラフィック、テキスト、およびCTAに多くの青が使用されています。 ヒーローセクションには、キーワードを変更するタイピング効果のあるCTAが表示されます。 宣伝文のセクションには、宣伝文ごとに上部の境界線に異なる色が表示され、ブロブの背景パターンを持つグラフィックが含まれます。 番号付きのステップのセクションには、大きな青いフォントで番号が表示され、片側にテキスト、反対側にグラフィックが交互に配置されています。 他のページは、サービスと利点を強調する同様のシンプルでクリーンなデザインに従います。

サイトを訪れる

10.MJSメディア

このサイトはMattSouthamによって提出されました。 ブランドカラーには大胆な黄色を使用し、それをサポートするために他のいくつかの色を使用しています。 ヒーローセクションは、かろうじて透けて見える背景ビデオの上に黄色のオーバーレイを配置します。 黄色の背景は、全幅の紹介文や連絡先ボタンにも使用されます。 いくつかの宣伝文は、さまざまな色で丸い背景のグラフィックを表示します。 灰色のオーバーレイの後ろの背景に画像を表示するケーススタディのセクションが好きです。 フルスクリーンメニューでは、ナビゲーション、サービス、連絡先情報を簡単に確認できるように、リンクが3列の大きなテキストで配置されます。 背景はぼやけていますが、見えています。 すっきりとしたブログのデザインも気に入っています。

サイトを訪れる

最後に

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

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

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

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