Diviの変換およびホバーオプションを使用したクリエイティブなインタラクティブ宣伝文モジュール

私たちは皆、新しい変換オプションを愛してきました。 彼らは私たちが素晴らしいデザインを作成するのを助け、私たちが行った変更をリアルタイムで見ることができます。 また、ホバーオプションと組み合わせると、驚くべき効果を確実に生み出すことができます。 このチュートリアルでは、Diviの変換オプションとホバーオプションを組み合わせてインタラクティブな宣伝文句モジュールを作成する方法を紹介します。 作成にほとんどまたはまったく時間がかからず、必要なWebプロジェクトに使用できる4つの異なる例を扱います。

それを手に入れよう！

プレビュー

チュートリアルに入る前に、結果を簡単に見てみましょう。

一般的な手順

新しいセクションを追加

この投稿の最初の部分では、投稿の後半で宣伝文句の変換の例に焦点を当てるのに役立ついくつかの一般的な手順について説明します。 新しいページを作成するか、既存のページを開いて、通常のセクションを追加することから始めます。

行＃1を追加

カラム構造

次の列構造を使用して、セクションに新しい行を追加して続行します。

サイジング

行の設定を開き、デザインタブでサイズ設定を変更して、行が画面の幅全体を占めるようにします。

• この行を全幅にする：はい
• カスタムガター幅を使用：はい
• 側溝幅：1

間隔

カスタムの上部と下部のパディングも追加します。

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

列1に宣伝文モジュールを追加する

コンテンツを追加する

このチュートリアル全体で必要となる唯一のモジュールは、宣伝文句モジュールです。 宣伝文句をカスタマイズしたら、再利用して、投稿の冒頭で見た4つの例すべてを実現します。 先に進み、最初の列に宣伝文モジュールを追加して、選択したコンテンツを入力します。

アイコンを選択

アイコンを選択して続行します。

背景色

次に、完全に白い背景を追加します。

• 背景色：#ffffff

デフォルトのアイコン設定

次に、デザインタブのアイコン設定を変更します。

• アイコンの色：＃7a69e6
• 円のアイコン：はい
• 円の色：rgba（122,105,230,0.3）
• 画像/アイコンの配置：上
• アイコンを使用フォントサイズ：32px

ホバーアイコンの設定

ホバー時にアイコンと円の色の両方を変更します。

• アイコンの色：＃ff758e
• 円の色：rgba（255,117,142,0.29）

タイトルテキスト設定

テキスト設定を変更して続行します。

• タイトルフォント：Roboto
• タイトルフォントの太さ：太字
• タイトルテキストの配置：中央
• タイトルテキストサイズ：18px
• タイトル行の高さ：1.7em

本文の設定

また、本文の設定も変更してください。

• ボディフォント：Open Sans
• 本文の配置：中央
• 本文サイズ：14px
• ボディラインの高さ：1.8em

サイジング

また、さまざまな画面サイズでモジュールのサイズをわずかに縮小しています。

• 幅：74％（デスクトップ）、85％（タブレットと電話）
• モジュールの配置：中央

間隔

また、カスタムパディングも追加します。

• トップパディング：30px
• ボトムパディング：40px
• 左パディング：20px
• 右パディング：20px

国境

宣伝文句モジュールの各コーナーに「10px」を追加して続行します。

デフォルトのボックスシャドウ

さらに、微妙なボックスシャドウを追加します。

• ボックスシャドウブラー強度：70px
• 影の色：rgba（122,105,230,0.3）

ホバーボックスシャドウ

ホバーのボックスの影の色を変更して、ホバーアイコンと円の色と一致させます。

• 影の色：rgba（255,117,142,0.29）

宣伝文句モジュールを2回クローンし、残りの列に複製を配置します

宣伝文のカスタマイズが完了したら、先に進んで2回クローンを作成できます。 残りの2つの列に複製を配置します。

行＃2を追加

カラム構造

最後の例では、別の行が必要になります。 次の列構造を選択します。

サイジング

モジュールをまだ追加せずに、行設定を開き、デザインタブでサイズ設定を変更します。

