Diviの無料で高度なクライアントショーケースホバー/クリックデザインをダウンロードする

人は他の人と関係があります。 そのため、アクセスするほとんどすべてのWebサイトで、顔が表示されます。 以前の顧客からチームメンバーなどまで。 あなたがあなたの会社の背後にいるクライアントや人々を早く見せれば、あなたの会社、ブランド、または製品があなたの会社、ブランド、または製品が適切であると彼らに納得させる可能性が高くなります。 この投稿では、美しく高度な方法でクライアントを紹介することに焦点を当てます。 JSONファイルも無料でダウンロードできます！

それを手に入れよう！

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

モバイル

クライアントショーケースホバー/クリックデザインを無料でダウンロード

無料のクライアントショーケースホバー/クリックデザインを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

再作成を始めましょう！

新しいセクションを追加

最初に行う必要があるのは、作業中のページに新しい通常のセクションを追加することです。

新しい行を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

サイジング

モジュールを追加する前に、行の設定を開き、行が画面の幅全体を占めるようにします。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 列の高さを等しくする：はい
• 幅：100％
• 最大幅：100％

間隔

次に、行のデフォルトの上下のパディングを削除します。

• トップパディング：0px
• ボトムパディング：0px

列2の設定

2番目の列の設定を開いて続行します。

間隔

列にいくつかのカスタムパディング値を追加します。

• トップパディング：9vw
• ボトムパディング：9vw
• 左パディング：8vw
• 右パディング：8vw

列1にテキストモジュールを追加

H3と段落のコンテンツを追加する

行と列の設定が完了したら、列1にテキストモジュールを追加して続行します。クライアント情報をコンテンツボックスに追加します。

グラデーションの背景

次に背景設定に移動し、次のグラデーション背景を適用します。

• 色1：rgba（43,135,218,0）
• 色2：rgba（0,0,0,0.55）
• 背景画像の上にグラデーションを配置：はい

背景画像

背景画像もアップロードします。

テキスト設定

[デザイン]タブに移動し、それに応じてテキスト設定を変更します。

• テキストフォント：Lato
• テキストの色：#dbdbdb
• テキストサイズ：1vw（デスクトップ）、1.8vw（タブレット）、2.3vw（電話）
• テキスト行の高さ：1.5vw（デスクトップ）、2vw（タブレット）、2.5vw（電話）

見出し3のテキスト設定

H3テキスト設定にもいくつかの変更を加えます。

• 見出し3フォント：プレイフェアディスプレイ
• 見出し3フォントの太さ：太字
• 見出し3のテキストの色：#ffffff
• 見出し3テキストサイズ：3vw（デスクトップ）、4vw（タブレット）、5vw（電話）
• 見出し3行の高さ：1.6em

間隔

間隔の設定に移動し、それに応じてモジュールの形状と位置をスタイリングして続行します。

• トップマージン：9vw
• 下マージン：9vw
• 左マージン：7vw（デスクトップ）、16vw（タブレット）、17vw（電話）
• 右マージン：7vw（デスクトップ）、16vw（タブレット）、17vw（電話）
• トップパディング：32vw（デスクトップ）、55vw（タブレット）、49vw（電話）
• 下部のパディング：3vw（デスクトップ）、6vw（タブレットと電話）
• 左パディング：2vw（デスクトップ）、4vw（タブレット）、5vw（電話）
• 右パディング：2vw（デスクトップ）、4vw（タブレット）、5vw（電話）

ボックスシャドウ

カラフルなボックスシャドウも追加しています。

• ボックスシャドウの水平位置：0px
• ボックスシャドウの垂直位置：0px
• ボックスシャドウスプレッド強度：7vw
• 影の色：＃ffcf0f

CSS ID

CSS IDを追加して、モジュール設定を完了します。

• CSS ID：photo-display-1

テキストモジュールを5回複製する

最初のテキストモジュールを完了したら、先に進んで5回クローンを作成します。

各複製のコンテンツと背景画像を変更する

複製ごとにコンテンツと背景画像を変更します。

各複製のボックスシャドウカラーを変更します

ボックスシャドウと一緒に。

• 影の色：＃9f89ed

各複製のCSSIDを変更し、CSSクラスを追加します

列1の各テキストモジュールには、一意のCSSIDが必要です。 列の最初のテキストモジュールには「photo-display-1」CSSIDが含まれ、2番目には「photo-display-2」、3番目には「photo-display-3」というように続きます。 重複する各テキストモジュールにもCSSクラスを追加します（元のテキストモジュールにCSSクラスを追加しないでください）。

• CSS ID：photo-display-2（2から6）
• CSSクラス：photo-hide-first（最初のものを除く列1のすべてのテキストモジュール）

テキストモジュール＃1を列2に追加します

H2コンテンツを追加する

