![](https://tomolog.org/wp-content/uploads/2018/10/mi.png)
そんな疑問に答える本記事です!
こんにちは。いちかわともや(Twitter: @tomochan8282)です。
Elementorは、無料で使えるWordPressプラグインです。
Elementorを使うと、コーディングをしなくても直感的な操作で、Webサイトを編集することができます。
例えば、2カラムや3カラムのレイアウトが、ドラッグ&ドロップの操作で一瞬で出来上がります。
そして、出来上がったカラムに、画像やテキストを埋め込むのもカンタンです。
本記事では、WordPressプラグイン「Elementor」の使い方を解説していきます。
もくじ
Elementorの使い方【直感的にWebサイトを作る】
WordPressテーマ「Sydney」をインストール
最初に、WordPressテーマ「Sydney」をインストールします。
![](https://tomolog.org/wp-content/uploads/2020/06/テーマ新規追加.jpg)
「外観」>「テーマ」より、「新規追加」をクリックします↑↑
![](https://tomolog.org/wp-content/uploads/2020/06/テーマの追加.jpg)
①「Sydney」と入力し、②「インストール」をクリックし、有効化します↑↑
Elementorのインストールとデモサイトのインポート
次に、Elementorのインストールとデモサイトのインポートをします。
![](https://tomolog.org/wp-content/uploads/2020/06/シドニーの情報.jpg)
「外観」>「シドニーの情報」より、赤枠の3カ所の「インストールと有効化」をクリックします↑↑
![](https://tomolog.org/wp-content/uploads/2020/06/import-demo.jpg)
「外観」>「Import Demo Data」より、「Import Demo Data」をクリックします↑↑
![](https://tomolog.org/wp-content/uploads/2020/06/done.jpg)
デモサイトのデータのインポートが完了しました↑↑
![](https://tomolog.org/wp-content/uploads/2020/06/デモサイト.jpg)
このようにサイトが表示されました↑↑
Elementorの操作方法
ここからは、Elementorの操作方法を解説していきます。
基本操作1:見出しの編集
![](https://tomolog.org/wp-content/uploads/2020/06/elementorで編集.jpg)
まず、「Elementorで編集」をクリックします↑↑
![](https://tomolog.org/wp-content/uploads/2020/06/見出し1.jpg)
赤枠のボタンをクリックします↑↑
![](https://tomolog.org/wp-content/uploads/2020/06/タイトル.jpg)
赤枠の部分にタイトルを入力します↑↑
![](https://tomolog.org/wp-content/uploads/2020/06/更新.jpg)
赤枠の部分で、下記の編集ができます↑↑
・リンクの設定
・サイズの変更
・配置の設定
編集が完了したら、「更新」をクリックします。
基本操作2:アイコンボックスの編集
![](https://tomolog.org/wp-content/uploads/2020/06/アイコンボックス.jpg)
赤枠のボタンをクリックします↑↑
そして、①アイコンの設定・②タイトルの編集・③説明の編集をして、「更新」をクリックします。
基本操作3:ポートフォリオの編集
![](https://tomolog.org/wp-content/uploads/2020/06/item.jpg)
赤枠のボタンをクリックします↑↑
そして、「Item #1」をクリックします。
![](https://tomolog.org/wp-content/uploads/2020/06/ポートフォリオ.jpg)
そして、①画像の設定・②タイトルの編集・③カテゴリの編集をして、「更新」をクリックします。
3カラムのレイアウトを作る
次に、3カラムのレイアウトを作ります。
![](https://tomolog.org/wp-content/uploads/2020/06/カラム1.jpg)
赤枠のボタンをクリックします↑↑
![](https://tomolog.org/wp-content/uploads/2020/06/カラム3.jpg)
均等な3カラムをクリックします↑↑
![](https://tomolog.org/wp-content/uploads/2020/06/カラム3−1.jpg)
均等な3カラムが出来上がりました↑↑
見出しを入れる
次に、見出しを入れます。
![](https://tomolog.org/wp-content/uploads/2020/06/見出し1のコピー.jpg)
①赤枠のボタンをクリックし、「見出し」を、「左端のカラム」にドラッグ&ドロップします↑↑
![](https://tomolog.org/wp-content/uploads/2020/06/見出し2.jpg)
見出しが入りました↑↑
画像を入れる
次に、画像を入れます。
![](https://tomolog.org/wp-content/uploads/2020/06/画像1.jpg)
「画像」を、「左端のカラムのタイトルの下」にドラッグ&ドロップします↑↑
![](https://tomolog.org/wp-content/uploads/2020/06/画像2.jpg)
赤枠の部分をクリックし、画像を選択します↑↑
![](https://tomolog.org/wp-content/uploads/2020/06/画像3.jpg)
画像が入りました↑↑
「更新」ボタンをクリックします。
テキストエディターを入れる
次に、テキストエディターを入れます。
![](https://tomolog.org/wp-content/uploads/2020/06/テキストエディタ.jpg)
「テキストエディター」を、「左端のカラムの画像の下」にドラッグ&ドロップします↑↑
![](https://tomolog.org/wp-content/uploads/2020/06/テキストエディタ2.jpg)
テキストエディターが入りました↑↑
赤枠の部分で編集をします。
動画を入れる
次に、動画を入れます。
![](https://tomolog.org/wp-content/uploads/2020/06/動画.jpg)
「動画」を、「中央のカラム」にドラッグ&ドロップします↑↑
![](https://tomolog.org/wp-content/uploads/2020/06/動画2.jpg)
動画が入りました↑↑
赤枠の部分で、動画のソースコード(YouTube・Vimeo・独自アップロード)を選択し、動画のURLを入力します。
ボタンを入れる
最後に、ボタンを入れます。
![](https://tomolog.org/wp-content/uploads/2020/06/ボタン.jpg)
「ボタン」を、「右端のカラム」にドラッグ&ドロップします↑↑
![](https://tomolog.org/wp-content/uploads/2020/06/ボタン3.jpg)
ボタンが入りました↑↑
赤枠の部分で、下記の編集をします。
・ボタンの色
・ボタン上のテキスト
・リンク
・ボタンの配置
・ボタンのサイズ
以上が、WordPressプラグイン「Elementor」の使い方でした!
フリーランスエンジニアが仕事を獲得する方法はコチラ↓↓
Twitterでも、エンジニア向けの技術情報やブログ運営の方法など、役に立つ情報をわかりやすく発信していますので、よろしければフォローをお願いいたします↓↓
イチカワトモヤ@ホテルマンエンジニア(Twitter: @tomochan8282)
Elementorってどうやって使うの??