Diviで不規則な形状のセクショントランジションを作成する方法
公開: 2017-10-26Webサイトのデザインを向上させる最良の方法の1つは、さまざまなセクション遷移を使用することです。 前回の投稿では、Diviの組み込みオプションのみを使用してこれを行う方法を示しました。 ただし、もう少し高度なものやパーソナライズされたものを作成したい場合は、不規則な形状のセクショントランジションを作成することもできます。 それらの複雑さのために、これにアプローチする最良の方法は、透明な境界線を持つ画像を使用することです。
この投稿では、その方法を紹介します。 Divi Builder内で何をするかを示すだけでなく、Photoshopを使用していくつかの手順で画像にこれらの透明な境界線を作成する方法も示します。
結果の例
見事な不規則な形状のセクション遷移を含むレイアウトサンプルを見てみましょう。
お気づきのように、これらの透明な境界線は、サイト全体およびさまざまなセクション内で使用できます。 透明な境界線の大きさに応じて、共有しようとしているさまざまなコンテンツに合わせてセクション内に十分な場所を残しておく必要があることを覚えておくことが重要です。 また、さまざまなセクション間のバランスがうまく取れます。
Diviで不規則な形状のセクショントランジションを作成する方法
私たちのYoutubeチャンネルを購読する
Photoshopで透明な境界線を作成する
Photoshopを使えば、思い通りのオリジナルシェイプを実現できます。 GimpShopと呼ばれる無料の代替手段を選ぶこともできます。 このチュートリアルでは、Photoshopを使用します。
Photoshopを開く
コンピューターでフォトショップを開くことから始めます。
画像を開く
それが終わったら、作業したい画像を開きます。
画像をダブルクリックしてレイヤーを作成
Photoshop内に画像をアップロードしたら、画像レイヤーをダブルクリックして、その画像の新しいレイヤー（レイヤー0）を作成します。
別のレイヤーを追加する
透明な境界線を追加するには、別のレイヤーも必要になるため、下の印刷画面でマークしたアイコンをクリックして追加します。 レイヤー（レイヤー1）を作成したら、画像を含むレイヤーの上に配置されていることを確認してください。
ブラシとサイズを選択
レイヤー1をアクティブにした状態で、先に進んでブラシアイコンをクリックします。
一度行うと、ブラシに使用されているサイズとパターンを自分の好みに合わせて調整できます。 インターネット上には無料のPhotoshopブラシがたくさんあるので、作成しているWebサイトの種類に応じて、適切なものを選択してください。 また、不透明度が100％に設定されていることを確認してください。
境界線でブラシの使用を開始します
ブラシを配置したら、透明にしたい側でブラシを使い始めます。 後ですべてが透明になるように、境界全体をブラシで覆うようにしてください。
Ctrlキー（Windows）またはコマンド（Mac）+新しいレイヤーを選択
完了したら、キーボードのCTRL（Windowsの場合）またはCommand（Macの場合）を押しながら、レイヤー1をクリックすることができます。 Photoshopが、そのレイヤーに追加したすべてのもの、この場合はシェイプされた境界線を選択することがわかります。
新しいレイヤーを非表示にする
次に、下の印刷画面でマークされているように目を削除して、レイヤー1を非表示にします。
画像を選択して新しいレイヤーを削除
次に、画像を含むレイヤーをクリックして、キーボードの削除ボタンを押します。 これを行うと、境界線が透明になることがわかります。
長方形マーキーツールを選択し、画像をクリックします
長方形マーキーツールをクリックして、画像のどこかをランダムに押します。
画像をPNGとして保存
最後に、画像をPNGとして保存して、Webサイトで使用できるようにする必要があります。
Diviに背景を追加する
（上記のPhotoshopの手法を使用して）Divi Webサイト内で使用するさまざまな画像を作成したら、残りの部分は簡単です。 作成した画像は、特定のセクションの背景として機能します。 同じ方法が異なるセクションにも適用されるため、この例のヒーローセクションを作成する方法のみを示します。
新しい標準セクションを追加
新しいページを追加し、Visual Builderに切り替えて、そのページに新しい標準セクションを追加します。
背景画像をアップロードする
ヒーローセクションに表示するすべてのモジュールを配置したら、先に進んで、この投稿の前の部分で作成した画像を追加できます。
背景色を追加する
それが済んだら、画像の透明部分にどの色を表示するかを決めることができます。 この例では、背景色として「#dddddd」を使用しています。 画像の透明部分に色が表示されることがすぐにわかります。
十分なパディングがあることを確認してください
モジュールの数とヒーローセクションで使用した透明な境界線のサイズによっては、カスタムのパディングを追加する必要がある場合があります。 さまざまなセクションのパディング値を試して、どれが最良の結果をもたらすかを確認してください。
次のセクションに同じ背景色を追加する
さまざまなセクションが互いにうまく調和するようにするには、次のセクションのヒーローセクションで使用したのと同じ背景色を使用します。 これは、必ずしも次のセクションに1色の背景色を使用する必要があることを意味するわけではありません。両方のセクションの色が美しくブレンドされている限り、グラデーションの背景を使用できます。
例
前述のように、必要な数の画像の境界線を作成して、Webサイト全体でクリエイティブな方法で使用できます。 味わうために、次のプレビュー例を作成しました。
最終的な考え
この投稿では、不規則な形状のセクショントランジションを簡単に利用する方法を紹介しました。 この方法を使用することにより、基本的に任意の種類のセクション遷移を作成できます。 Photoshopでいくつかの手順を実行してこれらの不規則な形状を作成する方法を示すだけでなく、DiviBuilder内でそれを機能させる方法も示しました。 質問や提案がある場合; 下のコメントセクションにコメントを残してください！
大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。