生産性とデザインを向上させる25の「隠された」Divi機能

何年にもわたってリリースされた強力なDivi機能のすべてで、それらのいくつかは見落とされた（または無視された）かもしれないと言っても過言ではありません。 日常的にDiviを使用している人は、Diviの方法で行き詰まり、利用可能な新機能について少し思い出す必要がある場合があります。 また、Diviを初めて使用する場合は、プレーンサイトに「隠れている」機能に光を当てる人が必要になる場合があります。 あなたがDiviマスターであろうとYounglingであろうと、Diviで利用可能なすべての機能をじっくりと見てみるのは決して痛いことではありません。 あなたはただ何か新しいことを学ぶかもしれません！

この投稿では、生産性とデザインを向上させることを目的としているが、多くのユーザーの注意を逃れている可能性のある25のDivi機能に焦点を当てます。 これらの機能のすべてがあなたにとって新しいものではないことを理解しています（それらのいくつかはDiviの開始以来存在しています）が、いくつかはあなたを驚かせるでしょう。

楽しみ！

生産性とデザインを向上させる25の「隠された」Divi機能

私たちのYoutubeチャンネルを購読する

＃1検索オプション検索バー

さて、これは実際にはそれほど「隠されている」わけではありませんが、この機能を使用する習慣がない方もいらっしゃると思います。 わかった。 古い習慣は一生懸命に死にますが、この検索バーをワークフローに組み込むことは間違いなく価値があります。 モジュールにカスタムパディングを追加する必要がある場合は、[デザイン]タブをクリックして下にスクロールし、サイズの切り替えを開いてから、カスタムマージンを追加することに決めないでください。 検索オプションバーに「margin」と入力するだけで、すぐに利用できます。 すべてのフォントが特定のモジュールに一致することを確認したいですか？ 検索オプションバーに「font」という単語を入力し、本文のフォント、ヘッダーのフォント、ボタンのフォントをすべて1つの小さなリストで更新するだけです。

ヒント：検索する前に特定のタブをクリックする必要はありません。 検索結果は、テキスト設定のどこにいても、3つのタブすべてのすべてのオプションから取得されます。

検索バーは、新しいモジュールを追加するときにも表示されます。 必要なモジュールの名前を入力し始めるだけで、モジュールを見つけるためにスクロールしなくても、モジュールがリストの一番上に表示されます。

＃2背景画像の上にグラデーションを配置する

これは、設計プロセスを改善する優れた機能です。 画像にグラデーションオーバーレイを追加することはWebデザインの必需品であり、この機能により、DiviBuilder内でそれらのオーバーレイを簡単に追加できます。 モジュールに背景画像を追加してから、グラデーションの背景色の組み合わせを追加するだけです。 グラデーションの背景オプションで、「背景画像の上にグラデーションを配置する」を選択します。 グラデーションの背後にある画像が見えるように、グラデーションの色にある程度の不透明度があることを確認してください。 また、ビジュアルビルダーを使用すると、背景画像に最適な不透明度と色にグラデーションを簡単に調整できます。

＃3 2つのグラデーションの背景色を交互に使用する：そのためのボタンがあります。

これは大きな機能ではありませんが、まだ手動でカラーコードを切り替えている人がいることを知っているので、夜は眠れないので、言及したいと思います。 適切なグラデーションの背景を取得するのは難しい場合があるため、このようなオプションがあると便利です。

色を変更するには、カラーピッカーにカーソルを合わせ、「色の変更」（正式な用語はわかりません）アイコンをクリックします。 次も削除アイコンです。

＃4キーボードショートカット

これらは見逃しがちで、しばしば忘れられます。 しかし、あなたがそれらを使用することを約束すれば、それらはあなたのワークフローをスピードアップします。 ショートキーを使用して節約する時間は、ショートキーを使用しない時間と比較してかなりの時間がかかる可能性があります。 つまり、私たちが手書きに落ち着くのではなく、タイプすることを学ぶ理由があります（私は手書きを楽しんでいますが）。 そして、同じことがウェブサイトの構築にも当てはまります。

