Elementor(デモ)

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

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

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

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

左のカラム(段組)を解説します

左のカラム(段組)は、

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

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

コラム

このテキストを変更するには編集ボタンをクリックしてください。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.

左はコラムの挿入例です。

「コラム=カラム」で全て「column(段組)」と同意義と解釈されます。
コラムの使い方は、正直言ってよく分かりませんでしたが、既存のカラムに2段の段組を設定することに等しい機能です。
段組ありきのELEMENTORを総称する機能が「コラム」ですが、日本語翻訳にあたって、せめて用語の統一を図って欲しかったですね。

このコラムの使い方をマスターするとELEMENTORとは何かが見えてきます。

画像

左は画像の挿入例です。

画像には、当然、リンクを張ることも可能です。
ただ残念なのは、オンマウスしても画像は変化しません。
従って、画像にリンクが張ってあるのか否か判別できません。
現在は、YouTube動画にリンクしています。

動画

左は動画の挿入例です。​

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

Googleマップ

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

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

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

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

アイコン

database

Editセクション

clone

Duplicatセクション

 

plus

 

Addセレクション

save

Saveセレクション

close

Removeセレクション

columns

Editカラム

pencil

 

Edit Widget

 

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

左側の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セットになったパーツ「アイコンボックス」と呼ばています。

画像ギャラリー

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

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

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

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

画像カルーセル

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

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

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

左のアイコンリストには、各々、Elementorテンプレート見本にジャンプするリンクが張られています。

カウンター

クールな番号

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

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

ブログレスバー スキル

スキル
ウェブデザイナー 50%
やる気
ウェブデザイナー 70%
根気
ウェブデザイナー 44%

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

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

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

お客さまの声

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.1

これはタブ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.

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

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

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

アラート

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

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

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です。

ショートコード2

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

左は、contact-form-7で作成された「お問合せフォーム」をショートコードを使ってページに設置しています。

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

HTML

http://haik.fujigopc.com/

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

HTMLを入力する欄が出ます。
左の例は、藤心HAIKクラブのサムネイル・リンクをHTMLで設定した例となります。

メニューアンカー

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

ほとんどすべてのこれまで登場した機能に、CSSIDやCSSクラスを書き込む項目があるのですが、このメニューアンカーは、「この ID は1ページ内で使う CSS ID になります。# は含めないでください。」とあるので、今まで使ってきた機能にCSSIDを割り振って呼び出す的なものなのかな?

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

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