Diviのスライドアニメーションを使用してプロセスの進行状況を表示する
公開: 2017-10-15この6部シリーズのパート3へようこそ。このシリーズでは、Diviの新しいアニメーションオプションを使用してすばらしいページセクションをデザインする方法を説明します。 Webサイトにアニメーションを追加するためのテクニックを示すために、ライブデモページのさまざまなセクションを作成する方法について説明します。 アニメーション機能は本当に楽しくて使いやすいです。 また、ビジュアルビルダーを使用すると、あらゆる段階で自分の作品が生き生きと動くのを見ることができます。 Diviアニメーションの力を探求するときに、ぜひご参加ください。
前回の投稿では、アニメーションデモページのセクション3と4を作成したときに、製品やサービスを表示するためにWebサイトのセクションをデザインおよびアニメーション化するいくつかのクリエイティブな方法を紹介しました。
今日は、素晴らしいアニメーションを使用して4つの魅力的な宣伝文句を表示するセクション5に取り組みます。 宣伝文のアニメーションの段階的なタイミングは、宣伝文が使用されている段階的なプロセスを実際に補完します。
飛び込みましょう！
これが今日の投稿で構築するもののスニークピークです
デザイン要素の準備
このチュートリアルで本当に必要なのは、宣伝文句モジュールに使用される4つの207×188画像アイコンだけです。 これが私が使用する画像です。
Diviのスライドアニメーションを使用してプロセスの進行状況を表示する
私たちのYoutubeチャンネルを購読する
セクション5の構築
Visual Builderを使用して、通常のセクションを追加します（シリーズをフォローしている場合はセクション4の下に）。 他の作業を行う前に、セクションに背景色＃f5f9fcを追加して、設定を保存してください。
2つのテキストモジュールを使用してセクションの見出しを追加する
次に、1列の行を追加します。 その行に、テキストモジュールを追加し、次のように設定を更新します。
[コンテンツ]タブの下…
内容：「セットアップ」
[デザイン]タブの下…
テキストフォント：太字（B）、大文字（TT）
テキストフォントサイズ：15px
テキストテキストの色：＃6a8091
テキスト文字の間隔：5px
テキスト行の高さ：1.9em
テキストの向き：中央
間隔：20px下
アニメーションスタイル：スライド
アニメーションの方向性：上
アニメーション時間：850ms
設定を保存する
次に、作成したテキストモジュールの下に別のテキストモジュールを追加して、セクションの見出しを追加しましょう。 次のようにテキスト設定を更新します。
[コンテンツ]タブの下…
コンテンツボックスのテキストタブに次のhtmlを追加します。
<h1>Say Hello to DIVI</h1>
[デザイン]タブの下…
ヘッダーフォント：太字（B）
ヘッダーテキストの配置：中央
ヘッダーフォントサイズ：39px
ヘッダーテキストの色：＃2f3a54
注：これはh1ヘッダーであるため、ヘッダーテキストの設定を編集する必要があります。
幅：600px（この値を入力してください）
モジュールの配置：中央
カスタムマージン：20px下
アニメーションスタイル：スライド
アニメーションの方向性：上
アニメーション時間：850ms
アニメーション強度：12％
アニメーション速度曲線：イーズアウト
設定を保存する
4つの宣伝文をデザインする
これで、宣伝文句モジュールを追加する準備が整いました。 まず、4列（1/4 1/4 1/4 1/4）構造の行を作成します。
最初の（左端）列に宣伝文モジュールを追加します。
次に、宣伝文の設定を更新します。
[コンテンツ]タブの下…
コンテンツボックスのテキストタブに次のhtmlを追加します。
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida sed nec purus.</p> <p><a href="#" style="font-size: 12px;letter-spacing: 1px; color: #6a8091;"><strong>READ MORE ➔</strong></a></p>
注：ユーザーにクリックする別のオプションを提供するために、リンクを手動で追加しました。 手動リンクのURLが、宣伝文モジュールのURLに追加したリンクと一致していることを確認してください。
URL：[URLを入力]
画像：[207×188の画像を入力してください]
背景色：#ffffff
[デザイン]タブの下…
テキストの向き：中央
ヘッダーフォント：デフォルト、太字（B）、大文字（TT）
ヘッダーテキストの色：＃7969f4
ヘッダー文字の間隔：3px
ヘッダー行の高さ：3em
本文の色：＃6a8091
ボディラインの高さ：1.9em
カスタムパディング：上40px、右40px、下40px、左40px
アニメーションスタイル：スライド
アニメーションの方向性：上
アニメーション時間：700ms
アニメーション強度：4％
画像/アイコンアニメーション：アニメーションなし
[詳細設定]タブの下…
[メイン要素]ボックスに次のカスタムCSSを追加します。
border-radius: 6px; box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
設定を保存する
1つの宣伝文句が完成したので、次の3つの宣伝文句のテンプレートとして使用できます。
先に進み、モジュールを右クリックして、[モジュールのコピー]を選択します。 次に、モジュールを残りの3つの列のそれぞれに貼り付けます（ctrl + v）。
これで、複製された3つのモジュールのそれぞれにいくつかの更新を追加するだけです。
2番目の列の宣伝文句モジュールについては、以下を更新します。
[コンテンツ]タブの下…
タイトル：ステップ2
内容：[テキストと手動リンクのURLを更新]
URL：[宣伝文のURLを更新]
画像：[新しい207×188画像を追加]
[デザイン]タブの下…
ヘッダーテキストの色：＃e944ff
アニメーションの遅延：50ms
アニメーション強度：12％
3番目の列の宣伝文句モジュールについては、以下を更新します。
[コンテンツ]タブの下…
タイトル：ステップ3
内容：[テキストと手動リンクのURLを更新]
URL：[宣伝文のURLを更新]
画像：[新しい207×188画像を追加]
[デザイン]タブの下…
ヘッダーテキストの色：＃3ebaef
アニメーションの遅延：100ms
アニメーション強度：20％
4番目の列の宣伝文句モジュールについては、以下を更新します。
[コンテンツ]タブの下…
タイトル：ステップ4
内容：[テキストと手動リンクのURLを更新]
URL：[宣伝文のURLを更新]
画像：[新しい207×188画像を追加]
[デザイン]タブの下…
ヘッダーテキストの色：＃95d624
アニメーションの遅延：150ms
アニメーション強度：30％
すべての宣伝文を更新したら、次のように行の設定を更新しましょう。
[デザイン]タブの下…
カスタム幅を使用：はい
カスタム幅：1366px
カスタムガター幅を使用：はい
側溝幅：2
アニメーションスタイル：ズーム
アニメーション時間：700ms
アニメーションの開始不透明度：100％
設定を保存する
これで、このセクションはすべて完了です。 デモページには宣伝文の下に別の画像がありますが、ここに含める必要はないと思いました。
ボーナス：簡単にインポートできるようにこれらのセクションをダウンロードしてください
ボーナス特典として、本日のチュートリアルに組み込まれているセクションを無料でダウンロードできるようにパッケージ化しました。このダウンロードは、以下のメールオプトインフォームを使用して入手できます。 メールアドレスを入力するだけで、ダウンロードボタンが表示されます。 すでにDiviニュースレターに参加している場合は、「再購読」について心配する必要はありません。 メールアドレスを再入力しても、メールアドレスが増えたり重複したりすることはありません。 ダウンロードが表示されるだけです。
楽しみ！
レイアウトパックをダウンロードする
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
これらのダウンロードを使用するには、ダウンロードフォルダーでAnimation_Effects_Part_3.zipというzipファイルを見つけることから始めます。 それを解凍して、次のインポートを表示します。
アニメーション効果パート3（セクション1）.json
アニメーション効果パート3（セクション2）.json
WordPress管理者で[Divi]> [Diviライブラリ]> [インポートとエクスポート]に移動します。 ポータビリティモーダルがポップアップしたら、[インポート]タブをクリックし、[ファイルの選択]というラベルの付いたボタンをクリックします。
好みのjsonファイルを選択し、「DiviBuilderレイアウトのインポート」をクリックします。 インポートが完了したら、上記のセクションのいずれかを追加する投稿またはページに移動します。
ビジュアルビルダーをアクティブにします。 上記のセクションのいずれかを追加するページの部分に移動します。 [新しいセクションを追加]アイコンをクリックすると、[ライブラリから追加]オプションが表示されます。 このオプションを選択し、必要なレイアウトを選択します。
まとめ
セクション5のデザインとアニメーションは、ほんの少しのアニメーション設定がコンテンツの配信にもたらす力を実際に示しています。 それぞれの宣伝文を進行させて表示するのはかっこいいだけでなく、とにかくプロセスへのステップを表示していることを考えると理にかなっています。
来る
シリーズのパート4では、製品やダウンロードを表示するためのゴージャスなレイアウトを紹介します。 そしてもちろん、全体を通してアニメーションのスマートな使用法を強調します。
次回まで！
以下のコメントであなたからの連絡を楽しみにしています。