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

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

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


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

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

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

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

Elementorテンプレートは2つの部分に分けることができます。最初に、たとえば既製のページを上から下にインポートする場合は、ページ全体(概要ページや連絡先ページなど)とそのすべてのコンテンツをインポートできます。 2番目のオプションは、デザインのセクションまたはブロックをインポートするだけの場合です。これは、たとえば、サービス、ヒーローのセクションのいずれかが気に入った場合、私たちに連絡するか、セクションを購読する場合に行うことができます.

テンプレートのすばらしい無料およびプレミアムコレクションがWebですぐに利用可能.

エンバト市場

エンバト市場

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

テンプレートモンスター

テンプレートモンスター

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

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

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

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

ホットキーを使用します

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

以下は、ウェブサイトの設計速度を大幅に向上させるショートカットのリストです。

行動

元に戻すCtrl / Cmd + Zページに加えられた変更を元に戻します
やり直すCtrl / Cmd + Shift + Zページに加えられた変更をやり直す
コピーするCtrl / Cmd + Cセクション、列、またはウィジェットをコピーする
ペーストCtrl / Cmd + Vセクション、列、またはウィジェットを貼り付けます
スタイルを貼り付けCtrl / Cmd + Shift + Vセクション、列、またはウィジェットのスタイルを貼り付けます
削除する削除する編集されているセクション/列/ウィジェットを削除する
複製Ctrl / Cmd + D編集されたセクション/列/ウィジェットを複製する
セーブCtrl / Cmd + Sページを変更履歴に保存する

移動

パネル/プレビューCtrl / Cmd + Pパネルとプレビュービューを切り替える
モバイル編集Ctrl / Cmd + Shift + Mデスクトップ、タブレット、モバイルのビューを切り替える
歴史Ctrl / Cmd + Shift + H履歴パネルに移動
ナビゲーターCtrl / Cmd + Iナビゲーターを開きます
テンプレートライブラリCtrl / Cmd + Shift + Lテンプレートライブラリモーダルを開きます
キーボードショートカットCtrl / Cmd + ?キーボードショートカットのヘルプウィンドウを開きます
終了するESC設定を開き、終了してダッシュボードにジャンプします

ページのカスタムCSS

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

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

この例を見てください:

カスタムコード

Elementor Finder検索バー

多くの場合、ページデザインで作業しているときに、他のページ、設定、販売ページなどにジャンプする必要があり、次の場合に時間がかかります。ページを保存>ダッシュボードに戻る>ページを開く>開きたいページを検索します。何度も何度もしなければならなかった場合、これは多くの時間とエネルギーを浪費する可能性があります.

幸い、Elementorには、設計プロセスを合理化および高速化するための組み込みソリューションがあります。そのような問題をすべて解決する代わりに、Elementor Finderを使用するだけで済みます。検索バーで検索すると、設定、テンプレート、ページ、またはテーマパーツに直接ジャンプできます。 Finderには、WordPressダッシュボードの任意の場所でCmd / Ctrl + Eキーをクリックしてアクセスできます。このビデオをチェックして、Finderで実行できるすべてのことを確認してください。.

ナビゲーターを使用する

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

ナビゲーターは、長いページまたは複雑な多層デザインのページ、およびZ-Indexを組み合わせた要素、マージンを除いた位置、絶対位置などに特に役立ちます。これにより、他の要素の背後に配置されている可能性のある要素ハンドルにアクセスできます。.

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

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

このビデオを見て、実際の動作を確認してください。

ナビゲーターには、ウィジェットの命名、ウィジェットの折りたたみと展開、パネルのフローティングまたはドッキング、ウィジェットの表示と非表示など、他のいくつかの機能もあります。あなたは彼らの完全なレビューを見ることができます ドキュメンテーション.

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

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

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

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

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

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

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

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

WunderWPプリセット

WunderWPを使用すると、Elementorで独自のウィジェットスタイルを簡単に保存して再利用することもできます。方法は簡単です。ウィジェットにスタイルを設定し、それをWunderWP Cloud(無料)に保存して、後で同様のウィジェットに使用します。これは、単純なウィジェットと複雑なウィジェットの両方で機能します。たとえば、これを使用して、異なる文字体裁の値を含む見出しウィジェットを保存したり、ドロップシャドウをカスタマイズした画像ウィジェットを保存したりできます。.

WunderWPカスタムスタイル

テンプレートについても同様です。作成したテンプレートの全体または一部をWunderWP Cloudに保存できます。テンプレートがそこにあるので、準備ができたら、簡単にページやWebサイトに挿入できます。このようにして、一度構築するだけで済み、多くの時間を節約できます。.

WunderWPカスタムテンプレート

または、WunderWPの既製のコンテンツテンプレートを利用することもできます。現在、連絡先、行動を促すフレーズ、ヘッダー、フッター、サービスなど、チーム、サービス、カウントダウンなど、50以上の既製のセクションテンプレートがあります。目的.

WunderWP既成テンプレート

まとめ

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map