コード知識0でプロ並みのサイトに!Elementorのおすすめの使い方【WordPress】

コード知識0でプロ並みのサイトに!Elementorのおすすめの使い方【WordPress】

こんにちはLibertaの藤岡(@liberta_corp)です。

今回はWordPressのプラグインである「Elementor」の使い方をご説明します。

私はHTMLやCSSなどのプログラミングコードの知識を持っていません。
ですので、新しいプロダクトを作る際にはプログラマーへ外注をしています。

しかし、そんな私でも簡単なサイト作成であれば「Elementor」というプラグインを利用して簡単に作成することが可能でした。

 

今回は

  • Elementorの特徴
  • Elementorの使い方

について、解説していきます。

 

Elementorの特徴

https://ja.wordpress.org/plugins/elementor/

※こちらで無料でダウンロードできます。

 

Elementorはプログラミング知識がなくても視覚的にサイトを作れるWordPressのプラグインソフトです。まずはその特徴について順にご説明します。

 

特徴1.視覚的にサイトを制作できる。

Elementorを起動するとこのような画面になります。

 

左側が配置したい項目、右側が実際のページのプレビューです。

プレビュー画面を見ながら実際に配置したい項目をドラッグするだけでページを作成できます。

 

特徴2.プログラミングコードの知識は不要

サイトを作成しようとしたもののHTMLコードで挫折した人は多いのではないでしょうか。

HTMLコード

<html>
<head>文書のヘッダ部分</head>
<body>文書の本体部分</body>
</html>

先ほど述べたように、私もプログラミングコードはほとんど使えません。

しかし、シンプルなブログサイトなら、Elementorを使って作成することが可能です。

※受けたご依頼のコーディングに関してはプログラマーへ外注しています。

 

特徴3.これだけ使えて無料

無料版では「ウィジット」が30種類も用意されています。

有料版では60種類のウィジットが用意されており、より動的な利用が可能になります。

まずは無料版で試してみて、必要に応じてプロ版に変更しても良いかもしれませんね。

 

Elementorの使い方

それでは実際の使用方法についてご説明します。

 

全体の配置を先に決める

まず初めにページの構造を決めます。

 

ここをクリックすると

このような画面で構造が選べるので、好きなものを選びます。

この時、まずは構造をいくつか配置し、サイトの大枠を作ってから、ウィジットを配置し、微調整を加える。
という方が効率的だと思います。

 

ウィジットをドラッグする

構造を作り終えたら次にウィジットを配置していきます。

 

この時も全体のデザインを気にせずにどんどん配置していくことがオススメです。

テキストや画像コンテンツを入れながら同時にデザインを編集していると、サイト全体のバランスを見ながらの作業になるので、非常に効率が悪いです。

まずは配置と入力だけ済ませ、あとからデザインを一気に仕上げましょう。

 

最後にデザインを調整する

構造を作成→ウィジットの配置を終えたら、いよいよデザインをしていきます。

この時、おすすめの機能は「スタイルを張り付け」機能です。

 

 

画像のように似たウィジットを並べる時に、「スタイルを張り付け」機能が役立ちます。

中身はそのままに文字サイズや画像サイズなどのスタイル情報だけ張り付けることが可能です。

 

完成例

こちらはLibertaのサイトの概要ページです。

https://www.liberta-corp.jp/service/

かなりシンプルな内容ですが、ウィジットの配置やデザインの発想次第で、より美しいデザインに仕上げることも可能だと思います。

 

まとめ

いかがでしたでしょうか。

  • Elementorの特徴
  • Elementorの使い方

についてご説明しました。

Elementorを使えば、初心者でもデザインに優れたサイトがすぐに作成できると思います。

ぜひ、トライしてみてくださいね。