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

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

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

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

1.プレストンスマイルズ

このサイトはChristianMauererによって提出されました。 ヒーローセクションには、片側に派手なフォントとCTAを使用し、反対側に背景画像の主題を使用して、タイピング効果のあるアニメーションテキストを表示します。 スクロールすると、会社が見られたメディアを示すロゴスライダーが表示されます。書籍のCTAは、オンラインストアのロゴを中央に表示し、矢印は書籍の写真とともに外側の端を指します。 スクロールすると、本は中央に向かって移動します。 サイト所有者に関するセクションでは、左側に大きな写真、右側に情報が表示されます。 ページを下にスクロールして、互いに重なり合う画像のギャラリーを表示すると、写真のスクロールが速くなります。 いくつかのセクションには、スタイル付きのビデオが含まれています。 私は特に、所有者の大きな画像、Facebookからの推薦状、イベントからの写真を表示する推薦状セクションが好きです。

サイトを訪れる

2. WebDevXd

このサイトは、Web DevXdからStephによって提出されました。 CTAが左側に表示され、世界地図の背景画像と白いオーバーレイの上に赤いボタンが表示されます。 全幅メニューはこのセクションの下にあり、スクロールすると上部に固定されます。 次のセクションでは、一方の側にコンピューター画面内の作業の例を、もう一方の側に説明を表示します。それぞれ、ブランドの赤と白の色を使用しています。 サービスは、赤いアイコンの付いた宣伝文で示されます。 プロジェクトセクションには、積み重ねられた画像が表示されます。 画像がズームアウトし、後ろの画像がホバーすると横に移動します。 成果物のセクションでは、背景が赤で、宣伝文がテキストとアイコンを白で表示しています。 タイトルは横に縦に並んでいます。 フッターは、赤い背景の上に投稿スライダーといくつかのウィジェットを表示します。

サイトを訪れる

3.ムニ

このサイトはLethiciaDinizによって提出されました。 ジャンルにぴったりの青と緑の色とフォントスタイルを使用しています。 ヘッダーには、CTAのスタックボタンが表示されます。 ヒーローセクションには、一方の側に被写体があり、もう一方の側に大きな箇条書きがある背景画像が含まれています。 プランは、ホバーでズームするさまざまな色の背景を持つテキストのブロックとして表示されます。 レイヤーで構築されたフルスクリーンCTAが好きです。 片側に写真、2番目の3分の2をカバーするタイトル、反対側のメリットのリスト、青い背景とCTA自体のパターンで他の2つと重なる大きなボックスが表示されます。 紹介文のスライダーが右端に背景パターンで表示されます。 フッターには2行が表示されます。 1つ目はさまざまな色とサイズのCTA、連絡先情報を読み、下の行にはウィジェットが表示されます。 2つの行は、視差の背景パターンの上に表示されます。

サイトを訪れる

4.SAMCARA

このサイトはXavierFerreによって提出されました。 ナビゲーションメニューは左側に垂直に表示され、スクロールしても画面に表示されたままになります。 ヒーローセクションには、サイトのタイトルが巨大なフォントで表示され、サービスのリストとクリック可能な連絡先CTAが片側に、小さな画像が反対側に表示されます。 情報は、背景色と画像の位置が異なる2枚の大きなカードで提供されます。 どちらも、最初の2枚のカードと同様のデザインで上から大きな様式化されたバスケットボールコートを表示する次のセクションと重なっています。 より多くのカードがこれに続き、テキストの大きな列で紹介されています。 このセクションには、お問い合わせフォームと共同編集者のリストが含まれています。 ブログの投稿は、スクロールすると所定の位置にズームインするスタイル付きの矢印で紹介されています。 ブログセクションはまた、読者をログインフォームに導きます。

サイトを訪れる

5.バッファー保険

このサイトはSeanTurnerによって提出されました。 このサイトは、色と画像をうまく利用しています。 ヒーローセクションには、2つの背景画像が表示されます。 大きい方の面には青いオーバーレイがあり、小さい方の面には緑のオーバーレイがあります。 前景画像は、2つが出会う場所に配置され、盾の形で背景の上に配置されます。 CTAは反対側に配置されます。 前景には、サイト全体に表示されるパターンの形状も含まれています。 次のセクションでは、同じデザインの大きなボックスにサービスを表示します。 次の2つのセクションでは、白または青のオーバーレイを使用して、背景画像の上に交互のレイアウトで片側に高い宣伝文句を表示し、反対側に画像を表示します。 宣伝文は箇条書きを表示します。 画像はヒーローセクションと同じシールドを使用しています。 全幅の投稿スライダーには、最新の投稿のタイトルとテキストが表示されます。 また、テキストリンク付きのメガメニューも含まれています。

サイトを訪れる

6.カーリー

