Diviの宣伝文モジュールを使用してタイムラインを作成する方法

この投稿では、Diviの宣伝文句モジュールを使用してシンプルでエレガントなタイムラインを簡単に作成する方法を紹介します。 モジュールと行が提供するさまざまなオプションを組み合わせて、以下に表示できる結果を実現します。 共有する例は、組み込みのDiviオプションのみに基づいています。つまり、CSSコードを追加する必要はありません。 また、デスクトップだけでなくモバイルでも見栄えがするようにしています。

結果

タイムラインの外観は、2つのデザイン要素で実現されます。 3つの宣伝文モジュールすべてと数字を横切る線。 デスクトップバージョンは次のようになります。

そして、モバイル版は次のようになります。

始めましょう！

Diviの宣伝文モジュールを使用してタイムラインを作成する方法

私たちのYoutubeチャンネルを購読する

標準セクションを追加

セクションの背景色

新しい標準セクションを追加し、背景色として「rgba（0,0,0,0.12）」を使用することから始めます。

セクションパディング

[デザイン]タブに移動し、「300px」の上部パディングを使用します。

3列の行を追加（タイムライン）

列の背景

セクションを作成したら、3列の行をセクションに追加します。 その行の[コンテンツ]タブで、列1の背景色として「＃e09900」、列2の背景色として「＃0c71c3」、列3の背景色として「＃8300e9」を使用します。

サイジング

[デザイン]タブに移動し、[サイズ設定]サブカテゴリに次の設定を使用します。

• この行をFulldWidthにする：はい
• カスタムガター幅を使用：はい
• 側溝幅：1
• 列の高さを等しくする：はい

カスタムマージンとパディング

次に、次のカスタムパディングとカスタムマージンを行に追加します。

• トップパディング：1px
• ボトムパディング：0px
• 下マージン：-200px

そして、各列の上下のパディングに「3px」を追加します。

タブレットと電話で無効にする

最後に、タブレットと電話の両方で行を無効にします。

別の3列の行を追加する（宣伝文モジュール）

カラムグラジエントの背景

最初の3列の行を作成したら、先に進んでそのすぐ下に2番目の行を作成できます（同じセクションを共有します）。 各列には、同じ設定で最初の色が異なるグラデーションの背景が必要です。

• 最初の色：＃e09900（列1）、＃0c71c3（列2）、＃8300e9（列3）
• 2番目の色：rgba（255、255、255、0）
• グラデーションタイプ：線形
• グラデーション方向：180度
• 開始位置：73％
• 終了位置：92％

行を全幅にする

次に、[デザイン]タブに移動し、[この行を全幅にする]オプションを有効にします。

行カスタムパディング

間隔サブカテゴリを開き、行に次のカスタムパディングとカスタムマージンを使用します。

• トップパディング：0px
• 右パディング：60px
• ボトムパディング：100px
• 左パディング：60px
• 上マージン：-100px

各列の上部のパディングにも「5px」を追加します。

宣伝文モジュール

行の設定が完了したら、作成した行の最初の列に宣伝文句モジュールを追加できます。 [コンテンツ]タブの[画像とアイコン]サブカテゴリ内で、[アイコンを使用]オプションを有効にして、選択したアイコンを選択します。

同じタブを下にスクロールし、背景色として「＃f4f4f4」を使用します。

[デザイン]タブに移動し、[画像とアイコン]サブカテゴリを次のように調整します。

• アイコンの色：＃e09900
• 画像/アイコンの配置：左
• アイコンのフォントサイズを使用：はい
• アイコンフォントサイズ：50px

テキストサブカテゴリ内で、左側のテキストの向きが有効になっていることを確認します。

ヘッダーテキストサブカテゴリのオプションは次のとおりです。

• ヘッダーフォント：クレタラウンド
• ヘッダーテキストの配置：左
• ヘッダーフォントサイズ：32px
• ヘッダー行の高さ：1em

次に、本文テキストサブカテゴリを開き、次の設定を使用します。

• 本文の配置：左
• 本文のフォントサイズ：12px
• ボディラインの高さ：1.7em

次の設定でも境界線を使用します。

• 境界線を使用：はい
• ボーダーカラー：＃000000
• ボーダー幅：2px
• ボーダースタイル：点線

次に、サイズ設定サブカテゴリを開き、コンテンツの幅に「279px」を使用し、幅に「100％」を使用します。

最後に、上下左右のパディングに「30px」を追加します。

テキストモジュール

宣伝文モジュールを追加および変更したら、先に進んでそのすぐ下にテキストモジュールを追加します。 テキストモジュールには、グラデーションの背景も必要です。

• ファーストカラー：＃e09900
• 2番目の色：rgba（255、255、255、0）
• グラデーションタイプ：ラジアル
• 半径方向：中心
• 開始位置：20％
• 終了位置：24％

[デザイン]タブに移動し、[テキスト]サブカテゴリに次の設定を使用します。

• テキストフォントサイズ：21px
• テキストの色：#FFFFFF
• テキスト行の高さ：1.7em
• テキストの向き：中央

サイジングサブカテゴリを開き、「48％」の幅を使用して、適切なモジュール配置を選択します。

最後に、「-100px」の上マージンを使用し、上下のパディングに「50px」を追加します。

クローンの宣伝文とテキストモジュール

最初の列を完了したら、両方のモジュールのクローンを作成して、他の2つの列に配置できます。 変更する必要があるのは、宣伝文のアイコン、宣伝文の色、およびテキストモジュールの最初のグラデーションの色を2番目の列の「＃0c71c3」と最後の列の「＃8300e9」に変更することだけです。

タブレットと電話で無効にする

この2行目を完了したら、携帯電話とタブレットでも必ず無効にしてください。

3列の行のクローン（タブレットと電話）

タブレットと携帯電話のタイムラインバージョンは少し異なります。 この投稿の前の部分で作成した宣伝文で行のクローンを作成し、次の手順に従って携帯電話とタブレットに収まるようにします。

行のグラデーションの背景を追加

タブレットと電話の行には、次のグラデーションの背景が必要です。

• 最初の色：rgba（0,0,0,0.7）
• 2番目の色：rgba（255、255、255、0）
• グラデーションタイプ：線形
• グラデーション方向：90度
• 開始位置：1％
• 終了位置：0％

行のパディング

デスクトップバージョンで使用されていたすべてのカスタムパディングとマージンを削除し、上部のパディングに「100px」を追加します。

デスクトップで無効にする

最後に、電話とタブレットで行を無効にする代わりに、デスクトップで無効にします。

結果

投稿のすべての手順を実行すると、デスクトップで次の結果が得られるはずです。

そして、タブレットと電話で次の結果が得られます。

最終的な考え

この投稿では、組み込みのDiviオプション以外を使用せずに、Blurbモジュールの簡単なタイムラインを作成する方法を紹介しました。 宣伝文モジュールをタイムラインとして識別するのに役立つ2つの要素は、3つの宣伝文モジュールすべてを結ぶ線と番号です。 質問や提案がある場合; 下のコメントセクションにコメントを残してください！

大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。