キーボードショートカットのリストは、Divi BuilderHelperモーダル内にあります。 Visual Builder内からキーボードに疑問符（shift +？）を入力し、[ショートキー]タブをクリックするだけです。

そうそう、ヘルプドキュメントのビデオにも同じ方法でアクセスできます。 それらを忘れないようにしましょう。

使用可能なすべてのショートカットキーのリストは次のとおりです。 私が最初に提案するものを強調しました（私はいつもこれらを個人的に使用しています）：

＃5ワイヤーフレームビュー

これは、ビジュアルビルダーを使用して設計しているときにバックエンドビルドに移動する必要がないためです。 したがって、バックエンドビルダーが苦労しているすべての人にとって、ビジュアルビルダーへの飛躍を検討することができます。

そして、ワイヤーフレームビューを開いたり閉じたりするためのショートキーを忘れないでください：shift + w

ワイヤービュー内のレイアウトをさらに広く表示するには、各セクションまたは行のトグル矢印アイコンを選択して、セクション全体を折りたたむことができます。

＃6インライン編集

インライン編集ができる場所がいくつかあります。 Visual Builderを使用していて、特定のモジュール内のテキストを編集する場合、コンテンツを変更するためにモジュール設定を編集するためにクリックする必要はありません。 テキストをクリックするだけで、インラインエディタが展開され、テキストを編集できるようになります。

Visual Builder内でワイヤーフレームビューを使用している場合は、ラベルをインラインで編集することもできます。 セクションラベルの名前を変更したいですか？ 行設定モーダルまたは右クリックオプションから行う必要はありません。 ラベルをクリックして、そこで編集するだけです。

ヒント：インラインエディターを終了すると混乱する可能性がありますが、そうである必要はありません。 escキーを押すだけで外出できます。

＃7右クリックオプションを使用したVisualBuilder分割テスト

VisualBuilder内で分割テスト機能を使用するのがいかに簡単であるかにいつも驚いています。 全機能のリリースを読むことができるので、ここでは詳しく説明しません。 しかし、これがどのように機能するかの要点です。 テストするセクション、行、またはモジュールを右クリックし、右クリックメニューから分割テストを選択します。 次に、テストの目標を選択します（お問い合わせフォームの入力、ボタンのクリックなど）。 Diviは、テストしている要素に別のバージョン（分割）を自動的に作成して、新しいバージョンを作成できるようにします。 この機能を最初にテストしたとき、ビジュアルビルダーから分割テストの両方のバージョンを表示する方法がわからなかったため、ワイヤーフレームビューを開いて両方を表示しました。 しかし、これは必要ありません。 分割テストの目標をアクティブにすると、設定メニューに矢印が表示され、分割テストのさまざまなバージョンをスライドできるようになります。

＃8カスタマイズ可能なビルダー設定

ビルダー設定をまだ調べていない場合でも、手遅れではありません。 ここには、VisualBuilderとの日常的なやり取りを改善できる便利な設定がいくつかあります。

ここに私が強調したい3つがあります。

設定モーダルデフォルト位置

あなたのことはわかりませんが、大きなモニターで編集するときにモーダルをポップアップする方法には一定の好みがあります（不思議に思うかもしれませんが、これは固定された左側のサイドバーの位置です）。 しかし、伝統を破り、モーダル位置を変更する必要がある場合があります（通常、ラップトップのような小さな画面で編集している場合）。 そこで、デフォルトの位置を左側のサイドバーに固定するように設定しました。 そうすれば、自分が好きなように元に戻す必要があることに気付く前に、自分が慣れていないモーダルポジションでの作業に夢中にならないようになります。

設定を閉じたトグルにグループ化する

デフォルトでは、Diviは設定オプションをトグルにグループ化します。 つまり、各トグル内のオプションを表示するには、クリックしてこれらのトグルを開く必要があります。 この機能を無効にすると、設定がトグルにグループ化されなくなり、クリックして詳細を表示しなくても設定をスクロールできるようになります。

