「サイト作成 – Step2」の続きです。
前回、デモサイトまで作成できました。
続けて「ホームページを編集する」方法を紹介します。
では、始めます。
ヘッダーの編集
サイトの名前やアイコンを変更する
管理者ページにログインしてください。
まずは、サイトの名前、ロゴを変更してみます。
左側のメニューから「外観 ＞ カスタマイズ」を押します。
左側のメニューから「ヘッダー ＞ サイト基本情報」を押します。
ここでロゴやサイトアイコン、サイトのタイトルが変更出来ます。
「ロゴを変更」ボタンを押して、ファイルをアップロードすればロゴの変更ができます。
スクロールを少し下にすると、サイトのタイトルやキャッチフレーズの
変更も出来るので、コンセプトに合わせて使ってください。
ヘッダーレイアウトを修正する
次は、ヘッダーレイアウトを変更してみます。
左側のメニューから「ヘッダー ＞ メインヘッダー」を選択します。
項目を選択するだけで、PC・モバイルのヘッダーレイアウトの変更ができます。
サイトのコンセプトに合わせて変更しましょう。
メインメニューを修正する
左側のメニューから「ヘッダー ＞ メインメニュー」を選択します。
メニュー表示の有無やサブメニューの設定ができます。
サイトのコンセプトに合わせて変更しましょう。
ページの編集
管理者ページに移動して、
左側のメニューから「固定ページ」を押します。
Homeの上にマウスカーソルを合わせて「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」メニューに追加したので、
画面の一番したにスクロールして確認します。
他のメニューを修正したい場合は、
メニュー編集画面で対象を選択して同じ方法で更新できます。
どうですか？思ったより簡単にサイトは出来ましたかね。
実は、今回の記事を作成しながら、
画像だけで説明することに限界を感じました。
なので、後ほど動画を作成しようと思います。
動画の作成が終わりましたら、ホームページにてお知らせしますので
今後もよろしくお願いします。
