Diviの変換オプションを使用して対角線のデザイン構造を作成する（無料ダウンロード！）

私たちは常にDiviであなたが持っているデザインの可能性を拡大する方法を探しています。 また、変換オプションの更新が発表されて以来、カスタムコーディングの知識がなくても、多くの新しい手法が可能になりました。

この投稿では、見事な斜めのデザイン構造を作成する方法を紹介します。 私たちが再現するデザインは、ヒーローセクションに最適で、セットアップしたいあらゆる種類のWebサイトに一致します。 チュートリアルの最後に、JSONファイルを無料でダウンロードすることもできます。

それを手に入れよう！

プレビュー

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

再作成を始めましょう！

新しいセクションを追加

グラデーションの背景

新しいページを作成するか、既存のページを開いて、通常のセクションを追加することから始めます。 セクション設定を開き、次の設定を使用してグラデーションの背景を追加します。

• 色1：＃ffd633
• 色2：#efefef
• 勾配方向：217度
• 開始位置：45％
• 終了位置：45％

間隔

次に、[デザイン]タブに移動し、カスタムの上部と下部のパディングを追加します。

• トップパディング：4vw
• ボトムパディング：12vw

オーバーフロー

変換オプションがセクションコンテナを超えないようにする必要があります。 これを実現するために、セクションのメイン要素に1行のCSSコードを追加します。

overflow: hidden;

行＃1を追加

カラム構造

次の列構造を使用して最初の行を追加します。

サイジング

モジュールをまだ追加せずに、行の設定を開き、行が画面の幅全体を占めるようにします。 この投稿の次のステップでは、ビューポートユニットを使用して、カスタムの左右のパディング値を追加することにより、削除したスペースを置き換えます。 これにより、すべての画面サイズでデザインの応答性が維持されます。

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

間隔

次に、いくつかのカスタムパディング値を間隔設定に追加します。

• トップパディング：0px
• ボトムパディング：0px
• 左パディング：25vw（デスクトップ）、16vw（タブレット）、7vw（電話）
• 右パディング：25vw（デスクトップとタブレット）、27vw（電話）

画面

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

display: flex;

列1に宣伝文モジュールを追加する

表題を加える

モジュールの追加を開始する時が来ました！ 列1に宣伝文モジュールを追加し、選択したタイトルを入力します。

イラストをアップロード

選択したイラストをアップロードして続行します。 このチュートリアル全体で使用するものは、App Developer LayoutPackの一部です。 投稿にアクセスして最後にダウンロードすることで、無料でイラストをダウンロードできます。

バックグラウンド

次に、完全に白い背景色を宣伝文モジュールに追加します。

• 背景色：#ffffff

タイトルテキスト設定

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

• タイトルフォント：ポピンズ
• タイトルフォントの太さ：半太字
• タイトルフォントスタイル：大文字
• タイトルテキストの配置：中央
• タイトルテキストサイズ：0.5vw（デスクトップ）、1.6vw（タブレット）、2.4vw（電話）
• タイトル文字の間隔：1px
• タイトルラインの高さ：1.6em

間隔

次に間隔設定を変更します。

• トップパディング：1.3vw（デスクトップ）、4vw（タブレット）、6vw（電話）
• ボトムパディング：1.3vw（デスクトップ）、4vw（タブレット）、6vw（電話）
• 左パディング：1vw（デスクトップ）、7vw（タブレットと電話）
• 右パディング：1vw（デスクトップ）、7vw（タブレットと電話）

国境

宣伝文句モジュールの左上隅と右上隅に「1vw」を追加して続行します。

ボックスシャドウ

最後になりましたが、次の設定を使用して、モジュールにボックスシャドウを追加します。

• ボックスシャドウの垂直位置：10px
• ボックスシャドウブラー強度：60px
• 影の色：rgba（39,39,52,0.37）

宣伝文句モジュールを2回クローンし、残りの列に複製を配置します

宣伝文モジュールをカスタマイズしたら、先に進んで2回クローンを作成できます。 行の残りの2つの列に重複を配置します。

重複＃1を変更する

コピーとイラストの変更

最初の複製のコピーとイラストを変更します。

間隔を変更する

間隔の設定と一緒に。

• トップマージン：-3vw
• トップパディング：2.7vw（デスクトップ）、8vw（タブレット）、11vw（電話）
• ボトムパディング：2.7vw（デスクトップ）、8vw（タブレット）、11vw（電話）

重複＃2を変更する

コピーとイラストの変更

