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

公開: 2020-01-31

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

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

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

1.アルトモンド

このサイトはDanielBehrensによって提出されました。タグラインとCTAがフォアグラウンドにあるフルスクリーンのバックグラウンドビデオを表示します。これに続いて、次のセクションを紹介するホバー効果のあるタイトルのあるフルスクリーンセクションがあります。このセクションは、タイトルをスクロールすると視差で表示されます。このセクションでは、タイトルを大きなテキストで表示し、一方にホバー効果を、もう一方にCTAを表示します。次のセクションでは、クライアントとの連携方法について説明します。これには、斜めのデザインの白い背景と、ホバーすると拡大する番号付きのテキストが含まれます。スクロールすると、別のCTAがズームインおよびズームアウトします。 [サービス]ページには、分割画面内の各サービスが表示され、片側にCTAが表示され、反対側に視差のある背景画像が表示されます。このサイトでのテキスト、色、画像の使用が好きです。

サイトを訪れる

2.ベメル

このサイトはMurrayPriceによって提出されました。商品を全幅表示する画像スライダーを備えたオンラインショップです。ウェルカムセクションには、製品画像の横に情報が表示され、詳細を読むためのリンクが表示されます。ショップセクションには、商品ページへのリンクを含む商品が表示されます。私のお気に入りのセクションでは、中央に大きな商品の画像が表示され、説明、アイコン、商品を指す曲線の矢印が付いた宣伝文句で囲まれています。ホームページには、製品の画像が交互にレイアウトされ、紹介文のスライダー内のレビュー、2つの投稿があるブログセクション、Instagramのスライダーも表示されます。レイアウトには、空白の線と最小限のデザインを作成する単純な線が含まれています。

サイトを訪れる

3.プルグナーの

このサイトはRAPHAELPRUGNERによって提出されました。これは1ページのデザインです。多層メニューはページとは別に設定され、CTAの横のソーシャルボタンの上にクリック可能な電話番号を表示します。ヒーローセクションには全画面の背景パターンが表示され、前景には作業例を含むコンピューター画面が表示され、タイトルとタグラインの横にホバーするとさらに多くのことが表示されます。スクロールすると、視差のある背景画像をスクロールするテキストとグラフィックの切り抜きセクションが表示されます。利点は、複数のセクションにまたがる交互のレイアウトの宣伝文句内に表示され、ホバーズーム効果が含まれます。サンプルプロジェクトはスライダー内に表示されます。他のプロジェクトは、埋め込まれたInstagramフィード内に表示されます。また、スクロールするとズームするCTAとスタイル付きの連絡先フォームも表示されます。

サイトを訪れる

4.紫キツネザル

このサイトはLiamPedleyによって提出されました。タイトル、タグライン、CTA、およびキツネザルのブランドグラフィックを含むサンプル製品画像は、丸みを帯びたセクション仕切りを含む黒い背景の上にあります。テキストとボタンには、サイト全体のグラフィックと一致する紫色のグラデーションがあります。キツネザルの3つのグラフィックを含む行が、テキストと宣伝文を表示するセクションの上に配置されます。キツネザルをクリックすると、情報のさまざまなセクションが表示され、そのセクションを指す矢印が表示されます。会社情報は2列のセクションに表示され、片側にコンピューター画面が表示され、真の視差で背景画像が表示されます。私は特にポートフォリオセクションが好きです。画像を斜めに表示します。それらのいずれかにカーソルを合わせると、画像が画面に向かって上向きに持ち上げられ、色付きのスライドが後ろに残ります。お客様の声のスライダーは、一度に3つの側面を示し、1つは中央が平らで、他の2つは角度が付いています。また、各サービスのホバーアニメーション付きのスタイル付きブログカードと宣伝文も含まれています。

サイトを訪れる

5. DShjemmeside

このサイトはDavidSylvestによって提出されました。濃い青のオーバーレイと丸みを帯びたセクションの仕切り、中央に大きなタイトルのある背景が表示されます。ヘッダーはメニューを中央に配置し、グラデーションと丸みを帯びた角を持つスタイル付きの背景を含みます。次のセクションが大好きです。傾けられた3枚のカード内での作業の例を示しています。側面の2つは内側に角度が付いています。ホバー効果が含まれます。次のセクションでは、コンピューターモニターを斜めに配置し、背景をパターン化したCTAを示します。メリットセクションには、歯車のグラフィックの横に大きな宣伝文句が付いた箇条書きが表示されます。このサイトには、スタイル付きのアイコンと丸で囲まれた画像、開発者の丸で囲まれた画像、トグル付きのFAQセクション、スタイル付きの連絡フォームを備えた多数のCTAも含まれています。レイアウトは、色、グラフィック、および画像をうまく利用しています。

