サイト作成 – Step3

 
 
サイト作成 – Step2」の続きです。

前回、デモサイトまで作成できました。

続けて「ホームページを編集する」方法を紹介します。

では、始めます。
 
 
View Site
 

ヘッダーの編集

 
 

サイトの名前やアイコンを変更する

 
管理者ページにログインしてください。

まずは、サイトの名前、ロゴを変更してみます。

左側のメニューから「外観 > カスタマイズ」を押します。
 
カスタマイズ
 
左側のメニューから「ヘッダー > サイト基本情報」を押します。
 
サイト基本情報
 
ここでロゴやサイトアイコン、サイトのタイトルが変更出来ます。

「ロゴを変更」ボタンを押して、ファイルをアップロードすればロゴの変更ができます。

スクロールを少し下にすると、サイトのタイトルやキャッチフレーズの

変更も出来るので、コンセプトに合わせて使ってください。
 
サイト基本情報
 

ヘッダーレイアウトを修正する

 
次は、ヘッダーレイアウトを変更してみます。

左側のメニューから「ヘッダー > メインヘッダー」を選択します。
 
サイト基本情報
 
項目を選択するだけで、PC・モバイルのヘッダーレイアウトの変更ができます。

サイトのコンセプトに合わせて変更しましょう。
 

メインメニューを修正する

 
左側のメニューから「ヘッダー > メインメニュー」を選択します。

メニュー表示の有無やサブメニューの設定ができます。

サイトのコンセプトに合わせて変更しましょう。
 
サイト基本情報
 

ページの編集

 
管理者ページに移動して、

左側のメニューから「固定ページ」を押します。

Homeの上にマウスカーソルを合わせて「Elementorで編集」を押します。
 
Elementorで編集
 
ページの編集が簡単にできるようになります。
 

ページのテキストを修正する

 
では、テキストの編集をしてみましょう。

画面の「Raining Offers for Hot Summer!」と書いてある部分を押します。
 
ページ編集
 
変更したい内容ですぐ修正ができます。

試しに、「2019年<br>新商品祭り」と入力してみます。
 
ページ編集
 
テキストだけではなく、左側のスタイルや詳細タブを選択すると

より詳しい設定ができます。

「25% OFF ON ALL PRODUCTS」も同じ方法で、

「新商品全て25% OFF​」と修正してみましょう。
 

ページのボタンを修正する

 
ボタンの修正も同じです。

「SHOP NOW」ボタンを選択します。
 
ページ編集
 
ボタンの文字を変更するためには、「Shop Now」と表示されている部分を

修正するだけです。

左側のメニューの「リンク」に、飛ばしたいURLを入力すると

ボタンが押された時に、入力したURLに画面遷移を行います。

セール対象の商品ページに移動したり、

商品のカテゴリーページに移動したりなど

必要に応じて設定して使ってください。

その下の「アイコン」を押すと、ボタンにアイコンも設定できるので

必要に応じて設定して使ってください。
 
アイコン
 
ライブラリに使用可能なアイコンが既にあるので、

必要なものを選択すれば使えます。
 

ページのレイアウトを修正する

 
現在のページは、デモサイトであるため、

色んなセクションが入っています。

では、使用しないセクションを削除してみましょう。
 
セクション
 
上記のように、削除したいセクションの上にマウスカーソルを合わせると

ボタンメニューが表示されます。

削除した場合「✕」を押すとそのセクションが消えます。

試しに押してみると、下記のようにセクションが消えます。
 
セクション削除
 
マウスカーソルを合わせた場合、

真ん中に表示されるボタンをDrag & Dropをして

場所を変えるのもできます。
 
レイアウト変更
 
作成したいWEBサイトのイメージが出来ていれば、

この機能を利用すると一瞬でページが出来上がるので

慣れるまで少しずつ試してみてください。
 

ページに新しいセクションを追加する

 
画面の下にスクロールをして行くと、「+」ボタンがあります。
 
セクションの追加
 
それを押すと、新しくセクションを追加することができます。

いくつかのパターンが表示されますので、

用途に合わせて追加すればいいです。
 
構造の追加
 
構造を選択したら、左上のメニューを押すと

追加出来る要素が表示されます。

そのエレメント中から必要な要素をDrag & Dropで配置するだけです。
 
エレメント配置
 
 

その他の編集

 

モバイルページを修正する

 
モバイル画面の編集も簡単です。

左下のメニューから「レスポンシブモード」を押して

表示される項目で「モバイル」を押します。
 
レスポンシブモード
 
画面の表示が、携帯で表示される形に変わるので

今までと同じやり方で

修正したいところを選択して更新するだけです。
 
モバイル画面
 
編集が終わったら画面下の「更新」ボタンを押します。
 
更新
 

メニューにページを追加する

 
管理者ページに戻ります。

左側のメニューから「外観 > メニュー」を押します。
 
メニュー
 
デモサイトのため、すでに登録されているメニューがあります。

では、先ほど修正した「Home」をメニューに追加してみましょう。

方法は簡単です。

「Home」の左にある四角をチェックして「メニューに追加」ボタンを押します。

今回は、「For Her」メニューに追加しました。
 
メニュー追加
 
メニューにHomeが追加されたのを確認して「メニューを保存」ボタンを押します。
 
メニュー保存
 
ちなみに、必要がなくなったメニューは、

項目を開いて、削除リンクを押すだけで消えますので、管理も簡単です。

では、保存ができたら、一度確認してみましょう。

左上のサイト名にマウスカーソルを合わせて「サイトを表示」を押します。

今回は「For Her」メニューに追加したので、

画面の一番したにスクロールして確認します。
 
メニュー確認
 
他のメニューを修正したい場合は、

メニュー編集画面で対象を選択して同じ方法で更新できます。
 
メニュー選択
 
どうですか?思ったより簡単にサイトは出来ましたかね。

実は、今回の記事を作成しながら、

画像だけで説明することに限界を感じました。

なので、後ほど動画を作成しようと思います。

動画の作成が終わりましたら、ホームページにてお知らせしますので

今後もよろしくお願いします。