ワードプレス Diviの使い方 7-2 イラストの形にグラデーション画像を表示する

ワードプレス Diviの使い方 7-2 イラストの形にグラデーション画像を表示する

前回は文字の形に画像を切り抜いて表示させましたが、今回はイラストの形にグラデーション画像を切り抜いてみましょう。Divi Builder 上で画像の切り抜きを設置すると、いつでも色を変更できるので便利です。 Divi レッスン 7の2 イラストの形にグラデーション画像を表示する 1.イラストを用意する 切り抜きの型となるイラストを用意しましょう。今回はこのPNG画像を利用することにします。フリーイラストをダウンロードするのも良いでしょう。用意するのは黒に塗りつぶした画像です。 2.行( Row )に画像モジュールを追加する...
ワードプレス Diviの使い方7 写真を文字の形に切り抜く方法

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

Webサイトで写真を文字の形に切り抜いて表示させたい場合、通常は Photoshop などで画像を文字型のパスで切り抜き加工し取り込むと思います。でもその方法だと、ちょっと文言を変えたいと思ったら再度、加工からやり直しになりますよね。でも、Divi Builder だとその場で文字列を変えるだけで、すぐにその文字型に写真を切り取った様に表示できるんです。今回はその方法を解説します。 ワードプレス Diviの使い方7 写真を文字の形に切り抜く方法 1.写真を「行( Row )」のカラムの背景に設定する 行( Row...
ワードプレス Diviの使い方6 設定でデザインできる共通項目と固有項目

ワードプレス Diviの使い方6 設定でデザインできる共通項目と固有項目

Divi Builder の設定のデザインタブで設定できる項目として、セクションの Dividers と、デザイン設定のうちのアニメーションについてはすでに説明しました。今回はその他に設定できる項目についてみてみることにしましょう。 ワードプレス Diviの使い方6 設定でデザインできる共通項目と固有項目 1.デザイン設定の場所 Divi では Web ページのセクション、行(Row)、モジュール のそれぞれで同様の操作にてデザインを設定できます。様々なモジュールがありますが、今回は画像モジュールを例として示します。...
ワードプレス Diviの使い方5 Webサイトにアニメーションを設定する

ワードプレス Diviの使い方5 Webサイトにアニメーションを設定する

Divi は Web ページにアニメーションを編集過程をリアルタイムに確認しながら設定することができます。アニメーションの設定はセクション、行、モジュールのそれぞれで設定できます。 WordPressテーマ Diviの使い方5 サイトにアニメーションを設定する 1.アニメーション設定の場所 アニメーションを設定するには、 セクション(青色)、行(緑色)、モジュール(灰色)のそれぞれの「⚙(歯車)」アイコンをクリックします。...
ワードプレス Diviの使い方4 背景設定と新機能 Dividers

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

Divi は Web ページの背景を編集過程をリアルタイムに確認しながら編集することができます。背景の設定はセクション、行、モジュールのそれぞれで設定できます。さらに、セクションの背景では新たに「 Dividers 」という素晴らしい機能が使えるようになっています。 ワードプレス Divi の使い方4 背景設定と新機能 Dividers 1.セクションの背景設定 今回は前回作成した Web ページ の背景を改造してより素敵なサイトを構築しましょう。 1)セクションの背景を設定する...
ワードプレス Diviの使い方3 レイアウトを使ったWebページ作成3

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

今回は Divi のレイアウトライブラリを使ったサイト( Webページ )作成練習の3回目として、作成したページの公開と、トップページの設定、リンクの作成を行い、サイトの作成を完成させたいと思います。 ワードプレス Diviの使い方3 レイアウトを使ったWebページ作成3 6.作成したページを公開する 1)固定ページのリストからまとめてページを公開する ページをまとめて公開に設定するには、先ほどまでで作成し下書きを保存したページを表示します。 「固定ページ一覧」をクリックします。 作成した固定ページのリストが表示されます。...

Pin It on Pinterest