Elementorのウィジェット
Elementor ウィジェット一覧 目次
ウィジェットとは？
ほとんどのページビルダーが同じような思想をもっていると思います。ウェブサイトが持つ機能を細分化して考え、その機能を一つのタイルで表現して、そのタイルを並べていくことでページを作成していく。そのタイルがウィジェットで様々な機能を持ったウィジェットが用意されています。
ウィジェットには基本設定部分とスタイル設定部分、さらに高度な設定部分が用意されていて、設定の系統ごとに画面がタブで区切られています。
Elementorの編集の基本、ウィジェット
無料版ではいくつかの機能やウィジェットが限定されていますが、基本的なページは構築できると思います。
サードパーティ製のウィジェットも多数リリースされています。
- Elementor Addon Elements
- WooLentor – WooCommerce Elementor Addons + Builder
- Essential Addons
- Ultimate Addons for Elementor
直感的に様々な機能を瞬殺で実装していくことができます。ここではElementorに付属するウィジェットをひとつひとつ検証していこうと思います。
ウィジェットの設定
ウィジェットをカラムにドロップしたり、ドロップしたウィジェットを選択するとウィジェットリストが表示されていたエリアがウィジェットの設定画面に切り替わります。設定画面の内容はウィジェットによって異なります。
設定はウィジェットの設定画面、スタイル、高度な設定のタブに分かれています。
スタイルはそのウィジェットのスタイルを指定するのでウィジェットによって異なりますが、高度な設定はセクションに対する指定が主な目的なので基本的には共通のものが表示されます。
基本ウィジェット
内部セクション
カラムの中に入れこむカラムです。
見出し
Hタグを単独で指定できます。
画像
ライブラリから画像を選択します。
テキストエディター
テキストエリアです。
動画
セルフホスティング、YoutubeもしくはVimeoのurlから動画埋め込みます。
ボタン
設定したスタイルでボタンを設置します。
区切り線
設定したスタイルで罫線を設置します。
Googleマップ
Googleマップを埋め込みます。
アイコン
Font Awesomeからすきなアイコンを配置できます。
Elementorで爆速ウェブ制作
プロ版ウィジェット
以下のウィジェットはPRO版を購入したときのみ使用可能になるウィジェットです。PRO版の購入は1年単位のサブスクライブ方式になっていて、1サイト49ドル、５サイト99ドル、1000サイト199ドルと3コース用意されています。
ポスト
条件に従って投稿をリスト表示します。
ポートフォリオ
投稿、固定ページなどへの画像を自由に配置できます。
Gallery
イメージファイルからギャラリーを作成します。
フォーム
フォームを設置します。
ログイン
ログインセクションを設置します
スライド
スライダーを設置します。
ナビメニュー
WordPressの外観で設定したメニュー内容呼び出します。
アニメーションヘッドライン
アニメーションつきの見出しを設置できます。
プライスリスト
メニューのような価格表を作成できます。
プライステーブル
カード状に価格とその内容をレイアウトできます。
フリップボックス
カード上のセクションを表・裏でアニメーションします。
コールトゥアクション
画像と共に大きなボタンを設置します。
Media Carousel
画像や映像を入れ替わり立ち代わり表示します。
Testimonial Carousel
画像と文章のセットを入れ替わり立ち代り表示することができます。
レビュー
カード上のセクションを表・裏でアニメーションします。
Table of Contents
見出しからページの目次を生成します。
カウントダウン
カウントダウンのアニメーションセクションを設置します。
シェアボタン
選択したSNSシェアボタンを設置することができます。
Blockquote
引用ブロックを設置します。
Facebookボタン
いいねボタンを設置します。
Facebook Comments
Facebookコメントを埋め込みます。
Facebook Embed
Facebookの投稿記事をurlで埋め込みます。
Facebook Page
Facebookページを呼び出して埋め込みます。
テンプレート
テーマビルダーで作ったテンプレートを呼び出します。
Lottie
AirBnbのLottieを埋め込みます。
Elementorで爆速ウェブ制作
一般ウィジェット
画像ボックス
画像とテキストのセットを配置します。
アイコンボックス
アイコンとテキストのセットを配置します。
Star Rating
評価を星の数で設置します。
画像カルーセル
画像をカルーセル表示します。
Basic Gallery
画像のコレクションを配置します。
アイコンリスト
アイコンとテキストのセットをリスト表示します。
カウンター
カウントアップ、ダウンのアニメーションつきで数字を表示します。
プログレスバー
アニメーションするプログレスバーを設置できます。
推薦文
画像のコレクションを配置します。
タブ
タブ切り替えのできるセクションを設置します。
アコーディオン
フォーカスしている部分以外を折りたたむアコーディオンを設置します。
切り替え
アコーディオンに似ていますが同時に複数のセクションを開いたままにしておけます。
ソーシャルアイコン
Font Awesomeまたはカスタムアイコンを設置できます。
アラート
カード状になったメッセージエリアを表示します。
SoundCloud
SoundCloudに掲載されている曲をプレーヤーつきで埋め込むことができます。
ショートコード
エディター内で呼び出したショートコードをプレビューすることができます。
HTML
HTMLを入力することができます。
メニューアンカー
ページ内にアンカーを設置することができます。
サイドバー
外観＞ウィジェットメニューの中にウィジェットのセットを設定します。
続きを読む
投稿に差し込むことによって、続きを読むボタンを設置できます。
サイトウィジェット
Site Logo
外観＞カスタマイズで設定したサイトロゴを設置します。
Site Title
サイトのタイトルを呼び出します。
Page Title
ページのタイトルを呼び出します。
ナビメニュー
WordPressで保存したメニューを呼び出します。まったく同じウィジェットがプロ版のセクションにもあります。
Search Form
サイト内検索の検索窓を設置します。
Sitemap
サイトマップを生成して表示します。
Breadcrumbs
パンくずを生成して表示します。
Elementorで爆速ウェブ制作
個別ウィジェット
Post Title
投稿のタイトルを呼び出します。
Post Excerpt
投稿の概要を呼び出します。
アイキャッチ画像
投稿のアイキャッチ画像を呼び出します。
Table of Contents
見出しから、目次を自動生成して表示します。プロ版ウィジェットセクションにも同じボタンがあります。
Author Box
執筆者情報を表示します。
Post Comments
投稿に対するコメントを表示します。
Post Navigation
投稿ナビゲーションボタンを設置します。
Post Info
投稿のメタ情報を表示します。