Builderのデフォルトのインタラクションモード

この記事に記載されている多くの機能と同様に、これは間違いなく個人的な好みです。 しかし、私はそれぞれの利点を見ることができます。 デフォルトのホバーインタラクションモードは、ホバー上の任意のセクション、行、またはモジュールの設定メニューを強調表示して展開します。

クリックモードも便利です。 特にモジュールが一緒に閉じられているか、カスタムマージンがある場合は、編集またはホバーしているモジュールが明確でない場合があります。 クリックモードは、クリックしてモジュールを編集する前に、ホバー時にモジュールコンテンツを強調表示して輪郭を描くことにより、当て推量を完全に排除します。

グリッドモードでは、すべてのセクション、行、およびモジュールの設定メニューが一度に強調表示されて表示されます。 私は個人的にこのモードをデフォルトとして使用していませんが、ページ全体で要素を移動/再配置するときはいつでもグリッドモードを使用することの価値を理解しています。

＃9テキストモジュールを使用したリンク、リスト、およびブロック引用符のデザインオプション

Diviのテキストモジュール内でカスタムテキストスタイルを管理するための新しいタブ付きインターフェイスを忘れないでください。 これらのタブを使用すると、リンク、リスト（順序なしおよび順序付き）、およびブロッククォートのデザインをカスタマイズできます。 CSSを使用してこれらの変更を行うことは、ドラッグになる可能性があります。 さらに、モジュールからモジュールに切り替えることもできます。 これらのオプションを使用すると、それを簡単に行うことができます。

これがあなたが見落としているかもしれない私のお気に入りのオプションの2つです。

リストスタイルオプション

[順序なしリスト]タブと[順序付きリスト]タブで、リストスタイルの種類を簡単に変更したり、まとめて削除したりできます。

リストアイテムのインデントマージンとスタイルの位置を変更することもできます。

ブロッククォートスタイルオプション

[ブロッククォート]タブで、ブロッククォートを際立たせるデザイン要素の境界線の太さと色を変更できます。

＃106つのヘッダーレベルすべての設計オプション

上記の＃9と同じように、テキストヘッダーレベルにも新しいタブ付きインターフェイスがあります。 つまり、複数のヘッダー（h1、h2、h3など）を持つモジュールがある場合、モジュールの設計設定内でそれらのヘッダーのそれぞれに固有のスタイルを与えることができます。 [デザイン]タブで、[タイトル見出し]または[ヘッダーテキスト]セクションを切り替えて開き、カスタマイズするヘッダータイプを制御するタブを選択します。

ヒント：タブの青いラベルによって、どのヘッダーレベルがカスタマイズされているかがわかります。 ラベルが灰色のままの場合、そのヘッダーレベルのデフォルト設定がアクティブになります。

＃11Diviモジュールを使用してカスタムフォントをアップロードする

知るか？ たぶん、そのアップロードボタンはあなたの何人かのためにプレーンサイトに隠されたままです。 もしそうなら、あなたは間違いなくこの便利な機能を利用する必要があります。 さまざまなファイルタイプ（eot、woff2、woff、ttf、otf）のカスタムフォントを簡単にアップロードできるだけでなく、Diviはそれらのカスタムフォントを保存して、サイト全体のすべてのモジュールで使用できるようにします。

テキスト要素のフォントを変更することを選択し、[アップロード]ボタンをクリックするだけです。

Upload Font Modalがポップアップ表示され、フォントファイルに名前を付けて追加できます。

ファイルを選択したら、アップロードボタンをクリックします。 次に、DiviBuilderに含まれているのと同じフォントのリストからこれらのカスタムフォントにアクセスできるようになります。

＃12画像の下のスペースを削除する

この機能はしばらく前から存在していますが、見逃したり、その重要性を理解していない可能性があります。