このサイトはAntheaA.Ancaladeによって提出されました。 ヒーローセクションには、場所を選択したり現在の場所を使用したりできる検索ボックスが中央にある全画面の背景画像が表示されます。 サービスは、CTAの横にタイトルとオーバーレイを含む画像とともに表示されます。 注目のスタイルは6列のスライダー内に表示され、画像、タイトル、星評価、場所が含まれます。 スライダーには、矢印とドットの両方のナビゲーションが含まれています。 スタイルの1つをクリックすると、その製品ページに移動します。 新しいスタイルは6列で表示されますが、スライダーはありません。 ブログセクションには、最新の2つの投稿が表示され、投稿の下に行が表示され、その行の下に詳細が表示されます。 ブログのチュートリアルは3つの列に配置され、同じデザインに従います。 また、6列2行のInstagramフィードと、スタイル付きのメールフォーム付きのフッターも含まれています。

サイトを訪れる

7.タイポゲニア

このサイトはEugeniaJanakowによって提出されました。 グラフィック内で大胆な黄色をたくさん使用しています。 タイトルは、ラベルメーカーで作成されたかのように作成され、背景が黒になり、テキストが白になり、3Dのように見えます。 CTAはメニューの中央に配置されます。 ヒーローセクションには、左側にCTA、右側に画像が表示された分割画面が表示されます。 CTAは、スクロールとホバーでアニメーション化する手描きのグラフィックを使用します。 サイト所有者に関する情報は、詳細を読むためにCTA付きの丸で囲まれた画像を表示します。 私は特にお客様の声のセクションが好きです。 星による評価とクリック可能なグラフィックを備えたGoogleのレビューが表示され、[概要]ページに移動します。 サービスは宣伝文句の中に表示され、大きな手描きのグラフィックが含まれています。 ブログではメタに黄色のブランドを使用し、お問い合わせフォームではセクション全体の背景に黄色を使用しています。

サイトを訪れる

8.ブッシュクラフター

このサイトはSimoneTalamoによって提出されました。 ヒーローセクションには、被写体を中心に全画面画像が表示されます。 フォアグラウンドには、CTAとソーシャルボタンが付いたタグラインが表示されます。 いくつかの全幅セクションは、同様の設計に従います。 各セクションには、ジャンルに完全に対応するギザギザのセパレータがあります。 次のセクションでは、オーバーレイにテキストとアイコンを含む情報用の大きな画像を表示します。 ほとんどの場合、背景が暗いか、暗い背景に溶け込んでいます。 マニュアル用のものは、テキストと一緒に本の表紙を表示します。 最新のブログ投稿では、ボックスの影が付いたカードとして投稿が表示されます。 フッターには、製品の名前、画像、星の数、価格が表示されます。 コースページは同じデザインに従い、カウントダウンタイマーとスタイル付きトグルを追加します。

サイトを訪れる

9.KWALTデジタル

このサイトはNicolasPeignerによって提出されました。 これには、サイト全体に興味深いアニメーション、スタイル付きテキスト、グラフィック、矢印がたくさんあります。 黄色はブランドカラーとして使用され、創造的な方法で使用されています。 ヒーローセクションでは、片側にタイピング効果のあるテキストが表示されます。 この下にバーがあり、サービスが一覧表示されます。 右側には、カーソルにカーソルを合わせて応答するいくつかの独立したグラフィック要素があります。 次のセクションでは、片面にアニメーショングラフィック、もう片面にシンプルなCTAが表示されたタイトルを表示します。 最新の作品はこれに続き、さまざまな色やパターンの背景に作品のスクリーンショットを表示します。 利点を説明するセクションでは、2色のアイコンで宣伝文句を片側に配置します。 画像が反対側にあり、読者を宣伝文句に導きます。 シンプルな紹介文のスライダーは、目立つように濃い灰色の背景の上に配置されています。

サイトを訪れる

10.Exploruns

このサイトはAvaCharpentierによって提出されました。 ブランドカラーにはたくさんの日焼けの色合いを使用しています。 トップバーはスクロールすると消え、ロゴはヘッダーとヒーローセクションに重なり、ヘッダーにはホバーアニメーションが含まれます。 メイン画像には、タイトル、説明、注文するためのボタンが表示されます。 別の画像は、真の視差でヒーロー画像のウィンドウとして配置されます。 情報は、カスタムグラフィックを使用した宣伝文で表示されます。 商品は、商品画像の上部の後ろに背景色で表示されます。 同様の背景デザインがブログセクションに使用されています。 会社について読むCTAは、片側にテキストを表示し、反対側に画像を表示します。 お客様の声は、上部に白い背景の引用符があり、下部に黄褐色の背景の名前が付いたカードとして表示されます。 このサイトには、Instagramフィードとホバーアニメーション付きのカスタムフッターも含まれています。

サイトを訪れる

最後に

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

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

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

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