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

公開: 2019-11-03

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

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

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

1.ボットと短所

このウェブサイトはWadeMcMasterによって提出されました。このサイトでは、白と水色のテキストと全体にハイライトが付いた暗いカラーパレットを使用しています。メニューはスリムで、ヒーローセクションと青い線で区切られています。ヒーローセクションには、サイトのロゴと説明が大きなテキストで表示された背景画像が表示されます。 [バージョン情報]セクションには、2つの列に情報が表示されます。スタイル付きオーバーレイを使用して背景画像の上に視差で表示されるブログセクションが好きです。片側にテキスト付きの最新のブログ投稿をCTAとして表示し、カードデザインでブログと反対側のブログ投稿を表示します。壁紙とブログページには、ヘッダー、背景画像、サイドバーを含むブログ投稿が表示されます。購読ページも面白いです。サインアップフォームをCTAとして表示し、片側に箇条書きを付けて、サブスクライブの利点を示します。ページには、ホームページとは異なるメニューデザインが表示されます。

サイトを訪れる

2.マッチデザインメディア

このウェブサイトはサムニコルソンによって提出されました。このサイトには、グラデーションオーバーレイ付きのフルスクリーンの背景ビデオが表示されます。前景はロゴとラインデザインを示しています。ロゴがホバーを拡大すると、2つの線要素が消えて、興味深いホバー効果が作成されます。最も興味深い要素は、サイトがセクション仕切りを使用する方法です。仕切りの後ろに背景画像を配置し、その上にグラデーションを配置します。数字カウンターまたは円カウンターがその上に配置されます。このサイトでは、一致するように多くのグラデーションとスタイル付きテキストを使用しています。ボタンには、背景と同じグラデーションが含まれています。サービスは交互のレイアウトで表示され、ホバーすると傾く画像が含まれます。キャリアセクションとコンタクトセクションには、同じ傾斜効果が含まれています。負荷がかかると所定の位置に傾く線など、小さなアニメーションがたくさんあります。このサイトには、スタイル付きのバックツートップボタンとスタイル付きのスライダーバーも含まれています。これらは、Webデザインの標準的な方法になりたいと思っています。

サイトを訪れる

3.プロパティポップ

このウェブサイトはKaelynnMidgleyによって提出されました。片側にCTAがあり、反対側にモバイルデバイス内の画像がある全幅の背景グラデーションが表示されます。スクロールすると、一方の側にCTAの情報が表示され、もう一方の側にプロパティの画像が表示され、一方の画像がラップトップのアウトライン内に配置されます。同様のデザインがサイト全体で続いています。私のお気に入りはコミュニティに関するセクションです。これには、画像、テキスト、ボタン、および反対側の情報を含む宣伝文が重なっている背景画像を含む2列のレイアウトが含まれています。 [仕組み]ページには、各ステップがフルスクリーンで表示され、それぞれの背景色が異なります。また、ヒーローセクション、情報のテキスト、仕切り、そしてブログ投稿が含まれているブログページも気に入っています。投稿は、注目の画像にボックスシャドウを追加します。メニューにはCTAが含まれています。

サイトを訪れる

4.祖国

このウェブサイトはジェロームベステルによって提出されました。ヒーローセクションから始まるサイト全体に多くのグラフィックが含まれています。ヒーローセクションでは、片側に大きなグラフィックが表示され、反対側にCTAが表示されます。スクロールすると、一方の側に小さなグラフィックが表示され、もう一方の側にクリック可能な呼び出しボタンと情報が表示された2列のセクションが表示されます。このデザインは、スクロールするとページを交互に下に移動します。その他の情報は宣伝文で提供されます。スライダーを使用すると、カーソルを移動して価格を選択できます。チームに関する情報は宣伝文で提供され、画像のグラフィックが含まれています。このサイトでは、最小限のデザインと多くの青をテキストと背景に使用して、ターゲットオーディエンスにアピールしています。各ページは同様のデザインに従いますが、それでもユニークなものがあります。メニューには、連絡先CTAとクリック可能な通話リンクが含まれています。特に、各ページのヒーローセクションにある大きなグラフィックが好きです。

サイトを訪れる

5.チャリティーのチェンジアップ

このウェブサイトはディコンケントによって提出されました。全幅の背景グラデーションがあり、片側にCTAの後ろのグラフィックがあり、反対側に携帯電話でアプリを表示する一連の画像があります。次のいくつかのセクションでは、左側に仕切りと青いタイトルのテキストが表示され、右側にアプリの画像と周囲のグラフィックが表示されたスマートフォンが表示されます。スクロールすると、テキストとグラフィックが所定の位置にスライドします。スライダーは、グラデーションでパターン化された背景の上にロゴを表示します。全幅の紹介文スライダーには、サイトに一致する青い背景上の画像、紹介文、ドットと矢印のナビゲーションが含まれています。情報は、サイトのスタイルに一致する丸で囲まれたアイコンを含む宣伝文で提供されます。このサイトは、青と緑のブランドの色とグラデーションをうまく利用しています。

