トップページをブロック・エディタ「Gutenberg」で編集したら？

by

上記の４サイトに共通した仕様は、Elementor で作成したトップページをコピペ元として、ブロック・エディタ Gutenberg でコピー編集したページが存在することです。ナビメニュー上に「Gutenberg」というページ名で、ナビメニュー上の最右端に存在します。

上記の画像をクリックして、その Gutenberg ページにリンクが貼ってありますので、直ぐ見れると思います。コピペ元のトップページと比較参照して頂ければ、Elementor と Gutenberg での表現方法の違いが一目瞭然で分かると思います。

現在までで分かっている範囲ですが、以下の３点が Elementor で出来て Gutenberg で出来ない機能かと思います。
１．カラムの設定で、カラムの幅の変更が Gutenbereg で出来ない？
２．アイコンボックスや画像ボックスの機能が Gutenberg に存在しない？
３．開始アニメーション等の動きの制御が Gutenberg には無い？

自分で更新できるWordPressサイトを作って
みませんか?

WordPressのスキルを取得するのなら「ELEMENTOR」の存在は外せません。
ELEMENTORが分かればWordPressのハードルを下げることが可能です。
「もっと手軽に、もっと易しく」を前提に、プラグイン「ELEMENTOR」による
ページ編集に特化した「オンライン個人レッスン付きWordPress塾」が
お薦めする講座となります。

製品納入後の個人レッスンは、ZoomやGoogle Meet等を導入した
オンライン・リモート会議形式で開催し、Elementorの操作方法を
レクチャー致します。
以前の面談形式のレッスンではなくて、ユーザー様と一対一のレッスンですので、
感染症リスクの不安も心配ご無用、安心してWordPressスキルを取得できます。

藤心オンラインWordPress塾

今年は、SWELLでの制作を本格的に稼働する予定です。

by

藤心SWELL道場

１年半前の2022年４月だったと思いますが、WordPressテーマSWELLを購入して、SWELLの最初のサイトを作成したサイトが左記のＨＰでした。 あれから早いもので１年半も経ったのかと、その間、SWELLに触れることなく過ごして来ました。これではいけないとSWELLを買った意味がないと反省する毎日です。

詳細はコチラです。

そして一年半後の試みとして、追加のSWELLサイトを２ツ作成しましたので公開します。 今回のサイトは、前回のサイト型HP（トップページが固定ページ）でなくて、ブログ型HP（トップページがブログ記事一覧）となったサイトです。それもSWELLの６ツあるデモページの中から、DEMO01とDEMO05の二つの素敵なページを実装してみました。

藤心ステーション

SWELLのDEMO01を着せ替えて作成しました。

藤心 My Jukebox

SWELLのDEMO05を着せ替えて作成しました。

フリップ・ボックスとは？

by

フリップ・ボックスとは、オンマウスすると画像が反転したり、拡大したりするElementorのEssential Addonsの拡張機能です。

詳細はコチラです。

自分で更新できるWordPressサイトを作って
みませんか?

WordPressのスキルを取得するのなら「ELEMENTOR」の存在は外せません。
ELEMENTORが分かればWordPressのハードルを下げることが可能です。
「もっと手軽に、もっと易しく」を前提に、プラグイン「ELEMENTOR」による
ページ編集に特化した「オンライン個人レッスン付きWordPress塾」が
お薦めする講座となります。

製品納入後の個人レッスンは、ZoomやGoogle Meet等を導入した
オンライン・リモート会議形式で開催し、Elementorの操作方法を
レクチャー致します。
以前の面談形式のレッスンではなくて、ユーザー様と一対一のレッスンですので、
感染症リスクの不安も心配ご無用、安心してWordPressスキルを取得できます。

藤心オンラインWordPress塾

Elementorだからできる部品（パーツ）のカスタマイズと再利用

by

Elementorのウジェット操作は、部品（パーツ）をドラッグ＆ドロップしてページ領域に貼り付けて、ページを作成して行くのが基本の操作になります。そして諸々のパーツを組み合わせて新たなパーツを作成して、Elementorのライブラリーに登録する機能があります。
登録したパーツは、ページ編集の際に、ライブラリーから呼び出して再利用することができます。

