エディターV4アルファの紹介：Elementorウェブサイト構築の未来

エディターV4 アルファは、以下のオプションから始めることができる。 カスケーディングスタイルシート 再利用可能なクラスとステート、パフォーマンスの向上、統一されたスタイル・システム、完全なレスポンシブ・スタイル・コントロールを提供するコア・フレームワークで、ウェブサイト構築の効率と一貫性を向上させるように設計されています。

ウェブデザインが年々進化するにつれ、ウェブサイト制作者が直面する課題も大きくなり、多くの人が同じような問題に直面しています：

• ウェブサイト内の複数の要素を一貫してスタイリングする際の問題
• 複数の場所で同じスタイルを更新する際の作業の重複
• カスタムCSSの使用や要素の非表示を強制することで、応答性を制限する。
• 複雑なレイアウトによるパフォーマンス低下
• ウィジェット間のインターフェイスの違い

エディターV4は、CSSを中心とした強力なフレームワークにより、1行もコードを書くことなくプロ級の機能を提供し、これらの問題に対処します。

エディターV4の最初のアルファバージョンは、現在オプショナル・エクスペリエンスとしてご利用いただけます。これらの新機能をテストし、フィードバックを提供し、私たちがV4エクスペリエンスの拡張と改良を続ける間、使い慣れたV3の機能を使い続けることができます。

エディターV4アルファを使い始めるには、次のようにアップデートしてください。 エレメンタ 3.29の場合は、Elementor > Settings > Editor V4に移動し、アクティベーション手順に従ってください。これは初期のアルファバージョンであり、ステージングまたはテストサイトでのみ使用することに注意してください。

一度スタイリングすれば、どこにでも適用できる。

同じデザインのボタンがたくさんあるウェブサイトを作ることを想像してみてください。以前は、ボタンを1つ1つスタイリングするか、別の方法に頼る必要がありました。しかし、Editor V4のクラスシステムでは、以下のことが可能になりました：

• 複数の要素に適用できる再利用可能なスタイル・コレクションを作成する。
• ある場所でスタイルを更新すると、そのスタイルを使用しているすべての場所に変更が即座に反映されます。
• サイト全体のデザインの一貫性を保つ

クラス制度では、2種類のクラスを導入している：

• ローカルクラス 各要素は、スタイルの優先順位が最も高く、削除できない一意のローカル・クラス（ピンクで表示）を自動的に取得します。要素固有のスタイルが他のクラスによってオーバーライドされないようにします。
• グローバルクラス これらのスタイルを共有する必要がある要素に適用するために、独自のグローバル・クラス（緑色で表示）を作成し、名前を付けることができます。グローバルクラスを更新すると、それを使用するすべての要素が同時に更新されます。クラス自体を削除することなく、要素からグローバルクラスを削除することができるので、デザイン時にさまざまなデザインを簡単に試すことができます。

コードを書かずにインタラクティブなスタイルを定義する - Statesを使う

ステート（擬似クラス）を使用して、サイトをよりインタラクティブにしましょう。ホバー、フォーカス、アクティベートなどのステートを作成することで、ユーザーが要素とインタラクトしたときに要素がどのように見えるかを定義できます。こうすることで、コードを書くことなく、魅力的なインタラクティブ体験をデザインすることができます。

状態を追加するには、状態を適用したいクラスの横にある3つの点をクリックし、Hover、Active、またはFocusの状態を選択するだけです。定義した変更は、選択したステートにのみ適用されます。1つのステートへの変更は他のステートに影響しないので、インタラクティブ要素を正確にコントロールすることができます。何よりも、グローバルクラスを持つステートを使用することで、サイト全体で一貫したインタラクション体験を適用することができます。

クラスマネージャーでクラスを管理・運営する

クラス・マネージャーは、ウェブサイトのスタイルを一貫したものに保つためのコマンド・センターを提供します：

• 一元化された場所からクラスの削除や名前の変更が可能
• ドラッグ＆ドロップでクラスの優先順位と階層を変更
• すべてのグローバルクラスの組織ビューを見る
• クラス・インジケータを使用してスタイルのカスケードを理解する

クラスとステートを扱うとき、色分けされたインジケータはスタイルのカスケードを理解するのに役立ちます。それぞれの色は異なる機能を持っています：

• ピンクのドット：地元の教室のスタイル
• 緑の点：グローバルクラスのスタイル
• オレンジの点：注意すべき相反するスタイル
• 灰色の点：他のクラスから継承されたスタイル

これらの視覚的な合図は、作業中に即座にフィードバックを提供し、スタイルがどこから来て、どのように相互作用するかを理解するのに役立つ。

ワークフローを簡素化する統一されたスタイルタブ

エディターV4では、各ウィジェットが個別のスタイルパネルを持っていたV3とは異なり、すべての要素に統一されたスタイルタブが導入されています。

ユニフォーム・スタイル」タブの主な利点：

