Elementor

～ウィジェットまとめサイト～

ウィジェット種類

基本ウィジェット

  • 内部セクション
  • 見出し
  • 画像
  • テキストエディター
  • 動画
  • ボタン
  • 区切り線
  • スペーサー
  • Googleマップ
  • アイコン

プロ版ウィジェット

  •  ポスト
  • ポートフォリオ
  • Gallery
  • フォーム
  • ログイン
  • スライド
  • ナビメニュー
  • アニメーションヘッドライン
  • プライスリスト
  • プライステーブル
  • フリップボックス
  • コールトゥアクション
  • Media Carousel
  • Testimonial Carousel
  • レビュー
  • Table of Contents
  • カウントダウン
  • シェアボタン
  • Blockquote
  • Lottie

一般ウィジェット

  • 画像ボックス
  • アイコンボックス
  • スター評価
  • 画像カルーセル
  • ベーシックギャラリー
  • アイコンリスト
  • カウンター
  • プログレスバー
  • 推薦文
  • タブ
  • アコーディオン
  • 切り替え
  • ソーシャルアイコン
  • アラート
  • SoundCloud
  • ショートコード
  • HTML
  • メニューアンカー
  • サイドバー

サイトウィジェット

  • Site Logo
  • Site Title
  • Page Title
  • Search Form
  • Sitemap

基本ウィジェット

内部セクション

カラムの中にさらにセクションを追加することができるウィジェット。

・内部セクションウィジェットの中にもカラムがある。

・内部セクションウィジェットの中に 内部セクションウィジェットを入れることはできない。

Example of use

見出し

見出しを追加することができるウィジェット。

・強調したい言葉がある時に使う。

・HTMLのh1、h2などの見出しタグが設定されているウィジェット。

Example of use

Sample

Sample

Sample

Sample

画像

ページに画像を追加することができるウィジェット。

・好きな画像を追加可能。

・画像サイズ、キャプション、リンクなども設定可能。

・画像サイズは読み込み時間に影響するため、シビアに設定する必要がある。

Example of use

テキストエディター

自由にテキストを入力できるテキストボックスを追加できるウィジェット。

・テキストのフォントや大きさ、色なども設定可能。

・文字の配置は「スタイル」で設定するのがオススメ。

Example of use

動画

Youtubeやvimeoなどの動画を簡単に表示することができるウィジェット。

・動画のソースとして、「Youtube」「Vimeo」「Dailemotion」 「独自アップロード」が選べる。

・動画をクリックすると再生されてしまうので、 編集したい時は、動画の右上の鉛筆マークをクリックする。

・ミュート設定をしていないと自動再生されない。

Example of use

ボタン

ボタンを追加することができるウィジェット。

・ボタンの文字や色を変更できることはもちろん、アニメーションの設定などもできる。

・均等割付は、横幅めいいっぱいにする設定。

Example of use

ここをクリック
ここをクリック
ここをクリック

区切り線

区切り線を追加することができるウィジェット。

区切り線の太さや色の変更、種類（ドットなど）も設定可能。

Example of use

スペーサー

スペースを追加することができるウィジェット。

・スペースの幅を調整できる。

・スペースとして使うのではなく、文字の背景を作る目的でも使える。 （ワンポイントのデザインを作ることも可能。）

Example of use

Googleマップ

Googleマップを追加することができるウィジェット。

表示したい住所を入力することで、簡単に設定可能。

Example of use

アイコン

Elementorで用意されているアイコンを表示することができるウィジェット。

・アイコンの種類はかなり多く、アイコンの色も変更可能。

・svgファイルの特徴は、ファイルが軽いこと。

・アイコンを入手するときに使えるサイト

⓵https://www.flaticon.com/ 　②https://iconbox.fun/ 　③https://icomoon.io/ 　④https://fontello.com/

Example of use

プロ版ウィジェット

ポスト

WordPressで作った投稿／固定ページを一覧で表示することができるウィジェット。

ポートフォリオウィジェットと似ている。

ポートフォリオ

