WordPressでブログやホームページのデザインをなるべくコードを使わずにおしゃれにしたい方向け。
当記事では、Elementor（エレメンター）とは何か、そしてElementorの使い方まで詳しく解説していきます。これからElementorの利用を考えている人は是非ご覧下さい。
Elementorとは
Elementorとは、思い通りのサイトが簡単に作成できるWordPressプラグインの一つです。
2023年6月時点で有効ダウンロード数が500万を突破している超人気プラグイン。
このようなサイトも、簡単に作成できます。
一般的にWordPressのブログやサイトをおしゃれなデザインに変えようと思うと、HTML・CSS・JavaScript・PHPなどの専門知識を必要とします。
ですが、Elementorを使用すればそれら専門知識を必要とせず、デザインを確認しながら直感的におしゃれなサイトが作成可能です。
似たようなサービスで、Wix・STUDIO・Jimdoなどが挙げられますが、Elementorはこれらよりもデザインの自由度が高くSEOにも強いのが特徴です。
Elementorで出来ること
Elementorには無料版と有料版があり、今回は無料版で出来ることをご紹介します。
無料版と言っても出来ることはかなり豊富です。
下図はElementorの無料版で使用可能なウィジェット一覧です。図下部にそれぞれの機能をまとめました。
本記事の後半に無料版でデモサイト作成をしている動画を載せました。ここで深く理解しなくても大丈夫です。» 動画までスキップしたい方はこちら
- 内部セクション：メインセクションのカラム内にさらに新しいセクションを生成。
- 見出し：H1〜H6までの見出しを生成。
- 画像：画像ファイルを挿入。
- テキストエディター：テキストを挿入。
- ビデオ：YouTube動画や動画ファイルを挿入。
- ボタン：ボタンを生成。
- 星の評価：商品などの評価を、星を用いて表すデザインが可能。
- ディバイダー（区切り）：区切り線を挿入。
- Googleマップ：Googleマップを挿入。
- アイコン：Font Awesomeのアイコンを挿入。
- 画像ボックス：画像とテキストを縦に並べたボックスを挿入。
- アイコンボックス：アイコンとテキストを縦に並べたボックスを挿入。
- 基本ギャラリー：画像を複数挿入できるギャラリーを生成。
- 画像カルーセル：複数の画像が横にスライドするカルーセルを生成。
- アイコン一覧：この表のようなリストを生成。リストのアイコンはFont Awesomeのアイコンに変更可能。
- カウンター：数字をアニメーションを用いて表現する。
- スペーサー：上下のスペースを挿入。
- お客様の声（推薦文）：お客様レビューのようなものが表現可能。
- タブ：同じセクション内で複数の情報を記載できるタブを生成。
- アコーディオン：当ホームページの「よくある質問」で使用しています。クリック操作により情報を出したり隠したりできる。
- トグル（切り替え）：アコーディオンとほぼ同じ。
- ソーシャルアイコン：各種SNSのアイコンを挿入。
- プログレスバー：動きのある棒グラフを生成。
- サウンドクラウド：soundcloud.comと連携し、音楽メディアを挿入。
- ショートコード：他プラグインのショートコードを挿入。
- HTML：HTMLを挿入。
- メニューアンカー：メニューアンカーにIDを設定することで、同ページ内のリンクが簡単に生成できる。
- アラート：テキストをより目立たせるデザインを生成。
- サイドバー：WordPressのウィジェットを挿入。
- テキストパス：テキストを曲線や丸型に変形できる。
- 容器（コンテナ）：Flexboxを採用した、内部セクションに似たウィジェット。若干CSSの知識が必要になるが、内部セクションよりも表現の自由度が高い。
Elementorのデメリット
ここまでElementorの良さを語ってきましたが、もちろんデメリットも存在します。
- 重いウィジェットを多用するとサイトスピードが遅くなる
- デザインにこだわりたい場合は、HTML・CSSの知識が多少必要
ページスピードを重視するのであれば動きの多いウィジェットの多用は避けましょう。
また、HTML・CSSは基礎レベルを覚えておくとデザインの幅が広がります。基礎は1日で覚えられるレベルなので、時間があれば試してみるといいですね。
HTML・CSSの基礎学習は「ドットインストール」がおすすめです。僕も基礎はこれを見て覚えました。
最後に：Elementor（無料版）の使い方
最後にElementor無料版を使用して簡単なデモサイトを作ってみました。
無料版ウィジェットを網羅的に使用したので、使い方の参考になれば幸いです。
※少しCSSを使用しました。念の為コピペ置いておきますね。
.mawaru {
animation: rotate-anime 50s linear infinite;
}
@keyframes rotate-anime {
0% {transform: rotate(0);}
100% {transform: rotate(360deg);}
}
↓デモサイト作成工程の動画。
動画内での不明点や、それ以外でもご質問があればお答えします。X（旧Twitter）のDMで受け付けおりますので、お気軽にどうぞ。
最後までご覧いただきありがとうございました。
質問はTwitterのDMで受け付けておりますので、お気軽にどうぞ。