Diviの変換オプションで作成された無料のタイムラインセクションをダウンロードする
公開: 2019-04-25コンテンツの構造化に関しては、タイムラインを作成することは、情報を面白く、訪問者にとって魅力的なものに保つための優れた方法です。 また、読んだ情報をすばやくナビゲートして処理するのにも役立ちます。 また、素敵なデザインを使用すると、ページの全体的なルックアンドフィールも向上します。 この投稿では、Diviの変換オプションを使用して見事なタイムラインセクションを作成する方法を紹介します。 再作成するデザインは、小さい画面サイズでもレスポンシブなままです。
それを手に入れよう！
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
タイムラインセクションレイアウトを無料でダウンロード
無料のタイムラインセクションレイアウトを利用するには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
再作成を始めましょう！
私たちのYoutubeチャンネルを購読する
新しいセクションを追加
間隔
新しいページを作成するか、既存のページを開いて、通常のセクションを追加します。 セクション設定を開き、間隔設定に移動して、カスタムの上下のパディングを追加します。
- トップパディング：12vw
- ボトムパディング：0vw
行＃1を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行設定を開きます。 [デザイン]タブのサイズ設定に移動し、行が画面の幅全体を占めるようにします。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 幅：100％
- 最大幅：100％
可視性
この行を使用して、次の手順で図を追加します。 ただし、デスクトップにはそのイラストだけが必要です。 そのため、タブレットと電話では行全体を非表示にします。
画像モジュールの追加
イラストをアップロード
この投稿の前のステップで述べたように、この行が必要な唯一の理由は、タイムラインの図を追加することです。 この投稿の冒頭でダウンロードしたフォルダーにあります。 見つけたら、新しい画像モジュールにアップロードします。
サイジング
すべての画面サイズですべての応答性を維持するために、画像モジュールのサイズ設定で[全幅を強制]オプションを有効にします。
- 全幅を強制：はい
行＃2を追加
カラム構造
次の列構造を使用して、セクションに2番目の行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行の設定を開き、行が画面の幅全体を占めるようにします。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 幅：100％
- 最大幅：100％
間隔
次に、間隔の設定に移動します。 ここでは、カスタムの上下のパディングをすべて削除して、（デスクトップ上の）行が占めるスペースを制限します。 小さい画面サイズでも、上部と下部のパディングを保持しています。
- トップパディング：0px（デスクトップ）、15vw（タブレットと電話）
- 下部のパディング：0px（デスクトップ）、15vw（タブレットと電話）
列1に宣伝文モジュールを追加する
コンテンツを追加する
モジュールの追加を開始する時が来ました！ 列1に宣伝文モジュールを追加します。選択したコンテンツを入力します。
アイコンを選択
選択したアイコンを選択して続行します。
グラデーションの背景
グラデーションの背景も追加します。
- 色1：＃a5c4ff
- 色2：#ffffff
- 開始位置：40％
- 終了位置：40％
アイコン設定
次に、[デザイン]タブに移動し、アイコンの設定を変更します。
- アイコンの色：#ffffff
- アイコンの配置：上
- アイコンのフォントサイズを使用：はい
- アイコンのフォントサイズ：5vw（デスクトップ）、17vw（タブレット）、18vw（電話）
タイトルテキスト設定
タイトルテキストの設定に移動し、それに応じてオプションを変更します。
- タイトルフォント：Didact Gothic
- タイトルフォントの太さ：太字
- タイトルテキストの配置：中央
- タイトルテキストサイズ：1.1vw（デスクトップ）、2.7vw（タブレット）、4vw（電話）
- タイトル行の高さ：2.8em
本文の設定
本文の設定についても同じようにします。
- ボディフォント：Open Sans
- 本文の配置：中央
- 本文のサイズ：0.7vw（デスクトップ）、1.5vw（タブレット）、2.1vw（電話）
- ボディラインの高さ：2em
間隔
また、さまざまな画面サイズに応じてカスタマイズするカスタムマージンとパディング値も追加しています。
- 左マージン：3vw
- 右マージン：3vw
- 下マージン：5vw（タブレット）、7vw（電話）
- トップパディング：2vw（デスクトップ）、6vw（タブレットと電話）
- 下部のパディング：2vw（デスクトップ）、6vw（タブレットと電話）
- 左パディング：3vw（デスクトップ）、9vw（タブレットと電話）
- 右パディング：3vw（デスクトップ）、9vw（タブレットと電話）
国境
境界線の設定に移動し、各コーナーに「20px」を追加します。
ボックスシャドウ
大事なことを言い忘れましたが、宣伝文句モジュールに微妙なボックスシャドウを追加して、ページにある程度の深さを作成します。
- ボックスシャドウブラー強度：80px
- 影の色：rgba（0,0,0,0.1）
宣伝文句モジュールを3回クローンし、残りの列に複製を配置します
宣伝文モジュールの作成とカスタマイズが完了したら、3回クローンを作成できます。 行の残りの列に重複を配置します。
重複＃1のグラデーション背景を変更する
最初の複製（列2の宣伝文モジュール）を開き、グラデーションの背景の最初の色を変更します。
- 色1：＃ffa5ae
重複＃2のグラデーション背景を変更する
列3の宣伝文句に対して同じことを行います。
- 色1：＃f7e3a0
重複＃3のグラデーション背景を変更する
また、最後の宣伝文モジュールのグラデーションの背景も変更します。
- 色1：＃caa5ff
宣伝文句モジュールに変換設定を追加する
変換変換を宣伝文モジュール＃1に追加
必要なすべての設計要素が揃ったので、それらの位置の変換を開始できます。 そのために、変換変換オプションを使用します。 列1の宣伝文モジュールを開き、それに応じて値を変更します。
- 下：2vw（デスクトップ）、0vw（タブレットと電話）
- 右：-106vw（デスクトップ）、0vw（タブレットと電話）
変換変換を宣伝文モジュール＃2に追加
2番目の宣伝文モジュールに移動し、それに応じて変換変換値を変更します。
- 下：16.6vw（下）、0vw（タブレットと電話）
- 右：-78vw（右）、0vw（タブレットと電話）
変換変換を宣伝文モジュール＃3に追加
次に、列3の宣伝文モジュールを開き、次の変換変換値を使用します。
- 下：17vw（デスクトップ）、0vw（タブレットと電話）
- 右：-46vw（デスクトップ）、0vw（タブレットと電話）
変換変換を宣伝文モジュール＃4に追加
次の値を使用して、最後の宣伝文句に対して同じことを行います。
- 下：-66vw（デスクトップ）、0vw（タブレットと電話）
- 右：-24vw（デスクトップ）、0vw（タブレットと電話）
行＃2に負のボトムマージンを追加します
変換変換オプションを使用しても、行の宣伝文句モジュールによって最初に占有されていたスペースは削除されません。 このスペースを取り除くために、行に負の下部マージンを追加することができます。これで完了です。
- 下マージン：-15vw（デスクトップ）、0vw（タブレットと電話）
プレビュー
すべての手順を完了したので、最後に結果を見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、Diviの新しい変換オプションを使用して美しいタイムラインセクションを作成する方法を紹介しました。 チュートリアルの始めに、JSONファイルとイラストを無料でダウンロードすることができました！ これは、すぐに始めるのに役立つはずです。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。