見事なギャラリーグリッドの画像コーナーにDiviでラベルを付ける
公開: 2019-06-29あなたのウェブサイトのギャラリーに画像を表示するためのユニークで美しい方法をお探しですか？ もしそうなら、私たちはあなたがこの投稿を気に入ると確信しています。 すべての画面サイズで100％の応答性を維持する美しいデザインの一部として、テキストモジュールを使用して画像の角を切り取る方法を紹介します。 これは、すばらしいデザインを維持しながら、画像に番号付きラベルを追加するための優れた方法です。 デザイン例のJSONファイルも無料でダウンロードできます。
それを手に入れよう！
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
ギャラリーセクションのレイアウトを無料でダウンロード
無料のギャラリーセクションのレイアウトを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
私たちのYoutubeチャンネルを購読する
再作成を始めましょう
新しいセクションを追加
間隔
最初に行う必要があるのは、作業中のページに新しいセクションを追加することです。 セクション設定を開き、デフォルトの上部と下部のパディングをすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
新しい行を追加
カラム構造
次の列構造を使用して、新しい行を追加して続行します。
背景色
次に白い背景色を追加します。
- 背景色：#ffffff
サイジング
サイズ設定に移動し、次の設定を適用して、列、行、およびセクション間のすべてのスペースを削除します。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 幅：100％
- 最大幅：100％
間隔
デフォルトの上下のパディングをすべて削除して続行します。
- トップパディング：0px
- ボトムパディング：0px
列1、2、3、4の主要要素
ここで、すべての画面サイズで4列の構造が維持されるようにするために、各列のメイン要素に次のCSSコード行を個別に追加して、各列の幅が25％を維持するようにします。
width: 25% !important;
列1に画像モジュールを追加
1：1の画像をアップロード
モジュールの追加を開始する時が来ました！ 新しい画像モジュールを最初の列に追加し、選択した正方形の画像をアップロードします（または、この投稿の冒頭でダウンロードできたzipフォルダーにある画像を使用します）。
ライトボックス
次に、リンク設定でライトボックスオプションを有効にします。
- ライトボックスで開く：はい
サイジング
すべての画面サイズで画像の応答性を維持するために、[全幅を強制]オプションも有効にします。
- 全幅を強制：はい
デフォルトのフィルター
明るさも変えています。
- 明るさ：50％
ホバーフィルター
そして、ホバーすると「100％」に戻します。
- 明るさ：100％
デフォルトのZインデックス
可視性設定に移動し、Zインデックスがデフォルト状態で「0」のままであることを確認します。
- Zインデックス：0
ホバーZインデックス
ただし、ホバーすると、次の手順で追加する番号付きラベルのテキストモジュールと重なるようにします。 そのために、ホバーZインデックス値を増やします。
- Zインデックス：100
画像モジュールのクローンを3回作成し、残りの列に配置します
列1のイメージモジュールを完了すると、3回クローンを作成できます。 行の残りの3つの列に重複を配置します。
画像を変更する
複製の画像を変更します。
列2の画像モジュールに上部マージンを追加します
そして、2番目の列の画像モジュールに上マージンを追加します。
- トップマージン：24.7vw
画像モジュール＃1の下にテキストモジュールを追加
コンテンツを追加する
列1に必要な次のモジュールは、テキストモジュールです。 コンテンツボックスに番号を追加します。
背景色
次に背景色を変更します。 この色は、行に割り当てた背景色と一致する必要があります。
- 背景色：#ffffff
テキスト設定
デザインタブに移動し、テキスト設定を変更します。
- テキストフォント：Lora
- テキストの配置：右
- テキストの色：＃000000
- テキストサイズ：3vw
- テキスト行の高さ：3vw
サイジング
モジュールの幅も縮小しています。
- 幅：7vw
間隔
次に、間隔設定でモジュール用のスペースを作成します。
- トップパディング：0.5vw
- ボトムパディング：2.5vw
- 右パディング：0.9vw
Zインデックス
そして、Zインデックスを増やします。
- Zインデックス：99
テキストモジュールを3回複製する
テキストモジュールの一般的な手順を完了したら、3回クローンを作成できます。
ポジショニング
それに応じて複製を配置します。
テキストモジュールをカスタマイズする
テキストモジュール＃1
負のトップマージン
位置に応じてさまざまなテキストモジュールのカスタマイズを開始します。 列1のテキストモジュールを開き、負の上部マージンを追加します。
- トップマージン：-5.9vw
ボックスシャドウ
また、次の設定を使用してボックスシャドウを追加しています。
- ボックスシャドウの水平位置：7vw
- ボックスシャドウの垂直位置：5.9vw
- ボックスシャドウスプレッド強度：0px
- 影の色：rgba（35,50,255,0.94）
テキストモジュール＃2
番号の変更
2番目の列のテキストモジュールを開いて番号を変更して続行します。
テキストの配置
テキストの配置も変更します。
- テキストの配置：左
モジュールの調整
また、サイズ設定でモジュールの配置を変更します。
- モジュールの配置：右
間隔
間隔の設定に移動し、負の上部マージンを追加します。 右側ではなく左側にもパディングを追加します。
- トップマージン：-6vw
- 左パディング：0.9vw
ボックスシャドウ
ボックスシャドウを追加して、テキストモジュールのデザインを完成させます。
- ボックスシャドウの水平位置：7vw
- ボックスシャドウの垂直位置：-6vw
- ボックスシャドウスプレッド強度：0px
- 影の色：#ededed
テキストモジュール＃3
番号の変更
3列目のテキストモジュールに移りましょう！ コンテンツボックスの番号を変更します。
負のトップマージン
[デザイン]タブに移動し、負の上部マージンを追加します。
- トップマージン：-6vw
ボックスシャドウ
ボックスシャドウも使用します。
- ボックスシャドウの水平位置：-7vw
- ボックスシャドウの垂直位置：-6vw
- ボックスシャドウスプレッド強度：0px
- 影の色：＃ff2323
テキストモジュール＃4
番号の変更
次の最後のテキストモジュールに進みます。 ここでも番号を変更してください。
テキストの配置
次に、テキストの配置を変更します。
- テキストの配置：左
モジュールの調整
サイズ設定でもモジュールの配置を変更します。
- モジュールの配置：右
間隔を変更する
次に間隔設定を変更します。
- トップマージン：24.7vw
- 下マージン：-6vw
- 左パディング：0.9vw
ボックスシャドウ
そして、次の設定でボックスシャドウを追加して、テキストモジュールのデザインを完成させます。
- ボックスシャドウの水平位置：-7vw
- ボックスシャドウの垂直位置：-5.9vw
- ボックスシャドウスプレッド強度：0px
- 影の色：＃000000
行全体のクローンを作成する
行が完成したら、表示する画像の数に応じて、必要な回数だけ行を複製できます。
番号と画像の変更
すべての画像と番号を変更して完了です。
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
最終的な考え
この投稿では、ラベル付きの画像コーナーを備えた見栄えの良いギャラリーを作成する方法を紹介しました。 これは、美的に魅力的な方法で画像を紹介するためのユニークな方法です。 チュートリアルの冒頭でJSONファイルをダウンロードすることもできました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。