• カスタム幅を使用：はい
• ユニット：PX
• カスタム幅：1440px
• カスタムガター幅を使用：はい
• 側溝幅：1

前の行の宣伝文句モジュールのクローンを作成し、列1に配置します

次に、前の行の宣伝文句モジュールの1つを複製し、2番目の行の最初の列に複製を配置します。

サイズを変更する

新しい宣伝文モジュールのサイズ設定で幅を変更すると、一般的な手順が完了します。

• 幅：100％（デスクトップ）、85％（タブレットと電話）

例1を再作成する

デフォルトの変換スケール

すべての一般的な手順を完了したので、さまざまな例と、Diviの変換およびホバーオプションを使用してそれらを実現する方法に焦点を当てることができます。 最初の例は、上のGIFでわかるように、ホバーするとモジュールのサイズが大きくなります。 これを実現するには、すべての画面サイズで変換スケール値が「100％」のままであることを確認してください。

• 下：100％（デスクトップ、タブレット、電話）
• 右：100％（デスクトップ、タブレット、電話）

ホバー変換スケール

ホバー時に変換スケール値を変更して、拡張効果を作成します。

• 下：132％
• 右：132％

例2を再作成する

デフォルトの変換回転

2番目の例に移ります！ 上のGIFでわかるように、水平方向の反転効果を作成します。 そのためには、変換の回転値を試してみる必要があります。 回転が0度になる前に、可能な限り「最高」の値を使用しています。 これにより、フリッピング効果が発生します。

• 右：359.9度

ホバー変換回転

変換回転オプションのホバーオプションを有効にし、「0deg」を追加します。 基本的に行っているのは、モジュールが360度反転できるようにすることです（技術的には359.9）。

• 右：0度

トランジション

また、移行期間を[詳細設定]タブに増やして、スムーズな移行を作成します。

• 移行時間：1000ms

例3を再作成する

デフォルトの変換回転

3番目の例では、前の例とほぼ同じことを行いますが、水平方向の反転ではなく、垂直方向の反転を作成します。

• 中心：359.9度

ホバー変換回転

変更した値は、ホバー時に必ず「0deg」に戻してください。

• 中心：0度

トランジション

また、トランジション設定でトランジション期間を長くします。

• 移行時間：1000ms

例4を再作成する

デフォルトの変換スケール

次の最後の例に移りましょう！ モジュールのスケールを変換することから始めますが、小さい画面サイズでもモジュールが無傷のままであることを確認してください。

• 下：150％（デスクトップ）、100％（タブレットと電話）
• 右：150％（デスクトップ）、100％（タブレットと電話）

ホバー変換スケール

モジュールがデスクトップの元の位置にフォールバックできるように、ホバー時に変換スケールを変更します。

• 下：100％
• 右：100％

デフォルトの変換回転

変換回転値を変更して続行します。 繰り返しますが、それに応じて値を変更することにより、モジュールが小さい画面サイズでも無傷のままであることを確認してください。

• 左：322度（デスクトップ）、0度（タブレットと電話）
• 右：59度（デスクトップ）、0度（タブレットと電話）

ホバー変換回転

追加した値を「0deg」に置き換えて、モジュールがホバーの位置に収まるようにします。

• 左：0度
• 右：0度

デフォルトの変換スキュー

変換スキュー値も変更します。

• 下：22度（デスクトップ）、0度（タブレットと電話）
• 右：22度（デスクトップ）、0度（タブレットと電話）

ホバートランスフォームスキュー

ホバー時にデフォルト値に戻します。

• 下：0度
• 右：0度

トランジション

最後になりましたが、トランジション設定でトランジション期間を長くしてください。

• 移行時間：500ms

列1の宣伝文句モジュールを4回クローンし、残りの列に複製を配置します

移行設定が完了したら、先に進んで宣伝文モジュールのクローンを4回作成できます。 残りの列に複製を配置すれば完了です。

最終的な考え

このチュートリアルでは、Diviの変換オプションとホバーオプションを一緒にクリエイティブに使用する方法を示しました。 具体的には、4つの異なる例を再作成しました。これは、小さい画面サイズでも望ましい結果を維持しながら、宣伝文句モジュールをよりインタラクティブにする方法を示しています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！