Webサイトを構築するときにDiviクイックアクションを使用するための7つのヒント

Divi Quick Actionsは、設計ワークフローにとって貴重な資産になる可能性があります。 クイックアクションを使用すると、必要なものを簡単に見つけて、1つの便利な場所からDiviBuilderタスクを実行できます。 また、その名前が示すように、アクションをすばやく実行できるため、DiviでWebサイトを設計する効率が確実に向上します。

このチュートリアルでは、DiviでWebサイトをより効率的に構築するためのDiviクイックアクションを使用するための7つのヒントを紹介します。

クイックアクションの使用を検討する必要がある理由

クイックアクションの使用を検討する必要がある主な理由の1つは、より効率的なDiviユーザーにすることです。 1つのタスクを実行するために数回クリックすることを回避することで節約できる時間は、それだけの価値がないように思われるかもしれません。 しかし、Diviサイトを構築するプロセス全体でこれらの節約を組み合わせると、ワークフローの時間を大幅に短縮できます。 さらに、必要なものを1か所で見つけることができると非常に便利です。 Diviの専門家でさえ、何かがどこにあるかを忘れてしまい、更新が必要な特定のオプションや設定を気が散るような検索でワークフローを中断する必要があります。 しかし、迅速なアクションにより、ページを離れることなく、必要なものをその場で入力できるという一定の快適さがあります。

Divi Quick Actionsは、便利な最適化お​​よび設計ツールとしてDiviで利用できる機能です。 しかし、他のツールと同様に、それに慣れるには少し時間がかかります。 もちろん、使用する必要はありません。 迅速な行動なしにウェブサイトを簡単に構築できないわけではありません。 あなたは確かにできます。 ただし、少し時間を取ってクイックアクションがどのように機能するかを調べると、ワークフローを簡素化し、生産性を高めるためのいくつかの貴重な方法に目を向けることができます。

Diviクイックアクションの使用方法

クイックアクションシステムを使用するには、ビルダーでShift + Spaceを押すだけです。 または、ページ下部のページ設定バーにある新しい検索アイコンをクリックすることもできます。

それでは、これらのヒントに取り掛かりましょう。

ヒント1：「移動」コマンドのDivi要素にラベルを付ける

管理ラベルは常にDiviの不可欠な部分です。 Visual Builderの時代以前は、管理者はDivi Builderを使用するときに、これらのラベルを使用してDivi要素を識別していました。 それでも、フロントエンドで（視覚的に）構築する機能があっても、管理ラベルは依然として価値があります。 以前と同様に、管理ラベルは、ワイヤーフレームビューで要素を簡単に識別できるようにします（またはクライアント）。 デスクトップビューからワイヤーフレームビューに切り替えるときに、セクションがどこにあるかを推測する必要はありません。 しかし、DiviElementsにラベルを付けるもう1つの理由があります。 Diviのクイックアクションメニューには、ページ上の任意の要素をすばやく検索してジャンプできる「移動」コマンドがあります。 また、要素にラベルを付けている場合は、「移動」したい要素を簡単に識別できます。

たとえば、ページのセクションにビデオがある場合、ワイヤーフレームビューから直接インラインでラベル「video」を入力するか、設定モーダルに管理ラベルを入力することで、そのセクションに「ビデオ」のラベルを簡単に付けることができます。 。

ラベルを配置したら、クイックアクションメニューを展開し、「ビデオに移動」と入力します。 Diviは自動的にそのセクションにジャンプし、設定モーダルを開きます。

ワークフローに管理者ラベルをすでに組み込んでいる可能性があります。 もしそうなら、今あなたはフラッシュでそのラベル付けされた要素を見つける簡単な方法を持っています。

これは、長いページコンテンツがある場合に特に便利です。

ヒント2：挿入コマンドを使用して新しいDivi要素を挿入する

これはおそらく、ワークフローに最も直感的で簡単に実装できるクイックアクションの1つです。 [挿入]コマンドを使用するには、クイックアクションメニューを展開し、「挿入」と入力してから、挿入する要素を入力するだけです。 従来の方法ではモジュールを検索する必要があるため、これは新しいモジュールを挿入する場合に特に役立ちます。 たとえば、テキストモジュールを追加する場合、従来は灰色のプラスアイコンをクリックし、モジュールを検索して（スクロールするか、検索バーを使用して）、モジュールを選択します。

クイックアクションでは、「テキストの挿入」と入力してEnterキーを押すだけです。 次に、直感的なホバー表示を使用して、ページ上の任意の場所にモジュールを配置できます。

ボーナスのヒント

実際、クイックアクションメニューを展開すると、挿入コマンドがリストの最初に表示されるため、技術的には、宣伝文句モジュールを挿入するために必要なのは、クイックアクションメニューを展開し、Enterキーを押して（これにより挿​​入コマンドが選択されます）、次に「宣伝文」と入力して、もう一度Enterキーを押します。

