クールなポートフォリオページを備えた10のDiviサイト

公開: 2018-07-26

ポートフォリオページは、サービスを提供する人にとって最も重要なページの1つです。それはあなたがしている仕事の種類を示すだけでなく、訪問者にあなたの専門知識のレベルとあなたが一緒に働いたクライアントを示します。ポートフォリオページは、さまざまな方法でデザインできます。この記事では、次のDiviデザインにインスピレーションを与えるのに役立つ、クールなポートフォリオページを備えた11のDiviWebサイトを見ていきます。

ポートフォリオページには通常、標準ポートフォリオ、フィルターポートフォリオ、または全幅ポートフォリオモジュールが含まれます。ただし、ポートフォリオを表示する方法は他にもあります。画像、宣伝文、ギャラリーなどの要素を使用してポートフォリオを構築するものもあります。もちろん、これはページのレイアウト内でうまく機能する必要があります。それぞれの例を見ていきます。

気に入ったセクションの画像を表示して、気に入った点について説明します。ウェブサイトは順不同です。 Diviを使用して独自のポートフォリオページをレベルアップするのに役立ついくつかのリンクを最後まで探してください。

1.ブーンクリエイティブ

このサイトでは、ヒーローセクションにトグルで開くサービスのリストが表示され、その後に全幅セクションが表示されて見積もりが表示されます。ポートフォリオセクションには、左側にサービスのカテゴリ、クライアントの名前、クライアントの説明が表示され、右側にプロジェクトの画像が表示されます。各ポートフォリオアイテムは、薄い仕切りで区切られています。 Webサイトの例には、ライブWebサイトを表示するためのリンクが含まれます。

ウェブサイトを見る

2.ラウンドペグ

このサイトでは、ポートフォリオアイテムが3列に表示され、1列にセクションが含まれています。 3つの列のセクションは、クライアントのロゴが白で表示された各プロジェクトの画像の上にオーバーレイを配置します。下隅にある白い線で描かれたアイコンは、プロジェクトのカテゴリを示しています。単一列のセクションには、パターン化された背景の上にテキストとボタンが付いたプロジェクトの画像が表示されます。 3番目のセクションでは、各カテゴリの詳細を表示するためのリンクを提供します。

ウェブサイトを見る

3. Leo Whou Teng

このページでは、ポートフォリオアイテムを、画像間にスペースを入れずに複数列のレイアウトで配置します。それらのいずれかにカーソルを合わせると、画像の上に青いオーバーレイが表示され、下部にプロジェクトの名前とカテゴリを示すボックスが表示されます。ポートフォリオには2列と3列が含まれ、レイアウトが交互になっています。画像はさまざまな背景を使用し、さまざまなタイプのデバイス上のプロジェクトの画像を示しています。このサイトは色をうまく利用しています。

ウェブサイトを見る

4. Studinger Media Graphics

このサイトでは、モノクロのオーバーレイではほとんど表示されないエレガントな背景画像の上に、会社のロゴ、名前、ページタイトルが記載されたポートフォリオページを紹介しています。ポートフォリオセクションでは、フィルターにスタイル付きボタンを使用し、プロジェクトを3列のグリッドで表示します。ホバーすると画像が回転し、リンクが表示されます。このページには、召喚状、お問い合わせフォーム、サイトのブランドに一致するQRコードとソーシャルフォローボタンが付いた公開フッターも含まれています。

ウェブサイトを見る

5.キャサリンクリフ

このポートフォリオページは、視差のオーバーレイにタイトルと説明を含むフルスクリーン画像を表示します。スクロールすると、プロジェクトの名前と場所、および関係者の名前が記載されたテキストセクションが表示されます。これに続いて、フルスクリーンの画像と3列のグリッドを含むギャラリーがあります。他のプロジェクトも同様のパターンに従い、2列または3列のグリッド内に画像が表示されます。

ウェブサイトを見る

6.スーパーディバインウェブデザイン

これは各プロジェクトに番号を付け、会社のロゴと提供されるサービス、手書きフォントのプロジェクトのタイトル、プロジェクトの簡単な説明、プロジェクトをライブで表示するためのボタンを含む画像を表示します。タイトルテキスト、境界線、およびボタンの色は、サイトのブランドと一致します。これに続いて、オンライン予約アプリへのCTAがあります。

