Diviの6列の行とビューポートユニットでクリエイティブになる方法
公開: 2019-01-11Diviのさまざまな柱構造により、基本的に考えているあらゆるデザインを作成できます。 また、元の形式で列構造を使用するのが最も簡単な方法ですが、6列の行のデザイン要素をビューポートユニットと組み合わせることで、さらに一歩進めることもできます。
たとえば、作成できるものの1つはコラージュです。 画像編集ソフトウェアを使用する必要はまったくありません！ さらに、各画像を個別のライトボックスで開くこともできます。 この投稿では、Diviの組み込みオプションのみを使用して上記のすべてを実行する方法を紹介します。
それを手に入れよう！
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
アプローチ
- セクション、行、列の間のすべてのガター幅を削除して、カスタムマージンとパディングを各モジュールに手動で追加できるようにします（ビューポートユニットを使用）
- ビューポートユニットは、デザイン要素の配置がすべてのデスクトップ画面サイズで同じであることを確認します
- コラージュデザイン全体に一致するように、各デザイン要素の間隔設定を個別に調整します
- Diviのレスポンシブオプションのおかげで、上記の設定がタブレットや電話に適用されないようにすることができます
作成を始めましょう
バックエンドプレビュー
これは、バックエンドの観点からの最終結果です。
新しいセクションを追加
最初に行う必要があるのは、新しいページを作成するか、既存のページを開いて通常のセクションを追加することです。
新しい行を追加
カラム構造
次の列構造を使用して、新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行設定を開き、サイズ設定を変更します。 これは、このチュートリアルの重要なステップです。 セクション、行、モジュール間のデフォルトのマージンとパディング値をすべて削除することで、ビューポートユニットを使用してすべてのデザイン要素に手動で間隔を追加できます。
- この行を全幅にする：はい
- カスタムガター幅を使用：はい
- 側溝幅：1
間隔
行にカスタムの左右のパディングも追加します。
- 左パディング：6.5vw
- 右パディング：6.5vw
タイトルテキストモジュールを列6に追加
コンテンツを追加する
モジュールの追加を開始する時が来ました！ 最初に、タイトルのテキストモジュールを列6に追加します。選択した見出し2のコピーをいくつか含めます。
見出しテキストの設定
次に、[デザイン]タブに移動し、モジュールの見出しテキスト設定を変更します。
- 見出し2フォント：バッタンバン
- 見出し2フォントの太さ：太字
- 見出し2テキストサイズ：4.2vw（デスクトップ）、10vw（タブレット）、8vw（電話）
- 見出し2文字の間隔：-1px
間隔
この行が行の6番目と5番目の列と重なるように、次にいくつかのカスタム間隔値を追加します。
- トップマージン：10vw
- 左マージン：-8vw（デスクトップ）、0vw（タブレットと電話）
- 右マージン：-50vw（タブレットと電話）
説明テキストモジュールを列6に追加
コンテンツを追加する
6列目に必要な次のモジュールは、説明テキストモジュールです。 選択したコンテンツをいくつか追加します。
間隔
次に、間隔設定に移動し、このモジュールも左に押します。
- トップマージン：2vw
- 左マージン：-8vw（デスクトップ）、0vw（タブレットと電話）
- 右マージン：-50vw（タブレット）、-3vw（電話）
ボタンモジュールを列6に追加
コピーを追加
6列目に必要な次の最後のモジュールはボタンモジュールです。 選択したコピーを追加します。
ボタンの設定
次に、[デザイン]タブに移動し、ボタンの設定を変更します。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストの色：#ffffff
- ボタンの境界線の幅：1px
- ボタンの境界線の色：＃000000
- ボタンの境界線半径：0px
- ボタンの文字間隔：-2px
間隔
また、間隔設定でカスタムマージン値を使用して、このモジュールを列5と6にオーバーラップさせる必要があります。
- トップマージン：2vw（デスクトップ）、5vw（タブレット）、10vw（電話）
- 左マージン：-8vw（デスクトップ）、0vw（タブレットと電話）
- 右マージン：-50vw（タブレットと電話）
- 左パディング：30px
- 右パディング：30px
イメージモジュール＃1を列1に追加します
画像の寸法
すべての異なる画像モジュールの追加を開始する時が来ました！ 私たちが再作成している例は、幅880px、高さ1320の画像のみを使用している場合、100％レスポンシブです。 したがって、まったく同じ例を最初から作成する場合は、その特定の寸法のセットを持つ画像を使用する必要があります。 ただし、これをあらゆる種類の画像サイズで機能させる場合は、全体のデザインに合わせて、各画像モジュールのビューポート単位を手動で調整する必要があります。
画像をアップロード
最初の3つの列のそれぞれは、2つの画像モジュールをカウントします。 最初のイメージモジュールを列1に追加します。
間隔
次に、間隔の設定に移動し、ビューポート単位を使用して画像のサイズを大きくします。
- トップマージン：0.5vw（タブレットと電話のみ）
- 下マージン：0.5vw（タブレットと電話のみ）
- 左マージン：-5vw（デスクトップ）、0.5vw（タブレットと電話）
- 右マージン：-2vw（デスクトップ）、0.5vw（タブレットと電話）
イメージモジュール＃2を列1に追加します
画像をアップロード
列1の2番目の画像モジュールもアップロードします。
間隔
また、このモジュールの間隔設定も変更してください。
- トップマージン：0.4vw（デスクトップ）、0.5vw（タブレットと電話）
- 下マージン：0.5vw（タブレットと電話のみ）
- 左マージン：-8.1vw（デスクトップ）、0.5vw（タブレットと電話）
- 右マージン：3.7vw（デスクトップ）、0.5vw（タブレットと電話）
- 左パディング：3vw（デスクトップ）、0vw（タブレットと電話）
- 右パディング：3vw（デスクトップ）、0vw（タブレットと電話）
イメージモジュール＃3を列2に追加します
画像をアップロード
2列目へ！ 新しい画像モジュールを追加し、画像をアップロードします。
間隔
間隔設定でカスタムマージンとパディング値を使用して、画像のサイズを縮小します。
- トップマージン：0.5vw（タブレットと電話のみ）
- 下マージン：0.5vw（タブレットと電話のみ）
- 左マージン：-0.5vw（デスクトップ）、0.5vw（タブレットと電話）
- 右マージン：0.5vw（タブレットと電話のみ）
- 左パディング：3vw（デスクトップ）、0vw（タブレットと電話）
- 右パディング：3vw（デスクトップ）、0vw（タブレットと電話）
イメージモジュール＃4を列2に追加します
画像をアップロード
2番目のイメージモジュールも列2に追加します。
間隔
また、ここでも間隔の設定を変更します。
- トップマージン：0.5vw
- 下マージン：0.5vw（タブレットと電話のみ）
- 左マージン：-0.5vw（デスクトップ）、0.5vw（タブレットと電話）
- 右マージン：0.5vw（タブレットと電話のみ）
- 左パディング：3vw（デスクトップ）、0vw（タブレットと電話）
- 右パディング：3vw（デスクトップ）、0vw（タブレットと電話）
イメージモジュール＃5を列3に追加します
画像をアップロード
次の最後の列に進みます。 最初の画像モジュールを追加します。
間隔
次に、イメージモジュールの間隔設定を変更します。 これらの値は、下の印刷画面でわかるように、画像のサイズを大きくするのに役立ちます。
- トップマージン：0.5vw（タブレットと電話のみ）
- 下マージン：0.5vw（タブレットと電話のみ）
- 左マージン：-2.5vw（デスクトップ）、0.5vw（タブレットと電話）
- 右マージン：-17.5vw（デスクトップ）、0.5vw（タブレットと電話）
イメージモジュール＃6を列3に追加します
画像をアップロード
列3に次の最後のイメージモジュールを追加します。
間隔
そして、カスタムマージン値を追加して、その位置全体を変更します。 レスポンシブな目的で、このモジュールを列2ではなく列3に追加します。
- トップマージン：-26.7vw（デスクトップ）、0.5vw（タブレットと電話）
- 下マージン：0.5vw（タブレットと電話のみ）
- 左マージン：-20.5vw（デスクトップ）、0.5vw（タブレットと電話）
- 右マージン：17.3vw（デスクトップ）、0.5vw（タブレットと電話）
イメージモジュール＃1のライトボックスを有効にする
すべての画像を配置したら、先に進んで、最初の画像モジュールの設定でライトボックスオプションを有効にします。
- ライトボックスで開く：はい
ライトボックスオプションをコピーして、セクション内のすべての画像に適用
最初の画像モジュールのライトボックスオプションを有効にしたら、このオプションをコピーして、セクション内の他のすべての画像モジュールに貼り付けることができます。
画像モジュール＃1に境界半径を追加
最初の画像モジュールにもいくつかの丸い角を追加します。
セクション内のすべての画像に境界半径を拡張する
そして、時間を節約するために、これらの丸みを帯びた角をセクション内のすべての画像モジュールに拡張します。
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最後に見てみましょう。
最終的な考え
Diviの新しい6列の行で得られる機会は無限大です。 この投稿では、6列の行とビューポートユニットを使用して、見事でユニークなコラージュを作成する方法を紹介しました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！