詳細はコチラです。

当方の公開サイトで、以下の２サイトは
全て「賢威」テーマを使用してサイトを
構築しています。

賢威8.0スタンダート
賢威7.0スタンダート
2万人を超えるユーザーが選んだSEOテンプレート【賢威】

Elementorファンには朗報です／EdgeでElementorを！！

by

Elementorでページ編集するには、使用するブラウザとの相性があることは既にお伝えしました。一時期、マイクロソフトのEdgeはElementorとは最悪の相性でお薦めできないブラウザでしたが、EdgeのVer.79以降（最新Ver.84）であれば問題なく使用できるようになりました。

筆者はつい最近、既定のブラウザをFirefoxからEdgeに切り替えて使用しております。むしろFirefoxよりEdgeの方が良いみたいです。お薦めです。

詳細はこちらです。

自分で更新できるWordPressサイトを作って
みませんか?

WordPressのスキルを取得するのなら「ELEMENTOR」の存在は外せません。
ELEMENTORが分かればWordPressのハードルを下げることが可能です。
「もっと手軽に、もっと易しく」を前提に、プラグイン「ELEMENTOR」による
ページ編集に特化した「オンライン個人レッスン付きWordPress塾」が
お薦めする講座となります。

製品納入後の個人レッスンは、ZoomやGoogle Meet等を導入した
オンライン・リモート会議形式で開催し、Elementorの操作方法を
レクチャー致します。
以前の面談形式のレッスンではなくて、ユーザー様と一対一のレッスンですので、
感染症リスクの不安も心配ご無用、安心してWordPressスキルを取得できます。

藤心オンラインWordPress塾

Elementor VS ブロックエディタ

by

該当サイトは、元々、全ページ Elementor でページ編集した見本サイトでした。
ある時から（脱Elementorを志向し始めたことを契機に）せめて１ページだけでもＧurtenbergで作成したページがあっても良いのではないかと思い、Elementorのトップページをコピー元として、新たに同じイメージのトップページをブロックエディタで作成してみました。

Elementorでのトップページ
Ｇurtenbergでのトップページ

自分で更新できるWordPressサイトを作って
みませんか?

WordPressのスキルを取得するのなら「ELEMENTOR」の存在は外せません。
ELEMENTORが分かればWordPressのハードルを下げることが可能です。
「もっと手軽に、もっと易しく」を前提に、プラグイン「ELEMENTOR」による
ページ編集に特化した「オンライン個人レッスン付きWordPress塾」が
お薦めする講座となります。

製品納入後の個人レッスンは、ZoomやGoogle Meet等を導入した
オンライン・リモート会議形式で開催し、Elementorの操作方法を
レクチャー致します。
以前の面談形式のレッスンではなくて、ユーザー様と一対一のレッスンですので、
感染症リスクの不安も心配ご無用、安心してWordPressスキルを取得できます。

藤心オンラインWordPress塾

SWELLのフルワイド・ブロック VS カバー・ブロック

by

SWELLで作成したフルワイド・ブロックの実装例

Lighthouseで作成したカバー・ブロックの実装例

上記の2ツのサイトの共通点は、背景固定画像を所どころに配した一見するとLPページにも見える今流行りのWordPressページになっていると思います。ただ違うところは実装しているWPテーマだけです。

左側のページは、SWELLで作成した「藤心Online SWELL道場」のトップページです。
右側のページは、サイト全体をElementorで作成した「WP試作見本サイト」の中で、唯一Elementorを使用せずGutenbergで作成したページとなっているところです。

SWELLでのトップページでは、フルワイド・ブロックで背景固定画像を実装し、Gutenbergページでは、カバー・ブロックで同じような機能を実装していることになります。

「左からFade In Left」、「右からFade In Right」

by

