WordPressの新しいエディタGutenberg(グーテンベルク)になって編集画面がえらい変わりとまどっているえれくりです。いまのところElementorも使えてるようですが様子見です。
さて、とても簡単にWEBデザインができるElementorだけど、最初にどのような設定をすればよく分からない方も多いと思います。
今回は設定の解説をします。
まずはWordPressをレンタルサーバーにインストールします。
レンタルサーバーへのインストールの仕方はこちらで検索お願いします。
Google検索「さくらレンタル WordPressインストール」
https://goo.gl/MCZp1s
Google検索「エックスサーバー WordPressインストール」
https://goo.gl/BntLua
WordPress管理画面>プラグイン>新規追加より「Elementor」で検索をかけます。インストールして有効化します。

固定ページまたは投稿ページに「Elementorで編集」というボタンが表示されます。

たとえば、投稿ページにElementorを表示させたくない場合、管理画面>Elementor>設定より、投稿タイプから「投稿」のチェックを外し「変更を保存」すると投稿ページではElementorで編集できなくなります。
投稿ページ>新規追加
「Elementorで編集」ボタンを選択してElementorを起動します。
起動すると左下の「設定」ボタンより、ページレイアウトを「Elementorキャンバス」に設定します。


これで真っ白な画面が表示されたのでElementorを使ってWEBデザインを作っていきます。まずはこちらを参考に見出しウィジェットを使ってみましょう。
Elementor Heading見出しタグをデザインする!
見出しを作成できたら、左下の「公開」ボタンを選択。その左側の目のアイコンを選択すると別ウィンドウで現在のデザインの状況をプレビューできます。このウィンドウを立ち上げておくとデザインの編集をおこない「更新」ボタンを選択する度に自動でリロードがかかり変更を確認できます。