ウェブサイトを見る

7.Webデザインを入手する

このポートフォリオページには、Pinterestに似たプロジェクト画像が読み込まれます。それらは4列または5列のグリッドで表示されます（画面サイズとズームレベルによって異なります）。プロジェクトにカーソルを合わせると、虫眼鏡が表示されます。これをクリックすると、ライトボックスに画像が開きます。画像の多くはウェブサイトの完全なレイアウトですが、他の画像はヒーローエリアです。

ウェブサイトを見る

8. Caporal Marketing Digital

このポートフォリオページには、タイトル、タグライン、およびサイトのブランドカラーと一致する興味深い境界線のあるボタンを含む全幅の画像が表示されます。スクロールすると、フィルタリングされたポートフォリオが3列のグリッドで表示されます。ポートフォリオには、クライアントのロゴがモノクロで表示され、ホバーするとカラーで表示されます。また、クライアントの名前と提供されるサービスも含まれます。左側の線は、横向きのテキストでソーシャルネットワークの名前を表示します。それらはスクロール時に画面に残ります。

ウェブサイトを見る

9.マイティフォックス

このページは、ページのタイトルを表示するために、暗いオーバーレイとエレガントなフォントを備えた全幅の背景で紹介されています。フィルタリングされたポートフォリオは、クライアントのロゴをモノクロで表示します。プロジェクトのいずれかにカーソルを合わせると、マウスが移動した方向からオーバーレイが表示されます。オーバーレイには、提供されている会社の名前とサービスが、プロジェクトをライブで表示するためのリンクとともに表示されます。続いて、CTA、視差の背景画像と紹介文のスライダー、ソーシャルフォローボタン、Instagramフィードを含む2列のセクションが続きます。

ウェブサイトを見る

10.ワカ

これは最初にモバイル用に開発されました。このページは、タイトルと説明を含む特大のテキストを含む大きなセクションで紹介されています。スクロールすると、ティッカーがページの下部に表示され、画面のこの場所に残ります。画像にカーソルを合わせると、カーソルが大きな矢印に変わり、大きな手に変わります。プロジェクトは2つの列に表示されます。このページには、サービスのリスト、お問い合わせフォーム、ニュースレターのオプトインも含まれています。フッターはスクロールで表示され、テキストの切り抜きセクションを通して表示されるビデオを表示します。

ウェブサイトを見る

終わりの考え

それはあなたの次のDiviウェブサイトのためにあなたを刺激するのを助けるためにクールなポートフォリオページを備えた11のDiviウェブサイトの私達の見方です。 ETブログには、宣伝文句、画像、ギャラリーなどのポートフォリオや要素に特に焦点を当てた記事がたくさんあります。

ここにいくつかあります：

フィルター可能なポートフォリオとポストナビゲーションを使用して、Diviでケーススタディを整理する方法
3つの無料の美しいプロジェクトページレイアウト（＆Divi Builderでさらに構築する方法）
DiviLeadsを使用してポートフォリオサイトの有効性を測定する方法
Diviで最小限のポートフォリオホームページを作成する方法
フィルタ、ヒーローセクション、CTAを使用して最小限のポートフォリオホームページを展開する
無料のDiviダウンロード：ホームページポートフォリオレイアウトパック
無料のDiviダウンロード：クリエイティブなシングルページポートフォリオレイアウトパック
Diviのフォールドアニメーションを使用して宣伝文句を開花させる
Hover.cssを使用してDiviの宣伝文句モジュールに高度なホバー効果を追加する方法
ディビの宣伝文句をスタイリングする5つの楽しい方法
Diviギャラリーモジュールを使用してグレースケールからカラーギャラリーへの作成
背景画像で独自のオーバーラップ効果を作成する方法
Diviの新しいフィルターオプションを使用して画像を美しくする方法

我々はあなたから聞きたい。 クールなポートフォリオページを備えたこれらのウェブサイトのどれがあなたのお気に入りですか？ コメントで教えてください。

グラフィックファーム/shutterstock.com経由の注目の画像