Diviの新しい列構造を使用した「プロセス」セクションの作成

Diviの新しいカラム構造により、Diviにさらに多くの組み込み設計の可能性が追加されたことは間違いありません。 Diviの用途の広い列構造でどれだけユニークになるかを示すために、Diviの組み込みオプションのみを使用して独自の「プロセス」セクションを作成する方法を示します。 さらに、プロセスのいずれかのステップをホバーすると表示される微妙なホバー効果も追加します。 これらのセクションは、クライアントまたは見込み顧客に対してどのように行うかを説明するのに最適です。

それを手に入れよう！

プレビュー

チュートリアルに入る前に、このチュートリアルから期待できる結果を見てみましょう。

新しいセクションを追加

背景色

新規または既存のページに標準セクションを追加し、次の背景色を使用します。

• 背景色：＃3a1dad

間隔

次に間隔設定に移動し、カスタムの上部と下部のパディングを追加します。

• トップパディング：170px
• ボトムパディング：170px

可視性

小さい画面サイズで代替を作成していますが、デスクトップバージョンの作成から始めます。 そのため、表示設定で携帯電話とタブレットのこのセクションを無効にしました。

行＃1を追加

カラム構造

セクション設定の変更が完了したら、次の列構造を使用して新しい行を追加して続行します。

列1、3、5にグラデーションの背景を追加します

素敵なホバー効果を作成するために、列1、3、5にグラデーションの背景を追加します。これらはそれぞれプロセスステップを保持する列です。 残りの2つの列を使用して、ステップを相互に接続します。 前述の3つの列のそれぞれに、同じグラデーションの背景が必要です。

• 色1：＃580cf2
• 色2：rgba（41,196,169,0）
• 列1グラデーションタイプ：ラジアル
• 列1の開始位置：38％
• 列1の終了位置：38％

サイジング

グラデーションの背景の追加が完了したら、サイズ設定に移動して、全幅オプションを有効にします。

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

間隔

また、プロセスステップの保持専用の行全体と列のカスタムパディング値も必要になります。

• トップパディング：0px
• ボトムパディング：0px
• 列1の上部パディング：20px
• 列1の下部パディング：20px
• 列3のトップパディング：20px
• 列3の下部パディング：20px
• 列5トップパディング：20px
• 列5の下部パディング：20px

行＃1を2回クローンする

モジュールを追加する前に、行のクローンを2回作成します。 これにより、次のステップで時間を節約できます。

最初の複製を変更する

列のグラデーションの背景を削除する

セクションの2番目の行（最初の複製）を開き、それに適用されているすべての列グラデーションの背景を削除します。 2番目の行にはプロセスステップが含まれず、ステップを接続するタイトルと垂直仕切りのみが含まれるため、これらは必要ありません。

列間隔を削除する

同様に、列1、3、および5に適用されているすべての列カスタムパディングを削除します。

• トップパディング：0px
• ボトムパディング：0px

行＃1の最初の列に宣伝文句モジュールを追加します

コンテンツを追加する

モジュールの追加を開始する時が来ました！ 最初の行の列1にある宣伝文モジュールから始めます。 この宣伝文モジュールは、最初のステップの内容を保持するので、先に進んで、選択したテキストを追加してください。

アイコンを選択

また、次のステップを探す場所を示す次のアイコンも使用しています。

デフォルトの背景色

次に、デフォルトの背景色を宣伝文モジュールに追加します。 この背景色は、セクションで使用したものと同じです。 このチュートリアルの前の部分で追加した列のグラデーションの背景を非表示にします。

• 背景色：＃3a1dad

背景色にカーソルを合わせる

ただし、ホバー時に列のグラデーションの背景を表示する必要があります。 そのため、ホバーの背景色を完全に透明な色に変更します。

• 背景色：rgba（255,255,255,0）

デフォルトのアイコン設定

アイコン設定に移動し、いくつかの変更を加えて続行します。

• アイコンの色：＃9d8ad8
• アイコンの配置：上
• アイコンのフォントサイズを使用：はい
• アイコンフォントサイズ：80px

ホバーアイコンの設定

ホバー時に異なるアイコンの色とフォントサイズを適用します。

• アイコンの色：#ffffff
• アイコンフォントサイズ：120px

テキスト設定

次に、テキスト設定に移動し、いくつかの変更を加えます。

• テキストの向き：中央
• テキストの色：明るい

タイトルテキスト設定

タイトルテキストの設定も変更する必要があります。

• タイトルフォントの太さ：超太字
• タイトルフォントスタイル：大文字

トランジション

スムーズな移行を作成するために、移行期間を長くします。

• 移行時間：500ms

宣伝文のクローンモジュールと不均一な列への配置（行＃1と＃3の両方）

最初のBlurbModuleステップを作成したので、5回クローンを作成し、下の印刷画面でマークされた列に複製を配置できます。

各複製のコンテンツとアイコンを変更する