列1の6つのモジュールをすべて完了したら、2番目の列に進むことができます。 そこで必要な最初のモジュールは、H2コンテンツを含むテキストモジュールです。

H2テキスト設定

[デザイン]タブに移動し、それに応じてH2テキスト設定を変更します。

• 見出し2フォント：プレイフェアディスプレイ
• 見出し2のテキストの色：＃636363
• 見出し2テキストサイズ：3vw（デスクトップ）、6vw（タブレットと電話）
• 見出し2文字の間隔：0.1vw
• 見出し2行の高さ：1.2em

テキストモジュール＃2を列2に追加します

コンテンツを追加する

選択した段落コンテンツを含む別のテキストモジュールを列2に追加します。

テキスト設定

[デザイン]タブに移動し、それに応じてテキスト設定を変更します。

• テキストフォント：Lato
• テキストの配置：正当化
• テキストサイズ：0.9vw（デスクトップ）、2vw（タブレット）、2.7vw（電話）
• テキスト行の高さ：2.1em

間隔

間隔設定のマージン値も変更します。

• トップマージン：2vw
• 下マージン：2vw
• 右マージン：7vw

Dividerモジュールを列2に追加します

可視性

次のモジュールであるDividerモジュールに進みます。 [仕切りを表示]オプションが有効になっていることを確認してください。

• 仕切りを表示：はい

ライン

デザインタブに移動し、線の色を変更します。

• 線の色：＃636363

間隔

次に、さまざまな画面サイズでマージン値を変更します。

• 下マージン：7vw
• 左マージン：14vw（デスクトップ）、39vw（タブレット）、38vw（電話）
• 右マージン：14vw（デスクトップ）、39vw（タブレット）、38vw（電話）

変換回転

Dividerモジュールを回転させます。

• 左：90度

変換翻訳

そして、いくつかのカスタム変換を使用して位置を変更し、さまざまな画面サイズで値を変換します。

• 右：2vw（デスクトップ）、3vw（タブレットと電話）
• 下：-17.3vw（デスクトップ）、-43vw（タブレットと電話）

テキストモジュール＃3を列2に追加します

コンテンツを追加する

次に必要なモジュールは、別のテキストモジュールです。 対応するクライアント名をコンテンツボックスに必ず追加してください（列1の最初のテキストモジュールと一致させてください）。

テキスト設定

[デザイン]タブに移動し、それに応じてテキスト設定を変更します。

• テキストフォント：Lato
• テキストフォントスタイル：大文字
• テキストサイズ：1.3vw（デスクトップ）、2.5vw（タブレット）、3vw（電話）
• テキスト文字の間隔：1px
• テキスト行の高さ：1.2em

間隔

次に、カスタムの上下マージンを追加します。

• トップマージン：1em
• 下マージン：1em

CSS ID

デザインタブに移動し、CSSIDを追加します。 番号が列1の対応するテキストモジュールと同じであることを確認してください。

• CSS ID：photo-click-1

クローンテキストモジュール＃35回

最初のクライアントテキストモジュールを完了したら、5回クローンを作成します。

各複製の内容を変更する（列1のテキストモジュールと一致）

重複する各テキストモジュールのクライアント名を変更します。

各複製のCSSIDを変更します

そして、各複製のCSSIDを列1のテキストモジュールと一致させます。

• CSS ID：photo-click-2（2から6）

コードモジュール＃1を列2に追加します

CSSコードを挿入

このチュートリアルの最後の部分では、ホバー機能を機能させることに焦点を当てています。 最初のコードモジュールを列2に追加し、CSSコードの次の行を挿入します。

<style>
.photo-hide-first {
display: none;
}
</style>

コードモジュール＃2を列2に追加します

JQueryコードを挿入する

前のコードモジュールのすぐ下に別のコードモジュールを追加し、次のjQueryコードを挿入して、ホバー関数を機能させます。

<script>
jQuery(function($){

$('#photo-click-1').css({'color': '#ffcf0f', 'font-weight': 'bold', 'padding-left': '0.5em'});

$('[id*="photo-click"]').hover(function() {

var selector1 = $(this).attr('id').replace('click', 'display');
var $photo = $('#' + selector1);
var $photoColor = $photo.css('box-shadow').replace(/^.*(rgba?([^)]+)).*$/,'$1')

$photo.siblings().hide();
$photo.show();

$('[id*="photo-click"]').css({'color': '', 'font-weight': '', 'padding-left': ''});
$(this).css({'color': $photoColor, 'font-weight': 'bold', 'padding-left': '0.5em'});

});
});
</script>

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最後に見てみましょう。

デスクトップ

モバイル

最終的な考え

この投稿では、作成した任意のWebサイトで使用できる美しいクライアントショーケースを作成する方法を紹介しました。 このアプローチを機能させるために、Diviの組み込みオプションといくつかのjQueryコードを組み合わせました。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。