今回は Diviの使い方7の3として、文字の色をグラデーション変化させる方法について図解させていただきたいと思います。Diviではテキストの背景に動画を配置してサイト上で合成させることで動的に変化させることが可能です。

Diviで文字の色をグラデーションアニメにする方法:Diviの使い方7-3

1)背景のグラデーションアニメーションGifを用意する

背景に設定するグラデーションのアニメーションGifを準備します。今回は下記を利用することにします。

上記のようなアニメーションGifの作成については、このリンク先「Photoshopで色がグラデーション変化するアニメーションGifを作成する」で確認ください。

2)行のカラムの背景にアニメーションGifを設置する

行のカラムの背景にアニメーションGifを設置します。Gifを設置するには、

row-configuration-panel「行の設定」をクリックします。
row-background行の設定で「背景」をクリックします。

「カラム1の背景(テキストモジュールを設置するカラム)」にGifを設定します。

row-background「+(Add Background Image)」をクリックします。

メディアライブラリが表示されるので、

アニメーションGifを選択し、「選択」をクリックします。

下記のように行の背景にアニメーションGifが設定されます。

3)テキストモジュールの文字の色を黒にする

テキストモジュールを追加し、

モジュールの設定をクリックします。

テキストモジュールの設定で、

text-configuration「デザイン」>「テキスト」をクリックします。

 

text-color「テキストカラー」を表示して文字の色を黒にします。

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

4)テキストモジュールの背景を白にする

テキストモジュールの背景を白にするには、

モジュールの設定をクリックします。

テキストモジュールの設定で、

text-background-color「コンテンツ」>「背景」>「+(Add Background Color)」をクリックします。
background-color「白」をクリックして設定します。

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

5)モジュールの設定でフィルターのBlend Mode(保存モジュール)を変更する

テキストの背景のデザインで、

「フィルター」をクリックします。
「保存モジュール(Blend Mode)」を「通常」から「スクリーン」に変更します。

 

下記のように文字の色のほうがグラデーション変化するようになります。

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

アニメーションGifはPhotoshopでも同様に作成できるのですが、この方法の利点は、Divi上で文字を自由に編集できることです。すごく便利です。サイトの一部、目立たせたいところに使うと効果的です。

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

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

動画 と 動画スライダーモジュール Diviの使い方10-3

今回は Divi の各種モジュールのうちから、動画モジュールと動画スライダーモジュールについて図解したいと思います。 動画と動画スライダーモジュール Diviの使い方10-3...

Divi用の子テーマ作成プラグインを利用する Diviの使い方8-1-3

今回はDivi で子テーマを作成する方法の3つ目としてプラグインを利用する方法を図解します。複数のプラグインがありますが、その中から今回は「Divi...
divi-lesson5-2-movie

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

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

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

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

ワードプレス Divi リファレンス1 外観のカスタマイズ

今回は Divi テーマのカスタマイズのうち、「外観」>「カスタマイズ」の項目で設定できる内容について図解します。ワードプレス Divi リファレンス1...
divi-tips-before-after-images-logo

Diviチップス Before + After Images のインストール

ワードプレス(WordPress)で作成している Web サイトで、写真や画像の分割比較表示をしたくなった場合に、便利なプラグインとして「TwentyTwenty」があります。 Divi...

Pin It on Pinterest