水平分割器をDiviで垂直分割器に変える方法

毎週、次のプロジェクトに使用できる新しい無料のDiviレイアウトパックを提供します。 レイアウトパックの1つとして、Webサイトを次のレベルに引き上げるのに役立つユースケースも共有しています。

今週は、進行中のDivi設計イニシアチブの一環として、DiviのMoving Company Layout Packを例として使用して、私たち全員が知っている標準の水平Dividerモジュールを垂直モジュールに変換する方法を紹介します。 このアプローチは、ページにタイムラインを作成しようとしている場合に特に便利です。 「仕組み」のセクションなどにも使用できます。 垂直仕切りを設定した後、その上に宣伝文モジュールを追加して、タイムライン効果を作成します。 このチュートリアルはCSSコードを必要とせず、Diviの組み込みオプションのみに基づいています。

それを手に入れよう！

プレビュー

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

作成を始めましょう：新しいページを追加し、引っ越し会社のレイアウトパックのランディングページをアップロードします

新しいページを追加してVisualBuilderに切り替えます

新しいページを追加し、タイトルを追加して、VisualBuilderに切り替えることから始めましょう。

既成のレイアウトを選択する

これを行うと、最初から作成したり、事前に作成されたレイアウトを選択したり、既存のページのクローンを作成したりできるようになります。 引っ越し会社のレイアウトパックのランディングページを使用して最終結果を作成するので、事前に作成されたレイアウトを参照してください。

引っ越し会社のレイアウトパックのランディングページを選択します

引っ越し会社のレイアウトパックが表示されるまで、事前に作成されたレイアウトを下にスクロールして、ランディングページをページにアップロードします。

垂直分周器のタイムラインの作成を開始します

タイムラインセクションを探す

これで、水平の仕切りを垂直の仕切りに変換し、その仕切りを使用してタイムラインを作成する準備が整いました。 先に進み、ランディングページで次のセクションを見つけます。

以下に新しい標準セクションを追加します

このセクションのすぐ下に、標準セクションを追加します。

「仕組み」の行を新しいセクションに配置します

前のセクションの「仕組み」行を新しいセクションにドラッグして続行します。

新しい行を追加

カラム構造

セクションに配置した行のすぐ下に、次の列構造を持つ別の行を追加します。

間隔

モジュールを追加する前に、行の設定を開き、上部の余白に「60px」を追加します。

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

仕切りを隠す

これでモジュールの追加を開始できます！ 最初の列から始め、完了したら、2番目の列に進みます。 最初の列で最初に必要なのは、ディバイダーモジュールです。 前に述べたように、私たちはそれを垂直のものに変えるつもりです。 目的の結果を達成するための最初のステップは、[仕切りの表示]オプションを無効にすることです。

グラデーションの背景

実際の仕切りを使用する代わりに、仕切りモジュールの背景を使用して仕切りを作成します。 次のグラデーションの背景を使用しています。

• 色1：＃e0aa25
• 色2：＃c11000

サイジング

これで、仕切りが表示されないことを確認しました。 垂直仕切りを作成するための次の重要なステップは、仕切りの幅を大幅に減らすことです。 「2％」を使用していますが、好きなだけ厚く見せることができます。 センターモジュールの位置合わせも有効にしています。

間隔

Divider Moduleを垂直方向に引き伸ばすために、DividerModuleの上下のカスタムパディングに「480px」を追加します。 出来上がり、垂直仕切りがあります！

前のセクションの宣伝文句モジュールを列1に追加します

次に行うことは、この垂直仕切りを使用してタイムラインを作成することです。 前のセクションには、3つの宣伝文モジュールがあります。 先に進み、作業中の行の最初の列、DividerModuleのすぐ下にそれぞれを配置します。

宣伝文モジュール＃1を変更する

背景色を追加する

Diviの効率機能の1つを使用して、Blurbモジュールの編集中にプロセスを高速化します。 すべての変更を最初のBlurbモジュールに適用し、その後、モジュールスタイルをコピーして、ワンクリックで他のBlurbモジュールに追加します。 最初の宣伝文モジュールを開き、背景色として「rgba（255,255,255,0.73）」を追加します。

アイコンのフォントサイズを変更する

次に行う必要があるのは、アイコンのフォントサイズを「65px」に変更することです。

間隔を削除します

また、間隔設定のすべての余白を削除します。 値が異なるため、後で各宣伝文モジュールに個別にマージンを追加します。

宣伝文モジュールスタイルをコピーして、残りの宣伝文モジュールに追加します

宣伝文のモジュールスタイルをコピーする

最初の宣伝文モジュールの変更が完了しました。 それを右クリックして、[モジュールスタイルのコピー]を選択します。 これにより、今行ったすべての変更がコピーされます。

残りの宣伝文句モジュールにモジュールスタイルを貼り付ける

そして、残りの2つの宣伝文モジュールにモジュールスタイルを貼り付けます。 コンテンツは変更されず、デザイン設定が変更されるだけなので、時間を大幅に節約できます。

宣伝文の間隔モジュール

宣伝文モジュール＃1

前に述べたように、宣伝文句モジュールの間隔は異なります。 2番目のものには何もありませんが、最初のものは上マージンに「-900px」を使用します。 この負のマージンを追加すると、宣伝文句がタイムラインの一部になることがわかります。 Visual Builder内では、DividerモジュールがBlurbモジュールの上にあるように見えます。 ただし、Visual Builderを終了すると、すべてが所定の位置に収まるのを確認できるので、心配する必要はありません。

宣伝文モジュール＃3

次に最後の宣伝文句モジュールを開き、下の余白に「150px」を追加します。

2列目に画像モジュールをドロップ

画像を探す

これで、列2に進むことができます。 必要なモジュールは画像モジュールだけです。 すでにページにあるものを再利用しているので、先に進んで見つけてください。

列2に画像をドロップ

次にドロップして2番目の列にドラッグします。

間隔を変更する

垂直方向の中央に配置するために、マージンを追加します。

• 上マージン：300px（デスクトップ）、30px（タブレットと電話）
• 下マージン：50px（タブレットと電話）

前と次のセクションを削除

セクションの作成が完了しました。 最後にすべきことは、余分なセクションを削除することです。

プレビュー

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

最終的な考え

このユースケースのブログ投稿では、DiviのMoving Company LayoutPackを使用して垂直仕切りを垂直仕切りに変換する方法を示しました。 このアプローチは、追加のコードを使用せずにページにタイムラインを作成する場合に理想的です。 これは、Diviの組み込みオプションのみに基づいています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！