• コンテンツと機能の設定は「全般」タブのまま
• すべてのビジュアルスタイルオプションはスタイルタブにあります。
• 一度システムを学べば、どこでも応用できる
• すべての要素で、強力なスタイリング機能への一貫したアクセス

ユニフォーム・スタイル・タブには、完全なコントロールを提供する包括的なセクションがあります：

• オープニングディスプレイの動作と構造を定義する
• スペーシング：マージンとパディングのリンクコントロールを設定します。
• サイズ：幅と高さを定義し、制約を設定する
• ポジショニング：ポジショニング方法を選択し、Z-インデックスをコントロールする。
• タイポグラフィ：重要なテキスト・スタイリング・オプションへのアクセス
• コンテキスト：無限の可能性を秘めたリッチなレイヤーデザインの作成
• ボーダー：一貫した、または異なるボーダースタイルを適用
• エフェクト：複数のシャドウレイヤーやその他のエフェクトを追加

DIVラッパー1つでサイトパフォーマンスを改善

エディターV4は、大幅にクリーン化された DOM この構造はサイトのパフォーマンスに直接影響します。各要素は、以前のバージョンのように複数のDIVを入れ子にするのではなく、1つのDIVラッパーだけを使用するようになりました。 HTML 出力が削減され、ページサイズが小さくなり、ページをレンダリングする際のブラウザの複雑さが軽減される：

• よりクリーンなコードと高速レンダリング
• 改良型 SEO ランキング
• より良いビジター・エクスペリエンス

アルファ版はすでにパフォーマンスの向上を示しているが、エディターV4が成熟するにつれ、新たに最適化された要素をウェブサイトで使用する場合、これらの利点はさらに大きくなるだろう。

各デバイスの各スタイル属性を制御する

エディターV4はレスポンシブデザインの面で完全に改善され、これまでにないコントロールを提供し、特定のコントロールオプションのみがレスポンシブ機能を持つというV3のウィジェットの制限に対処している。

エディターV4では、すべてのスタイル・プロパティは例外なくすべてのデバイスで調整できます。トップバーでデバイスを切り替えるだけで、特定のスクリーンサイズにのみ影響する調整を行うことができます。つまり、一行も書くことなく、モバイルとデスクトップでまったく異なるスタイルを設定できるのです！ カスケーディングスタイルシート.

スタイルリピーターでリッチなレイヤーデザインを作成する

エディターV4では、スタイルリピーターが導入され、背景やエフェクトの階層構造を作成できるようになりました：

• 複数の背景画像、グラデーション、色の追加
• 複雑なシャドウエフェクトを作成し、それらを重ねる。
• レイヤーをドラッグして優先順位を調整
• コンテキスト操作によるレイヤーの複製、非表示、削除

強化されたグラデーションツールは高度なコントロールを提供し、必要な数のカラーストップを追加して、見事な視覚効果を生み出すために正確に配置できます。

スタイル・リピーターは現在、背景とボックス・シャドウに対応しており、将来的にはさらに多くのスタイル・オプションに対応する予定です。

エディターV4の新要素

エディターV4アルファは7つの新しい原子元素を導入：

• DIVブロック
• フレックスボックス
• キャプション
• 通路
• イメージ
• ボタン
• エスブイジー

シンプルなマークアップ、一貫したスタイリング・パターン、パフォーマンスの向上など、各要素がV4の哲学を示しています。このモジュール式アプローチにより、サイト全体のデザイン更新がより速く、よりスケーラブルになります。

V3との完璧な互換性

Elementorはすでに1,800万以上のウェブサイトを持っていることを考慮し、エディタV4を段階的に展開しています。

エディターV4はV3と完全に互換性があります：

• 同じページでV3エレメントとV4エレメントの両方を使用することができます。
• 使い慣れたV3ウィジェットを使い続けながら、V4の機能を徐々に探求していく！
• V3ウィジェットは完全に機能し、V4レイアウトに配置することができます。
• 既存のワークフローへの影響なし

V4入門

重要な注意事項このアルファバージョンは、テストおよび探索的な使用を目的としています。ステージングまたはテストサイトでのみ使用することをお勧めします。

このアルファバージョンは始まりに過ぎません。今後数ヶ月の間に、より多くの機能が導入され、既存の機能が改善され、エディターV4が最もパワフルで直感的なウェブサイトビルダーとなるよう、私たちのフィードバックに基づいて改良される予定です。

今後のリリースでは、変数、カスタムプロパティ、CSS IDなどが追加される予定です！

概要

エディターV4の導入でエレメンタ 大幅な刷新が行われる。新機能はデザインの柔軟性と効率を向上させるだけでなく、より強力なレスポンシブデザインコントロールとより良いパフォーマンスをユーザーにもたらします。再利用可能なクラス、インタラクティブなスタイル、簡素化されたDOM構造など、Editor V4はすべてのウェブサイトビルダーに、より効率的なワークフローと洗練されたデザイン体験を提供します。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み