Diviのフォールドアニメーションを使用して宣伝文句を開花させる
公開: 2017-10-16この6部シリーズのパート4へようこそ。このシリーズでは、Diviの新しいアニメーションオプションを使用してすばらしいページセクションをデザインする方法を説明します。 Webサイトにアニメーションを追加するためのテクニックを示すために、ライブデモページのさまざまなセクションを作成する方法について説明します。 アニメーション機能は本当に楽しくて使いやすいです。 また、ビジュアルビルダーを使用すると、あらゆる段階で自分の作品が生き生きと動くのを見ることができます。 Diviアニメーションの力を探求するときに、ぜひご参加ください。
前回の投稿では、ステップバイステップのプロセスのために作成された4つの宣伝文モジュールを設計およびアニメーション化するためのいくつかの創造的な方法を紹介しました。
今日は、アニメーションデモページのセクション6を作成します。 このセクションでは、注目の製品やダウンロードを表示するための優れたデザインとアニメーションを紹介します。 これらの宣伝文句モジュールでの色の使用とアニメーションのブルーミング効果は、セクションを本当に際立たせます。
飛び込みましょう！
これが今日の投稿で構築するもののスニークピークです
Diviのフォールドアニメーションを使用して宣伝文句を開花させる
私たちのYoutubeチャンネルを購読する
セクション6の構築
セクションを追加してカスタマイズする
Visual Builderを使用して、レイアウトに別の通常のセクションを追加することから始めましょう。 次に、3列（2分の1、4分の1、4分の1）の行をセクションに追加します。
最初のモジュールを追加する前に、セクション設定に移動して、以下を更新してください。
[コンテンツ]タブの下…
背景色：＃00252d
[デザイン]タブの下…
カスタムパディング：80px上、80px下
設定を保存する
テキストモジュールを使用してヘッダーを追加する
次に、3列の行に戻り、左側の列にテキストモジュールを追加しましょう。 次のようにテキスト設定を更新します。
[コンテンツ]タブの下…
コンテンツボックスのテキストタブに次のh1ヘッダーを追加します。
<h1>Build Like You Mean It</h1>
[デザイン]タブの下…
ヘッダーフォント：Lato、太字（B）
ヘッダーフォントサイズ：38px
ヘッダーテキストの色：#ffffff
ヘッダー行の高さ：1.3em
カスタムマージン：20px下
アニメーションスタイル：スライド
アニメーションの方向：左
アニメーション強度：16％
設定を保存する
別のテキストモジュールを使用してテキストを追加する
通常は、同じテキストモジュールのh1ヘッダーの下に残りのテキストを追加するだけです。 ただし、h1ヘッダーとその下のテキストに別のアニメーション効果を追加したいので、別のテキストモジュールを作成する必要があります。 先に進み、作成したモジュールの下にテキストモジュールを追加し、次のように設定を更新します。
[コンテンツ]タブの下…
内容：「Loremipsum dolor sit amet、consectetur adipiscingelit。 Phasellus bibendum est vitae felis rhoncusgravida。 Sed nec purus tempus、sagittis mi id、efficiturnisl。 Sed nec purus tempus、sagittis mi id、efficiturnisl。」
[デザイン]タブの下…
テキストの色：明るい
テキストフォントサイズ：18px
テキストテキストの色：rgba（255,255,255,0.66）
テキスト行の高さ：1.9em
カスタムマージン：40px下
アニメーションスタイル：スライド
アニメーションの方向：左
アニメーション強度：8％
設定を保存する
ボタンを追加する
次に、左側の列の2つのテキストモジュールの下にボタンモジュールを追加しましょう。 次に、次のように設定を更新します。
[コンテンツ]タブの下…
下部テキスト：すべてダウンロード
ボタンのURL [URLを入力]
[デザイン]タブの下…
ボタンにカスタムスタイルを使用する：はい
ボタンのテキストサイズ：15px
ボタンのテキストの色：＃01254c
ボタンの背景色：＃ffcd1c
ボタンの境界線の幅：0px
ボタンの境界線半径：65px
ボタンの文字間隔：1px
ボタンフォント：太字（B）、大文字（TT）
カスタムパディング：上10px、右30px、下10px、左30px
アニメーションスタイル：スライド
アニメーションの方向：左
アニメーション強度：16％
ボックスシャドウcssプロパティを使用して、その素晴らしいグロー効果を追加することを忘れないでください。 カスタムCSSの下のメイン要素ボックスを見つけて、以下を追加します。
box-shadow: 0 3px 30px -5px #ffd747, inset 0 1px 3px rgba(255,255,255,0.5);
設定を保存する
最初の宣伝文モジュールを追加する
左の列は以上です。 次に、中央の列（最初の4分の1の列）に宣伝文句モジュールを追加しましょう。
次のように設定を更新します。
[コンテンツ]タブの下…
タイトル：Divi
アイコンを使用：はい
アイコン：[アイコンを選択]
背景のグラデーションの色：＃8b56ff、＃5d3dff
グラデーションタイプ：線形
グラデーション方向：140度
[デザイン]タブの下…
アイコンの色：#ffffff
テキストの色：明るい
テキストの向き：中央
ヘッダーフォント：太字（B）、大文字（TT）
ヘッダー文字の間隔：10px
カスタムマージン：12％下
カスタムパディング：上40px、右30px、下30px、左30px
アニメーションスタイル：折り
アニメーションの方向：左
アニメーションの遅延：200ms
[詳細設定]タブの下…
ここで、そのグロー効果をモジュールに追加し、ヘッダーを少しだけインデントできます。
次のCSSを[メイン要素]ボックスに追加します。
border-radius: 6px; box-shadow: 0 10px 60px -10px #8b56ff, inset 0 1px 3px rgba(255,255,255,0.2);
次のCSSを[宣伝文のタイトル]ボックスに追加します。
text-indent: 10px;
設定を保存する
宣伝文モジュールを複製して、次の3つの宣伝文を作成します
最初の宣伝文モジュールが設計およびアニメーション化されたので、モジュールを複製して残りの宣伝文を作成できます。
宣伝文モジュールにカーソルを合わせ、複製モジュールアイコンをクリックします。 以下に表示される新しい複製モジュールで、次のように設定を更新します。
[コンテンツ]タブの下…
タイトル：ブルーム
アイコン：[新しいアイコンを選択]
背景のグラデーションの色：＃ff56f9、＃c43dff
[デザイン]タブの下…
アニメーションの方向：下
[詳細設定]タブの下…
[メイン要素]ボックスのCSSを次のように置き換えます。
border-radius: 6px; box-shadow: 0 10px 60px -10px #ff56f9, inset 0 1px 3px rgba(255,255,255,0.2);
設定を保存する
宣伝文モジュールの別の複製を作成し、その複製を右端の列にドラッグします。 次に、その宣伝文句を次の設定で更新します。
[コンテンツ]タブの下…
タイトル：エクストラ
アイコン：[新しいアイコンを選択]
背景のグラデーションの色：＃56ffda、＃38d5ea
[デザイン]タブの下…
アニメーションの方向性：上
[詳細設定]タブの下…
[メイン要素]ボックスのCSSを次のように置き換えます。
border-radius: 6px; box-shadow: 0 10px 60px -10px #56ffda, inset 0 1px 3px rgba(255,255,255,0.2);
更新したばかりの宣伝文句の別の複製を右の列に作成して、真下に表示されるようにします。 次に、その宣伝文句を次の設定で更新します。
[コンテンツ]タブの下…
タイトル：モナーク
アイコン：[新しいアイコンを選択]
背景のグラデーションの色：＃f2743a、＃ff5656
[デザイン]タブの下…
アニメーションの方向性：右
[詳細設定]タブの下…
[メイン要素]ボックスのCSSを次のように置き換えます。
border-radius: 6px; box-shadow: 0 10px 60px -10px #f2743a, inset 0 1px 3px rgba(255,255,255,0.2);
設定を保存する
次に、次のように行設定を更新して、間隔を正しく設定しましょう。
[デザイン]タブの下…
カスタム幅を使用：はい
カスタム幅：1366px
カスタムガター幅を使用：はい
側溝幅：2
カスタムパディング：上80px、右0px、下160px、左0px
Coumn 1カスタムパディング：140pxトップ
2行目を作成する
これで、セクションの次の行を作成する準備が整いました。 処理を高速化するために、以前に設計した行とモジュールから設計要素を複製してコピーします。
まず、セクションに新しい1列の行を追加しましょう。 次に、次のように行設定を更新します。
カスタム幅を使用：はい
カスタム幅：1366px
カスタムガター幅を使用：はい
側溝幅：2
設定を保存する
次に、h1タイトルを含む作成した最初の行の最初のテキストモジュールをコピーします。 次に、次のように設定を更新します。
[コンテンツ]タブの下…
現在のh1タグを次のように置き換えます。
<h1>Don't Settle for Less</h1>
[デザイン]タブの下…
テキストの向き：中央
アニメーションスタイル：フリップ
アニメーション強度：70％
設定を保存する
次に、前の行からボタンモジュールをコピーし、更新を終えたばかりのテキストモジュールの下の2行目に貼り付けます。 次に、ボタンモジュールを次のように更新します。
[コンテンツ]タブの下…
ボタンテキスト：今すぐ参加
[デザイン]タブの下…
ボタンの配置：中央
アニメーションスタイル：フリップ
アニメーション強度：70％
設定を保存する
最後の行です。 1/2列構造の新しい行を作成します。 モジュールを追加する前に、次のように行設定を更新します。
[デザイン]タブの下…
カスタムガター幅を使用：はい
側溝幅：2
設定を保存する
次に、前の行から紫色の「Divi」宣伝文モジュールをコピーして、新しい行の左側の列に貼り付けます。 次に、次の設定を更新します。
[コンテンツ]タブの下…
タイトル：ビルダー
アイコン：[新しいアイコンを選択]
背景のグラデーションの色：＃ff568e、＃ff3d5d
[詳細設定]タブの下…
[メイン要素]ボックスのCSSを次のように置き換えます。
border-radius: 6px; box-shadow: 0 10px 60px -10px #ff568e, inset 0 1px 3px rgba(255,255,255,0.2);
設定を保存する
次に、作成した最初の行の右端の列の上部にある青緑色の「追加」宣伝文モジュールをコピーします。 次に、新しい3行目の右側の列に貼り付けます。
次に、宣伝文の設定を次のように更新します。
[コンテンツ]タブの下…
タイトル：穏やか
アイコン：[新しいアイコンを選択]
背景のグラデーションの色：＃3da4ff、＃385eea
[詳細設定]タブの下…
[メイン要素]ボックスのCSSを次のように置き換えます。
border-radius: 6px; box-shadow: 0 10px 60px -10px #3da4ff, inset 0 1px 3px rgba(255,255,255,0.2);
設定を保存する
それでおしまい。
ボーナス：簡単にインポートできるようにこれらのセクションをダウンロードしてください
ボーナス特典として、本日のチュートリアルに組み込まれているセクションを無料でダウンロードできるようにパッケージ化しました。このダウンロードは、以下のメールオプトインフォームを使用して入手できます。 メールアドレスを入力するだけで、ダウンロードボタンが表示されます。 すでにDiviニュースレターに参加している場合は、「再購読」について心配する必要はありません。 メールアドレスを再入力しても、メールアドレスが増えたり重複したりすることはありません。 ダウンロードが表示されるだけです。
楽しみ！
レイアウトパックをダウンロードする
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
これらのダウンロードを使用するには、ダウンロードフォルダーでAnimation_Effects_Part_4.zipというzipファイルを見つけることから始めます。 それを解凍して、次のインポートを表示します。
アニメーション効果パート4（セクション1）.json
アニメーション効果パート4（セクション2）.json
WordPress管理者で[Divi]> [Diviライブラリ]> [インポートとエクスポート]に移動します。 ポータビリティモーダルがポップアップしたら、[インポート]タブをクリックし、[ファイルの選択]というラベルの付いたボタンをクリックします。
好みのjsonファイルを選択し、「DiviBuilderレイアウトのインポート」をクリックします。 インポートが完了したら、上記のセクションのいずれかを追加する投稿またはページに移動します。
ビジュアルビルダーをアクティブにします。 上記のセクションのいずれかを追加するページの部分に移動します。 [新しいセクションを追加]アイコンをクリックすると、[ライブラリから追加]オプションが表示されます。 このオプションを選択し、必要なレイアウトを選択します。
まとめ
この素晴らしいセクションを一緒に構築することを楽しんでいただけたと思います。 色、輝く影、クリエイティブなアニメーションの組み合わせにより、これは独自のダウンロードや製品を紹介するための優れたレイアウトになっています。
来る
パート5では、セクション内の携帯電話にロールアニメーションスタイルをうまく組み込む方法を紹介します。
以下のコメントであなたからの連絡を楽しみにしています。
乾杯！