もちろん、プロセスが理にかなっていることを確認するために、アイコンとともに複製のそれぞれのコンテンツを変更する必要があります。

行＃1の2番目の列に水平除算器を追加します

可視性

追加する必要がある2番目のモジュールはDividerモジュールです。 このモジュールを使用して、すべての宣伝文句のステップを相互に接続しています。 先に進み、最初の行の2番目の列に1つ追加します。

• 仕切りを表示：はい

仕切りの色

次に仕切りの色を変更します。

• 色：#dddddd

間隔

Divider Moduleを垂直に揃えるために、上部マージンを使用します。 また、左右の負のマージンを使用して、モジュールの幅を広げます。

• トップマージン：150px
• 左マージン：-60px
• 右：-60px

水平分割子のクローンを作成し、偶数列に配置します（行＃1と＃3の両方）

Divider Moduleのクローンを作成し、以下の印刷画面でマークされている列に配置します。

行＃2の最初の列に垂直除算器を追加します

可視性

垂直仕切りも必要です。 これを作成するには、2行目の列1に新しいDivider Moduleを追加しますが、[ShowDivider]オプションが無効になっていることを確認します。

• 仕切りを表示：いいえ

背景色

次に、モジュールに背景色を追加します。

• 背景色：#dddddd

サイジング

次に、サイズ設定を変更します。 すると、垂直の仕切りが所定の位置に収まることに気付くでしょう。

• 幅：0.5％
• モジュールの配置：中央

間隔

垂直仕切りの高さを増やすために、いくつかのカスタム間隔値を使用します。

• トップマージン：20px
• トップパディング：120px
• ボトムパディング：120px

垂直分割子のクローンを作成し、行＃2の列5に複製を配置します

作成した垂直仕切りのクローンを作成し、2行目の最後の列に配置します。

行＃2の列3にタイトルテキストモジュールを追加します

コンテンツを追加する

最後に必要なモジュールは、タイトルのテキストモジュールです。 このモジュールを2番目の行の3番目の列に追加し、選択したコンテンツをいくつか追加します。

見出しテキストの設定

見出しのテキスト設定に移動し、タイトルの外観にいくつかの変更を加えます。

• 見出し2フォントの太さ：超太字
• 見出し2テキストの配置：中央
• 見出し2テキストの色：rgba（255,255,255,0.09）
• 見出し2テキストサイズ：220px（デスクトップ）、150px（タブレット）、100px（電話）
• 見出し2文字の間隔：-50px（デスクトップ）、-30px（タブレット）、-25px（電話）

間隔

最後に、いくつかのカスタム間隔値を追加して、タイトルのテキストモジュールを所定の位置に配置できるようにします。

• トップマージン：30px
• 左マージン：-800px
• 右マージン：-800px

タブレットと電話の代替品を作成する

新しいセクションを追加

背景色

この投稿の冒頭で述べたように、画面サイズを小さくするための代替手段を作成します。 先に進み、前のセクションと同じ背景色を使用して新しい通常のセクションを追加します。

• 背景色：＃3a1dad

間隔

いくつかのカスタムの上部と下部のパディング値を追加します。

• トップパディング：170px
• ボトムパディング：170px

可視性

そして、可視性設定でデスクトップ上のセクションを非表示にします。

行＃1を追加

カラム構造

デスクトップセクションで行ったように6列の行を使用する代わりに、1列のみを使用しています。

前のセクションのタイトルテキストモジュールのクローンを作成し、行＃1に配置します

デスクトップセクションのタイトルテキストモジュールのクローンを作成し、複製を新しい行に配置します。

間隔を削除します

このモジュールの間隔設定を削除して続行します。

行＃2を追加

カラム構造

次に、1つの列を持つ別の行を追加します。

前のセクションの宣伝文句モジュールを複製し、行＃2に配置します

デスクトップセクションの宣伝文モジュールのステップの1つを複製し、複製を新しい行に配置します。

アイコンの変更

アイコンを下向きのアイコンに変更します。

サイズを変更する

次に、サイズ設定を変更します。

• 幅：39％（タブレット）、59％（電話）
• モジュールの配置：中央

前のセクションの垂直分割子のクローンを作成し、行＃2に配置します

ここでも前のセクションの垂直仕切りを使用しています。 先に進んでクローンを作成し、複製を宣伝文モジュールのすぐ下に配置します。

間隔を変更する

このモジュールの間隔設定を変更して、高さを低くします。

• トップパディング：50px
• ボトムパディング：50px

両方のモジュールを必要な回数だけクローンします

これらのモジュールは、小さい画面サイズですべてのプロセスステップを紹介するために、何度でも複製できます。

プレビュー

すべての手順を完了したので、結果を最後に見てみましょう。

最終的な考え

この投稿では、Diviの列構造をクリエイティブに使用して、見事でユニークなプロセスセクションを作成する方法を紹介しました。 さらに、要素をホバーすると表示される各プロセスステップに微妙なホバー効果を追加しました。 このデザインを自由に試して、独自の代替案を作成してください。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！