サイトを訪れる

6. Rebbl

このウェブサイトはディコンケントによって提出されました。このサイトは、メインテキストの下に小さなテキストがある興味深いメガメニューを使用しています。リンクの1つにカーソルを合わせるとメニューが開き、さらにリンクや画像が表示されます。ホームページの最初のセクションには、CTA用のスペースが片側にあり、反対側に製品がある全幅の画像が表示されます。スクロールすると、製品を示し、ショップへのリンクを提供する全幅のCTAが表示されます。ブログセクションには、カテゴリがブログカードとして表示されます。いずれかをクリックすると、そのブログカテゴリのアーカイブページが開きます。ブログの投稿は、画像と抜粋の中央にカテゴリが表示された大きなカードで表示されます。スリムなサブスクライブフォームは、背景パターンの上にテキストとフォームを表示します。会社と製品に関する情報は、大きなCTAを含む2列のセクションに表示されます。オーバーレイにタイトルとボタンが付いた背景ビデオを表示するビデオCTAが好きです。埋め込まれたInstagramスライダーは、ホバーに関する情報を提供し、クリックするとモーダルで情報を開きます。

サイトを訪れる

7.若者、率直に！

このウェブサイトはMichalTeskaによって提出されました。これは、不透明度の高いオーバーレイを使用して、全画面の背景画像を視差で表示する1ページのレイアウトです。オーバーレイには、タグラインとグラフィックが含まれます。すべてのセクションは2列のレイアウトで、背景に視差のテキストがあり、前景にグラフィックがあり、反対側にテキストがあります。このデザインは、スクロールすると交互に表示されます。これらのセクションの1つには、サイトに一致するようにスタイル設定されたトグルがあります。関係者に関する情報は、左側にサムネイル画像、右側に名前と場所がある宣伝文で作成されます。パートナーのロゴはグレースケールで表示され、ホバーすると色に変わります。

サイトを訪れる

8. AWEOS

このウェブサイトはクリストスパパドプロスによって提出されました。アニメーションの背景は、漫画のグラフィックで海中の設定の効果を作成します。タグラインとアニメーション画像のあるCTAが背景の上にあります。メガメニューには、3列のリンクと画像が表示されます。次のセクションでは、情報を提供し、クリック可能な通話リンクと相談リンクを含めます。チームメンバーには、画像、名前、タイトル、説明、およびその人からの音声メッセージを聞くためのボタンが表示されます。サービスは、テキストの下にアイコンを含む宣伝文句内に表示されます。プロジェクトページには、ホバーするとスクロールするカード内の例が表示されます。各サービスページは同様のデザインに従っており、説明とリンクを含むヘッダーと、それに続く詳細情報が含まれています。ブログページと投稿は、同様のヘッダーデザインに従います。

サイトを訪れる

9.マルシアンジェルス

このウェブサイトはMarciAngelesによって提出されました。スクロールしても、ヘッダーとフッターは画面に表示されたままになります。それらは透明なので、レイアウトが透けて見えます。ホームページには、青い背景と作業サンプルのいくつかの画像が表示されます。画像をクリックすると、そのプロジェクトのページが開き、プロジェクトの詳細を確認できます。それぞれがブログ投稿として表示され、注目の画像、説明、画像、前後の投稿へのナビゲーション、およびお問い合わせフォームが含まれています。フッターはプロジェクトページの画面に表示されたままになりません。ヘッダーとフッターはシンプルでクリーンなデザインです。ヘッダーには、所有者による他のサイトへのリンクが含まれています。これらのサイトは、このような柔らかい色を使用しています。フッターにはソーシャルメディアへのリンクが含まれています。どちらにも、サイトの本体からそれらを分離する線があります。

サイトを訪れる

10.ATGヨーロッパ

このウェブサイトはCamielBosによって提出されました。フルスクリーンヘッダーには、画面の左下隅にタイトルとタグラインが付いた背景ビデオが表示されます。メガメニューがあり、ホバーにリンクと投稿が表示されます。スクロールすると、メニューが白くなり、エッジが湾曲し、ビデオセクションの下部がミラーリングされていることがわかります。情報は次のセクションで提供され、サイトのテーマに一致するグラフィックが含まれています。提供される業界、ソリューション、およびサービスは、視差の画像内に表示されます。連絡先CTAは、背景画像の上にタイトルとボタンを表示し、上部と下部に湾曲したセクション仕切りを含めて、興味深いデザインを作成します。このサイトでは、すっきりとしたデザインを維持しながら、目立つスタイルの仕切り、背景パターン、重なり合う要素をたくさん使用しています。このサイトは、画像と色をうまく利用しています。

サイトを訪れる

結論

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

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

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

ProStockStudio /shutterstock.com経由のフィーチャー画像