このオプションは、画像が列の最後のモジュールである場合にのみ画像に影響します。 有効にすると、画像の下部と次のセクションの間の距離が削除され、画像がページの次のセクションの上部に隣接できるようになります。

この機能を利用する1つの方法は、ヘッダー画像を下のセクションに隣接するように配置することです。

＃13入力ごとに異なる単位を追加する

デフォルトでは、Divi Builder設定全体で特定の入力に数値を入力すると、Diviはそれをピクセル単位として扱います。 ただし、これらの入力オプションのピクセル単位の入力に限定されません。 ％、em、vh、vwなどの他の単位を入力することもできます。

たとえば、パーセンテージはモバイルで非常にうまく機能します。 デスクトップで（100pxのようなものではなく）5％に上部マージンを設定すると、マージンは（スペースが大きすぎる100pxの大きなギャップを継承する代わりに）モバイルではセクションのサイズの5％に比例して拡大縮小します。モバイルで）。 これは、さまざまなブラウザサイズで折り目の上のセクションを維持するための優れた手法です。

ユニットを組み合わせて使用​​することもできます。 上下の余白を特定のピクセル数に設定してから、左右の余白を特定のパーセンテージに設定して、高さを固定したい場合があります。

あなたがする必要があるのは、異なる入力を入力するときにあなたの番号で単位接尾辞を入力することです。

＃14歴史の状態

履歴状態は、Diviビルダー内で編集するためのタイムマシンのようなものです。 元に戻すとやり直しの右クリックオプションまたはホットキーを使用する代わりに、設定メニューから[編集履歴]リンクをクリックすると、編集のリストを簡単に表示できます。

この機能の優れている点は、履歴状態リスト内の各編集のタイムスタンプと簡単な説明が一覧表示されることです。

また、履歴状態を選択して過去の状態に戻す場合は、いつでもリストに戻って、行った最新の編集に進むことができます。 基本的に、Visual Builderを使用してこれらの変更をリアルタイムで確認しながら、以前の編集を前後に移動できます。

これらの履歴状態はバックボーンコレクション/ Javascriptオブジェクトとして保存され、データベースには保存されず、データベースが肥大化しないことに注意してください。 このため、ページの編集時にビルダーを終了すると、以前に作成した履歴状態を復元できなくなります。 したがって、設計が完成するまで、建物を開いたままにしておくようにしてください。 ページ/ビルダーをロードすると、履歴の状態が始まります。

＃15カスタムガター幅オプション（グリッドレイアウトに最適）

ガター幅は、各行の列間の水平方向のスペース（マージン）の量に対応します。

ガター幅のオプション値の範囲は1〜4です。

1は、列間のゼロマージンを表します。
2は、列間の3％の右マージンを表します。
3は、列間の5.5％の右マージンを表します。
4は、列間の8％の右マージンを表します。

これは、グリッドレイアウトの設計に間違いなく役立ちます。 グリッドレイアウトは、列構造とモジュールを使用して手動で作成できますが、ポートフォリオモジュールやブログモジュールなどの特定のモジュール内でグリッドレイアウトを自動的に割り当てることもできます。

たとえば、画像の間隔を空けずに画像を表示するために、全幅のグリッドレイアウトを作成するとします。 3つの列を持つ新しい行を作成し、列に画像を追加し、行を全幅にしてから、カスタムのガター幅を1にすることができます。

＃16右クリックオプション

機能の場所：DiviBuilder内から任意のセクションを右クリックするだけです。

ここではすべての右クリックオプションについて説明しているわけではありませんが、右クリックした場合にのみアクセスできる、見落としがちな便利なオプションをいくつか指摘したいと思います。

ロック

管理者は、あなただけが特定のアイテムをロックすることができます。 これは、編集者が変更したくないコンテンツを変更しないようにするための便利な方法です。 また、重要なセクションを誤って変更することから保護します。

折りたたんで名前を変更する

