Elementorのウジェット機能を検証するページ
当ページは、２段の段組で作成されています。
左側の段組でELEMENTORの各ウジェット（部品）を実際に設置しています。
そして右側の段組で設置したウジェットの機能について解説をしています。
要するにELEMENTOR実装で「何が出来るか？」を表現しています。
左のカラム（段組）は、
- 見出し……左のカラム内の最上段太字の部分が見出しです。
- テキストエディター…….左のカラム内の真ん中の部分がそうです。
- ボタン……左のカラム内の「ここをクリック」のボタンです。
の各パーツで作成されています。
これがELEMENTORの基本部分を表すページ編集の基本のキホンです。
Inner Section
吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
左はInner Sectionの挿入例です。
「Inner Section」とは、以前の「コラム（段組）」と同意義と解釈されます。
何故、その「コラム」が「Inner Section」なったのか疑問に思いますが、段組みの中に更に段組みを入れる、即ち、段組ネスト（入れ子）をイメージすれば、「Inner Section」がイメージしやすいのでないかと納得せざるを得ません。
この「Inner Section」の使い方をマスターすれば「ELEMENTOR とは何か？」が見えてきます。
ちなみに、左の例では「Inner Section」と言う見出しの下に、Inner Section で２段の段組を挿入した事例となっています。
画像
左は画像の挿入例です。
画像には、当然、リンクを張ることも可能です。
現在は、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.
左は画像ボックスの挿入例です。
「画像＋見出し＋テキストボックス」が１セットになったパーツ「画像ボックス」と呼ばています。
アイコンボックス
これは見出しです
このテキストを変更するには編集ボタンをクリックしてください。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
左はアイコンボックスの挿入例です。
「アイコン＋見出し＋テキストボックス」が１セットになったパーツ「アイコンボックス」と呼ばています。 前記の「画像ボックス」で、画像がアイコンに変わっただけの機能です。
Star Rating
左はStar Ratingの例です
Star Scale 0-5 と 0-10 の２タイプのスケールモデルがあります。
画像ギャラリー
画像カルーセル
カウンター
左はカウンターの設置例です。
今イチ使い方が良く分かりませんが、自分が設定した数字から、自分が設定した数字までを高速でカウントしてくれます。
ブログレスバー スキル
左はブログレスバーの設置例です。
こんな感じでバーを設置できるだけです。
言葉を入れて、自分でスペースを大量に入れれば、何かの比較のように見せられます。
お客さまの声
左は「お客さまの声」の設置例です。
画像や名前、その他内容まで自分で記入できる、まるでお客様の声。
商品紹介ページならこういうのもアリですね。
タブ
これはタブ１のコンテンツです。
このテキストを変更するには編集ボタンをクリックしてください。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.
このテキストを変更するには編集ボタンをクリックしてください。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入力欄やいいねボタン購入ボタンなど、各表示非表示設定できるので、音楽を流したり、時には売ったりできるみたいです。
ショートコード
| No. | サービス項目 | 料金 | 補足説明 |
|---|---|---|---|
| １ | HAIKへの乗り換え代行 | 36,000円 | ページ数に無関係で |
| ２ | HAIKの個人レッスン開催 | 6,000円 | 一回２時間 |
| ３ | 定期定額保守サポート | 36,000円 | ６ヶ月間の定額料金 |
| 4 | WordPress塾の受講料 | 42,000円 | 10Pの制作代行つき |
| 5 | HAIKページの制作代行 | 36,000円 | 10Pの標準価格 |
| 6 | WordPressページの制作代行 | 60,000円 | 10Pの標準価格 |
左はショートコードの設定例です。
スクリプト系プラグインを記述する際やfunction.phpで何か記入したものは、HTMLではなくショートコード使った方が良いです。
左は、TablePressで作成された「表」をショートコードを使ってページに設置しています。
実際に挿入したショートコードは 【table id=1 /】 です。
ショートコード２
左もショートコードの設定例です。
Contact Form 7を使ったメールフォームを設置した事例になります。
左は、Contact Form 7で作成された「メールフォーム」をショートコードを使ってページに設置しています。
実際に挿入したショートコードは 【contact-form-7 id=”56″ title=”お問合せフォーム”】 です。
HTMLタグ
左はHTMLタグの設定例です。
HTMLを入力する欄が出ます。
左の例は、CSSで正四角形画像を円形にトリミングするHTMLタグで設定した事例となります。
実際に挿入したHTMLタグは以下のようになります。
<div class=”maru-box”><img src=”https://morisaki.xyz/wp-content/uploads/2018/11/girl-flowers-wreath-green-eyes-104843-renyu.jpg” alt=”maru” width=”300″ /></div>
HTMLタグ２
左はHTMLタグの設定例です。
HTMLを入力する欄が出ます。
左の例は、フォームズのメールフォームをHTMLタグで設定した事例となります。
実際に挿入したHTMLタグは以下のようになります。
<iframe src=”https://ws.formzu.net/dist/S67699244/” style=”height: 600px; max-width: 620px; width: 100%; border: 0;”></iframe>
メニューアンカー
左はメニューアンカーの設置例？
所謂、ページ内アンカーを設置する際のアンカー挿入の機能です。
サイドバー
左はサイドバーの設置例です。
サイドバーウィジェットに登録してあるテキストなどを、そのまま本文中に呼び出すことが出来ます。
左はサイドバートップにあった「フッター２」を呼び出したものです。