リッチボタンブロックの解説をします。
リッチボタンブロックの追加
左上の「+」ボタンをクリックします。
![](https://wp-avenue.com/lp-creator/wp-content/uploads/2023/08/add-block-1024x680.jpg)
「リッチボタン」をクリックします。
![](https://wp-avenue.com/lp-creator/wp-content/uploads/2024/03/スクリーンショット-2024-03-15-10.49.49.png)
以下のようなボタンが表示されます。デフォルトはオレンジですが、色やデザインは自由に変更できます。
![](https://wp-avenue.com/lp-creator/wp-content/uploads/2024/03/スクリーンショット-2024-03-15-11.50.54.png)
リッチボタンブロックの設定を表示する
![](https://wp-avenue.com/lp-creator/wp-content/uploads/2024/03/スクリーンショット-2024-03-15-11.47.44.png)
右サイドバーにボタンブロックの設定が表示されない場合は、赤枠の箇所をクリックすると右サイドバーにブロックの設定が表示されます。
テキストの設定
![](https://wp-avenue.com/lp-creator/wp-content/uploads/2024/03/スクリーンショット-2024-03-15-12.15.29.png)
ボタンのテキストはボタン内に直接入力できます。
リンク先URLの設定
![](https://wp-avenue.com/lp-creator/wp-content/uploads/2024/03/スクリーンショット-2024-03-15-12.16.59.png)
ボタンのURLは赤枠の箇所をクリックして設定できます。
![](https://wp-avenue.com/lp-creator/wp-content/uploads/2023/08/button-url-setting.png)
リンク先のURLを入れたら、赤枠ボタンをクリックして確定してください。
リンク先を別タブで開いて欲しい場合は、再度リンクの設定を開いて、
![](https://wp-avenue.com/lp-creator/wp-content/uploads/2023/08/button-setting-target-blank.png)
赤枠の箇所をクリックしてください。
![](https://wp-avenue.com/lp-creator/wp-content/uploads/2023/08/button-target-blank.jpg)
「高度」をクリックして、「新しいタブで開く」にチェックを入れて保存してください。
スタイルの設定
5種類のスタイルが選択できます。
![](https://wp-avenue.com/lp-creator/wp-content/uploads/2024/03/スクリーンショット-2024-03-15-12.34.13.png)
![](https://wp-avenue.com/lp-creator/wp-content/uploads/2024/03/スクリーンショット-2024-03-15-12.38.12.png)
スタイル「Custom」の色の設定
![](https://wp-avenue.com/lp-creator/wp-content/uploads/2024/03/スクリーンショット-2024-03-15-12.38.59.png)
右サイドバーにある「カラー設定」で色の変更ができます。背景色は単色とグラデーションから選択できます。
![](https://wp-avenue.com/lp-creator/wp-content/uploads/2024/03/スクリーンショット-2024-03-15-12.39.33.png)
カラー設定の右上にある点三つのアイコンをクリックすると、設定をリセットできます。
レイアウト設定
![](https://wp-avenue.com/lp-creator/wp-content/uploads/2023/08/button-layout.jpg)
マージン上は上のブロックとの間隔、マージン下は下のブロックとの間隔です。
パディングはボタン内側の余白です。
ボタンを大きくしたい場合は、ボタンの最小幅を設定してください。
ボタンを大きくしすぎるとスマホではみ出してしまうので、タブを切り替えてスマホの幅(200px以下推奨)も設定してください。