Elementor を使用して設計プロセスをスピードアップするためのヒント

Elementor が今日の WordPress コミュニティで最高のページビルダーの 1 つであることは周知の事実です。そして、それはもはや単なるページビルダーではありません。 Elementor は非常に進化しており、無料の基本的な WordPress テーマでも、コードを 1 行も記述することなく、完全に機能する Web サイトをデザインできます。

Elementor は多くのオプションとカスタマイズ機能を提供しますが、Web サイトのデザインプロセスに大きな影響を与える可能性があるプラグインの細かい詳細や部分を見逃してしまうことがよくあります。

Elementor を使用した Web ページのデザインはすでに速くて簡単ですが、デザインプロセスをスピードアップしたい場合は、ここが最適な場所です。この記事では、Elementor とサードパーティツールのエディターを最大限に活用して、デザインプロセスをスピードアップする方法を学びます。

既製のテンプレートから始める

事前に作成されたテンプレートを使用すると、プロジェクトの開発をスピードアップできます。新しいページを最初からデザインするのは時間がかかり、ページのレイアウトやスタイルを常に調整していると、多くの場合、その時間を無駄にしてしまいます。テンプレートが役立つのはまさにこの場合です。 Elementor のテンプレートライブラリは、デザインプロセスをスピードアップするための優れたリソースです。既製のテンプレートを使用しない場合でも、テンプレートライブラリをインスピレーションとしていつでも使用できます。テンプレートは、ワンクリックで簡単にページに直接インポートできます。

Elementor テンプレートは 2 つの部分に分割できます。まず、たとえば、事前に作成されたページを上から下までインポートする場合、すべてのコンテンツを含むページ全体 (About ページや Contact ページなど) をインポートできます。 2 番目のオプションは、デザインのセクションまたはブロックだけをインポートする場合です。たとえば、サービス、ヒーロー、お問い合わせ、購読セクションのいずれかのセクションが気に入った場合は、これを行うことができます。

素晴らしい無料およびプレミアムのテンプレートコレクションが Web 上で簡単に入手できます。

エンバトマーケット

Envato マーケットは、Elementor テンプレートだけでなく、WordPress テーマとプラグインでもおそらく最も人気のあるマーケットプレイスです。

テンプレートモンスター

TemplateMonster も高品質のテンプレートアセットを提供するプロバイダーで、無料のテンプレートもいくつかあります。

Elementor テンプレートライブラリ

Elementor テンプレートライブラリ – Elementor のネイティブテンプレートウェアハウスであり、新しい無料およびプレミアムテンプレートが頻繁に表示されます。

ホットキーを使用します

マウスだけで Elementor を操作している場合は、やめてください。 10 分間かけてショートコードを学習すると、時間を大幅に節約し、Web サイトのデザインプロセスをスピードアップできます。コピーアンドペーストのような単純なショートカットとは別に、より高度なカスタムショートカットも使用できます。これらは、特にパネルとプレビューモードの間を移動する場合、またはモバイル編集に切り替える場合に非常に便利です。

以下は、Web サイトのデザイン速度を大幅に向上させるショートカットのリストです。

<i>アクション

Undo	Ctrl / Cmd + Z	Undo any change made on the page
Redo	Ctrl / Cmd + Shift + Z	Redo any change made on the page
Copy	Ctrl / Cmd + C	Copy a section, column or widget
Paste	Ctrl / Cmd + V	Paste a section, column or widget
Paste Style	Ctrl / Cmd + Shift + V	Paste a section, column or widget’s Style
Delete	Delete	Delete a section / column / widget that is edited
Duplicate	Ctrl / Cmd + D	Duplicate a section / column / widget that is edited
Save	Ctrl / Cmd + S	Save your page to the revision history

<i>移動

Panel / Preview	Ctrl / Cmd + P	Switch between the panel and preview view
Mobile Editing	Ctrl / Cmd + Shift + M	Switch between desktop, tablet and mobile views
History	Ctrl / Cmd + Shift + H	Go to the history panel
Navigator	Ctrl / Cmd + I	Opens the navigator
Template Library	Ctrl / Cmd + Shift + L	Opens up our template library modal
Keyboard Shortcuts	Ctrl / Cmd + ?	Opens up the Keyboard Shortcuts Help window
Quit	ESC	Opens up Settings and jumps to Exit to Dashboard

ページのカスタムCSS

すべてのページにカスタム CSS を使用できることをご存知ですか?はい、ただし、この機能はElementorのProバージョンにのみ含まれていることに注意してください。この問題の回避策として、各ページにカスタム CSS を含める方法を紹介します。ページレベルで小さなカスタマイズを追加するためだけに Pro バージョンが必要な場合は、このトリックを使用すると費用を節約できます。

これを行うには、HTML ウィジェットとその内部のコード部分を利用するだけです。

<style>
/*Your custom CSS code here*/
.elementor p {
color: red; 
font-size: 25px; 
text-decoration: underline;
line-height: 40px;
}
</style>

この例を見てください。

Elementor Finder 検索バー

ページのデザインに取り組んでいるとき、他のページ、設定、販売ページなどにジャンプしたいことがよくあります。ページを保存し、ダッシュボードに戻り、ページを開くと、時間がかかることがあります。 > 開きたいページを検索します。これを何度も繰り返す必要がある場合、多くの時間とエネルギーを無駄にする可能性があります。

