Tutorial

Table of Contents

0: elementorの基本

プログラムコードを書かないでサイトを制作するためのツールは多いですが、elementorはその中でも最優秀ですので、安心して習得してください。

0-1.elementor制作で、理解すべき基本知識

 Section>(カラム)>内部セクション>(カラム)>各種ウイジェット(画像、見出し、テキストエディタ、スライダー、ボタン、動画等 多数)の概念を知る。 

この部分は、このTutorialでは、ご説明しませんが、NET上に多くの解説書がでていますので、ご参照お願いします。
例えば下記を左クリックして、  

  Elementorの使い方


7:23~11:21(4分間程)を見るのが早道かと思います。ピンとこない場合はご連絡お願いします。

0-2. このTutorialを表示する方法


方法は下記2つあります。

(1)ブラウザで新タブを表示後、左上のURLに下記を入力する方法
   https://e-onandon.jp/tutorial/

(2)WordPressにloginして、
①固定ページ一覧 から、左図の
②表示
 を右クリックして 
③新しいタブで開く を左クリック して
新しく表示された タブ を左クリック すれば、

左下のTutorial画面 が別タブで表示されます。(重要)

このタブを 実際に制作作業するタブ  別のタブ で表示して頂けますと、両タブを交互に切り替えて制作作業が出来ます。Tutorialを参照しながら制作できますので効率的です。

0-3.. 直近の作業を 作業単位毎に 元に戻したい時 どうしたら良いか

テキストエディタ の場合と すべての場合に通用する方法 の2種類あります。

(1)テキストエディタ の場合

左の 元に戻す を左クリックすれば戻ります。

(2)すべて に通用する方法

まず、画面左の最下段の 履歴ボタン をクリックすると更新履歴が表示されますので、下記をクリックすれば戻せます。

は、現在の状態、

は一つ前に戻す

はその前に戻ります。

以下同様になります。

1:新規投稿を作成・編集する方法


【A】投稿の入れ物を作る

ダッシュボード> 投稿①> 新規追加  を左クリック。

 

 

 

これで、左の画面が表示されます。

【B】入れ物の形式を決める

「イベントを開催します 2月15日~16日」と入力

②テンプレート がデフォルトになっているので、 

③Elementor全幅 に変更

④Elementorで編集 を左クリックで【C】が表示されます。

【C】コンテンツ(見出し+TEXT)を入れる。

左サイドバーの右上の サイコロマークをクリック で使えるウイジェットが表示されます。

①見出しを左クリック&ドラッグ で 左画面の様に移動し放します。

【D】見出しの文字 と 色を設定

まず、TEXTの内容の設定

デフォルトで空色文字が入っています

動的タグ>
Post Title 

を選択すると、上記 【B】ので設定したTEXTが採用されます


【E】見出しの文字色の設定

空色→灰色に変更するには;

スタイル>文字色>

848484と入力

F

引き続き、見出し の下に イベントの詳細を入力します。

まず【C】の要領で 今度は、見出し ではなく テキストエディター を挿入し、

左の 編集画面でイベントの中身を記述します。

左右の画面の境目は クリック&ドラッグで動かせます。

●追加・修正したら、最後に左下の  更新 を左クリック を忘れないようお願いします。
(忘れたら直近の作業が無駄になります!)

【G】
左が、【A】~【F】で完成した投稿画面です。

HOME画面では、NEWS欄で最新記事3個の1個として表示され、もっと見る をクリックすると
←左記の投稿画面に飛びます。