運用ノウハウ集

トップページの編集方法

目次

  1. トップページの編集可能部分
  2. メインビジュアルの背景画像を変更する
  3. メインビジュアルの不透明度を変更する
  4. メインコピー・サブコピーを変更する
  5. メインコピーの文字サイズを変更する
  6. 画像を変更する
  7. テキストを変更する
  8. リンクボタンを変更する

トップページの編集可能部分

赤枠の部分が変更可能範囲(Elementorでの編集)となります。
実績とお知らせの表示は、最初記事の情報を自動で3件で表示となります。

固定ページ>HOME — フロントページの「 Elementorでの編集 」をクリック

メインビジュアルの背景画像を変更する

この背景画像を変更します

画像の上で右クリック >「セクションを編集」をクリックする

左上のタブから真ん中の「スタイル」をクリック

同じ画像が「画像」欄に表示されるので赤枠の部分をクリック

【新しい画像にする場合】「メディアを挿入」画面から「ファイルアップロード」タブをクリック

既存の画像に変更したい場合は、「メディアライブラリ」内の画像を選択してください

「ファイルを選択」ボタンをクリック

この画面に画像ファイルをドロップしてもアップロードできます

任意の画像を選択し「開く」をクリック

※画像のサイズは1920 x 1080 ピクセルくらいがきれいに入ります。

画像を選択して「メディアを挿入」ボタンをクリック

背景画像が差し替わりました。

メインビジュアルの不透明度を変更する

背景の設定の下の「背景オーバーレイ」をクリック

黒いオーバーレイが上に乗っている状態です。

不透明度が0.3になっているので、任意の不透明度にする

数字が大きいほど、暗くなります

不透明度を上げた例 

変更が終わったら、忘れずに「更新」ボタンをクリックしましょう

メインコピー・サブコピーを変更する

メインコピーの右上のペンのマークをクリックする

タイトル部分(赤枠の部分)に同じテキストが表示されます

赤枠のテキストエディタのコピーを任意のテキストに変更する

サブコピーも同様に変更する

文字サイズを変更する

真ん中の「スタイル」タブをクリック > 書体のペンのマークをクリック

任意のサイズに変更する

メインコピーの文字サイズが小さくなりました

画像を変更する

変更したい画像をクリック >左の画面の画像をクリック

任意の画像をアップロード、またはメディアライブラリから選択し「メディアを挿入」ボタンをクリック

画像の差し替え完了したら「更新」ボタンをクリック

テキストを変更する

変更したいテキストのペンマークをクリックして、 左の画面から任意のテキストに変更する

リンクボタンを変更する

変更したいボタンを選択してペンのマークをクリックする

テキスト…ボタンの中の文字
リンク…リンク先
アイコン…ボタン内のアイコン
アイコンの位置…テキストの後か前か

ボタン内のアイコンを変更する場合 > アイコンの「>」をクリック

アイコンの選択画面へ

任意のアイコンを選択して「挿入」ボタンをクリック

アイコンが変更されました

PHP Code Snippets Powered By : XYZScripts.com