スライドダウンしてギャラリー画像のタイトルとキャプションをDiviで表示する方法

公開: 2021-06-04

画像がデザインの中心的な役割を果たすWebサイトを構築している場合は、ある時点でギャラリーを含めることをお勧めします。そこで、Divi Gallery Moduleが登場します。メディアライブラリから画像を直接選択して、整理された構造で表示できます。デフォルトでは、各画像のタイトルとキャプションも動的に表示できます。ただし、デザインに表示されるテキストの量を制限したい場合は、画像にカーソルを合わせると、画像のタイトルとキャプションを下にスライドして表示することをお勧めします。このチュートリアルでは、その方法を正確に説明します。 JSONファイルも無料でダウンロードできます！

それを手に入れましょう。

プレビュー

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

デスクトップ

ギャラリータイトルキャプション

モバイル

ギャラリータイトルキャプション

レイアウトを無料でダウンロード

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

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

無料でダウンロード

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

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

https://youtu.be/p6Bh7wz3HMc

私たちのYoutubeチャンネルを購読する

1.タイトルとキャプション付きの画像をアップロードする

メディアライブラリに移動

このチュートリアルの最初の部分では、メディアライブラリ内にタイトルとキャプション付きの画像を追加することに焦点を当てています。そこにたどり着くには、 WordPressダッシュボード>メディア>ライブラリに移動します。

ギャラリータイトルキャプション

画像をアップロードする

そこに到達したら、ギャラリーに含めたい画像をアップロードします。

ギャラリータイトルキャプション

タイトルとキャプションを追加する

各画像に個別にタイトルとキャプションを追加する必要があります。最適な結果を得るには、各画像で同じ長さのテキストを維持するようにしてください。

ギャラリータイトルキャプション

2.Diviでデザインを作成する

新しいページを作成するか、既存のページを開きます

画像がアップロードされたら、Diviでデザインを作成します。新しいページを作成するか、新しいページを開いて、上部にあるVisualBuilderを有効にします。

ギャラリータイトルキャプション

セクション＃1を追加

背景色

ページに新しいセクションを追加し、セクション設定を開きます。次の背景色を適用します。

背景色：#ededed

ギャラリータイトルキャプション

行＃1を追加

カラム構造

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

ギャラリータイトルキャプション

間隔

モジュールをまだ追加せずに、行設定を開き、[デザイン]タブに移動して、次の上下の余白を適用します。

トップマージン：5％
下マージン：5％

ギャラリータイトルキャプション

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

H2コンテンツを追加する

モジュールを追加するときは、H2コンテンツを含む列1のテキストモジュールから始めます。

ギャラリータイトルキャプション

H2テキスト設定

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

見出し2フォント：Montserrat
見出し2テキストサイズ：
- デスクトップ：62px
- タブレット：48px
- 電話番号：32px
見出し2行の高さ：1.3em

ギャラリータイトルキャプション

サイジング

さまざまな画面サイズでモジュールの最大幅も変更します。

最大幅：
- デスクトップ：500px
- タブレット：400px
- 電話番号：250px

ギャラリータイトルキャプション

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

可視性

列1で必要な次の最後のモジュールは、ディバイダーモジュールです。「ディバイダーを表示」オプションが有効になっていることを確認します。

仕切りを表示：はい

ギャラリータイトルキャプション

ライン

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

線の色：＃ffc000

ギャラリータイトルキャプション

サイジング

モジュールのサイズ設定も変更します。

仕切りの重量：5px
最大幅：100px
高さ：5px

ギャラリータイトルキャプション

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

コンテンツを追加する

列2で必要なモジュールは、説明コンテンツを含むテキストモジュールだけです。

ギャラリータイトルキャプション

テキスト設定

モジュールのテキスト設定を次のように変更します。

テキストフォント：Lato
テキスト行の高さ：2.2em

ギャラリータイトルキャプション

間隔

上マージンも適用します。

トップマージン：50px

ギャラリータイトルキャプション

セクション＃2を追加

前のセクションの下に別のセクションを追加します。

ギャラリータイトルキャプション

グラデーションの背景

セクション設定を開き、グラデーションの背景を適用します。

色1：#ededed
色2：#ffffff
グラデーションタイプ：線形
開始位置：20％
終了位置：20％

ギャラリータイトルキャプション

間隔

セクションの[デザイン]タブに移動し、デフォルトの上下のパディングをすべて削除します。

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

ギャラリータイトルキャプション

行＃1を追加

カラム構造

次の列構造を使用して、セクションに新しい行を追加して続行します。

ギャラリータイトルキャプション

背景色

モジュールをまだ追加せずに、行設定を開き、背景色を適用します。

背景色：＃f4f4f4

ギャラリータイトルキャプション

サイジング

次に行のサイズ設定に移動し、次の変更を適用します。

カスタムガター幅を使用：はい
側溝幅：2
幅：90％
最大幅：1580px

ギャラリータイトルキャプション

間隔

パディング値もカスタマイズしています。

トップパディング：150px
ボトムパディング：0px
左パディング：5％
右パディング：5％

ギャラリータイトルキャプション

ギャラリーモジュールを列に追加

アップロードされた画像を選択します

ギャラリーモジュールを使用して、画像を追加する時が来ました！このチュートリアルの最初の部分で、メディアライブラリにアップロードした画像を選択します。

ギャラリータイトルキャプション

要素