より長いWebページを作成するときは、これら2つのオプションを組み合わせて使用​​するのが大好きです。 あなたのことはわかりませんが、編集する必要のあるセクションを見つけるために上下にスクロールするのに本当にうんざりしています。 そのため、右クリックで折りたたむオプションを使用して、完成したWebページの大部分を要約します。 折りたたんだら、右クリックオプションを使用して、認識可能な管理ラベルのセクションの名前を変更します。

＃17トップティアのドロップダウンメニューリンクを無効にする

機能の場所：Divi→テーマオプション→ナビゲーション→一般設定

明確にするために、最上位のドロップダウンメニューリンクは、ナビゲーションメニューに表示されたままのメインの親リンクです。 サブティアリンクは、トップティアの親リンクにカーソルを合わせた後に表示されるリンクです。

最上位のドロップダウンメニューリンクを無効にすると、最上位の親リンクはクリックできないリンクではなくなります。 代わりに、サブリンクにラベルを付けて整理するクリックできないプレースホルダーとして機能できます。

たとえば、3つの主要なサービスを提供する会社のサイトを構築していて、これらのサービスのそれぞれに独自のページが必要であるとします。 通常の設定では、「サービス」と呼ばれる最上位のリンクがあり、3つのタイプのサービスがサブメニュー項目として含まれています。 一般的なサービスページへのリンクを処理する代わりに、最上位の「サービス」リンクを無効にして、単に組織のラベルとして使用することができます。

＃18代替のスクロールからアンカーへの方法

機能の場所：Divi→テーマオプション→ナビゲーション→一般設定

外部ページからのアンカーリンクを使用してCSSIDに直接リンクしようとしたことがある場合は、ページの最終的な休止位置が完全に正しくないことに気付いたかもしれません。 低すぎて一部のコンテンツが上部で途切れる場合があります。

外部ページからCSSIDにリンクした後の画面は次のようになります。 見えませんが、セクションのタイトルが途切れています。

代替のスクロールからアンカーへの方法を有効にすると、この問題が修正されます。 ユーザーを正しい場所に配置するだけでなく、CSS IDにスクロールする前に、ページの上部が最初に読み込まれます。 これは、混乱して、ページのセクションを表示していることに最初は気付かない可能性があるユーザーに役立ちます。

＃19モバイルでロゴを隠す

機能の場所：Divi→テーマカスタマイザー→モバイルスタイル→モバイルメニュー

モバイルでロゴを非表示にする必要がある場合、Diviはこれを非常に簡単にします。 しかし、それは見落としがちなオプションの1つです。 時間を節約し、追加のCSSをいじる心配はありません。

＃20プライマリメニューとセカンダリメニューのドロップダウンアニメーション

プライマリメニュー機能の場所：Divi→テーマカスタマイザ→ヘッダーとナビゲーション→プライマリメニューBArドロップダウンメニューアニメーション

セカンダリメニュー機能の場所：Divi→テーマカスタマイザ→ヘッダーとナビゲーション→セカンダリメニューバー–>ドロップダウンメニューアニメーション

ドロップダウンメニューのデフォルトのフェードアニメーションを選択する必要はありません。 ドロップダウンメニューのアニメーションセクションには、次の4つのオプションがあります。

1.フェード（デフォルト）

2.展開します

3.スライド

4.フリップ

このようなマイクロインタラクションは、メニューを際立たせることがあります。

＃21フッタークレジットを編集（または無効化）する

機能の場所：Divi→テーマカスタマイザー→フッター→ボトムバー→フッタークレジットの無効化/フッタークレジットの編集

しばらくDiviを使用している場合は、子テーマのfooter.phpファイルを編集して、フッターの下部バーを編集することに慣れている可能性があります。 これはもう必要ありません。

下部のバーを完全に無効にすることも、テキストボックス内にテキストまたはhtmlを入力して独自のフッタークレジットを挿入することもできます。

＃22Diviのデフォルトのカラーパレットの変更

機能の場所：Divi→テーマオプション→[一般]タブ→カラーピッカーデフォルトパレット

16進カラーコードをコピーして貼り付けるのをやめましょう。