Elementorに「Motion Effects」という機能が大幅に改善されて新しく登場しました。それまでは「開始アニメーション」という名前で既にあった機能ですが、つい最近のアップグレードで「Motion Effects」とい言う名前で再登場した次第です。

そもそも「Motion Effects」とは、画面スクロールの際に表示されるコンテンツの動きを制御する機能です。筆者は、その「Motion Effects」の中の「Fade In xxxxx」なる機能を多用しています。

「Fade  In Left」は、コンテンツを画面左からセンターへ、
「Fade In Right」は、コンテンツを画面右からセンターへ、
この場合のコンテンツとは、２列の段組自身を意味しています。「百聞は一見にしかず」です。先ずは見て下さい。

詳細はコチラです。

自分で更新できるWordPressサイトを作って
みませんか?

WordPressのスキルを取得するのなら「ELEMENTOR」の存在は外せません。
ELEMENTORが分かればWordPressのハードルを下げることが可能です。
「もっと手軽に、もっと易しく」を前提に、プラグイン「ELEMENTOR」による
ページ編集に特化した「オンライン個人レッスン付きWordPress塾」が
お薦めする講座となります。

製品納入後の個人レッスンは、ZoomやGoogle Meet等を導入した
オンライン・リモート会議形式で開催し、Elementorの操作方法を
レクチャー致します。
以前の面談形式のレッスンではなくて、ユーザー様と一対一のレッスンですので、
感染症リスクの不安も心配ご無用、安心してWordPressスキルを取得できます。

藤心オンラインWordPress塾

背景画像にモーション効果を設定してみました

by

左のサイトは、WordPressテーマ：Astraの初心者用に作られたスターターテンプレート「クリスティーナのメイクアップスタジオ」で作成された見本ページです。

そのトップページのアイキャッチ画像の直下にある以降の画像に目が釘ずけになりました。４人の女性の画像が４列のカラム（段組）で表現されています。

ここまででしたら以前（4/5）に投稿した記事の再投稿記事になりますが、今回は、結果画像の背景画像にモーション効果を追加設定してみました。

詳細はコチラです。

自分で更新できるWordPressサイトを作ってみませんか?

WordPressのスキルを取得するのなら「ELEMENTOR」の存在は外せません。
ELEMENTORが分かればWordPressのハードルを下げることが可能です。
「もっと手軽に、もっと易しく」を前提に、プラグイン「ELEMENTOR」による
ページ編集に特化した「オンライン個人レッスン付きWordPress塾」が
お薦めする講座となります。

製品納入後の個人レッスンは、ZoomやGoogle Meet等を導入した
オンライン・リモート会議形式で開催し、Elementorの操作方法を
レクチャー致します。
以前の面談形式のレッスンではなくて、ユーザー様と一対一のレッスンですので、
感染症リスクの不安も心配ご無用、安心してWordPressスキルを取得できます。

藤心オンラインWordPress塾

WPテーマ「Lightning」で作るWP-LP見本を紹介します。

by

Elementorに存在するフィルタ・ギャラリーと言う素晴らしい機能を紹介します。
下記のボタンの何れかをクリックしても、そのフィルタ・ギャラリーが実装されたページに辿り着くことになります。

Elementorユーザー支援サイトでのフィルター・ギャラリー
e工房フジサキの制作代行サイトでのフィルター・ギャラリー
藤心の制作実績紹介サイトでのフィルター・ギャラリー

そのフィルタ・ギャラリー・ページが見つかりましたら、ページの最下段にある「以下の一覧表が、実際のフィルタ・ギャラリーです。」のすぐ下にあるフィルター「Lightning」をクリックすると、WPテーマ「Lightning」で作った見本ページが４サイト見つかる筈です。この一連操作は、前記のフィルタ・ギャラリー・ボタンに共通する操作です。

このフィルタ・ギャラリーのフィルター「Lightning」は、WordPressのテーマ「Lightning」を意味しています。要するに筆者が過去ｎ年の間、制作した数多くのWordPressサイトを、WPテーマをキーワードとしてギャラリーを検索する画像ギャラリーとなっています。