変換オプションを使用してDiviで一意のセクションディバイダーの背景をデザインする方法

Diviの組み込みセクションディバイダースタイルは、クリエイティブな背景デザインをページに追加するための一般的な（そしてシンプルな）方法でした。 それはページコンテンツを分割するための迅速で美しい方法を提供するだけでなく、あなたのウェブサイトを際立たせるために抽象的な背景テクスチャを追加することもできます。 そして、Diviの変換オプションのリリースにより、これらのセクションディバイダーで実行できるさらに多くのクールなことがあります。

このチュートリアルでは、変換オプションを使用して、Diviで独自のセクション仕切りの背景をデザインする方法を紹介します。

始めましょう。

スニークピーク

これは、このチュートリアルで作成できるデザインの概要です。

セクションディバイダーの背景例のレイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。

それでは、チュートリアルに取り掛かりましょう。

入門

このチュートリアルを開始するために必要なのは、Diviテーマとサンプルコンテンツに使用する画像だけです。 ゼロからデザインを構築します。 新しいページを作成し、フロントエンドにDiviビルダーをデプロイするだけです。 その後、あなたは行く準備ができています。

セクションディバイダーを使用した抽象的な形状の背景の作成

この最初の例は、コンテンツの抽象的な形の背景を作成するための非常に優れた方法です。 基本的に、これには、空のセクションを仕切りでカスタマイズし、そのセクション仕切りをページ上の他のコンテンツの後ろの任意の場所に配置することが含まれます。

これがその方法です。

コンテンツセクションの作成

セクションの仕切りをページに追加する前に、まずいくつかのサンプルコンテンツを追加しましょう。 2列の行を持つ新しい通常のセクションを作成します。

テキストモジュールを追加する

次に、次のモックコンテンツを含むテキストモジュールを列1に追加します。

<h2>About Divi Meetups</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings</p>

次に、次のようにデザインを更新します。

テキストテキストサイズ：16px
テキスト行の高さ：1.9em
見出し2フォント：Roboto
見出し2フォントの太さ：軽い
見出し2テキストサイズ：50px（デスクトップ）、40px（タブレット）、32px（電話）
見出し2行の高さ：1.4em

イメージモジュールを追加する

次に、画像モジュールを列2に追加し、表示する画像をアップロードします。 この例では、800px x1156pxのレイアウトパックの1つからの画像を使用しています。

次に、画像の幅と配置を次のように調整します。

幅：80％（デスクトップ）、70％（タブレット）
モジュールの配置：左

列1にパディングを追加

テキストと画像を配置したら、テキストモジュールを停止するために列1に上部のパディングを追加する必要があります。 行設定を開き、以下を更新します。

列1カスタムパディング（デスクトップ）：250px上部
列1カスタムパディング（タブレット）：50px上部

セクションディバイダーでトップセクションを追加

この時点で、最初のセクションディバイダーデザインを追加する準備が整いました。 これを行うには、新しいセクションを作成する必要があります。 したがって、先に進んで新しい通常のセクションを作成し（列は必要ないため、セクションに列を追加しないでください）、テキストと画像を含むセクションの上にドラッグします。

次に、以下を更新して、セクションと透明な背景と上部の仕切りを指定します。

背景色：rgba（0,0,0,0）
トップディバイダースタイル：スクリーンショットを参照
仕切りの色：rgba（120,168,193,0.45）
仕切りの高さ：500px（デスクトップ）、400px（タブレット）、300px（電話）

次に、[詳細設定]タブに移動し、Zインデックス値を1に設定して、その下のセクションの上に留まるようにします。

次に、セクションのサイズと間隔を次のように更新します。

幅：500px（デスクトップ）、400px（タブレット）、320px（電話）
セクションの配置：中央
カスタムマージン：-100px
カスタムパディング：上100px、下100px

幅は、前に追加した仕切りの高さと同じであることに注意してください（デスクトップの場合は500px、タブレットの場合は400px、電話の場合は320px）。 これにより、セクションディバイダーの完全な正方形のデザインが得られます。 タブレットや携帯電話に合わせて幅と仕切りの高さを小さくすることも重要です。そうしないと、セクションが歪んでデザインが壊れたり、ブラウザのビューポートでオーバーフローが発生したりするためです。