別のボーナスのヒント：検索設定の最適化

「挿入」コマンドをどんどん使用していることに気付いた場合は、クイックアクション検索設定を最適化して常に「挿入」コマンドで検索を開始することで、クイックアクション検索をさらに高速化できます。

この方法で行う必要があるのは、クイックアクションメニューを展開して「テキスト」と入力することだけです。これは、[挿入]コマンドが既に存在するためです。

ヒント3：保存した要素をDiviライブラリから挿入する

クイックアクションの[コマンドの挿入]を使用すると、保存した要素をDiviライブラリから追加できます。 これには、保存されたセクション、行、モジュール、またはレイアウトが含まれます。

「保存を挿入」と入力してから、追加する要素のタイプ（セクション、行、モジュール、またはレイアウト）を入力します。

これは便利な機能ですが、保存されている要素が多数ある場合は、検索を高速化するために、より分類された命名システムを検討する必要があります。

分類された名前でライブラリアイテムを整理する

Diviライブラリに多数の保存済みアイテムがある場合、それらをページに挿入すると（クイックアクションを使用した場合でも）、必要以上に時間がかかる可能性があります。 結局のところ、特定のモジュール、行、またはセクションの正確な名前を簡単に忘れることができます。 クイックアクションを使用して保存した要素をより迅速に見つける1つの方法は、ライブラリに保存するときに、各要素に分類された名前を意図的に付けることです。 これは、保存した要素にカテゴリを割り当てることとは異なります。 たとえば、ホームページの要素をDiviライブラリに保存する場合、名前の先頭に「ホームページ」を挿入することで、各要素の名前を分類できます。 したがって、ホームページの機能を紹介する宣伝文のセクションを保存する場合、ライブラリに保存するときにそのセクションに次の名前を付けます。

「ホームページ–機能セクション」

機能の宣伝文句の行を保存したい場合は、次の名前を付けます。

「ホームページ–機能行」

機能を紹介する宣伝文モジュールを保存したい場合は、次の名前を付けます。

「ホームページ–ティータイムの宣伝文句」

このネーミングシステムを使用すると、クイックアクションメニューの分類されたリストで、探している保存済み要素を簡単に見つけることができます。 以前にホームページに作成した機能セクションを追加するとします。次の3つの方法のいずれかを実行できます。

1）クイックアクションメニューを展開して、「ホームページ」と入力できます。 これにより、名前の先頭に「ホームページ」が付いた保存済み要素のリストが表示されます。 そこで、分類された「ホームページ」名で探している特定のセクションを識別できます。

2）「保存されたセクションを挿入」または単に「保存されたセクション」と入力すると、保存されたすべてのセクションのリストが表示されます。 そこで、「ホームページ」で分類されたものを識別できます。

3）セクションの名前を覚えている場合は、それを入力して、さらに時間を節約できます。

ヒント4：OpenCommandを使用してDiviBuilderでページを開く

クイックアクションの[開く]コマンドは、Webサイトで作成したページ、投稿、またはプロジェクトを開くのに役立ちます。 たとえば、クイックアクションメニューで、検索コマンド「ページを開く」を知っていると、Webサイト上の既存のすべてのページのリストを表示するのに役立ちます。

クイックアクションメニューからページを開くことの優れている点は、Diviビルダーが既に展開されている状態で各ページが新しいタブで開かれることです。 これは、Webデザインモードの場合に便利です。これにより、創造性や思考の緊張を妨げる可能性のあるいくつかの手順をスキップできるためです。

ページの名前がわかっている場合は、「open」に続けてページの名前を入力すると、ページをすぐに表示できます。 たとえば、「About」というタイトルのページがあるとします。 ページを開くには、「openabout」と入力するだけです。 ページがリストの一番上にポップアップするはずです。 次に、Enterをクリックするだけです。 Divi Builderがすでにアクティブで、編集の準備ができている状態で、そのAboutページに自動的にリダイレクトされます。

ヒント5：キーボードショートカットへの足がかりとしてクイックアクションを使用する

キーボードショートカットの学習に取り組んでいる人にとって、クイックアクションは役立つ教師になる可能性があります。 それに直面しましょう。私たちのほとんどは、すべてのキーボードショートカットを一度に覚えて、ワークフローに強制するときに苦労することはありません。 ただし、クイックアクションオプションの横にあるラベルの付いたキーボードショートカットを認識するのに少し時間がかかると、次にその特定のアクションについて考えるときにそれらを試してみる傾向が強くなると思います。 これがどのように機能するかの例をいくつか示します。

「ページ設定」から「O」へ

クイックアクションと一緒にクルージングしていて、ページ設定にアクセスするために「ページ設定」と頻繁に入力していることに気付いたとします（あなたはロックスターであり、用語を知っているため）。 次に、オプションの右端にラベルが付けられた文字「O」に気付くことがあります。