カラーピッカーのデフォルトパレットは、DiviBuilder全体で使用されるカラーパレットです。

Webサイトの色のテーマがわかっている場合は、デフォルトの色を更新して、デザインに必要な色を含めます。 このオプションを使用すると、サイトを構築および編集するときにすべてのモジュールでこれらの色にアクセスできるため、長期的には多くの時間を節約できます。

＃23Diviのページ設定

場所：ビジュアルビルダーの下部にある設定メニューの歯車アイコン。

Divi 2.7以降、Divi Builder設定では、Divi Builder内で作業している特定のページのデフォルト設定を設定（およびテーマ設定をオーバーライド）できます。 ページ固有の設定を設定するこの機能は、標準から逸脱した特定のデザインを必要とするランディングページやその他のページを作成する場合に非常に便利な時間の節約になります。

テーマオプションのデフォルトパレットを上書きするページのカラーパレットを設定できます。

ページ固有のカスタムCSSを追加することもできます。 CSSは特定のページにのみ読み込まれるため、特定の投稿IDをターゲットにしたり、子テーマのstyle.cssファイルにアクセスしたりする必要はありません。

Divi Builder設定のユニークな機能の1つは、ページのDiviLeads分割テストシステムを有効にする機能です。 この強力なツールは、無視できないほど価値があります。 まだ使用していない場合は、私のアドバイスに従って、今日から最初のテストを開始してください。

＃24ブログ投稿に表示するメタ情報を選択する

このDivi機能は、Diviの開始以来存在していますが、見落とされがちです。 各ブログ投稿には、投稿タイトル（作成者、カテゴリ、日付、コメント）の下に表示される特定のメタ情報があります。 ただし、ブログの使用方法によっては、提供しているコンテンツの邪魔になるこの追加情報を望まない場合があります。 Diviを使用すると、この情報を簡単にカスタマイズできます。

単一投稿レイアウトのメタ情報を変更する

場所：Divi→テーマオプション→レイアウト（タブ）→単一投稿レイアウト

それぞれをクリックすることで、すべての単一のブログ投稿の4つのメタ情報をそれぞれ簡単に無効または有効にできます。 無効にされたメタ情報はフェードアウトとして表示されます。

ブログページ投稿の抜粋のメタ情報を変更する

場所：Divi→テーマオプション→レイアウト（タブ）→一般設定

ブログページの投稿の抜粋に表示されるメタ情報を変更するには、表示または非表示にする4つのメタアイテムをそれぞれクリックするだけです。

ブログページにDiviブログモジュールを使用している場合、上記の設定は機能しません。 ブログモジュールの一般設定で表示するメタ情報を変更する必要があります。

＃25コードモジュール

コードモジュールは、Diviの最も優れた隠し機能の1つです。 それはあなたに制限なしであなたのページにhtmlを追加する能力を与えます。 このモジュールでは、他のページに影響を与えることなく、特定のページにhtml要素を追加することもできます。 コードモジュールの機能は無限ですが、これを使用するいくつかの方法があります。

• アニメーションが必要なページのみに、Animate.cssなどの外部cssファイルをインポートします。
• ページに適用したものだけを使用するJavaScriptコードブロックまたはライブラリを追加します。
• 革命スライダーのようなサードパーティのプラグインを統合します。
• 全幅コードモジュールを使用して、よりインタラクティブなアンケートやお問い合わせフォームなどのタイプフォームを埋め込むことができます…
• フローティングアクションメニューを追加する
• スライドイントップバー広告を作成します。
• フローティングアクションボタンを追加します。

最後に

初めて何かを学ぶとき、それは消火栓から飲んでいるように感じることがあります、そしてあなたが間違いなく見逃し、見直す必要があるものがあります。 この投稿での私の目標は、見逃しがちで無視できないほど便利だと思うDivi機能のいくつかを確認することでした。

リストに入れるべきだと思う機能はありますか？ 共有してください、私たちは皆が恩恵を受けると確信しています。

コメントをお待ちしております。