どうも、ナオです。
今回は「elementor」というWordpressのプラグインの使い方について解説をしていきたいと思います。

 

「elementor」はWordPressのカスタマイズに非常に役立つプラグインとなっておりまし、無料で利用することが出来ますので、是非最後までご覧になっていって下さい。

 

「elementor」とは?

 

「elementor」はWordPressのトップページや個別記事のカスタマイズの際に非常に役立つプラグインです。

サイト運営初心者の方はHTMLやCSSの編集の仕方が分からず、中々思い通りにサイトをカスタマイズできないという方が多いかと思います。

 

しかし「elementor」を使うことで、HTMLやCSSの知識がなくてもトップページや個別記事のカスタマイズを「ドラッグ&ドロップ操作」で簡単に行うことが出来るようになります。

 

「elementor」の設定

 

それではここから、「elementor」の設定方法について解説をしていきます。

1.WordPressの管理画面よりプラグインの「新規追加」→検索欄に「elementor」と入力をして検索をすると以下画像のような画面が表示されますので、「Elementor Page Builder」をインストールして有効化して下さい。

 

 

 

2.有効化が終わると管理画面に「elementor」のマークが表示されますので、「設定」の項目をクリックして下さい。

 

 

3.ブログのトップページを作成するので、管理画面から「固定ページ」→「新規追加」を選択して下さい。表示されたページに「Elementorで編集」というボタンが現れます。

 

 

 

 

4.左側に編集要素が現れますので、これを「ドラッグ&ドロップ」することで記事を作成する事が出来ます。テンプレートを使用する場合は、ここでテンプレートを挿入する事が可能です。

 

 

 

5.様々な種類のテンプレートがあるので、自分の使いたいテンプレートを選択してください。

テンプレートを設定しても固定ページ、記事ページ専用なのでブログ全体のテーマは変わりません。要素ボックスの下にある保存をクリックすることでカスタマイズが保存されます。

 

 

 

6.要素ボックスの左下にある×ボタンをクリックすると以下画像のように表示されますので、「ダッシュボードへ」をクリックすると元の画面に戻ります。

 

 

 

 

7.「elementor」で作成したページをトップページに追加するには「設定」→「表示設定」からフロントページを「HOME」に選択して下さい。
使用しているテーマによってはフロントページの設定ができない事がありますのでご注意ください。

 

「elementor」の使い方

 

ここから「elementor」の使い方について解説していきます。

新しいセクションを追加

 

・要素をドラッグ&ドロップで配置
・新しいセクションの追加」からカラムを選択して要素を追加

以上2つの方法で新しいセクションを追加する事が出来ます。カラムの数や幅はいつでも変更する事が可能です。

 

 

テキストエディタの使用

 

「テキストエディタ」ではブログと同じような感覚でテキストを入力出来ます。
リンクの挿入から、文字色を変えるなど自分好みに編集することが出来ます。

 

 

 

画像にリンクをつける

 

画像ボックスをドラッグ&ドロップすることでアップロードしている画像を挿入する事が出来ます。「スタイル」「詳細」からより詳しい設定を行うことが可能です。

 

スペーサー、カラム間を調整する

 

スペーサーを挿入すると要素と要素の間に空白を入れることが出来ます。カラム間に隙間がある時はセクションから変更をして下さい。

 

PCとスマホでは表示に微妙な差が出ることがあり、タイトル直下に画像が入っていたりという事があります。そんな時は画像の下にスペーサーを入れることで間をとり調整してみましょう。

 

SNSアイコンの設置

 

SNSアイコンを挿入することも出来るので、リンク先を自分のページの設定にして下さい。

 

カラムとセクション

 

 

セクションとは横に連なっているカラムのかたまりです。一つ一つのボックスをカラムと言います。
カラムをコピーすることで同一セクション内の隣にカラムが配置されます。

セクションをコピーすると、下に同じセクションがコピーされます。カラムやセクションの背景はスタイルから設定する事が可能です。

 

セクションとセクションの間に新しいセクションを挿入

 

セクションはドラッグでつかむことが出来ないので、セクションを挿入したい時は上にあるセクションをまず選択してください。

 

コピーマークをクリックしてコピー作成後、そのセクションの要素を削除することで新しいセクションを挿入することが出来ます。

 

最新の投稿を表示

 

 

要素ボックスを下にスクロールすると「最近の投稿」という要素がありますので、ドラッグして挿入したい場所へ入れてください。

 

最後に

 

以上「elementor」の設定方法と使い方について解説させて頂きましたがいかがだったでしょうか?

・ドラッグ&ドロップで簡単、直感的にコンテンツが作成できる
・コード不要で好きなテーマを使用できる

などなどWordpressでサイト作成を行っていく上で非常に役立つ機能が備わっております。
「elementor」は無料で利用することが可能ですので是非一度インストールしてみて下さい^^

 

それでは!