DIVI FEATURES

【神機能】Webサイト制作を10倍楽にするDiviの使い方5選。

INTRODUCTION

WordPressテーマDiviはコードを書かずに直感的な操作でWebページが作れるのが特徴です。

高機能でカスタマイズ性が高く、アップデートで常に新しい機能が追加されています。

当ブログもDiviテーマを利用して作成しています。

divi features 01 e1608548087666

Diviの神機能 5選

今回Diviを使っていて、本当に便利だなと思う5つの機能を紹介していきます。

Webサイトを作りたい方も、ブログを作りたい方も使えます。

Screenshot 2020 08 11 at 13.40.28

ここ2年以内に追加された新しい機能がほとんどで、大きく進化してかなり使い勝手がよくなっています。

Diviの神機能5選

上の3つに関してはWebページ制作の効率化に大きく関わる機能です。

後ろの2つについてはページクオリティの底上げにつながる機能で、すべて外部プラグインなしで使えます。

1. Theme Builder (テーマビルダー)

テーマビルダーはカテゴリやタグ別にページを指定してそれぞれヘッダーやフッターを設定できる機能です。

テーマビルダーについて

同じサイト内にジャンルが違う複数カテゴリのコンテンツがある場合などに便利な強力な機能です。

メインはデザイン系のWebページだけどブログ用のページも欲しい。なんていうときに別のスタイルを作って運用できます。

404ページも好きなスタイルにカスタマイズできます。

2. Library (ライブラリ)

セクションなどの要素の内容をコピー・保存していつでも同じ内容を呼び出せるテンプレートを作成する機能です。

グローバルライブラリ機能について

グローバルに指定するとどこに貼っても同じものを複製でき、内容を変えればすべてのページでライブラリの変更が反映されます。

WordPressの機能でいうウィジェットを使いやすくした感じです。

Googleアドセンスのコードや共通で使う事の多いヘッダー・フッターのスタイル管理に便利です。

ライブラリはテーマビルダーとよく組み合わせて使われる機能です。

3. Global Preset (グローバルプリセット)

フォントの設定やボタンデザインなどをスタイルとして保存して、ワンクリックで他の要素にもスタイルが適用できるようにする機能です。

テーマのカスタマイズで文字サイズなどを一括で変更できますが、この機能で更に細かく各要素のスタイルを設定できるようになりました。

例をあげると左がDiviのデフォルトのボタンスタイルですが、プリセットを使うとワンクリックで右のスタイルに変更できます。

文字やリンクは保ったままフォントのサイズやパディング、ボタンの色などのスタイルすべてが反映されます。

今までは他のところからコピーしたりライブラリから呼び出したりしていましたが、その必要がなくなりました。

上記のボタンスタイルを実際に変更する手順

グローバル機能なので、変えたスタイルと同じスタイルのものは全ページで変更が適応されます

大幅なデザイン変更したいなと思ったらプリセットのスタイルを修正するだけで全ページの同じスタイルを変えられます。

この機能が登場して作業に必要な時間が大幅に短縮されました。

4. Hover Effects (ホバーエフェクト)

マウスカーソルが指定の要素上に乗ったときのアクションを指定できる機能です。

スマホの場合でも指が上に乗った時に変化するのでインタラクティブなページを作ることができます。

例えば当ブログでは、関連記事に少しだけ拡大するホバーエフェクトを使っています。

<拡大するホバーエフェクトの例>

divi image02 01 e1608539220288

【超簡単】5分でできるDIVIのインストールとセットアップの仕方

Divi購入からWordPressでのセットアップまで画像付きでわかりやすく説明します。

ホバーした時に背景をちょっと暗くするなんていう使い方もできます。

<影をつけるホバーエフェクトの例>

【2020年版】定番ストックフォトおすすめ6選を比較検証

使い方は色々です。(他の記事も気になったら読んでみてください)

動きを与えることでクリック(タップできる)対象であることがわかるので、結構重要な要素だったりします。

5. Sticky Options (スティッキーオプション)

ついにスクロール追従が外部プラグインなしでも使えるようになりました。

下の文章がスクロールするとついてきます。

任意の要素をスクロール追従させられる機能です。

Webサイト・ブログのヘッダーを作るときにあると嬉しい機能が外部プラグインなしで簡単に使えます。

カスタマイズ性が高く使いやすいです。

機能の特徴を以下にまとめました。

・同じ範囲でも複数個設定可能

・追従位置指定できる (画面上部/下部/両方)

・追従範囲指定できる (/列/セクションなど)

文字でも画像でも好きな要素を好きな数だけ、追従範囲を指定して設定できます。

Screenshot 2020 08 20 at 10.26.43

買切りプランは20%OFFに

複数個設定している場合に、追従の位置が被っても被らずにスタックされるのが最高です。

divi image02 01 e1608539220288

【超簡単】5分でできるDIVIのインストールとセットアップの仕方

Divi購入からWordPressでのセットアップまで画像付きでわかりやすく説明します。

MATOME

まとめ

Diviのおすすめ機能を紹介しました。

ページ全体を簡単に管理できる機能が充実したので、スタイル管理が重要なWebサイトにも、ページやカテゴリ管理が多くなるブログにも使いやすいテーマになりました。

日本語でも使えてかなり便利なのでWebページ・ブログ作成の際は利用してみてください。

Screenshot 2020 08 11 at 13.40.28

tamasdesign

ブログページトップに戻る

More of DESIGN

デザイン関連記事

デザイン関連の記事をピックアップして紹介します。

併せて読んでみてください。

adobe cc sale cov 01

【2021年版】Adobe CCをセールで安く購入する4の方法

Adobe Creative Cloudのアプリを安く購入して利用していく方法について説明しています。

beststockphoto cov

【無料有料】おすすめフリー素材・画像サイト8選

商用利用もできるフリー素材を入手できるおすすめサイトを紹介しています。

adobe illustrator cov 01

【2021年版】Adobe Illustratorでできる6のこと

Illustratorでできるデザインや機能について解説しています。

Adobexd cov 01 e1607605725216

【UIUX】Adobe XDでできる6のこと

Adobe XDでできるデザインや機能について解説しています。

dimension cov 01 scaled e1607556909637

【3D】Adobe Dimensionでできる9のこと

Dimensionでできるデザインや機能について解説しています。