Elementorの新しいメジャーアップデートがリリースされました。 バージョン2.xからバージョン3.0に移行しました。 この新しいバージョンには、WordPressとElementorを使用してWebサイトを作成する新しい方法が付属しています。 これらの新機能の変換を試みます。
Elementor 3.0の主な追加機能は何ですか？
Elementor 3.0には、デザインシステム機能、新しいテーマビルダー、および大幅なパフォーマンスの向上という3つの主要な追加機能が付属しています。
設計システムの特徴
大企業がどのプラットフォームを使用していても、それをうまく実行するためにどのように機能するのか疑問に思ったことはありませんか？ 彼らが作成するものはすべて一貫して見え、同じデザインを持っています。 それは「デザインシステム」という名前のおかげで可能です。 UnxDesign.ccによると、デザインシステムは次のとおりです。
チームが製品を設計、実現、および開発することを可能にするすべての要素をグループ化する唯一の正しい情報源。 したがって、設計システムは成果物ではなく、成果物のセットです。 製品、ツール、新技術とともに絶えず進化していきます。
UX Collective
設計システムを実装し、チーム全体を1つの設計言語で一貫性のある状態に保ち、チームの作業方法に革命をもたらし、ワークフローを高速化します。
素晴らしいウェブサイトを作成します
最高の無料ページビルダーElementor を使用
今すぐ始めるElementor3.0の設計システムの機能は次のとおりです。
- グローバルカラー
- 新しいサイト設定パネル
- グローバルフォント
これがあなたがより良いプロのウェブサイトを構築するのにどのように役立つかを深く見てみましょう。
グローバルカラー
Elementor 3.0は、サイトの色を操作する新しい方法を追加します。 その新しいメソッドは、 GlobalColorsという名前です。
グローバルカラーを使用すると、1つの場所から色を変更し、使用するすべての場所でその色を更新できます。
Webサイトの基本的なグローバルカラーの選択を開始します。 次に、Elementorの任意のカラースタイルに移動し、4色のいずれかになるように定義します。 グローバルリストには、カスタムカラーをいくつでも追加できることに注意してください。
これは、CSSの変数が入って来た今だ。グローバルカラーにヘッドバック、および色の変更1。 サイト全体の配色は、新しいグローバルカラーに応じて変わります。 これほど簡単なことを経験したことがありますか？
また、コントロール入力内から別のグローバルカラーをデザインしたり、新しいグローバルカラーを作成したりすることもできます。これらはすべて、コントロール入力内の同じカラーピッカーを使用します。
サイト設定
Webサイトの最初のデザイン設定を作成するには、多くの時間がかかります。 テーマコード、カスタマイザー、functions.phpの間を行き来する必要があります。 それはあなたの頭痛を正当化するのに十分な理由です。
新しいサイト設定には、さまざまな構成ツールが表示されます。 そうすれば、これらすべてのタスクを1か所から実行し続けることができます。
開始するには、Elementorで編集するページ内の左側のパネルで、左上のアイコンをクリックします。 これにより、[グローバル設定]パネルに切り替えることができます。
そのグローバル設定パネル内に次のものがあります。
- レイアウト：デフォルトのコンテンツ幅やデフォルトのページレイアウトなど、Elementorのデフォルトのレイアウト設定を構成します。
- サイトID：ロゴ、タイトル、タグライン、さらにはファビコンなど、クロスサイトIDをカスタマイズします。
- テーマスタイル：タイポグラフィ、ボタン、フォームフィールドのElementor（通常はテーマによって設定される）に関連しないHTML要素をカスタマイズします。
- ライトボックス：Elementorライトボックスのデフォルトのスタイルを定義します
- グローバルな色とフォント：Webサイトに適用されるグローバルな色とフォントを構成できます。
グローバルフォント
色とタイポグラフィは、あらゆるWebサイトの構成要素の一部です。 グローバルカラー機能と同じロジックを使用して、これはサイトのテキストスタイルを操作する新しい方法です。
グローバルフォントを使用すると、すべてのタイポグラフィ設定をグローバルに適用できます。 フォントファミリ、フォントサイズとスケール、フォントの太さ、フォント変換、フォントスタイル、フォントの装飾、線の高さ、文字の間隔、さらには応答設定など、すべてのサイトのタイポグラフィ設定をグローバルに設定できるようになりました。 また、これらの設定をテキストを含むすべてのウィジェットに設定し、独自のグローバルフォントをカスタマイズすることもできます。
タイポグラフィが正しく設計されていれば、これらの変更をグローバルに適用できます。
サイト全体が1か所で視覚化および整理されます
有名なテーマビルダーは、ウェブサイトのデザインの全体像を把握するという点で業界のリーダーになりましたが、この新しいUIはさらに進んでいます。 新しいテーマビルダーは、非常に直感的な方法でWebサイト全体の概要を提供するようになりました。
そのテーマビルダーはサイトの概要を提供します。これには、ヘッダー、フッター、グローバルページテンプレート、グローバル投稿テンプレートなど、サイトのすべての部分が含まれます。 サイトのすべての部分をプレビューできるため、完全なWebサイトを設計する作業がはるかに簡単になります。
パフォーマンスの向上
アプリケーションが成長する一方で、開発者がパフォーマンスに注意を払う必要があることは明らかです。 Elementor 3.0で行われた更新は、優れたコードインフラストラクチャを確保するために行われ、その結果、パフォーマンスが大幅に向上しました。
多くのDOM要素のパージが行われているため、Elementorのレンダリングが高速になります。 これにより、ページ速度のランキングとWebサイトのユーザーの全体的なエクスペリエンスが確実に向上するはずです。
具体的には、ページ速度の点で何が変わったのでしょうか。
Elementor 3.0は、サーバー側のレンダリングプロセスと、Elementorが動的CSS値をレンダリングする方法を大幅に改善します。 これにより、Webサイト全体に動的な要素と値を組み込むことができます。 たとえば、サイト投稿のテンプレートを作成し、各投稿の注目画像を投稿タイトルの背景として表示することを決定できます。
バックグラウンドで、Elementorはブラウザに送信する投稿を準備するときに、動的な値について投稿を解析して取得し、CSS値が含まれている場合は、そのCSSを出力します。
Elementor 3.0では、このプロセスに費やされる時間が大幅に短縮されました。 投稿ごとに保存される動的な値に感謝します。 そのリストが保存されると、誰かが投稿にアクセスするたびに、Elementorはこのリストに直接移動するため、プロセスが高速になります。 この最適化の影響を受ける動的な値には、背景画像、色などが含まれます。 この改善により、サーバーの負荷が大幅に削減されます。
Elementor3.0アップデートの概要
上で述べたように、このバージョンには、あなたの日常の仕事に本当に影響を与えるはずの興味深いグッズが付属しています。 私たちは経験してきました：
より一貫性のある効率的な作業を支援する設計システム機能。
新しいテーマビルダーは、Webサイトのすべての部分を1か所から管理するための強力なビジュアルツールです。
ユーザーエクスペリエンスを向上させるためのパフォーマンスの向上。
Elementor 3.0は、プロのWebクリエーターとして確実に最先端を行くでしょう。 まだの場合は、今すぐElementorProにアップグレードしてください。 ElementorがWordPressで最高の無料のページビルダーである理由を説明する投稿を読むことも検討する必要があります。
