アナログエンジンのたまに書くコラム

Elementorが実験中の新機能

Elementorが軽量化のために新たな実験を開始

Elementorが出てきてからというもの、ホームページ制作がとても楽になりました。素人でも簡単にデザインができ、プロでもElementorを使うWEB制作業者を見かけるようになりました。
しかしながらSEOの観点から言うと、まだ表示や制作時の負荷が高く、サーバーサイドでメモリを増やしたり、Wordpressのテンプレートカスタムで、軽量化をするしか方法はありませんでした。
しかし、最近はElementor側も対応を行なっているようで、インライン形式（外部ファイルを読み込まないため、表示が早くなる可能性がある）に対応するファンクションを公開しています。他にもさまざまな便利機能が進化中。
下記に、elementorの設定画面にある実験中を含む一覧をgoogle翻訳の直訳と共に掲載しておきます。

Elementor Beta (Developer Edition)インストール方法

WordPress管理画面＞プラグイン＞新規追加を選び、検索で「Elementor Beta」を検索すると「Elementor Beta (Developer Edition)」をインストールできます。インストールをしたら、有効化をしましょう。すると、プラグインの一覧から、「バージョン 3.x.x-dev」のアップデートが可能になります。
あとはサイドバーの「elementor DEV」の設定から「実験中（Experiments）」を選ぶと、現在有効になっている機能とそうでない機能の一覧が出ます。
下記に記す、それぞれの機能をよくお読みになって、（覚悟の上で）有効にしてください。

Ongoing Experiments（現在進行中の機能）

実装はされていますが、現在は安定版としてでの公開ではなく、実験中というポジションで公開されています。それぞれ、アルファ版・ベータ版と括られていますので正式公開も間も無くだと思います。利用の場合は、現在のホームページ、連携するWEBサービスも含めてチェックしながら有効にすると良いでしょう。

Improved CSS Loading

Please Note! The “Improved CSS Loading” mode reduces the amount of CSS code that is loaded on the page by default. When activated, the CSS code will be loaded, rather inline or in a dedicated file, only when needed. Activating this experiment may cause conflicts with incompatible plugins.

ご注意ください！「改善された CSS 読み込み」モードは、デフォルトでページに読み込まれる CSS コードの量を減らします。有効にすると、必要な場合にのみ、インラインまたは専用ファイルに CSS コードが読み込まれます。この実験を有効にすると、互換性のないプラグインと競合する可能性があります。

Inline Font Icons

The “Inline Font Icons” will render the icons as inline SVG without loading the Font-Awesome and the eicons libraries and its related CSS files and fonts.

「インラインフォントアイコン」は、Font-Awesome と eicons ライブラリ、および関連する CSS ファイルとフォントをロードせずに、アイコンをインライン SVG としてレンダリングします。

Flexbox Container

Create advanced layouts and responsive designs with the new Flexbox Container element. This experiment replaces the current section/column structure, but you’ll still keep your existing Sections, Inner Sections and Columns and be able to edit them. Ready to give it a try? Check out the Flexbox playground.

新しい Flexbox Container 要素を使用して、高度なレイアウトとレスポンシブデザインを作成します。この実験により、現在のセクション/列構造が置き換えられますが、既存のセクション、内部セクション、および列は引き続き保持され、編集することができます。試してみる準備はできましたか？ Flexbox プレイグラウンドをチェックしてください。

Page Transitions

Customize entrance and exit animations for every page on your site, add a preloader with predefined animations and icons or upload your own images.

サイトのすべてのページの入口と出口のアニメーションをカスタマイズし、事前定義されたアニメーションとアイコンを含むプリローダーを追加するか、独自の画像をアップロードします。

Stable Features（安定版）

WEB制作に役立つ安定版の機能ですが、Elementorをインストールしてから1年以上経っている人は反映されていない項目もあるはずです。内容を確認の上、有効にしてください。

最適化済み DOM 出力

（翻訳済）開発者の方はお読みください。この実験には、いくつかのマークアップの変更が含まれています。 Elementor でカスタムコードを使用したことがある場合は、コードのスニペットが実行されない可能性があります。この実験を無効化にすると以前の Elementor マークアップ出力設定が維持され、そのコードを再度実行できます。

アセット読み込みの改善

Please Note! The “Improved Asset Loading” mode reduces the amount of code that is loaded on the page by default. When activated, parts of the infrastructure code will be loaded dynamically, only when needed. Keep in mind that activating this experiment may cause conflicts with incompatible plugins.

ご注意ください！「Improved Asset Loading」モードでは、デフォルトでページにロードされるコードの量が削減されます。有効にすると、必要な場合にのみ、インフラストラクチャコードの一部が動的に読み込まれます。この実験を有効にすると、互換性のないプラグインと競合する可能性があることに注意してください。

アクセシビリティの改善

Elementor ページのアクセシビリティ拡張機能の配列。ご注意ください。これらの機能強化には、既存の Elementor ウィジェットへのマークアップの変更が含まれる場合があります

Additional Custom Breakpoints

