Diviの変換コントロールを使用して独自の宣伝文句モジュールレイアウトを作成する
公開: 2019-03-22DiviのTransformコントロールを使用すると、ページの要素を簡単に配置およびスタイル設定して、独自のレイアウトを作成できます。 Diviの宣伝文句モジュールは、Webサイトでアイテムを紹介するための最も一般的な要素の1つです。 そこで、宣伝文句モジュールを特徴とするいくつかのユニークなレイアウトを作成することによって、これらの変換効果を使用する方法を示すことを考えました。 確かに、マージンとパディングを使用して同様のポジショニングを実現できますが、プロセスははるかに複雑で、それほど楽しいものではありません。 さらに、変換コントロールを使用すると、スタイルを追加して宣伝文を拡大縮小したり、回転させたりして、さらにユニークなデザインにすることができます。
このチュートリアルでは、Diviの変換コントロールを使用して、クリエイティブな方法で宣伝文を配置および回転する方法を紹介します。
始めましょう。
はじめに
このチュートリアルでは、本当に必要なのはDiviだけです。 設定するには、先に進んで新しいページを作成します。 ページにタイトルを付け、フロントエンドにDivi Builderをデプロイして、ページを最初から作成します。
これで、開始する準備が整いました。
宣伝文のレイアウトデザイン＃1の作成
この最初のレイアウト設計では、2つの異なる行を使用して宣伝文を構造化します。 次に、Divi Transformオプションを使用して、宣伝文モジュールを拡大縮小および配置し、独自の宣伝文モジュールレイアウトを作成します。
最初の行を作成する
開始するには、通常のセクションを作成してから、行に次の列レイアウトを追加します。1/ 2 1/6 1/6 1/6
テキストモジュールの追加とスタイル設定
左側の1/2列に、次の内容のテキストモジュールを追加します。
<h2>Our Services</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>
次に、次の設計設定を更新します。
背景色：#ffffff
幅：500px
カスタムマージン（デスクトップ）：-70px左
カスタムマージン（タブレット）：残り20px
カスタムパディング：上20px、下20px
セクションのパディングを更新
次に、セクションにパディングを追加する必要があります。 セクション設定を開き、以下を更新します。
カスタムパディング：20vwトップ
最初の行の設定を更新します
次に、行の設定を次のように更新します。
側溝幅：1
カスタムパディング：10vw上部、0px下部
ボーダー幅：5px
ボーダーカラー：#eeeeee
2番目の行を追加します
次に、カスタマイズした行の下に別の行を追加します。 6列のレイアウトにします。
宣伝文モジュールの作成とスタイル設定
次に、変換コントロールを使用して最終的に配置する宣伝文モジュールの作成を開始します。 作成した最初の（一番上の）行の宣伝文モジュール列2を追加します。
宣伝文の設定で、コンテンツを削除し、タイトルテキストを「サービス」という単語で更新します。 次に、クリックして画像の代わりにアイコンを使用します。 この例では、クラウドアイコンを使用しています。
残りの宣伝文句の設定を次のように更新します。
アイコンの色：#ffffff
円のアイコン：はい
円の色：＃5e89fb
タイトルフォント：Nunito
タイトルテキストの配置：中央
タイトルテキストサイズ：16px
カスタムパディング：1vw上、1vw下、1vw左、1vw右
次に、[詳細設定]タブの[宣伝文画像CSS]ボックスに次のCSSを追加して、宣伝文アイコンの下のデフォルトの余白を更新します。
margin-bottom: 5px
次に、作成した宣伝文モジュールをコピーして各列に貼り付け、一番上の行の列3に2つの宣伝文モジュールがあり、2番目の行の列5と6を空のままにします。
宣伝文句を拡大縮小および配置するための変換効果の追加
これで、変換コントロールを使用して、宣伝文を独自のデザインに配置および拡大縮小する準備が整いました。
まず、一番上の行の列2にある宣伝文の設定を開き、次のように変換コントロールを更新します。
変換スケールのX軸：242％
変換スケールY軸：242％
変換変換X軸：-96px
変換変換Y軸：-44px
次に、最初の行の列3にある一番上のBlurbモジュールの設定を次のように更新します。
変換スケールのX軸：192％
変換スケールY軸：192％
変換変換X軸：-70px
変換変換Y軸：-13px
次に、一番上の行の列4にあるblurbモジュールを次のように更新します。
変換スケールのX軸：158％
変換スケールのY軸：158％
変換変換X軸：33px
変換変換Y軸：-13px
次に、上の行の列3にある下の宣伝文モジュールを次のように更新します。
変換スケールのX軸：132％
変換スケールY軸：132％
変換変換X軸：89px
変換変換Y軸：39px
次に、次の背景色を指定して、微妙なデザイン要素の行の境界線に区切りを作成します。
背景色：#ffffff
それでおしまい！
追加のデザイン要素として、レイアウト全体で使用される各アイコンの円の色の不透明度を徐々に上げることができます。
モバイル調整
タブレットや携帯電話のディスプレイの宣伝文モジュールのレイアウトを調整するには、変換効果を元の状態に戻すだけで、宣伝文が元のサイズに戻り、列の内側に適切に配置されます。 これを行うには、Diviの複数選択機能を使用できます。 transformプロパティで配置されたモジュールをクリックするのは難しい場合があるため、ビルダー設定でグリッドモードを有効にすることをお勧めします。 これにより、宣伝文句モジュールを元の位置で確認できます。 グリッドモードになったら、先に進んでctrlまたはcmdを押したまま、変換効果のある各モジュールをクリックします。 次に、選択したモジュールの歯車アイコンをクリックして、要素設定モーダルを開きます。
要素設定モーダルで、以下を更新します。
変換スケールのX軸：100％
変換スケールY軸：100％
変換変換X軸：0px
変換変換Y軸：0px
これにより、タブレットや電話のディスプレイの宣伝文句の元の位置とスケールが復元されます。
最終結果
これが最終的なデザインです。
宣伝文モジュールレイアウト＃2の作成
この次の例では、Diviのスケール、平行移動、回転の変換オプションを使用した独自の宣伝文句モジュールのレイアウトを示します。 また、各宣伝文に視点を追加するボーナスCSSスニペットを投入します。 これがその方法です。
見出しを作成する
まず、1列の行を持つ新しい通常のセクションを追加します。 次に、次の内容のテキストモジュールを行に追加します。
<h2>Our Process</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>
次に、残りのテキストモジュール設定を次のように更新します。
見出し2フォント：Nunito
見出し2フォントの太さ：半太字
見出し2テキストサイズ：50px
見出し2文字の間隔：7px
幅：500px
6列の行を使用した宣伝文のレイアウトの作成
それは見出しの世話をします。 次に、宣伝文モジュールレイアウトの行を追加します。 先に進み、現在の行のすぐ下に6列のレイアウトで新しい行を作成します。
宣伝文モジュールのスタイリング
最初の列で、新しい宣伝文モジュールを追加し、次のように設定を更新します。
コンテンツボックスの本文を削除し、タイトルテキストを「ステップ」という単語で更新します。
次に、クリックしてアイコンを使用し、サークルチェックアイコンを選択します。
次のように、宣伝文に白い背景色を付けます。
背景色：#ffffff
次に、設計設定を更新します。
アイコンの色：#ffffff
円のアイコン：はい
円の色：＃3d0dad
タイトルフォント：Nunito
タイトルフォントの太さ：太字
タイトルフォントスタイル：TT
タイトルテキストの配置：中央
タイトル文字の間隔：4px
次に、次のように宣伝文にボックスシャドウを付けます。
ボックスシャドウ：スクリーンショットを参照
影の色：rgba（0,0,0,0.12）
そして最後に、回転変換効果を宣伝文モジュールに追加します。
変換回転X軸：-3度
変換回転Y軸：-10度
変換回転Z軸：31度
これで最初の宣伝文句が処理されます。
行設定を更新する
宣伝文句の複製を開始する前に、次のように行設定を更新する必要があります。
側溝幅：2
カスタムパディング：上11vw、下0px
これは、レイアウトの宣伝文句の間隔を空けるのに役立ちます。
残りの宣伝文句の複製とスタイリング
これで、残りの宣伝文を複製してカスタマイズする準備が整いました。 先に進み、列1の宣伝文モジュールをコピーして、最後の列（列6）を除く残りのすべての列に貼り付けます。 宣伝文を右に移動するためのスペースを増やすために、列6は空のままにします。
次に、列2の宣伝文モジュール設定を開き、以下を更新します。
サークルカラー：＃62de9d
変換スケールのX軸：120％
変換スケールY軸：120％
変換変換Y軸：-10％（ここにパーセンテージ値を入力してください）
次に、列3の宣伝文句モジュールを次のように更新します。
円の色：＃5e89fb
変換スケールのX軸：140％
変換スケールY軸：140％
変換変換Y軸：-20％
変換変換X軸：10％
列4の宣伝文句モジュールを次のように更新します。
円の色：＃2a3fc9
変換スケールのX軸：160％
変換スケールY軸：160％
変換変換Y軸：-30％
変換変換X軸：30％
そして最後に、列5の宣伝文句モジュールを次のように更新します。
サークルカラー：＃62de9d
変換スケールのX軸：180％
変換スケールY軸：180％
変換変換Y軸：-40％
変換変換X軸：55％
ご覧のとおり、各宣伝文は左から右に20％ずつサイズが大きくなります。 また、変換変換のパーセンテージ値により、宣伝文句が適切に配置されたままになります。
デザインは最後の列（列6）にオーバーフローするため、空白のままにします。 ただし、行のサイズを大きくすると、列6にいつでも別の宣伝文句を追加できます。
各列へのパースペクティブプロパティの追加
CSSでは、perspectiveプロパティを使用して、3Dに配置された要素にZ-Spaceの遠近法を与えます。 基本的には、ユーザーが画面を見たときにオブジェクトがユーザーからどれだけ離れて見えるかを定義します。 パースペクティブプロパティは、3D位置を持つコンテナの親コンテナ（この場合は宣伝文句）に適用する必要があります。 したがって、次のようにCSSの小さなスニペットを使用して、各列にパースペクティブを追加する必要があります。
次のように、5つの列のそれぞれの[列のメイン要素のCSS]ボックスに次のCSSを追加します。
列1の主な要素：
perspective: 1000px
列2の主な要素：
perspective: 1000px
列3の主な要素：
perspective: 1000px
列4の主な要素：
perspective: 1000px
列5の主要要素：
perspective: 1000px
この場合、変更は非常に微妙ですが、私の意見では追加の努力の価値があります。
これは、遠近法のない宣伝文モジュールのレイアウト設計です。
そして、ここにそれは適切な視点を持っています。
宣伝文句をユーザーの近くに表示したい場合は、遠近法の値を減らすことができます。 たとえば、これは、各列に「パースペクティブ：400px」が追加された場合の宣伝文のようになります。
セクションにディバイダーの背景を追加する
宣伝文句が表面に立っているように見せるために、セクションに仕切りの背景を追加できます。 セクション設定を開き、以下を更新します。
ボトムディバイダースタイル：スクリーンショットを参照
ボトムディバイダーカラー：#dddddd
ボトムディバイダーの高さ：27vw
ボトムディバイダー水平リピート：0.8x
ボトムディバイダーフリップ：水平
タブレットと電話のディスプレイのレイアウトを調整するには、各宣伝文モジュールを複数選択し、タブレットディスプレイの要素設定で次の変換オプションを更新する必要があります。
変換スケールのX軸：100％
変換スケールY軸：100％
変換変換Y軸：0％
変換変換X軸：0％
最終結果
それでは、宣伝文のモジュールレイアウトの最終結果を確認しましょう。
最終的な考え
Diviの変換コントロールを使用すると、宣伝文句モジュールをページの正確な領域に非常に簡単に配置できます。 これにより、サービス、プロセスステップ、およびその他の無数の用途を特徴とする新しい宣伝文モジュールレイアウトを実験して作成することが楽しくなります。 このチュートリアルが、これらの設計手法を自分でテストするための少しのインスピレーションを与えてくれることを願っています。
より多くのインスピレーションについては、これらの5つのクリエイティブな宣伝文句モジュールのデザインをチェックしてください。
コメントでお返事をお待ちしております。
乾杯！