ホバー効果はデスクトップでのみ意味があります。画面サイズが小さい場合、ホバーは発生せず、タッチすると代わりにライトボックス効果がトリガーされます。そのため、デスクトップにはタイトルとキャプションのみを表示し、小さい画面サイズでは無効にします。また、ページネーションを無効にしています。これらのオプションは、要素の設定にあります。

タイトルとキャプションを表示
- デスクトップ：はい
- タブレットと電話：いいえ
ページ付けを表示：いいえ

ギャラリータイトルキャプション

レイアウト

モジュールの[デザイン]タブに移動し、次にレイアウトを変更します。

レイアウト：グリッド
サムネイルの向き：ポートレート

ギャラリータイトルキャプション

かぶせる

オーバーレイ設定も変更しています。

オーバーレイアイコンの色：#ffffff
オーバーレイの背景色：rgba（0,0,0,0.25）

ギャラリータイトルキャプション

テキスト設定

次に、テキスト設定でテキストの色を変更します。

テキストの色：明るい

ギャラリータイトルキャプション

タイトルテキスト設定

次に、タイトルテキストのスタイルを設定します。

タイトル見出しレベル：H3
タイトルフォント：Montserrat
タイトルテキストサイズ：20px

ギャラリータイトルキャプション

キャプションテキストの設定

キャプションテキストの設定も変更します。

キャプションフォント：Lato
キャプションテキストの色：#efefef
キャプション文字の間隔：0.5px
キャプションラインの高さ：1.9em

ギャラリータイトルキャプション

ギャラリーアイテムCSS

次に、[詳細設定]タブに移動します。そこに到達したら、次の行のCSSコードをギャラリーアイテムのタイトルCSSボックスに追加します。

padding-top: 20px;
padding-left: 7%;
padding-right: 7%;

ギャラリータイトルキャプション

ギャラリーアイテムキャプションCSS

そして、ギャラリーアイテムのキャプションCSSボックス内で次のコード行を使用します。

padding-top: 20px;
padding-left: 7%;
padding-right: 7%;
padding-bottom: 20px;

ギャラリータイトルキャプション

3.リビール効果を適用します

CSSIDをギャラリーモジュールに追加する

デザインが整ったので、リビール効果を作成するために必要ないくつかの手順に集中できます。最初に行うことは、CSSIDをギャラリーモジュールに追加することです。

CSS ID：divi-gallery

ギャラリータイトルキャプション

ギャラリーモジュールの下にコードモジュールを追加

次に、ギャラリーモジュールの下にコードモジュールを追加します。

ギャラリータイトルキャプション

スタイルタグを追加する

効果を作成するために、いくつかのCSSコードを使用します。そのコード用にコードモジュールを準備するために、コードボックス内にいくつかのスタイルタグを配置します。

ギャラリータイトルキャプション

スタイルタグの間にCSSコードを挿入する

そして、スタイルタグの間にCSSコードの次の行をコピーして貼り付けます。

#divi-gallery .et_pb_gallery_item h3, #divi-gallery .et_pb_gallery_item p {
visibility: hidden;
opacity: 0;
transform: translateY(-50px);
background-color: #FE7541;
margin-bottom: 0px !important;
margin-top: 0px !important;
}
  
#divi-gallery .et_pb_gallery_item h3, #divi-gallery .et_pb_gallery_item p, #divi-gallery .et_pb_gallery_image {
-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1); 
}

#divi-gallery .et_pb_gallery_item:hover h3, #divi-gallery .et_pb_gallery_item:hover p {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
  
#divi-gallery .et_pb_gallery_item:hover div {
transform: translateY(-10px);
}

ギャラリータイトルキャプション

それでおしまい！ページ設定を保存し、ビジュアルビルダーを終了して、ギャラリーアイテムの1つにカーソルを合わせたときの結果を表示します。

プレビュー

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

デスクトップ

ギャラリータイトルキャプション

モバイル

ギャラリータイトルキャプション

最終的な考え

この投稿では、Diviの組み込みギャラリーモジュールを使用してクリエイティブにする方法を紹介しました。具体的には、画像をデスクトップに置いたときに、画像のタイトルとキャプションを下にスライドして表示する方法を示しました。これにより、一度に多くのテキストを表示することなく、視覚的なデザインを維持できます。 JSONファイルも無料でダウンロードできました！ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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

スライドダウンしてギャラリー画像のタイトルとキャプションをDiviで表示する方法

プレビュー

デスクトップ

モバイル

レイアウトを無料でダウンロード

無料でダウンロード

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

1.タイトルとキャプション付きの画像をアップロードする

メディアライブラリに移動

画像をアップロードする

タイトルとキャプションを追加する

2.Diviでデザインを作成する

新しいページを作成するか、既存のページを開きます

セクション＃1を追加

背景色

行＃1を追加

カラム構造

間隔

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

H2コンテンツを追加する

H2テキスト設定

サイジング

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

可視性

ライン

サイジング

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

コンテンツを追加する

テキスト設定

間隔

セクション＃2を追加

グラデーションの背景

間隔

行＃1を追加

カラム構造

背景色

サイジング

間隔

ギャラリーモジュールを列に追加

アップロードされた画像を選択します

要素

レイアウト

かぶせる

テキスト設定

タイトルテキスト設定

キャプションテキストの設定

ギャラリーアイテムCSS

ギャラリーアイテムキャプションCSS

3.リビール効果を適用します

CSSIDをギャラリーモジュールに追加する

ギャラリーモジュールの下にコードモジュールを追加

スタイルタグを追加する

スタイルタグの間にCSSコードを挿入する

プレビュー

デスクトップ

モバイル

最終的な考え

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