Elementor使用のLightning
脱ElementorのLightning
上記の２サイトは、何れもWPテーマ「Lightning」で作成された見本ページです。
ただ、使用しているページ編集エディタが異なります。
左側は、Elementorを実装して、全ページElementor仕様のサイトになっております。
それに対して、右側は、脱Elementor即ちElementorを一切使用しておらず、ブロックエディタ：Gutenbergを使用したページ作りをしております。サイトの中身は、ほぼ同じ内容になっています。
作成者として、どちらが作成しやすかったかと言うと、左側のElementorサイトでした。
Elementorは使い勝手面からブロックエディタより断然作成し易いのは事実ですが、今回、ブロックエディタに慣れる意味で、Elementorの作成工数の倍の時間と手間をかけてのブロックエディタへのチャレンジ結果でした。
フルワイド・ブロックを使用した見出し設定には、通常は背景画像を使うケースが主流ですが、画像ではなくて背景色を使う場合もあると思います。今回は、見出し設定に単なる背景色を使った事例を紹介します。
尚、背景画像を使う場合に、背景固定というオプションを良く使いますが、背景画像でなくて背景色設定の場合は、背景固定というオプションは機能しませんので要注意です。
Elementorの「良くある質問」
SWELLのFAQブロック
SWELLのFAQブロックは、Webサイトの「良くある質問と回答」ページに相当するページを編集する時に使用されるブロックになります。
上記の左側ページが、Elementorで編集した「良くある質問」ページです。
右側ページがSWELLのFAQブロックで編集した「良くある質問」ページになります。
SWELLのFAQブロックの方が多彩なデザインでバリエーション豊かな表現になっていると思います。
制作代行の流れ（SWELL）
制作代行の流れ（Elementor）
SWELLのステップ・ブロックとは、物の流れや操作手順などを表す表現方法の場で良く使われる機能をブロックにしたものです。上記の左側がSWELLの専用ブロック「ステップ」を実装したページです。
右側は、Elementorで作成したSWELLのステップと同等な「処理の流れ」的な表現例ですが、ElementorにはSWELLのような専用ブロック（ウジェト）はありません。
キャプション・ボックス実装例
アイコン・ボックス実装例
SWELLページの２ページ目「新しい制作代行プラン」のページでは、キャプション・ボックスというブロックを実装しています。（上記の左側ページ）
それに対して、Elementorのアイコン・ボックスは、「Elementor支援サイト」のトップページでアイコン・ボックスを多用しています。（上記の右側ページ）
即ち、SWELLのキャプション・ボックスは、Elementorのアイコン・ボックスに等しいボックスになります。
SWELLで作成したフルワイドの実装例
Lighthouseで作成したカバーブロックの実装例
上記の2ツのサイトの共通点は、背景固定画像を所どころに配した一見するとLPページにも見える今流行りのWordPressページになっていると思います。ただ違うところは実装しているWPテーマだけです。
左側のページは、SWELLで作成した「藤心Online SWELL道場」（即ち当サイト）のトップページです。
右側のページは、サイト全体をElementorで作成した「WP試作見本サイト」の中で、唯一Elementorを使用せずGutenbergで作成したページとなっているところです。
SWELLでのトップページでは、フルワイド・ブロックで背景固定画像を実装し、Gutenbergページでは、カバー・ブロックで同じような機能を実装していることになります。
PCに接続する周辺機器には、ルータやLANポートSWハブやDVDドライブや外付けHD等の諸々の機器があります。いざPCに接続するとなるとノートPCの周りのディスク上は、それらの機器を重ねて乱雑において一目で整理されていない状態を醸し出しています。何とかせねばと前々から思いつつ現在に至っておりました。
コロナのせいで自宅に引き籠もる状態が長く続いていたところ、思い切ってその表題の収納ボックスを作成することになりました。なるべく安く手作りして作成することにしました。その経過を記録に残す意味でサイトに経過写真等を残すことにしました。
巷では、WordPressの世界に新しいWPテーマ「SWELL」が公開され、その機能とデザイン性の豊かさでユーザーを魅了しているみたいです。タメぐち為五郎もミーハー気分で評判のSWELLを購入してみました。
どうなることやら、これから先が思いやれるが、購入したからには、やるしかないとの思いで早速HP作りに取り掛かることにしました。
当サイトのトップページは、元々は、Elementorで作成したLPイメージページとなっていました。そのLPページを非カラーのモノクロ調でページ編集したら、こんなページになりました。
藤心開発実績一覧紹介サイトのトップページは、元々は、Elementorで作成したLPイメージページとなっていました。そのLPページをElementorを使用せず、ブロック・エディタのGutenbergでページ編集したら、こんなページになりました。
