mixhost Webサイトのページ作成やカスタマイズが行えるElementorの使用方法

3月 1, 2022 3月 1, 2022

AREXE

Elementor

Elementorとは、40個以上の便利なウィジェットを持つプラグインで無料でも多くの機能が利用でき、

Webサイトのページ作成を行う際に、これ１つでブロックエディターに比べよりより直感的に操作とデザインや

スタイル、ページ設定などを一括で編集することで手間を削減をしたい方にオススメのプラグインになります。

本記事では、mixhostで無料でも利用できるページビルダーの「Elementor」の使用方法について紹介します。

主な特徴

40個以上の便利なウィジェット
無料でも利用可能
エディター操作も直感的に操作可能
デザインの調整やアクションなどを多彩なカスタマイズ可能

導入方法

プラグイン導入

WordPress管理画面より「①プラグイン欄：新規追加」→「②キーワードに【Elementor】と入力」→「③【今すぐインストール】」→「④【有効化】」の順に選択しプラグインの有効化しましょう。

設定方法

設定画面へは、WordPress管理画面の【Elementor】をクリックし設定画面へ移動しましょう。

設定

設定画面では、以下の設定タブがあり基本的には変更不要ですが

【一般】設定タブにて、「テーマ」の色やフォントをそのまま利用したい場合は

Elementorのデフォルトカラーとフォントの無効化を行いましょう。

一般
スタイル：サイト設定を利用して変更を確認することができます。

連携：設定により、必要に応じてElementorをサードパーティのAPIにオプションで接続できます。

高度な設定：CSS 印刷設定やフィルタリングされていないファイルのアップロードを有効化などが行えます。

実験中：プラグインに正式リリースされる前の機能や設定を利用することができます。

項目	内容	設定例
投稿タイプ	Elementorを使用できる場所を選択します。オンにすると、その投稿タイプで[ Elementorで編集]ボタンを使用できるようになります。・投稿・固定ページ・ランディングページ	・投稿：・固定ページ：・ランディングページ：
デフォルトカラーを無効化	Elementor のデフォルト色が無効化され、テーマの色を継承します。
デフォルトフォントを無効化	Elementor のデフォルトフォントが無効化され、テーマのフォントを継承します。
使用状況データの共有	機密性の低いプラグインデータを共有し、定期的に電子メールの更新を受け取る

権限グループ管理ツール

Elementorにおけるユーザーの編集範囲を管理を行う設定画面で

WordPressユーザーを【エディターへアクセスする権限がありません】にチェックマークを入れることで

編集可能な範囲を制限することができます。

※Elementor Pro（有料版）では、コンテンツのみにアクセス権を追加することができます。

ツール

ツール設定画面では以下のような、WebサイトのURL変更やセーフモード及びメンテナンスモードなどを

切り替えることができ基本的には変更不要です。

一般：Elementorのライブラリ同期やセーフモードなど
URLを変更
バージョン管理：更新、Ver.のロールバックなど）
メンテナンスモード：Coming Soonモードなど）
インポート／エクスポート

システム情報

システム情報では、サーバーとWordPress環境に関する以下の情報の確認と

システム情報のコピー＆ペーストが行え設定項目などはありません。

Server Environment：サーバーのOSやPHPVer.などサーバー情報
WordPress Environment：WebサイトのURLやWordPressに関する情報
Theme：Webサイトのに適用されているテーマに関する情報
User：ユーザー及び使用ブラウザなどの情報
Active Plugins：Webサイトの有効化されているプラグイン一覧
Elementor Experiments：Elementor欄の実験中内の設定状況
Log：Webサイトに関連する変更とエラーのリストが表示されます。
Elementor - Compatibility Tag：Elementorコアバージョンとの互換性が宣言されていない、使用されているプラグインを一覧表示します。

使用方法

Elementorのエディター画面へは、【設定：「一般」設定タブ】にて指定した投稿タイプの

編集画面上に、「Elementorで編集」ボタンが追加されここからElementorエディターでの編集が行えます。

※ここでは、投稿ページを例として表示しています。

主な操作方法

Elementorエディターの操作方法は、WordPressのブロックエディターの編集方法に似ており

複雑な操作やCSSの記述などは基本的には必要なく、

ここでは、エディター画面の操作方法とよく使用するボタン位置などについて紹介します。

①メニューから要素をドラック＆ドロップし追加

エディター編集画面の左側にあるElementorメニュー上部（メニュー幅や折りたたみ可能）にある

【要素】から追加する要素をドラック＆ドロップで追加することができます。

②要素をクリックし要素の編集

追加した要素をクリックすることで、その要素の編集を行うことが出来ます。

③保存やプレビュー表示方法

メニュー欄下部に６つのボタンがあり、ここを操作することで

現状のプレビュー表示やページ設定などの確認やページの公開及びテンプレートの保存が行えます。

項目	内容
①設定	タイトルやアイキャッチ画像などページ設定を変更することができます。
②ナビゲーター	クリックするとナビゲーションウィンドウが表示されセクションやカラムなどの要素ごとに表示/非表示の切り替えが行えます。
③履歴	エディターの編集履歴を確認することができ行った操作を任意の箇所まで戻すなどを行うことが出来ます。
④レスポンシブモード	エディター上部のメニューバーが表示され PC・モバイルなど端末ごとの表示サイズ確認と変更が行えます。
⑤変更をプレビュー	プレビューから
⑥公開（設定を保存）	ページの公開と【▲】から下書き、テンプレートとして保存を切り替えが行えます。