【超簡単】Diviでフォトギャラリーを作る方法

 

こんにちは、ナオミです。
今日はDiviのギャラリーモジュールを使って、こんな感じのフォトギャラリーを作って見たいと思います。

本当簡単に作れますよ。

 

 

まずはDiviのギャラリーモジュールを追加

そして画像を追加し、表示したい画像の数を設定します。

こんな感じに表示されれば成功です。

タイトルとキャプションを隠す

次にタイトルとキャプションを隠します。

要素の下に、『タイトルとキャプションを表示』というオプションがあるので、それを『いいえ』にします。

これで上の画像のようにタイトルが消えます。

画像のオーバーレイの設定

次に画像上にカーソルが来た時、画像がどう反応するのかを設定します。

これがデフォルトの設定です。

モジュール設定のデザインタブの下のオーバーレイの設定でこのエフェクトを変えることができます。

 

簡単にカスタマイズできますので、色々と試してみるのも面白いです。

画像のサムネイルの間の隙間を消す

ギャラリーのサムネイルの画像の間にまだ隙間がありますよね。この隙間の消し方を説明します。

この設定は実はギャラリーモジュールの設定はないんです。

これは一見ギャラリーモジュールの設定のように見えますが、実はこれは行の設定なんです。

 

行の設定をクリックします。

Diviフォトギャラリーの作り方、行の設定で隙間を消す

行の設定の、デザインタブへ行き、その下のサイズ変換を開きます。

そして、『使用カスタム溝幅』をはいにセットし、列感覚にします。

これで隙間が消えます。

完成と更なるカスタマイズの可能性

 

これでフォトギャラリー完成です。一からフォトギャラリーを作るよりずっと簡単だったと思います。

今日紹介したのは、このDiviのギャラリーモジュールのできることの半分程度です。

もっと色々なカスタマイズができます。

例えば、こんなこともできます。

 

 

このギャラリーのダウンロード

この記事で作ったギャラリーをDiviライブラリにしましたので、どうぞ自由に使って見てください。

ここからダウンロードできます。どうやったら自分のDiviにインポートできるのかもこのリンクで説明しています。

>>ダウンロード

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です