Diviの変換オプションを使用してポートフォリオアイテムを美しくスタックする方法

新しいDivi変換オプションは、視覚的に魅力的なWebデザインの作成に向けて多くの新しい扉を開きました。 これにより、Webサイトを最初から設計するときに、画像編集ソフトウェアが不要になります。 100％レスポンシブデザインを維持しながら、希望どおりの外観に変換できます。

この投稿では、新しい変換オプションを使用して、ポートフォリオアイテムを美しくスタックします。 これは、たとえば、以前に作成したWebサイトを紹介するための優れたアプローチです。 また、訪問者が使用している画面サイズに関係なく、画像が正しい場所にとどまるようにします。 このチュートリアルが、Webサイトをニーズに合わせてカスタマイズするときに、Diviの新しい変換オプションを使用して創造性を発揮するきっかけになることを願っています。

それを手に入れよう！

プレビュー

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

再作成を始めましょう！

新しいセクションを追加

グラデーションの背景

ページに新しいセクションを追加することから始めます。 セクション設定を開き、グラデーションの背景を追加します。

• 色1：＃f4f4f4
• 色2：rgba（255,255,255,0）
• グラデーションタイプ：ラジアル
• 半径方向：中心
• 開始位置：30％
• 終了位置：30％

間隔

次に、[デザイン]タブに移動し、間隔設定でカスタムパディング値を変更します。

• トップパディング：0px（デスクトップ）、18vw（タブレット）、40vw（電話）
• 下部のパディング：0px（デスクトップ）、18vw（タブレット）、40vw（電話）

新しい行を追加

カラム構造

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

サイジング

モジュールをまだ追加せずに、行設定を開き、サイズ設定を変更します。

• この行を全幅にする：はい
• カスタムガター幅を使用：はい
• 側溝幅：1
• 列の高さを等しくする：はい

間隔

次に、間隔設定に移動し、上部と下部のデフォルトのパディングを削除します。

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

画面

また、小さい画面サイズで両方の列が隣り合って表示されるようにしています。 これを行うには、CSSコードの1行を行のメイン要素に追加する必要があります。

display: flex;

イメージモジュール＃1を列1に追加します

画像をアップロード

これで、さまざまなモジュールの追加を開始できます。 このチュートリアルに従うことができるようにするために、先に進んで次の印刷画面をコンピュータに保存してください。

印刷画面を最初の列の画像モジュールにアップロードします。

サイジング

次に、[デザイン]タブに移動し、[全幅を強制]オプションを有効にします。 これを行うと、画像は列の幅全体を占めるようになります。

• 全幅を強制：はい

間隔

画像のサイズを縮小するために、カスタムの左右の余白を追加します。 画面サイズに関係なく、画像のサイズが損なわれないようにするためにビューポートユニットを使用していることに気付くでしょう。

• トップマージン：-10vw
• 左パディング：11vw
• 右パディング：11vw

国境

次に、境界線設定の各コーナーに「2vw」を追加します。

ボックスシャドウ

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

• ボックスシャドウブラー強度：80px
• 影の色：rgba（0,0,0,0.3）

変換翻訳

これで、画像の変換を開始できます。 変換オプションの変換変換タブに次の値を追加します。

• 下：-26vw
• 右：-2vw

ここで追加する値は画像の幅と高さによって異なるため、別の画像を使用している場合は、それに応じて値を変更する必要があります。 ビューポートユニットを使用して、画像の位置がすべての画面サイズで同じであることを確認してください。

変換回転

変換回転タブに移動し、それに応じて画像を回転させます。

• 左：24度
• 中心：46度
• 右：-7度

スキューを翻訳する

最後になりましたが、次の値で変換スキューを有効にします。

• 下：-4度
• 右：24度

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

画像をアップロード

次の画像モジュールへ！ 次の印刷画面をコンピュータに保存するか、選択した別の印刷画面を使用します。

印刷画面を列1の2番目の画像モジュールにアップロードして続行します。

サイジング

次に、サイズ設定に移動し、[全幅を強制]オプションを有効にします。

• 全幅を強制：はい

間隔

間隔設定でいくつかのカスタムマージン値を使用して、画像のサイズを縮小し、前の画像とオーバーラップさせています。

• トップマージン：-81vw（デスクトップ）、-50vw（タブレットと電話）
• 左マージン：11vw
• 右マージン：11vw

国境

次に、境界線設定の各コーナーに「2vw」を追加します。

ボックスシャドウ

また、ボックスシャドウも追加します。 2番目のポートフォリオアイテム画像に暗いボックスシャドウを使用していることに注目してください。 これは、ポートフォリオアイテム間の深さを作成するのに役立ちます。

• ボックスシャドウブラー強度：150px
• 影の色：rgba（0,0,0,0.6）

変換翻訳

次に、変換設定に移動し、変換変換値を変更します。

• 下：-8vw
• 右：0px