幸いなことに、Elementor には設計プロセスを合理化し、スピードアップするためのソリューションが組み込まれています。そんな面倒なことをしなくても、Elementor Finder を使用するだけで済みます。検索バーで検索すると、任意の設定、テンプレート、ページ、またはテーマパーツに直接ジャンプできます。 Finder には、WordPress ダッシュボードの任意の場所で Cmd/Ctrl + E キーをクリックしてアクセスできます。 Finder でできることをすべて確認するには、このビデオをご覧ください。

ナビゲーターを使用する

ナビゲーターは、ページビルダーのすべての要素に簡単にアクセスできるナビゲーションツリーウィンドウです。この小さなウィンドウを使用すると、要素間を移動したり、ウィジェットを簡単にドラッグアンドドロップしたりできます。

ナビゲータは、長いページや複雑な多層デザインのページ、Z インデックス、マージンを差し引いた要素、絶対位置などを組み合わせた要素に特に役立ちます。ナビゲータを使用すると、他の要素の背後に配置されている要素ハンドルにアクセスできます。

Navigator には、次の 3 つの簡単な方法のいずれかでアクセスできます。

任意の要素を右クリックし、「ナビゲータ」をクリックします。これにより、ナビゲーションツリー内の特定の要素に自動的にリダイレクトされます。
パネルのフッターにある要素ボタンをクリックします。
Cmd/Ctrl + I キーボードショートカットを使用します。

実際の動作を確認するには、このビデオをご覧ください。

ナビゲーターには、ウィジェットの名前付け、ウィジェットの折りたたみと展開、パネルのフローティングまたはドッキング、ウィジェットの表示または非表示など、他の機能もあります。

カラーパレットを定義する

通常、Web サイトをデザインするときは、デザイナーが作成したデザインパターンに従います。このパターンには通常、サイト全体で繰り返される色の組み合わせが含まれています。これらは変わらないべきブランドカラーです。つまり、ページに新しいウィジェットを追加するたびに、カラーコードをコピーして貼り付けるか、ウィジェット設定で適用するためにカラーコードを覚えておく必要があります。これを行うには時間がかかる場合があります。幸いなことに、Elementor は私たちに解決策を提供してくれました。

カラーピッカー設定でブランドカラーを定義し、ウィジェットスタイルのカラーオプションにアクセスするたびにそのカラーを再利用できます。プリセットパレットを選択するか、独自のカスタムカラーを定義するだけで、デザインの時間を節約できます。

このビデオを見てください。

既製で再利用可能なウィジェットのスタイルとテンプレート

Elementor は最高のページビルダーの 1 つですが、デフォルトのボタンや見苦しいボタンについて考えたことはありますか?タブ？メニュー？それとも他のウィジェットでしょうか？これらのデフォルトのウィジェットは、数年前にデザインされたように見えます。あるいは、プロジェクト A でスタイル設定したウィジェットをプロジェクト B で再利用したいと考えたのではないでしょうか?

現在、Elementor を使用してウィジェットスタイルを保存し、将来のプロジェクトで再利用することはできません。幸いなことに、無料の WunderWP プラグインは、この問題を解決するいくつかの方法を提供します。

まず、WunderWP には自由に使えるプリセットウィジェットスタイルが多数含まれています。見出し、ギャラリー、ボタン、仕切り、カルーセル、フォーム、価格表などの既製のスタイルをワンクリックで利用できます。 Elementor ウィジェットをページにドラッグし、既製の WunderWP ウィジェットスタイルを選択して、コンテンツの追加を開始するだけです。

WunderWP を使用すると、Elementor で独自のウィジェットスタイルを簡単に保存して再利用することもできます。やり方は簡単です。ウィジェットをスタイル化し、WunderWP Cloud (無料です!) に保存し、後で同様のウィジェットに使用します。これは、単純なウィジェットと複雑なウィジェットの両方で機能します。たとえば、これを使用して、さまざまなタイポグラフィ値を含む見出しウィジェットや、カスタマイズされたドロップシャドウを持つ画像ウィジェットを保存できます。

テンプレートについても同様です。作成したテンプレートの全体または一部を WunderWP Cloud に保存できます。テンプレートが用意されているので、準備ができたら、ページまたは Web サイトに簡単に挿入できます。こうすることで、一度ビルドするだけで済み、時間を大幅に節約できます。

または、WunderWP の既製のコンテンツテンプレートを利用することもできます。現時点では、連絡先、行動喚起、ヘッダー、フッター、サービス、概要、チーム、サービス、カウントダウンなど、さまざまな用途に対応する 50 を超える既製のセクションテンプレートがあります。目的。

まとめ

現時点では、何の疑いもなく、Elementor は最高の WordPress ページビルダーの 1 つです。ほぼ毎日、設計プロセスを合理化し、スピードアップし、プロジェクトの納期を短縮するための新しいツールと機能が追加されています。

どのヒントが最も役立つと思いますか?また、これまで知らなかったヒントはどれですか?おそらくここで言及されていないことも知っていますか？ぜひ他の人と共有してください。