次に、電球が消え、1つのキーでページ設定にアクセスできます。 二度と古い方法に戻ることはできません。

「wireframe」から「shift-w」へ

クイックアクションメニューに「ワイヤーフレームビュー」と入力するだけで、ワイヤーフレームビューを展開できます。 ただし、リストのオプションの右側にラベルが付いているキーボードショートカット「shft + w」に気付くかもしれません。

この小さなショートキーは、ワイヤーフレームモードとデスクトップビューモードをオンザフライで切り替えるのに最適です。

「？」を忘れないでください

クイックアクションメニューのショートカットのリストにアクセスするには、ビルダーコマンドを使用できます。 「ビルダーショートカット」と入力するだけです。 または、「キーボードショートカット」または単に「ショートカット」と入力することもできます。 ただし、キーボードショートカットのラベル「？」を見落とさないでください。 右の方へ。

「？」と入力するだけで、キーボードショートカットの完全なリストを表示できます。 Divi Builderで、[キーボードショートカット]タブをクリックします。

ヒント6：ページオプションとページ設定をその場ですばやく更新する

DiviでWebサイトを構築しているときに、ページ設定、テーマ設定、およびテーマオプションを更新する必要が生じることがよくあります。 これが役立ついくつかの方法があります。

ページ作成フロー

そこであなたはあなたのウェブサイトの3番目のページを作成していて、あなたが毎回ページ作成フローポップアップに煩わされたくないことに気づきます。 クイックアクションメニューを展開し、「フロー」と入力します。 次に、[ページ作成フロー]オプションを選択して、そのオプションが見つかったページ設定モーダルを開きます。

次に、それを「最初からビルド」に変更して、Diviビルダーを新しいページにデプロイするたびにすぐにビルドを開始できるようにすることができます。

新しいモジュールへのプレースホルダーコンテンツ

Diviモジュールの使用に慣れると、プレースホルダーコンテンツが不要になる場合があります。 これにより、独自のコンテンツを追加する前にプレースホルダーコンテンツを削除する必要がなくなります。 クイックアクションメニューを展開し、「ビルダー設定」と入力して、そのオプションを無効にします。

カラーパレットを更新する

ウェブサイトを構築する際に、カラーコードを検索してセクション、行、モジュールにコピーして貼り付けるのに、まだ貴重な時間を無駄にしている方も多いと思います。 あなたはする必要はありません！ クイックアクションメニューを展開して「色」と入力し、「ページのカラーパレット設定」オプションを選択するだけです。

これにより、ページのカラーパレットに直接移動します。 そこで、使用している新しい色をパレットに追加できます。これは、ページを作成するときに、すべてのDivi要素設定モーダルのすべてのカラーパレットで使用できます。 これで、何度も何度も検索して検索する代わりに、パレットから色をクリックするだけで済みます。

ページへのカスタムCSSの追加

カスタムCSSをページに追加する場合、通常は数回クリックしてページ設定を開き、[詳細設定]タブをクリックします（最初にどこにあるかを覚えている場合です）。 クイックアクションを使用すると、クイックアクションメニューを展開して「css」と入力し、Enterキーを押して「ページカスタムCSS設定」を選択するだけです。

そのように、マウスを1回クリックすることなく、必要な場所にいることができます。

ヒント7：ライフラインを使用する

私は、道順を尋ねたり、指示を読んだりしないという古典的な男性の固定観念に苦しんでいたことを最初に認めます。 しかし、私は私のレッスンを学びました。 何度も失敗した後、私が引き受けたプロジェクト（たとえば、娘のためにおもちゃのキッチンセットを作るなど）の成功は、取扱説明書にどれだけ早く到達したかに大きく依存していることに気付きました。 同じことがDiviでウェブサイトを構築する場合にも当てはまります。 迅速なアクションにより、ヘルプのドキュメントとサポートは文字通り数回のキーストロークで実行できます。

ビデオモジュールの概要が必要な場合は、クイックアクションメニューを展開して、「ヘルプビデオ」または「ビデオモジュール」と入力します。 そこに、ビデオチュートリアルをポップアップするためのリンクまたはドキュメント記事への外部リンクが表示されます。

カスタムサポートが必要な特定の問題がある場合は、「support」と入力して、Elegant ThemesSupportページへの外部リンクを表示します。

最終的な考え

Divi Quick Actionsをワークフローに組み込むことに躊躇している場合は、これらのいくつかのヒントが、自分で試してみることができるように、棚から離れるのに役立つことを願っています。 これらのヒントの1つまたは2つでも、長期的には貴重な時間を節約できます。

私はあなたが私たちと共有しなければならないかもしれないいくつかのヒントを知りたいです。 以下のコメントであなたからの連絡を楽しみにしています。

乾杯！