Divi は Web ページにアニメーションを編集過程をリアルタイムに確認しながら設定することができます。アニメーションの設定はセクション、行、モジュールのそれぞれで設定できます。

WordPressテーマ Diviの使い方5
サイトにアニメーションを設定する

1.アニメーション設定の場所

アニメーションを設定するには、

セクション(青色)、行(緑色)、モジュール(灰色)のそれぞれの「⚙(歯車)」アイコンをクリックします。
設定のパネルが表示されるので「デザイン」タブの「アニメーション」をクリックします。※行やモジュールでも同様です。

2.アニメーションを設定する

1)Animation Style(アニメーションスタイル)

Animation Style では、アニメーションの形状を設定できます。

  • フェード:フェードし現れる効果
  • スライド:スライド移動し現れる効果
  • Bounce:ポンポンと弾む効果
  • Zoom:ズーム拡大する効果
  • 反転:反転から開く効果
  • Fold:折り畳みから開く効果
  • Roll :ロール回転効果

2)Animation Repeat(アニメーションリピート)

Animation Repeat では、クリックすることで、1回のみか連続か選べます。

  • Once:1回のみ
  • Loop:連続実施

3)Animation Direction(アニメーション方向)

「✔(チェックマーク)」をクリックして承認します。

Animation Direction では、アニメーションの方向を設定できます。

4)Animation Duration(アニメーション期間)

Animation Duration では、アニメーションの実行期間(時間)を設定できます。

単位はミリセカンド(ms)

5)Animation Delay(アニメーションディレイ)

Animation Delay では、アニメーションの実行開始までの遅延時間を設定できます。

単位はミリセカンド(ms)

6)Animation Intensity(アニメーション強度)

Animation Intensity では、アニメーションの動きの大きさを設定できます。

単位は%です。

7)Animation Starting Opacity(アニメーション 開始 透過度)

Animation Opacity では、アニメーション開始時の透過度を設定できます。透過状態から現れてきます。

単位は%です。

8)Animation Speed Curve(アニメーション速度曲線)

Animation Speed Curve では、アニメーションの実行速度曲線を設定できます。

  • Ease-In-Out:最初と最後をゆっくりにします
  • Ease:ゆっくり
  • Ease-In:ゆっくり開始し速く
  • Ease-Out:最後をゆっくりにします
  • 線形:直線状にします

アニメーションを設定することでサイトに動きを出せます。Divi ではセクション、行、モジュールのそれぞれに動きを設定できます。適度に動かすことはサイトのイメージアップにつながることもあります。設定してみましょう。

ワードプレス Divi レッスン Diviの使い方図解

写真サイトを構築する際に、役に立ちそうな設定や情報をまとめています。こちらは、ワードプレステーマ Divi に関連する記事の目次ページとしています。なるべく図を用いて簡単に説明するようにしています。参考にどうぞ。

divi-lesson4-logo

ワードプレス Diviの使い方4 背景設定と新機能 Dividers

Divi は Web ページの背景を編集過程をリアルタイムに確認しながら編集することができます。背景の設定はセクション、行、モジュールのそれぞれで設定できます。さらに、セクションの背景では新たに「...
divi-reference2-logo

ワードプレス Divi リファレンス2 テーマのオプションの設定方法

Divi では専用のオプションメニューを利用して様々な設定を行えるようになっています。今回はその「テーマのオプション」の設定方法について図解します。Diviの使い方9...
divi-tips-sns-monarch-logo

ワードプレス Divi MONARCH インストールと設定

Divi を開発している Elegant Themes にはSNSとの連携をより容易にすることができるプラグイン MONARCH もあります。Divi を購入していると MONARCH...
divi-lesson7-logo

ワードプレス Diviの使い方7 写真を文字の形に切り抜く方法

Webサイトで写真を文字の形に切り抜いて表示させたい場合、通常は Photoshop...
divi-lesson5-2-movie

ワードプレス Diviの動画利用方法 Diviレッスン5-2

今回は Divi で作成しているサイトに動画を設定する方法について図解します。Divi...
divi-lesson3-1-logo

ワードプレス Diviの使い方3 レイアウトを使ったWebページ作成1

今回は一連の流れで、実際のサイト( Webページ )の作成を行ってみましょう。作るサイトは写真家のサイトということにしましょう。 Divi...

Pin It on Pinterest