こんにちは、ユキです＾＾
WordPressでページビルダー系プラグインであるElementorを使えば、
誰でも簡単にWebページが作れると言われてるわ。
でも実際には、いくらElementorを使っても初心者が1からWebページを作るのは
そんなに簡単じゃないのよねぇ。
Elementorを使って簡単にWebページを作るには、
Elementorにあらかじめ用意されている「テンプレート」を活用することが重要なのよ。
そこで活用方法や使える数を増やす方法など、
Elementorのテンプレートについて詳しく見ていきましょう。
Elementorは無料版でも約40種類のテンプレートが使える
Elementorには無料版と有料版があるんだけど、それぞれ
・無料版・・・約40種類
・有料版・・・約130種類
のテンプレートが用意されてるのよ。
Elementorではパソコンの壁紙みたいなものがテンプレートとして用意されてて、
そのテンプレートをベースに編集を加えてWebページを作っていくのね。
テンプレートにテキストを書き加えたり、テンプレートの画像を他のものに
置き換えたりできるし、複数のテンプレートを組み合わせたりすることもできるわ。
だからElementorのテンプレートを使っても、
オリジナルのWebページを作ることができるってわけ。
WordPressではWebページのデザインには通常はテーマを使う
WordPressでWebページを作る場合、
通常は「テーマ」と「プラグイン」という2つのツールを使うわ。
テーマを使ってWebページのデザインを作り、
プラグインを使ってデザインしたWebページに色んな機能を付けていくのよ。
だから、Diviなどのテーマを使ってWebページのデザインを作って、Elementorなどの
プラグインを使ってWebページに色んな機能を付けるのが本来の作りからなの。
でもElementorやDiviといった一部のプラグインやテーマは両方の機能を
兼ね備えてて、プラグインもしくはテーマだけでWebページを作り上げることが
できるようになってるのね。
Webページのデザインが本職であるテーマに比べると使えるテンプレートの数は
少ないけど、プラグインだけでWebページが作れるのがElementorの
大きなメリットなのよ。
Elementorのテンプレートの使い方
じゃあElementorで、テンプレートを使ってWebページをデザインするには
どうすれば良いのかを説明するわね。
パソコンにWordPressがインストールされてて、さらにWordPressのプラグインとして
Elementorもインストールされてる前提で説明していくわ。
WordPressの管理画面の左側にあるメニューで「固定ページ」→「新規追加」を選ぶと、
・記事タイトル
・パーマネントリンク
・テンプレート
の3つを設定する画面が表示されるのよ。
記事タイトルとパーマネントリンクについてはここでは割愛するとして、
「テンプレート」で「Elementorキャンバス」を選択してね。
キャンバス以外に「デフォルト」と「全幅」って選択肢があるんだけど、
デフォルトと全幅だとヘッダーやフッター、サイドメニューなんかが表示されちゃうわ。
Elementorのテンプレートにはヘッダー・フッターやサイドメニューを含んだものもあるし、
後でElementorを使って機能として付け加えることもできるの。
だからテンプレートを使ってWebページを作る場合は、ヘッダーやフッターなどが
一切表示されないまっさらな状態のキャンバスを使った方が良いのよ。
Elementorの編集画面にテンプレートを挿入
設定画面でElementorキャンバスを選び、まっさらな状態のElementorの編集画面が
表示されたら、そこにElementorのテンプレートを挿入するわ。
通常ElementorでWebページを作る場合は編集画面の「ウィジェットをここにドラッグ」で
「＋」アイコンをクリックするんだけど、テンプレートを使う場合は「フォルダ」アイコンを
クリックするのよ。
フォルダアイコンをクリックするとElementorで使えるテンプレート一覧が表示されて、
テンプレートをクリックすると画面いっぱいに大きく表示されるわ。
一覧から使いたいテンプレートを選んでクリック、
大きく表示されたら画面右上にある「挿入する」ボタンをクリックすればOK。
Elementorの編集画面に選んだテンプレートが表示されて、編集できるようになるのよ。
ただしテンプレートの右上に「PRO」と表示されてるものは有料版でのみ使用可能な
テンプレートで、無料版では利用できないから注意してね。
テンプレートを編集する
テンプレートをそのまま使うと、どこかで見たことがあるようなWebページになるから、
編集してオリジナルのWebページを作り上げていくの。
テンプレートのテキストを書き換えることもできるし、
テンプレートに使われてる画像を他のものに置き換えることも可能よ。
さらにテンプレート上にセクションを配置して、
セクション内に新たにウィジェットを追加していくこともできるわ。
いくらElementorを使ってもWebページを1からデザインしていくのは大変だけど、
テンプレートを使うことでWebページの大部分のデザイン作りを省略することが
できるのね。
その分、テキストを考えたりWebページに機能を付けることに時間を割けるから、テンプレートを使った方がかえってオリジナリティのあるWebページに仕上げることができるかもしれないわ。
複数のテンプレートを組み合わせる
Elementorでは、1つのテンプレートから新しいテンプレートを作って、
別のテンプレートと組わせるってこともできるのよ。
例えばElementorのテンプレートを一覧を見てて、ページの全体のデザインはAという
テンプレートが良いんだけど、画像はBというテンプレートの方が良いってことが
あるかもしれないじゃない。
そういった場合に、Bというテンプレートの画像を切り出して新しいテンプレートを作り、
それをAというテンプレートに組み合わせることができるってわけ。
このようにElementorではテンプレート同士を組み合わせることもできるから、
無料版にはテンプレートが約40種類しかないけど、
組わせることで豊富なバリエーションを生み出すことができるのね。
ただし無料版だとセクション単位での切り出ししかできないから、
テンプレートによっては画像だけ切り出すことができないこともあるわよ。
テンプレートの気に入った部分を切り出して新しいテンプレートとして保存
Elementorでテンプレート同士を組み合わせるには、画像などテンプレートの
気に入った一部分を切り出して新しいテンプレートとして保存する必要があるわ。
まず切り出したい画像などがあるテンプレートをElementorの編集画面に挿入して、
切り出したい画像などの部分を選択するの。
そうするとセクション部分が青線で囲まれて上にメニュータブが表示されるから、
そのメニュータブを右クリックして「テンプレートとして保存」を選択。
あとは任意の名前を入力して「保存」ボタンをクリックすれば、
切り出した部分を新しいテンプレートとして保存することができるのよ。
別のテンプレートに新しく作ったテンプレートを組み合わせる
切り出して新しいテンプレートを作ったら、
今度はそれを別のテンプレートに組み合わせるの。
WordPressの管理画面で「固定ページ」→「新規追加」を選んで、テンプレートの設定を
「Elementorキャンバス」にしてまっさらな状態のElementorの編集画面を表示させるわ。
次に「ウィジェットをここにドラッグ」の欄にあるフォルダアイコンをクリックして、
一覧からWebページのベースとなるテンプレートを選んで編集画面に挿入するのよ。
ベースとなるテンプレートを挿入したら、
新しく作ったテンプレートを配置したい場所にセクションを追加するの。
セクションを追加したら再度「ウィジェットをここにドラッグ」の欄にあるファルダアイコンを
クリック、画面上部のタブを「ページ」から「テンプレート」に切り替えるのね。
そうすると使用可能なテンプレート一覧が表示されるから、
さっき切り出して新しく作ったテンプレートを選択して「挿入する」をクリックすればOK。
これでベースとなるテンプレートに切り出して新しく作ったテンプレートを組み合わせた、
オリジナリティのあるWebページができるわ。
Elementorで使えるテンプレートを増やす方法
Elementorで使えるテンプレートの数を劇的に増やす方法を紹介するわ。
そもそもElementorはWebページに機能を追加するプラグインだから、
Webページをデザインするためのテンプレートはそんなに多く用意されてないのよ。
無料版のElementorだと約40種類のテンプレートしか使えないから、
テンプレート同士を組み合わせてバリエーションが増やせると言っても限りが
あるのよねぇ。
そこでプラグインであるElementorに「envato elements」というアドオンをプラスすることで、
Elementorで使えるテンプレートを何と700以上も増やすことができるの。
補足だけど、アドオンっていうのはプラグインを拡張するツールのことで、
プラグイン用のプラグインといったところかしら。
（厳密にはenvato elementsはアドオンじゃなくてWordPressのプラグイン）
有料版のElementorでも使えるテンプレートは130ほどだから、
700以上がいかに多いか分かるわよね。
ちなみにenvato elementsは元々画像のダウンロードサービスで、
月額料金を払うことで5000万以上の画像やテンプレートが自由に使えるわ。
そのenvato elementsがWordPress用のプラグインとしても提供されてて、
無料で利用できるようになってるのよ。
WordPressにenvato elementsをイントール
じゃあ実際にどうすればElementorで使えるテンプレートを増やせるのかを
紹介するわね。
まずWordPressを起動して、管理画面の左側にあるメニューから「プラグイン」→
「新規追加」の順に選ぶのよ。
そして画面右側にある「キーワード」の欄に「envato elements」と入力して検索、
ヒットしたenvato elementsの「今すぐインストール」をクリック。
envato elementsのダウンロードとインストールが完了したら「有効化」ボタンをクリック、
これでWordPressでenvato elementsが使えるようになったわ。
インストールが完了したら、WordPressの管理画面の左側のメニューで「プラグイン」→
「インストール済みのプラグイン」に進んで、envato elementsがちゃんとインストール
されてることを確認しておきましょう。
envato elementsでテンプレートを探す
envato elementsがインストールできたら、
WordPressの管理画面の左側にあるメニューで「Elements」を選ぶの。
WordPressでElementsを選んだ後に、入力欄と2つのチェックボックスが表示されたら、
入力欄にメールアドレスを入力してチェックボックスの2つともにチェックを入れて
「Continue」をクリックしてね。
そうすると700を超えるテンプレート一覧が表示されるから、
その中から使いたいテンプレートを選ぶのよ。
テンプレートはカテゴリ分けされてるから、
作りたいWebページに合ったデザインのものを比較的見つけやすいはずだわ。
ただenvato elementsは基本的に英語表記のため、
英語が苦手な場合にはちょっと使いにくいかもしれないから気を付けてね。
テンプレートをインポートしてElementorで編集
envato elementsで使いたいテンプレートが見つかったら、
それを編集画面に反映させてElementorで編集していくのよ。
使いたいテンプレートをクリックしてプレビューを表示し、画面右側にある
・Import Template
・Create New Page
のいずれかのボタンをクリック。
「Create New Page」をクリックする場合は、ボタンをクリックする前に
「Enter a Page Name」の欄に任意のページ名を入力しておいてね。
「Import Template」ボタンを押すとElementorのマイテンプレートに保存、
Create New Pageを押すとそのままElementorの編集画面に選択したテンプレートが
反映されるわ。
テンプレートをElementorに保存した場合は、WordPressの管理画面左側のメニューで
「固定ページ」→「新規追加」を選んでElementorキャンバスで編集画面を開くの。
そして「ウィジェットをここにドラッグ」の欄でフォルダアイコンをクリックして、
画面上部のタブを「テンプレート」に切り替え、保存したテンプレートを選び
「挿入する」をクリックすれば編集画面に保存したテンプレートが反映されるのよ。
あとはテキストを書き換えたり、画像を入れ替えたりするなどElementorで編集して
思い通りのWebページを作りましょう。
envato elementsには有料版のElementorでないと使えないテンプレートもある
envato elementsは基本的に無料で使えるんだけど、envato elementsのテンプレートの
中には有料版のElementorでないと使えないものもあるわ。
Elementorのテンプレートで右上に「PRO」と表示されてるものは有料版でしか
使えないのと同じで、envato elementsでも「PRO」の表示が付いてるものは
無料版のElementorでは使えないのよ。
ただでさえenvato elementsを使うとElementorで使えるテンプレートが増えるけど、
有料版のElementorだとさらに使えるテンプレート数が増えるってわけ。
だから有料版のElementorを使ってるんだったら、
envato elementsも使った方が絶対にお得なのね。
envato elements以外のテンプレートが増やせるElementorのアドオン
envato elements以外にも、
Elementorで使えるテンプレートの数を増やせるアドオンがいくつかあるわ。
代表的なアドオンとしては
・Element Pack
・Ultimate Addons For Elementor
の2つね。
「Element Pack」の方は250以上、「Ultimate Addons For Elementor」の方は100以上の
テンプレートを追加することができるようになってるのよ。
テンプレートの数だけでみるとenvato elementsには敵わないんだけど、先の2つの
アドオンはテンプレート以外にもセクションやウィジェットなんかも追加できるの。
先の2つ以外にもElementorにはアドオンがいくつかあるから、envato elements以外
にも自分に合ったアドオンを探して追加すると良いんじゃないかしら。
ただしElementorのアドオンには有料のものも多いから、
利用する際には気を付けないとダメよ。
WordPressのテーマで作ったWebページをElementorで編集する
元々ElementorはWordPressのページビルダー系プラグインで、
WordPressではWebページのデザインを作る際にはデザインビルダーであるテーマを
使うのが本来の姿なの。
だからデザインビルダーであるテーマを使って作ったWebページを、
Elementorを使って編集するといったこともできるのよ。
例えば「Astra」というテーマを使ってデザインを作ったWebページを、
Elementorで編集するとするわ。
まずWordPressの管理画面左のメニューで「外観」→「新規追加」を選び、
画面右の検索欄に「Astra」と入力して検索。
Astraの「今すぐインストール」ボタンをクリックして、WordPressにAstraがインストール
されたら「有効化」ボタンをクリックすれば、WordPressでAstraが使えるようになるの。
AstraでWebページのデザインを作る
WordPressにAstraをインストールしたら、
WordPressの管理画面左のメニューで「外観」→「Astra設定」へ進むの。
そしたら画面右側に「ご存知でした？～」という案内文と「インポータ―プラグインを
有効化」というボタンが表示されるからクリック。
「Select Page Builder」と表示が出たらElementorを選んで「Next」をクリックすると、
Astraで使えるテンプレートの一覧が表示されるわ。
一覧からWebページに使いたいテンプレートを選んでクリック、
テンプレートの詳細が表示されたら
・Import Complete Site
・Import ○○ Template
のどちらかのボタンをクリックすればWordPressにテンプレートをインポートすることが
できるわ。
Astraのテンプレートの中には複数ページが利用できるものもあって、
「Import Complete Site」ボタンを押すとテンプレートの全てのページが
インポートされるの。
テンプレートの詳細画面で1つのページを選択して「Import ○○ Template」ボタンを
押すと、選択したページだけインポートすることができるのよ。
後はWordPressの管理画面左のメニューで「外観」→「Astra設定」に進むと、
ページデザインの編集ができるわ。
WordPressの管理画面左のメニューの「固定ページ」でAstraでデザインした
Webページを開き、画面右側で「Elementorで編集」をクリックすると、Astraで作った
WebページをElementorで編集できるのよ。
Elementorと相性の良いテーマを使う
テーマでWebページをデザインして、それをElementorで編集する場合、
Webページのデザインに使うテーマはElementorと相性の良いものにしましょう。
実はWordPressのプラグインとかテーマの中には、
WordPressと直接関係が無いいわゆるサードパーティが提供してるものもあるわ。
そのため、プラグイン同士とかプラグインとテーマの間には合う合わないといった
相性の良し悪しみたいなことがあるのよねぇ。
Elementorと相性のあまり良くないテーマを使ってデザインしたWebページを
Elementorで編集しようとすると、サーバーエラーでElementorが使えなくなることが
あるの。
だからテーマを使ってデザインしたWebページをElementorで編集する場合は、
Elementorの相性の良いテーマを使った方が良いってわけ。
ちなみにElementorと比較的相性の良いテーマは
・Astra
・Hello
・OceanWP
・Layers
・GeneratePress
・Hestia
・Zakra
・Neve
などよ。
反対にElementorとあまり相性が良くないテーマとしては
・twenty fifteen、sixteen、seventeen、eighteen
・TCD
・Divi
なんかが挙げられるのね。
相性の良くないテーマだからって必ずサーバーエラーになるわけじゃないんだけど、
相性の良いテーマに比べるとサーバーエラーになるリスクが高いの。
またサーバーエラーにならなくても、編集時の動作が重くなるといったことがあるから、
できればElementorと相性の良いテーマを使うことをおすすめするわ。
まとめ
Elementorでのテンプレートの使い方やElementorで使えるテンプレートの増やし方
なんかについて詳しく紹介したわ。
Elementorを使えばWebページが簡単に作れるんだけど、テンプレートを
活用することでさらに簡単にWebページが作れるようになるのよ。
またテンプレートを使ってWebページを作ることで、
Webページの大まかな構成とかデザインといったものが分かってくるのね。
だから初心者はまずテンプレートを使ってWebページを作ってみて、
Webページ制作に対する理解を深めると良いんじゃないかしら。