WordPressで作った投稿記事をギャラリーのように表示することが出来るウィジェット。

ポストウィジェットと似ている。

Gallery

画像をギャラリー形式で表示することができるウィジェット。

・「コンテンツ」のLazylord機能は、画像の読み込みスピードを調整するためのもの。「はい」にしておくと、ページを読み込むスピードが速くなる。

フォーム

お問い合わせフォームや申請フォームを作成することが出来るウィジェット。

コンテンツ内の「Actions After Submit」は、送信ボタンが押された後の動きを設定するもの。

ログイン

WordPressの管理画面にログインできるウィジェット。

会員サイトを作成した場合に、ユーザーにログインしてもらう時などに使う。

追加オプション
・Redirect After Login
→ログインした後に別の指定したページに飛ばすことができる。

・Redirect After Logout
→ログアウトした後に別の指定したページに飛ばすことができる。

・Lost your password？
→パスワードを忘れた時用にパスワードを再発行するためのページへ飛ばすことができる。

・Remember Me
→ログイン履歴を残すことができる。

・Logged in Message
→ログインした時のメッセージの表示を選ぶことができる。

・Custom Label
→ラベルを編集できる。

スライド

スライドショー形式でタイトルと説明文、ボタンを表示することができるウィジェット。

背景に設定した写真を全画面に写したい場合のサイズ設定は「カバー」にする。

ナビメニュー

ナビゲーションメニューを設置できるウィジェット。

WordPress→外観→メニューでメニューを作ってから、Elementorで編集する。

アニメーション
ヘッドライン

見出しにタイピングや丸をつける動作を付けることができるウィジェット。

・見出しを目立たせたい時に使う。

・ハイライトとRotatingで少し違ってくるのは「スタイル」。

プライスリスト

レストランにあるようなメニュー表を作成することができるウィジェット。

説明文の行の高さは1以上にする。

プライステーブル

ウェブサービスにあるようなタイトルと機能一覧、購入ボタンが備わった価格表を作成することができるウィジェット。

アイコンの色は「コンテンツ」の設定が優先される。

フリップボックス

通常時は表面が表示されているが、マウスカーソルを置くと裏面が表示され、ボタンを表示することができるウィジェット。

マウスカーソルを合わせた時に別の見た目になる。

コールトゥ
アクション

画像、見出し、テキストエディター、ボタンがセットになったウィジェット。

商品の購入や何かしらのキャンペーンに登録することを促すためのウィジェット。

Media Carousel

画像をスライドショー形式で表示することができるウィジェット。

設定できる動画は「YouTube」と「Vimeo」。

Testimonial Carousel

推薦文をスライドショー形式で表示することができるウィジェット。

レビュー

”お客様の声”をカルーセル形式で表示することができるウィジェット。

カウントダウン

カウントダウンタイマーを表示することができるウィジェット。

・カウントダウン終了後に指定したページに飛ばすことができる。

・「コンテンツ」のタイプ
　①Due Date
　→指定した日時までのカウント。
　②Evergreen Timer
　→このページにアクセスしてから
　　指定した日時までのカウント

・表示方法は、「Block」にしておく。

シェアボタン

SNSのページをシェアできるウィジェット。

・LINEのシェアはできない。

・色を選択する際に、「カスタム」を選ぶと表示しているアイコンの色が全て同じになる。

Blockquote

テキストエディター、人の名前、Tweetボタンがセットになったウィジェット。

使えるのはTwitterだけ。

一般ウィジェット

画像ボックス

画像・見出し・テキストエディターがセットになったウィジェット。

画像サイズを変更することは、デザインの他、画像の読み込み時間にも関わる。

アイコンボックス

アイコン・見出し・テキストエディターがセットになったウィジェット。

スター評価

星での評価を表示することができるウィジェット。

・お店や商品の評価を表示するときに使える。

・星の数は、最大10まで表示することができる。

画像カルーセル

画像をスライドショーのようにカルーセル表示することが出来るウィジェット。

・表示させたい画像を追加することで簡単に使える。