2番目の複製のコピーとイラストも変更します。

行＃2を追加

カラム構造

次の行へ！ 次の列構造を使用します。

グラデーションの背景

モジュールをまだ追加せずに、行設定を開き、グラデーションの背景を追加します。

• 色1：＃fff20a
• 色2：＃ffb200
• 勾配方向：165度

サイジング

次に、[デザイン]タブに移動し、[この行を全幅にする]オプションを有効にします。

• この行を全幅にする：はい

ボックスシャドウ

最後になりましたが、行にボックスシャドウを追加します。

• ボックスシャドウの垂直位置：0px
• ボックスシャドウブラー強度：100px
• 影の色：rgba（0,0,0,0.39）

仕切りモジュールを追加

可視性

この行は設計目的でのみ使用しており、モジュールを紹介するためではありません。 ただし、行がどのように見えるかを正確に把握するには、Dividerモジュールを追加する必要があります。 モジュールを表示したくないので、[除算器を表示]オプションが無効になっていることを確認してください。

• 仕切りを表示：いいえ

行に変換オプションを適用する

行＃1

変換翻訳

最初の2行が完成したので、作成しようとしている対角線のデザイン構造に合うようにそれらを変換します。 最初の行の設定を開くことから始めて、変換変換値を変更します。

• 下：30vw
• 右：6vw

変換回転

次に、左変換の回転値を変更します。

• 左：37度

行＃2

変換スケール

2番目の行の設定を開いて続行し、変換スケール値を変更します。

• 下：133％（デスクトップ）、171％（タブレット）、176％（電話）
• 右：133％（デスクトップ）、171％（タブレット）、176％（電話）

変換翻訳

変換とともに、値を変換します。

• 下：12vw（デスクトップ）、1vw（タブレット）、3vw（電話）
• 右：-2vw（デスクトップ）、-6vw（タブレット）、-4vw（電話）

変換回転

また、変換回転設定で行を回転します。

• 左：37度

行＃3を追加

カラム構造

次の最後の行に！ この行とその列を使用して、必要なあらゆる種類の情報を共有できます。 この投稿のプレビューで見た正確なデザインを再現するには、次の列構造を選択します。

サイジング

モジュールをまだ追加せずに、行の設定を開き、行が画面の幅全体を占めるようにします。

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

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

H1コンテンツを追加する

モジュールの追加を開始する時が来ました！ タイトルのテキストモジュールから始めます。 お好みのH1コンテンツを入力してください。

H1テキスト設定

次に、[デザイン]タブに移動し、H1テキスト設定を変更します。

• 見出しフォント：ポピン
• 見出しのテキストサイズ：3vw（デスクトップ）、5vw（タブレット）、6vw（電話）
• 見出し文字の間隔：-2px

間隔

次に、いくつかのカスタム間隔値を追加します。

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

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

コンテンツを追加する

必要な2番目のモジュールは別のテキストモジュールです。 お好みのコンテンツを追加してください。

テキスト設定

次に、[デザイン]タブに移動し、テキスト設定を変更します。

• テキストフォント：Open Sans
• テキストサイズ：0.8vw（デスクトップ）、1.5vw（タブレット）、2.2vw（電話）
• テキスト行の高さ：2.6em

間隔

間隔の値も変更します。

• トップマージン：3vw（電話）、5vw（電話）
• 左マージン：10vw
• 右マージン：28vw（タブレット）、20vw（電話）

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

コピーを追加

次に必要な最後のモジュールはボタンモジュールです。 選択したコピーをいくつか追加します。

ボタンの設定

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

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：0.9vw（デスクトップ）、2.5vw（タブレット）、3.5vw（電話）
• ボタンのテキストの色：＃000000
• ボタンの境界線の幅：1px
• ボタンの境界線の色：＃000000
• ボタンの境界線半径：1px
• ボタンフォント：ポピン
• フォントの太さ：軽い

間隔

最後になりましたが、いくつかのカスタム間隔値を使用してモジュールを整形すれば完了です。

• トップマージン：2vw（デスクトップ）、5vw（タブレットと電話）
• 左マージン：10vw
• トップパディング：1vw
• ボトムパディング：1vw
• 左パディング：3vw
• 右パディング：3vw

対角線デザインセクションを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

プレビュー

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

最終的な考え

この投稿では、Diviの組み込みオプションのみを使用して見事な斜めのデザイン構造を作成する方法を紹介しました。 このチュートリアルが、新しいDivi変換オプションに慣れるために役立つことを願っています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！