繰り返しますが、これらの値は、実際には、印刷画面の配置方法と印刷画面の寸法によって異なります。 画像が小さいほど、大きな負の値を使用して画像を左に押す必要があります。

変換回転

変換回転タブに移動し、3つの値すべてを試してみてください。

• 左：24度
• 中心：46度
• 右：-7度

スキューを翻訳する

最後になりましたが、変換スキュー値を変更します。

• 下：-4度
• 右：24度

イメージモジュール＃3を列1に追加します

画像をアップロード

列1に必要な次の最後の画像モジュールに進みます。次の印刷画面をコンピュータに保存するか、他の任意の印刷画面を使用します。

保存した印刷画面を新しい画像モジュールに追加します。

サイジング

次に、サイズ設定に移動し、[全幅を強制]オプションを有効にします。

• 全幅を強制：はい

間隔

次に間隔設定に移動し、それに応じてマージン値を変更します。

• トップマージン：-107vw
• 左マージン：19vw
• 右マージン：19vw

国境

イメージモジュールの各コーナーに「2vw」を追加して続行します。

ボックスシャドウ

次にボックスシャドウを追加します。 繰り返しになりますが、以前の2つの画像モジュールで使用したものよりも強い影の色を使用しています。

• ボックスシャドウブラー強度：200px
• 影の色：rgba（0,0,0,0.82）

変換翻訳

次に、変換設定に移動し、変換変換値を変更します。

• 下：-42vw
• 右：11vw

変換回転

変換回転タブに移動し、そこでもいくつかの変更を加えます。

• 左：24度
• 中心：46度
• 右：-7度

スキューを翻訳する

最後になりましたが、変換スキュー値を変更します。

• 下：-4度
• 右：24度

タイトルテキストモジュールを列2に追加

H2コピーを追加

2列目へ！ 選択したH2コンテンツを含むテキストモジュールを追加します。

H2テキスト設定

次にH2テキスト設定に移動し、いくつかの変更を加えます。

• 見出し2フォント：Roboto
• 見出し2フォントの太さ：薄い
• 見出し2テキストの配置：左
• 見出し2のテキストの色：＃000000
• 見出し2テキストサイズ：5vw（デスクトップ）、6vw（タブレット）、7vw（電話）
• 見出し2文字の間隔：-1px

間隔

間隔設定にいくつかのカスタムマージン値を追加して続行します。

• トップマージン：35vw（デスクトップ）、10vw（タブレット）、0vw（電話）
• 左マージン：-4vw
• 右マージン：4vw

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

可視性

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

• 仕切りを表示：はい

色

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

• 色：＃8193fa

サイジング

サイズ設定も変更します。

• 仕切りの重量：8px
• 幅：28％

間隔

そして、いくつかのカスタムマージン値を追加します。

• トップマージン：1vw
• 左マージン：-4vw
• 右マージン：4vw

説明テキストモジュールを列2に追加

コンテンツを追加する

列2に必要な次のモジュールは、別のテキストモジュールです。 選択した段落コンテンツを追加します。

テキスト設定

次に、テキスト設定に移動して、いくつかの変更を加えます。

• テキストフォント：Open Sans
• テキストサイズ：0.6vw（デスクトップ）、1.2vw（タブレット）、1.8vw（電話）
• テキスト行の高さ：3.1em（デスクトップ）、2.7em（タブレット）、2.6em（電話）
• テキストの向き：左

間隔

次に、いくつかのカスタムマージン値を追加します。

• トップマージン：1vw
• 左マージン：-4vw
• 右マージン：4vw

ボタンモジュールを列2に追加

コピーを追加

設計を完了するために必要な次の最後のモジュールは、ボタンモジュールです。 選択したコピーを追加します。

ボタンの設定

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

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
• 色1：＃5627ba
• 色2：＃8fb5fc
• グラデーション方向：122度
• ボタンの境界線の幅：0px
• フォントの太さ：超太字
• フォントスタイル：大文字

間隔

カスタムマージンとパディング値も変更します。

• トップマージン：2vw（デスクトップ）、3vw（タブレット）、5vw（電話）
• 下マージン：6vw（タブレット）、8vw（電話）
• 左マージン：-4vw
• 右マージン：4vw
• トップパディング：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
• 下部のパディング：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
• 左パディング：3vw（デスクトップ）、5vw（タブレット）、7vw（電話）
• 右パディング：3vw（デスクトップ）、5vw（タブレット）、7vw（電話）

ボックスシャドウ

最後になりましたが、微妙なボックスシャドウを追加すれば完了です。

• ボックスシャドウブラー強度：40px
• 影の色：rgba（0,0,0,0.3）

プレビュー

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

最終的な考え

この投稿では、Diviの新しい変換オプションを使用してクリエイティブにする方法を紹介しました。 具体的には、ポートフォリオアイテムを積み上げて、見た目にも魅力的なデザインを作成しました。 また、すべての画面サイズで画像が見栄えがすることを確認しました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！