That's ELEMENTOR

Elementorのウジェット機能を検証するページ

当ページは、2段の段組で作成されています。
左側の段組でELEMENTORの各ウジェット(部品)を実際に設置しています。
そして右側の段組で設置したウジェットの機能について解説をしています。
要するにELEMENTOR実装で「何が出来るか?」を表現しています。

見出し、テキストエディター、ボタン

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

左のカラム(段組)は、

  • 見出し……左のカラム内の最上段太字の部分が見出しです。
  • テキストエディター…….左のカラム内の真ん中の部分がそうです。
  • ボタン……左のカラム内の「ここをクリック」のボタンです。

の各パーツで作成されています。
これがELEMENTORの基本部分を表すページ編集の基本のキホンです。

Inner Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

左はInner Sectionの挿入例です。

「Inner Section」とは、以前の「コラム(段組)」と同意義と解釈されます。

何故、その「コラム」が「Inner Section」なったのか疑問に思いますが、段組みの中に更に段組みを入れる、即ち、段組ネスト(入れ子)をイメージすれば、「Inner Section」がイメージしやすいのでないかと納得せざるを得ません。

この「Inner Section」の使い方をマスターすれば「ELEMENTOR とは何か?」が見えてきます。

ちなみに、左の例では「Inner Section」と言う見出しの下に、Inner Section で2段の段組を挿入した事例となっています。

画像

左は画像の挿入例です。

画像には、当然、リンクを張ることも可能です。
現在は、YouTube動画にリンクしています。
リンクが張ってあるか否かが分かるようにオンマウスすると画像がちょっと拡大するように設定しています。

動画

左は動画の挿入例です。

画像と同じように動画を入れられます。
自動再生を設定出来たりします。
基本的にはYouTubeのリンクを貼るだけ。

Googleマップ

左はGoogleマップの挿入例です。

住所を指定すれば、そこを中心に表示されるグーグルマップ。

スクロールを出来なくしたりなど、地図を表示する際に、わざわざ書かなくてもいい。

最初に表示される際のズームや高さも設定できるので、様々な使い方が出来そう。

アイコン

database

Editセクション

clone

Duplicatセクション

plus

Addセレクション

save

Saveセレクション

close

Removeセレクション

columns

Editカラム

pencil

Edit ウジェット

左はアイコンの挿入例です。

左側の7つのアイコンは、セクション操作に使用されているアイコンを事例として紹介しています。

アイコンの右の英文字はアイコンの名称になります。
最初のアイコンは database となっていますが、本来なら Editセクションに相当するアイコンにならなければなりませんが、Editに相当するアイコンがないので、databaseで代用しています。

3列目は、Elementorでの操作ボタンの名称になります。

画像ボックス

これは見出しです

このテキストを変更するには編集ボタンをクリックしてください。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

左は画像ボックスの挿入例です。

「画像+見出し+テキストボックス」が1セットになったパーツ「画像ボックス」と呼ばています。

アイコンボックス

これは見出しです

このテキストを変更するには編集ボタンをクリックしてください。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

左はアイコンボックスの挿入例です。

「アイコン+見出し+テキストボックス」が1セットになったパーツ「アイコンボックス」と呼ばています。 前記の「画像ボックス」で、画像がアイコンに変わっただけの機能です。

Star Rating

3.5/5
7.6/10

左はStar Ratingの例です

Star Scale 0-5 と 0-10 の2タイプのスケールモデルがあります。

画像ギャラリー

左は画像ギャラリーの挿入例です。

所謂、フォトギャラリーです。

個々の画像をクリックしてオリジナル画像がポップアップされます。

手動のスライドショーが実現できます。

画像カルーセル

左は画像カルーセルの挿入例です。

所謂、スライドショーです。

左はアイコンリストの設置例です。

左のアイコンリストには、各々、Elementorで使用可能なアイコン一覧の見本ページに、ジャンプするリンクが張られています。

カウンター

0
クールな番号

左はカウンターの設置例です。

今イチ使い方が良く分かりませんが、自分が設定した数字から、自分が設定した数字までを高速でカウントしてくれます。

ブログレスバー スキル

スキル
ウエブ デザイナー 50%
やる気
システム エンジニア 70%
根気
プログラマー 40%

左はブログレスバーの設置例です。

こんな感じでバーを設置できるだけです。

言葉を入れて、自分でスペースを大量に入れれば、何かの比較のように見せられます。

お客さまの声

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
John Doe
Designer