カスタムパディングは、セクションにある程度の高さを与えるためのものであり、後で変換変換値を調整する必要はありません。

セクションのデザインが整ったので、変換オプションを使用して、ページ上の任意の場所にセクションの仕切りを配置および回転できます。

以下を更新します。

変換変換X軸（デスクトップ）：-100％
変換変換Y軸（デスクトップ）：200％

変換変換X軸（タブレット）：-50％
変換変換Y軸（デスクトップ）：100％

変換回転Z軸：-45度

セクションのコピーと貼り付け

ページにもう1つのセクションディバイダーデザインを追加します。 ただし、デザインをすぐに開始するには、ワイヤーフレームビューモードを展開し、上部のセクション（セクションディバイダースタイルを使用）をコピーして、テキストと画像を含むセクションの下に貼り付けます。

セクション設定の更新

次に、カスタムマージンを次のように更新します。

カスタムマージン：-100px下

次に、次のようにスケール変換オプションを使用してセクションのサイズを縮小できます。

変換スケール（X軸とY軸）：50％

transform translateを使用すると、次のようにセクションを上下に移動できます。

変換変換X軸（デスクトップ）：-20％
変換変換Y軸（デスクトップ）：-100％

変換変換X軸（タブレット）：80％

変換変換X軸（タブレット）：30％

次に、セクションを次のように回転させます。

変換回転Z軸（デスクトップ）：225度

変換回転Z軸（タブレット）：-225度

最終結果

最終結果を確認してみましょう。 美しいデザインのために、セクションがタブレットと電話でどのように再配置されているかに注目してください。

また、同じレイアウトを使用したさまざまなディバイダースタイルの例をいくつか示します。 独自のさまざまなスタイルや回転を自由に試してみてください。

水平セクションディバイダーの作成

Diviの変換オプションを使用すると、セクション仕切りを回転させて、水平セクション仕切りのデザインを作成することもできます。 これにより、ページコンテンツに独自の背景を提供できます。

これがその方法です。

モックコンテンツでセクションを複製する

この例では、上記の最初の例で作成したものと同じコンテンツのセクションを使用できます。 先に進み、ページの下部にあるセクションをコピーして貼り付けます。

コンテンツセクションの更新

次に、複製されたセクションのセクション設定を開き、以下を更新します。

カスタムパディング（デスクトップ）：上80px、下80px
カスタムパディング（タブレット）：0pxトップ

水平セクションディバイダーの作成

水平セクションの仕切りを作成するには、最初にコンテンツセクションの真上に新しい通常のセクションを作成します。

次に、以下を更新します。

背景色：rgba（0,0,0,0）
トップディバイダースタイル：スクリーンショットを参照
トップディバイダーカラー：rgba（120,168,193,0.45）
トップディバイダーの高さ：80vw
トップディバイダーフリップ：垂直

その下のセクションの上にセクションディバイダーが表示されるようにするには、Zインデックスを1に更新する必要があります。

次に、次のようにセクションにカスタムの幅と間隔を指定する必要があります。

幅：800px
セクションの配置：左
カスタムマージン：-100pxトップ
カスタムパディング：上100px、下100px

セクションの幅（800px）は、水平セクションの仕切りとして機能するように回転すると、セクションの高さになります。 そのため、その下のセクションにあるコンテンツの量に応じて、この高さを調整する必要がある場合があります。

これで、次のように変換オプションを使用してセクションを配置および回転する準備が整いました。

変換変換X軸：-50％
変換変換Y軸：250％

変換回転Z軸：-90度

最終結果

これが設計の最終結果です。

また、同じレイアウトを使用したさまざまな仕切りスタイルの例をいくつか示します。

まとめ

あなたのウェブサイトにユニークなデザインを追加する方法については、常により多くのアイデアの余地があります。 Diviの変換オプションと簡単に設計できるセクション仕切りを使用すると、かなりクリエイティブなことができます。 うまくいけば、このチュートリアルの例は、次のプロジェクトに新鮮な新しいスピンをもたらすために、いくつかのセクション仕切りの背景を作成するようにあなたを刺激するでしょう。

コメントでお返事をお待ちしております。

乾杯！