Elementorについて
Elementor(エレメンター)は、WordPressのプラグインで、直感的にホームページを制作できるのが特徴です。
ホームページを制作する場合、HTMLやCSSを編集画面で書く必要がありますが、Elementor導入により、タグやコードといった専門知識がなくても自分の思うように編集できます。
それにより、「ホームページを作ってもらったけど、後で自分で編集する事ができない…」「凝った記事を書きたいけど、書くのが難しい」などの悩みが解決されます。
Elementorのセーフモードについて
Elementorを編集ボタンを押しても、ローディング画面が終わらない、ウィジェットが表示されない場合、セーフモードにして編集することができます。
セーフモードにすると、エラーの原因となっている可能性のあるテーマやプラグインからElementorとWordPressを分離する安全な環境になります。
Elementorの基本的な事
・Elementorは基本的にウィジェット（画面左側にあるパーツ）を右側の編集エリアドラッグしてページを作成していきます。
・点線で囲まれ場部分に、基本のパーツとなるコンテナをドラッグし、コンテナの中に見出しをジェットやテキストウィジェット・画像ウィジェットをドラッグしていく形になります。
・各ウィジェットを配置後は、左側がウィジェットの詳細設定に変化します。
ウィジェットの詳細画面ではなく、ウィジェット一覧を表示したい場合、ページ内の何もない部分をクリックするか、ウィジェット詳細の上にある○○を編集と書いてある部分の右にある、3×3の点々部分を押してください。
上記とは表示が違う場合のウィジェット一覧表示方法
左側の一番上にに黒い帯があります。
ElementorのEのロゴの右側に、＋マークを押すとウィジェット一覧が表示されます。
ウィジェットのコピー・複製方法
全てのウィジェットはコピー・複製できます。
コピーしたいウィジェットを選択して、右クリックをするとコピー・複製の選択肢が出てきます。
コピーしたい箇所で右クリックすると、貼り付けできます。
コピーは同じページ内だけではなく、他のページのウィジェットもコピーできます。
複製は同じページ内しかできません。
記事の内容を作成または変更したら
左側の下にある公開または更新ボタンを押します。押してない場合記事の内容が反映されないので注意してください。
保存が終わったら、ウィジェット詳細の上にある○○を編集と書いてある部分の左にある、三部分を押して終了を押してください。前の画面に戻ります。
タブレットやスマホごとにデザインを設定する方法
レスポンシブとは
パソコンでページや記事を見ると綺麗にデザインされているけど、タブレットやスマートフォンでページを見ると、デザインが崩れている…そういう時に、レスポンシブ設定をすると、タブレットやスマートフォンごとにデザインを設定することができます。
レスポンシブモード
画面左下にある公開または更新ボタンがある所に、レスポンシブモードがあるので、そこを押します。
そうするとページの上に、パソコン、タブレット、スマートフォンのアイコンが表示されます。
各端末のアイコンを押すと、その端末でどのように表示されているか確認できますので、編集をしたい端末を押して下さい。
スマートフォンの端末でウィジェットを編集すると（例えば文字の大きさを変更する）、選択した端末のみに変更が反映されます。
タブレットやスマートフォンでは表示を隠す方法
「パソコン用と、スマートフォン用でデザインを大きく分けたい」「タブレットでは、この部分を非表示にしたい」そういう時に、Elementorでは簡単に各端末サイズごとに「表示/非表示」の設定をすることができます。
※ここからの操作は全てのウィジェットで共通です。
例として、画像を非表示にしてみます。
まず、画像ウィジェットをクリックし、左側の高度な設定タブのレスポンシブを押します。
もし画像をパソコンとタブレットでは表示するけど、スマートフォンでは非表示にしたいなら、スマートフォンで隠すのみクリックします。
すると、パソコンとタブレットでは画像が表示されますが、スマートフォンでは表示されなくなります。
逆にスマートフォンのみ表示したい場合、デスクトップで隠すとタブレットで隠すをクリックすると、スマートフォンのみ表示されます。
ウィジェットの説明
コンテナ
ウィジェット一覧のレイアウトの項目にあります。
一番基本となるウィジェットです。このコンテナの中に文章や画像を配置していきます。
コンテナの中にコンテナを入れることもできます。
ページ側にあるウィジェットをここにドラッグと書いてあるところの＋マークを押すと、最初から色々な形のコンテナが選べます。
コンテナを配置後、左側がコンテナの詳細設定画面になります。
主に使う設定は、スタイルタブ
背景設定：クラシックとかかれているボタンを押すと、色の所でコンテナの色を自由に変えれます。
枠線設定：コンテナに枠線をつけれます。ボーダータイプの所で直線や点線が選べます。線のタイプを選ぶと、枠線の幅、線の色、枠線の丸み（枠の角を丸くする）が選べます。
サンプル これはコンテナに背景色と枠線をつけました
見出し
ウィジェット一覧の基本の項目にあります。
記事の大きな見出しが書けます。見出しウィジェットをコンテナに中にドラッグしてください。
見出しを配置後、左側が見出しの詳細設定画面になります。
主に使う設定は、コンテンツタブ
タイトル：自由に文字が書けます。
リンク：URLを入れると見出しにリンクが貼れます。
HTMLタグ：デフォルトはH2の大きさになっています。小見出しの時はH3を選んでください。
配置：文字の位置を設定できます。デフォルトで左になっています。
スタイルタブ
文字色、書体が選べます。
高度な設定タブ
背景設定：クラシックとかかれているボタンを押すと、色の所でコンテナの色を自由に変えれます。
枠線設定：コンテナに枠線をつけれます。ボーダータイプの所で直線や点線が選べます。線のタイプを選ぶと、枠線の幅、線の色、枠線の丸み（枠の角を丸くする）が選べます。
テキストエディター
ウィジェット一覧の基本の項目にあります。
文章が書けます。テキストエディターウィジェットをコンテナに中にドラッグしてください。
テキストエディターを配置後、左側がテキストエディターの詳細設定画面になります。
主に使う設定は、コンテンツタブ
テキストエディター：自由に文字が書けます。ここで太字にしたり、文字色を変えたりできます。文字の一部分だけにリンクを設定することもできます。
画像
ウィジェット一覧の基本の項目にあります。
好きな画像を挿入できます。画像ウィジェットをコンテナに中にドラッグしてください。
画像を配置後、左側が画像の詳細設定画面になります。
主に使う設定は、コンテンツタブ
画像の選択：ここを押すとメディアから画像を選択するか、パソコンのフォルダから直接画像を配置できます。
画像サイズ：大きさを変えれます
配置：画像の位置を変えれます。
リンク：カスタムURLを選択して、URLを入れると画像にリンクが設定できます。
動画
ウィジェット一覧の基本の項目にあります。
好きな動画を挿入できます。動画ウィジェットをコンテナに中にドラッグしてください。
動画を配置後、左側が動画の詳細設定画面になります。
主に使う設定は、コンテンツタブ
リンク：動画のURLを入れると動画を挿入できます。
ボタン
ウィジェット一覧の基本の項目にあります。
ボタンを挿入できます。ボタンウィジェットをコンテナに中にドラッグしてください。
ボタンを配置後、左側がボタンの詳細設定画面になります。
主に使う設定は、コンテンツタブ
テキスト：ボタンに入力する文字が書けます。
リンク：URLを入れるとボタンにリンクが設定できます。
配置：リンクの位置が設定できます。一番右の均等割付にすると横幅が大きいボタンになります。
サイズ：ボタンの大きさが設定できます。
アイコン：右の●を押すと色々なアイコンが設定できます。
アイコン幅：文字とアイコンの幅の設定ができます。
スタイルタブ
文字の書体・文字色・ボタンの色が設定できます。
また、ボタンの枠の種類や色、ボタンの丸みの設定もできます。