サイトを訪れる

6.ジップラインのキャリア

このサイトはNicoleMarieZinnantiによって提出されました。このサイトは、適切な量の紫色のグラフィックとハイライトを備えた多くの空白を使用しています。ヒーローセクションには、片側にCTAが表示され、反対側に履歴書を作成している人々のグラフィックが表示されます。次のセクションでは、紫と白のグラフィックと紫の境界線と影を使用するブラブ内のサービスを示します。埋め込みビデオは、左側の上半分と右側の下半分にドットを表示する背景パターンの上に配置されます。スタイル付きのアイコンが付いた宣伝文句は、すっきりとした3列のレイアウトでメリットを示します。このデザインには、グラフィック付きのCTA、スタイル付きのブログセクション、カスタムフッターを作成するためのボタン付きのCTAも含まれています。ブログも好きです。ヘッダーに対角線の仕切りが付いたフルグラフィックが表示され、次にブログカードがきれいなグリッドに表示されます。

サイトを訪れる

7.サスカチュワンの採用サポートセンター

このサイトはMollySeaton-Fastによって提出されました。遊んでいる子供たちの全幅の画像と、ナビゲーション用の大きなボタンを作成するための3つのテキストモジュールが表示されます。各ボタンのカバーは丸みを帯びており、背が高くなり、ホバーすると角が四角になります。部分的な境界線のある宣伝文句は、特定のトピックへのリンクを作成します。情報は、片側に宣伝文とCTAがあり、反対側にアコーディオンがある2列のセクションで提供されます。寄付CTAはメーリングリストセクションに組み込まれます。各セクションでは、一致するスタイル付きの色と背景パターンを使用しています。 [イベント]ページには、埋め込みイベントカレンダーが含まれています。寄付ページには、募金箱が埋め込まれています。このサイトには共有する情報がたくさんあり、メニューは情報を可能な限りクリーンにナビゲートし続けます。

サイトを訪れる

8.ナナイモハイツ

このサイトはDanielleMahによって提出されました。 1ページのデザインで、多言語対応です。ヒーローセクションには、タイトル、タグライン、下向き矢印を含むオレンジ色のオーバーレイが付いたフルスクリーンの背景が表示されます。ヒーローセクションには、角度の付いたセクションディバイダーと、それに続くスクロールの上部にロックインするナビゲーションメニューも含まれています。いくつかの登録CTAは、建物の画像を表示します。レイアウトには、メリットを示す宣伝文句を含む内部の全幅画像も含まれています。いくつかのセクションでは、弾丸と画像を交互のレイアウトで使用する機能を示しています。埋め込まれたマップは、サイトの他の部分と同じ色を使用します。フロアプランはスライダー内に表示され、ダウンロード可能なPDFが含まれています。登録フォームには、探しているアパートの正確なタイプを決定するのに役立つ質問が含まれています。私はこのサイトでの色と写真の使用が大好きです。

サイトを訪れる

9.ほんの少しの言葉以上

このサイトはBrittBaueによって提出されました。メニューには、重複するロゴとそれに続く小さなウェルカムメッセージが表示されます。ページの主要部分には、スタイル付きのオーディオプレーヤーを備えたポッドキャストエピソードが多数含まれています。最初のセクションでは、ポッドキャストが2列に表示され、バーティクルのタイトルと詳細を聞くためのリンクが示されています。ショーに関する情報を含むテキストのセクションには、反対側にバーティクルタイトルが含まれています。別のセクションにはタイトルが含まれ、お問い合わせフォームの横にオーディオプレーヤーを備えたポッドキャストのリストが表示されます。これに続いて、すべての主要なホストからポッドキャストを購読するためのリンクがあるセクションがあります。 [概要]ページには、トピックのリストとスタイル付きの紹介文スライダーが追加されています。デザインは、多くの空白と、すっきりとエレガントに見える最小限のレイアウトを使用しています。

サイトを訪れる

10.ネグロサノンヤングリーダーズインスティテュート

このサイトはJRガリアによって提出されました。ヒーローセクションには、オーバーレイにタイトルとCTAが含まれる全幅の背景画像が表示されます。ナビゲーションメニューにもCTAが表示され、別のセグメント内にメニューが含まれます。プログラムのセクションには、寄付ボタン付きのカードが表示されます。私は特にGetInvolvedセクションが好きです。片側に大きな画像を表示し、反対側にグラフィックで宣伝文句を表示します。レイアウトには、番号カウンターとスタイル付きの連絡フォームも含まれています。 about、blog、およびgalleryページは同様のデザインに従い、テキスト、ブログ、およびギャラリーモジュールにしっかりとした影を追加します。

サイトを訪れる

結論

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

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

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

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