左は「お客さまの声」の設置例です。

画像や名前、その他内容まで自分で記入できる、まるでお客様の声。

商品紹介ページならこういうのもアリですね。

タブ

これはタブ1のコンテンツです。
このテキストを変更するには編集ボタンをクリックしてください。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

これはタブ2のコンテンツです。
このテキストを変更するには編集ボタンをクリックしてください。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

これはタブ3のコンテンツです。
これはタブ3のコンテンツです。
これはタブ3のコンテンツです。

左はタブの設置例です。

タブの内容もメニューも当然自由に変えられます。

アコーディオン

このテキストを変更するには編集ボタンをクリックしてください。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

このテキストを変更するには編集ボタンをクリックしてください。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

このテキストを変更するには編集ボタンをクリックしてください。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

 

左はアコーディオンの設置例です。

「アコーディオン」は、次の「切り替え」と違うところが、常に一つのアコーディオンが開かれた状態で表示されます。

切り替え

このテキストを変更するには編集ボタンをクリックしてください。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

このテキストを変更するには編集ボタンをクリックしてください。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

コンテンツを切り替え
このテキストを変更するには編集ボタンをクリックしてください。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

左は切り替えの設置例です。

切り替えとは、アコーディオンと機能的には同じです。

ただアコーディオンと違うところは、初期表示で全てのアイテムが閉じられた状態で表示されます。

左はソーシャルアイコンの設置例です。

アラート

左はアラートの設置例です。

アラートの表示タイプによって表示の背景色が変わります。

SoundCloud

左はSoundCloudの設置例です。

全然なじみがないですが、URL入力欄やいいねボタン購入ボタンなど、各表示非表示設定できるので、音楽を流したり、時には売ったりできるみたいです。

ショートコード

2001年1月13日それまでの同好会からPCクラブへ移行
2002年2月1日OCNのPage-Onで新規HPを開設
2005年5月8日ホームページビルダー6.0でHPリニューアル
2008年4月1日OCNからLolipopにQHMでHP移設
2009年8月8日パソコン教室にプロジェクターを導入
2010年10月18日QHM ユーザー支援サイトを開設
2012年7月1日楽天ビジネスのHP部門に事業参入
2014年8月8日QHMのレスポンシブデザインページを公開
2015年9月23日HAIKで肥大化していた当サイトのスリム化実施
2016年6月21日「藤心パソコン倶楽部」のWP版(当ページ)を公開
2017年3月6日2017年度版キャンページ頁を作成
2017年6月25日サーバーをロリポップからXサーバーに変更

左はショートコードの設定例です。

スクリプト系プラグインを記述する際やfunction.phpで何か記入したものは、HTMLではなくショートコード使った方が良いです。
左は、TablePressで作成された「表」をショートコードを使ってページに設置しています。

実際に挿入したショートコードは 【table id=2 /】 です。

ショートコード2

左もショートコードの設定例です。

Contact Form 7を使ったメールフォームを設置した事例になります。

左は、Contact Form 7で作成された「メールフォーム」をショートコードを使ってページに設置しています。

実際に挿入したショートコードは 【contact-form-7 id=”56″ title=”お問合せフォーム”】 です。

HTMLタグ

maru

左はHTMLタグの設定例です。

HTMLを入力する欄が出ます。
左の例は、CSSで正四角形画像を円形にトリミングするHTMLタグで設定した事例となります。

実際に挿入したHTMLタグは以下のようになります。

<div class=”maru-box”><img src=”https://fujigowp.info/elementor/wp-content/uploads/2018/11/girl-flowers-wreath-green-eyes-104843-renyu.jpg” alt=”maru” width=”300″ /></div>

HTMLタグ2

左はHTMLタグの設定例です。

HTMLを入力する欄が出ます。
左の例は、フォームズのメールフォームをHTMLタグで設定した事例となります。

実際に挿入したHTMLタグは以下のようになります。

 <iframe src=”https://ws.formzu.net/dist/S67699244/” style=”height: 600px; max-width: 620px; width: 100%; border: 0;”></iframe> 

メニューアンカー

左はメニューアンカーの設置例?

所謂、ページ内アンカーを設置する際のアンカー挿入の機能です。

 

サイドバー

左はサイドバーの設置例です。

サイドバーウィジェットに登録してあるテキストなどを、そのまま本文中に呼び出すことが出来ます。
左はサイドバートップにあった「フッター2」を呼び出したものです。

Read More

左は Read More の設置例です。