トップページ

Elementorの３ツのメイン機能とは？

セクション

Elementorは、セクション操作による領域設定からスタートします。そしてセクションを段組みに分け、ウジェットを挿入して、ページ編集をして行きます。

段組み設定

Elementorは、段組み有りきのページ編集操作が基本となります。段組み設定が分かれば、Elementorの全てが分かると言っても過言ではありません。

テンプレート

テンプレート操作には、セクション単位にテンプレートを登録したり、登録済のテンプレートを呼び出してセクションの再利用したりする便利機能があります。

その具体的なメニュー一覧は
以下になります

下記のようなアイコン・ボックスで３列のグリッド・メニューを実装してみました。
アイコンをクリックすることで、各詳細ウジェット・ページにリンクしています。

Elementorの初期起動

全ては「Elementorで編集」ボタン押下で始まるElementorの初期起動の手順を詳細に解説しています。

Elementorデモページ

ELEMENTORの実装で「何が出来るか？」を、各種ウジェット機能をデモページとして表現しています。

Elementorの編集領域

ページ編集には、WordPressの編集領域と、Elementorの編集領域の２ツの領域があることを解説しています。

ブラウザとの相性

ELEMENTORでページを編集する時、ブラウザとの相性面でページ編集できないブラウザが存在します。

画像アップロード事例

Elementorのウィジェト操作について、基本中のキホン「画像アップロード」の事例を解説しています。

セクション操作とは？

ELEMENTORのページ編集は、セクション（領域）設定から始まるセクション操作が基本的な手順となります。

セクションの背景

セクションの背景を色付けしたり、画像を埋め込んだり、黒色やグレー色等でオーバーレイを施す処理です。

背景固定化とは？

セクションの背景に画像を埋め込み、縦スクロールしても画像が固定された状態を背景固定と言います。

カスタムページ領域

ELEMENTORによるページ編集は、要素ボックス欄の要素（ウジェット）を、カスタムページ領域にドラッグ＆ドロップして貼り付けることが、基本的な操作になります。

段組ネストとは？

段組の中に更に子供の段組を設定することを意味し、ウジェット「Inner Section」を利用することで実現できます。正に段組ありきのElementorに相応しい機能です。

マウスホバーとは？

ホバーとは、英語の「Hover」のことで、 「ホバークラフト」とか「ホバリング」とかの名詞に繋がる言葉です。結局、マウスオーバーと同意語となります。

ホバーアニメーション

HPにアップロードされた画像にマウスを持っていくと画像が動く仕掛けを総称してホバー・アニメーションと言います。別名でオンマウスとかマウスオーバーとかとも呼ばています。

アニメーション効果

ページ表示の際の画面切替でのアニメーション効果を言っています。画面切替の単位は、セクション、カラム、ウジェット毎で、同じようなアニメーション効果が利用できます。

Gifアニメーション

セピア色から元のカラー画像への変化、及び、その逆のカラー画像からセピア色やグレー色への色味だけの変化を、画像編集のGif画像作成で実現してみました。

Elementorの画像表現

画像をクリックしてポップアップ画像を表示したり、別ページに飛んだりする設定は、画像挿入時のリンク先の設定で、全て望みの画像表現が実現できます。

画像サイズあれころ

Elementorで扱う画像サイズのサムネイル画像よりラージサイズ、及びフルサイズまでの全ての画像サイズを一覧表示で解説しています。

画像カルーセル

ELEMENTORの「画像カルーセル」をページに設定すると、一般的には150×150 pxのサムネイル画像によるスライドショーを実装することになります。

アイコンボックス

「アイコンボックス」をカスタマイズして、背景ブラックのアイコンボックスを作成してみました。その作成過程を明らかにしてみました。

最近の投稿記事８選

What is this？ ⇒ これは「イメージ・アコーディオン」の事例です。

Webの世界でアコーディオンと言うと、テキスト文書をオンマウスした時に隠れていた下層テキストが表面に現れる機能を言います。イメージ・アコーディオンとは、オンマウス前の表のテキストを画像にして、その画像にオンマウスした時に隠れていたテキスト文言が現れるイメージです。Elementor だから出来るスゴ技です。凄いですね！