Diviの行の配置とアニメーション設定を使用したスライドインCTAの作成

毎週、次のプロジェクトに使用できる新しい無料のDiviレイアウトパックを提供します。 レイアウトパックの1つとして、Webサイトを次のレベルに引き上げるのに役立つユースケースも共有しています。 今週は、進行中のDiviデザインイニシアチブの一環として、Cleaning Company Layout Packを使用して、Diviの行の配置とアニメーション設定を使用してスライドインCTAを作成する方法を紹介します。

これを実現するために、すでに存在するすべてのアニメーションを削除することから始めます。 そうすることで、スライドインする行動の呼びかけを強調することができます。

それを手に入れよう！

プレビュー

この投稿で扱う3つの異なる例を見てみましょう。

クリーニング会社のランディングページをアップロードする

新しいページを追加してVisualBuilderに切り替えます

前述のように、Cleaning Company Layout Packを使用してこのチュートリアルを作成しますが、構築しているWebサイトにはこのアプローチを自由に使用してください。 新しいページを追加し、ページタイトルを入力して、すぐにVisualBuilderに切り替えます。

クリーニング会社のランディングページをアップロードする

これを行うと、3つのオプションが画面に表示されます。 ゼロから構築を開始したり、事前に作成されたレイアウトを選択したり、既存のページのクローンを作成したりできます。 2番目のオプションを選択します。

Cleaning Company Layout Packを検索し、ランディングページのレイアウトを選択して、ページにアップロードします。

ページ上のすべてのアニメーション設定を削除する

ページ上のセクションを見つける

レイアウトがページにアップロードされたら、先に進んで次のセクションを見つけます。

アニメーションを削除する

その設定を開き、すでに存在するアニメーションを削除します。

スタイルをすべてのセクションに拡張

時間を節約するために、このアニメーションスタイルをページ上のすべてのデザイン要素に拡張します。 右クリックして[アニメーションスタイルの拡張]を選択することにより、ページのセクションから始めます。 ページ全体のすべてのセクションに適用するようにして、[拡張]をクリックします。

スタイルをすべての行に拡張

同じ手順を繰り返しますが、代わりに、ページ全体のすべての行に適用します。

スタイルをすべてのモジュールに拡張

最後に、ページ上のすべてのモジュールにも適用するようにします。

CTA＃1の作成

新しい行を追加

位置

最初のスライドインCTAの作成を始めましょう！ 次のセクションの下部に新しい行を追加します。

カラム構造

追加した行の次の列構造を選択します。

行の配置

スライドイン効果を作成するために、行を左に押します。

• 行の配置：左

サイジング

行の幅も狭くします。

• カスタム幅を使用：はい
• カスタム幅：500px

間隔

また、不要な空白を取り除くには、行の上下のパディングを削除します。

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

アクションモジュールへの呼び出しの追加

コピーを追加

これで、Call toActionモジュールを追加できます。 選択したコンテンツをいくつか追加します。

リンクを追加

次に、CTAモジュールへのリンクを追加します。 リダイレクトするリンクがまだない場合は、「＃」を入力するだけです。 このボックスに何かを追加しないと、ボタンが表示されないため、空のままにしないでください。

背景色を削除する

CTAモジュールには、デフォルトで背景色があります。 先に進み、バックグラウンド設定で削除します。

セクショングラデーションをコピーする

青いグラデーションの背景を含むセクションを開きます。 何も変更せずに、右クリックして設定をコピーします。

CTAモジュールにグラデーションを貼り付けます

このグラデーションの背景をCTAモジュールに貼り付けます。

タイトルテキスト設定

CTAモジュール設定を再度開き、タイトルテキスト設定に移動して、レイアウトパックに一致するようにいくつかの変更を加えます。

• タイトルフォント：Ubuntu
• タイトルフォントの太さ：太字
• タイトルテキストサイズ：24px（デスクトップとタブレット）、16px（電話）
• タイトルラインの高さ：1.2em

本文の設定

ボディのボディフォントの太さも変更します。

• ボディフォントの太さ：セミボールド

ボタンの設定

次にボタンの設定を変更します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：18px
• ボタンのテキストの色：＃557df3
• ボタンの背景色：#FFFFFF
• ボタンの境界線の幅：10px
• ボタンの境界線の色：#FFFFFF
• ボタンの境界線半径：0px
• ボタンフォント：Ubuntu
• フォントの太さ：太字

間隔

モジュールのパディングも増やします。

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

国境

次に、境界設定に右上と右下の境界半径を追加します。

• 右上：100px
• 右下：100px

ボックスシャドウ

奥行きを増すために、微妙なボックスシャドウを追加します。

• ボックスシャドウブラー強度：71px
• ボックスシャドウスプレッド強度：-5px

アニメーション

最後になりましたが、CTAモジュールにアニメーション効果を与えます。

• アニメーションの方向性：右
• アニメーション強度：100％
• アニメーションの開始不透明度：100％
• アニメーション速度曲線：線形

CTA＃2の作成

CTA＃1行のクローンを作成して変更を加える

クローン行

2番目の例を作成するには、先に進んで最初の行のクローンを作成します。

セクションにドラッグ

ページを下にスクロールして、複製をここに配置します。

セクショントップパディングを削除

行を配置したセクションの設定を開き、上部のパディングを削除します。

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

セクション左上の境界半径を削除します

次に[境界線の設定]に移動し、左上の境界線の半径も削除します。

CTA右上の境界半径を削除します

次に、CTAモジュールを開き、右上の境界半径を削除して、セクションとモジュールをブレンドできるようにします。

アニメーションの変更

このスライドインCTAでは、別のアニメーションを使用します。 他のアニメーションオプションも自由に試してみてください。

• アニメーションの方向性：中央
• アニメーションの開始不透明度：100％
• アニメーション速度曲線：線形

CTA＃3の作成

CTA＃1行のクローンを作成して変更を加える

クローン行

最後の例を作成するために、行のクローンをもう一度作成します。

セクションにドラッグ

次のセクションに複製を配置します。

行の配置を変更する

モジュールの行設定を開き、配置を右に変更します。

• 行の配置：右

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

モジュールのグラデーションの背景も削除します。

代わりに背景色を使用する

代わりに背景色を使用してください。

• 背景色：＃f2835a

ボタンのテキストの色を変更する

背景色に合わせるには、ボタンのテキストの色も変更します。

• ボタンのテキストの色：＃f2835a

CTA境界半径を削除します

与えられた境界半径をすべて削除することで、CTAモジュールを正方形に変えています。

アニメーションの変更

次にアニメーション設定を変更します。

• アニメーションの方向：下
• アニメーション強度：100％
• アニメーションの開始不透明度：100％
• アニメーション速度曲線：線形

セクション下部パディングを削除します

最後になりましたが、モジュールが配置されているセクションの下部のパディングを削除して、モジュールをセクションの下部にプッシュします。これで完了です。

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

プレビュー

作成したスライドインCTAの3つの例を最後に見てみましょう。

最終的な考え

この投稿では、DiviのCleaning Company LayoutPackを使用してスライドインCTAを作成する方法を紹介しました。 まず、ページに既に存在するアニメーションを削除することから始めました。 その後、注目を集めるために3つのスライドインCTAを作成しました。 このブログ投稿は、Diviデザインイニシアチブの一部であり、毎週、デザインツールボックスに何かを入れようとしています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！