・「コンテンツ」の部分でレスポンシブ対応しているのは、表示するスライドとスクロールするスライド。

ベーシック
ギャラリー

登録した画像を一覧で表示させることができるウィジェット。

・ポートフォリオのように使うこともできる。

・モバイルの場合は１カラムで表示される。

アイコンリスト

アイコンとテキストエディターがセットになったものをリスト形式で表示することができるウィジェット。

サービスの特徴や強みを表示する時に使われる。

カウンター

動きのある数字とテキストエディターがセットになったウィジェット。

・セール価格などに動きを付けて表示することができる。

・アニメーションの設定時間は、1秒＝1.000ms

プログレスバー

テキストエディターとアニメーションがセットになったウィジェット。

・達成度などを視覚的に表示することができる。

・「スタイル」のプログレスバーの背景色は、バーの色がない部分に反映される。

推薦文

”お客様の声”を表示することができるウィジェット。

画像の位置は、上とアサイドしか選べない。

タブ

タブごとに任意のテキストを入力することができるウィジェット。

・サービスのプラン別の説明であったり、向きを変えて制作事例を並べたりもできる。

・「スタイル」のナビゲーション幅は、タブタイトルとコンテンツの間に適応される。

 

アコーディオン

タイトルとテキストがセットになっており、タイトルをクリックすることで、テキストを開いたり閉じたりすることができるウィジェット。

・Q&Aなどを簡単に作ることができる。

・一度に開けるのは1つのテキストだけ。

切り替え

タイトルとテキストがセットになっており、タイトルをクリックすることで、テキストを開いたり閉じたりすることができるウィジェット。

アコーディオンウィジェットとほぼ同じだが、全てのテキストを開いておけるのが特徴。

ソーシャルアイコン

SNSアイコンを簡単に並べて表示することができるウィジェット。

・ホームページを作ったりするときによく使われる。

・ソーシャルアイコンの色を変更する場合、「コンテンツ」の編集画面で設定した色が優先される

アラート

テキストエディターをより目立たせることができるようなウィジェット。

ウィジェット右上の「×」ボタンを押すと消すことができる。

サイトを訪問してきた人にお知らせなどをしたい時に使う。

SoundClous

SoundCloudという音声メディアを埋め込めるウィジェット。 （音楽を再生するためのウィジェット。）

海外で多く使われているが、日本ではあまり使われていない。

ショートコード

WordPressで使えるショートコードを埋め込めるウィジェット。

ショートコードを貼り付けると、貼り付けたショートコードがもつプラグインの機能をページ上に表示することができる。

HTML

HTMLコードを埋め込めるウィジェット。

・Googleで検索して、コピペして使うこともできる。

・HTMLとCSSをコピペできる便利なサイト

①https://jajaaan.co.jp/css/ 　②https://copypet.jp/ 　③https://photoshopvip.net/114044

メニューアンカー

ページ内にアンカーリンクを埋め込めるウィジェット。

ボタンのリンクにアンカーリンクIDを設定したりすると、アンカーリンクを埋め込んだ場所まで飛べるようにすることができる。

サイドバー

サイドバーを追加することができるウィジェット。

・WordPressで設定した内容がそのまま反映される。

・欠点は細かな設定が難しいところ

・基本的にあまり使わない。

サイトウィジェット

Site Logo

サイトのロゴを表示することができるウィジェット。

「カスタマイズ」の「サイト基本情報」にある「ロゴ」からアップロードしたものが表示される。

Site Title

サイトのタイトルを表示することができるウィジェット。

「カスタマイズ」の「サイト基本情報」にある「サイトのタイトル」からアップロードしたものが表示される。

Page Title

作成しているページのタイトルを表示することができるウィジェット。

左下の歯車マークから設定することができる。

Search Form

検索フォーム（サイト内の記事を検索する時に使うフォーム）を表示することができるウィジェット。

Sitemap

WordPressの中にあるページの一覧を表示することができるウィジェット。

「コンテンツ」の追加オプションは、一覧に表示したくない時に使う。