Get pixel-perfect design for every screen size. You can now add up to 6 customizable breakpoints beyond the default desktop setting: mobile, mobile extra, tablet, tablet extra, laptop, and widescreen.

すべての画面サイズでピクセルパーフェクトなデザインを実現します。デフォルトのデスクトップ設定以外に、最大 6 つのカスタマイズ可能なブレークポイントを追加できるようになりました: モバイル、モバイルエクストラ、タブレット、タブレットエクストラ、ラップトップ、およびワイドスクリーン。

インポートエクスポートテンプレートキット

Design sites faster with a template kit that contains some or all components of a complete site, like templates, content & site settings. You can import a kit and apply it to your site, or export the elements from this site to be used anywhere else.

テンプレート、コンテンツ、サイト設定など、完全なサイトの一部またはすべてのコンポーネントを含むテンプレートキットを使用して、サイトをより迅速に設計します。キットをインポートしてサイトに適用したり、このサイトから要素をエクスポートして他の場所で使用したりできます。

Hide native WordPress widgets from search results

WordPress widgets will not be shown when searching in the editor panel. Instead, these widgets can be found in the “WordPress” dropdown at the bottom of the panel.

エディターパネルで検索すると、WordPress ウィジェットは表示されません。代わりに、これらのウィジェットは、パネルの下部にある「WordPress」ドロップダウンにあります。

Default to New Theme Builder

Entering the Theme Builder through WP Dashboard > Templates > Theme Builder opens the New theme builder by default. But don’t worry, you can always view the WP styled version of the screen with a simple click of a button.

WP ダッシュボード > テンプレート > テーマビルダーからテーマビルダーに入ると、デフォルトで新しいテーマビルダーが開きます。ボタンをクリックするだけで、WP スタイルの画面をいつでも表示できます。

ランディングページ

Adds a new Elementor content type that allows creating beautiful landing pages instantly in a streamlined workflow.

合理化されたワークフローで美しいランディングページを即座に作成できる新しい Elementor コンテンツタイプを追加します。

Color Sampler

Adds a new color picker functionality that allows choose a color from other elements settings.

他の要素設定から色を選択できる新しいカラーピッカー機能を追加します。

Favorite Widgets

Mark widgets as favorites by right clicking them. Favorite widgets will always appear at the top of the editor panel for easy access.

ウィジェットを右クリックしてお気に入りとしてマークします。お気に入りのウィジェットは常にエディターパネルの上部に表示され、簡単にアクセスできます。

Admin Top Bar

Adds a top bar to elementors pages in admin area.

管理エリアの要素ページにトップバーを追加します。

Notes

Creates a dedicated workspace for your team and other stakeholders to leave comments and replies on your website while it’s in progress. Notifications for mentions, replies, etc. are sent by email, and all notes are stored in your site’s database.

チームやその他の利害関係者が Web サイトの進行中にコメントや返信を残すための専用ワークスペースを作成します。メンション、返信などの通知はメールで送信され、すべてのメモはサイトのデータベースに保存されます。

Form Submissions

Never lose another submission! Using “Actions After Submit” you can now choose to save all submissions to an internal database.

別の提出物を失うことはありません！「送信後のアクション」を使用して、すべての送信を内部データベースに保存することを選択できるようになりました。

Scroll Snap

Customize how visitors scroll through your site. Scroll Snap makes the viewport stop or pause on a specific position of a section when scrolling ends.

訪問者がサイトをスクロールする方法をカスタマイズします。 Scroll Snap は、スクロールが終了したときに、セクションの特定の位置でビューポートを停止または一時停止させます。

アナログエンジンでの使用感

弊社のホームページの会社概要を「Elementor Flexbox Container」に置き換え、調整をしました。その結果、例えば弊社の会社概要ページではソースコードの文字数が、「372,397文字」から「337,220文字」に減りました。10%ほどのコードの削減になるようですが、html含むソースコードの減少以上に外部から読み込んでいたcssがinline CSS化してのこの結果ですから、レンダリング時間の減少につながり、かなりの通信量と通信回数、表示スピードの改善につながるのではないでしょうか？

ただし、add-on系のプラグイン（Happy addonsやPremium Elementorなど）を使っている場合は、レスポンシブで一部のスライダー画像が表示されない（主にスライダーに仕込まれた最後の画像）と言う減少もありました。（2022年8月25日現在）
また、Lazy Load系のプラグインも注意が必要です。スライダー系widgetを中心にElementorがLazy Loadが可能なオプションを広げています。機能が被ることでキャッシュされたコンテンツの二重読み込みになる場合もあります。

Naomiさんという日本でElementorの布教活動をしている超天才によると、年内にはFlex-box-containerが正式採用するであろうとのことですが、JetPluginの開発元がFlex-box-containerの対応を完了しているようですので、Elementor4.0を待たずに正式採用するのではと思います。

アナログエンジン

1999年創業、創業20数年のホームページ制作＆Webシステム制作会社。滋賀県のみならず、北は秋田、南は鹿児島まで広い地域でお客様がいます。デザインからシステム、コンサルティングや補助金のご相談までお任せください。認定DXアドバイザー在籍。

只今の混雑状況

中吉