Diviのボタンモジュールの使い方

こんにちは、根本です。今回は、Diviのボタンというモジュールの使い方をご紹介していきます。

Diviのボタンモジュールとは？

Diviのボタンモジュールは、シンプルにボタンを設置することができるモジュールです。購入を促したり、別のページにユーザーを誘導したい場合に使用します。

コンテンツ設定

テキスト

「テキスト」では、ボタンの文言を設定します。

リンク

• ボタンリンクURL：ボタンに埋め込むページのリンクを入力します。
• ボタンリンクターゲット：「ボタンリンクURL」に入力したリンク先のページを「同じウィンドウで」開くのか、それとも「新しいタブ」で開くのかを選択します。

デザイン設定

属性

「属性」では、「ボタンの配置」というものを設定します。この位置というのは、モジュール内での位置のことで、左に寄せたり、中央、右に寄せたりできます。

テキスト

ボタンの文字を「明るい」色にするのか、それとも「暗い」色にするのかを選択します。

ボタン

• ボタンにカスタムスタイルを使用：「はい」に切り替えると以下の設定項目が表示され、ボタンの細かい設定が可能になります。
• ボタン 文字サイズ：ボタンの文字の大きさを設定します。
• ボタン テキストカラー：ボタンの文字色を設定します。
• ボタン Background：ボタンの背景色（メインとなる色）を設定します。
• ボタン ボーダー幅：ボタンのボーダーの幅を調節します。
• ボタン ボーダーの色：ボタンのボーダーの色を設定します。
• ボタン 境の半径：ボタンの角の丸みを調節します。
• ボタン 文字間隔：ボタンテキストの字間を調節します。
• ボタン フォント：ボタンテキストのフォントを選択します。
• ボタン ソフトライト：ボタンテキストの書体を変更できます。
• ボタン 書式のコピー：ボタンテキストの書式を設定します。
• ボタン アイコン：アイコンを表示したい場合は、こちらからデザインを選択します。
• ボタン アイコンの色：設定したアイコンの色を設定します。
• ボタン アイコンを配置：アイコンの配置をテキストの「左」に置くか「右」に置くか設定します。
• みのアイコンを止のためのボタン：アイコンを常時表示しておきたい場合は、「はい」に切り替えます。「いいえ」のままだと、マウスカーソルが置かれた時だけアイコンが表示されます。
• ボタン 文字サイズ：ボタンテキストのシャドウの設定ができます。
• ボタンのマージン：ボタン単体のマージンを設定できます。
• ボタンのパディング：ボタン単体のパディングを設定できます。
• ボタンのボックス影：ボタンにシャドウをつける場合は、こちらからデザインを選択します。