ボタンウィジェットの使い方

① 「ボタン」を選ぶ

1. 編集したいページを「Elementorで編集」で開きます。
2. すでに配置済みなら、右側のページで変更したい部品をクリックします。
3. 新しく追加する場合は、左上の「＋」を押し、検索欄に「ボタン」と入力します。
4. 見つかった部品を、右側の入れたい場所までドラッグします。マウスを押したまま移動し、置きたい場所で離します。

開き方から確認したい場合：ページを作成・編集する

② ボタンの文字と移動先を入力する

12

1. 「テキスト」に「お問い合わせ」と入力します。
2. 「リンク」の「#」を消し、お問い合わせページのURLを貼り付けます。
3. 入力欄の外をクリックし、右側のボタンの文字を確認します。
4. アイコンやボタンIDは、必要がなければそのままで大丈夫です。

写真のURLはOptiBサイトの例です。ご自身のサイトのお問い合わせページを開き、アドレスバーからURLをコピーしてください。

成功の目印：右側のボタンが「お問い合わせ」になります。リンクの動作は保存後のページで確認します。

③ 色と押しやすさを整える

123

1. 「スタイル」を押します。
2. 「位置」で左・中央・右などを選びます。
3. 「文字色」と背景の「色」を選びます。例：濃い青の背景に白い文字。
4. 「パディング」で文字の周りの空間を調整します。例：上下12px、左右24px。
5. 「マウスオーバー」はマウスを重ねたときの状態です。文字が見えなくならないかも確認します。

成功の目印：文字が読みやすく、指で押しやすい大きさのボタンになります。

④ スマホで確認して保存する

上部のスマートフォン形のアイコンを押し、表示を確認します。問題がなければ右上の「公開」または「更新」を押し、保存後に実際のページを開き直します。

• ボタンが画面からはみ出さない。
• 保存後の実際のページで押すと、正しいページが開く。
• リンク先に古いURLや「#」が残っていない。

スマホ表示の詳しい調整方法 ／ 下書き保存・公開・元に戻す手順