Elementorのボタンウィジェットの使い方
- 2024年2月27日
- 2020年12月10日
- Elementorの使い方
- Elemenotrの使い方コース, 基本ウィジェット
今回はElementorのボタンウィジェットの使い方を説明していきます。
ボタンウィジェットで好きなフォームにリンク付けできるようになります。
大変便利な機能ですので、ぜひ活用してみましょう。
Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。
ボタンウィジェットの挿入
ボタンウィジェット挿入の仕方は、他のウィジェットと同じでドラック＆ドロップします。
基本的にここまでの操作はどのウィジェットでも同じですね。
ボタンウィジェットを挿入するとデフォルトのボタンが挿入され、コンテンツタブが開きます。
コンテンツタブで出来ることを解説
こちらがボタンウィジェットを挿入した直後の画面。
コンテンツタブではタイプの選択やテキストの変更、リンク設定などが出来ます。
アイコンを入れたりして、自分のサイトに合ったボタンにしていきましょう。
各項目順番に説明していきます。
タイプ選択とテキスト変更
タイプを選択すると、ボタンの色が変わります。
好きな色があったら、変えてみて下さい。
続いてテキストを変更していきましょう。
丸で囲んだところに入れたいテキストを書きこむと、ボタン内のテキストもかわります。
リンクの設定
テキストの下にある、リンクの項目にURLを入れて設定します。
次に四角の中にある歯車のアイコンをクリックしてみてください。
するとこのような画面が出てきました。
リンクしたページを新しいウィンドウで開かせたい時は、『新しいウィンドウで開く』の横の四角にチェックを入れてください。
配置とサイズ
配置の項目では、ボタンの位置を設定できます。
デフォルトでは左寄せになっているので、中央や右寄せなど、設定したい位置にボタンを配置しましょう。
配置の下にあるのはサイズです。
四角の中の『▼』をクリックすると、サイズを選べるので好きなサイズを選んでください。
因みに特大はこんな感じです。ちょっと大きすぎますよね(笑)
アイコンを入れると見栄えが良くなる
アイコンを入れると、少し見栄えが良くなりますよね。
四角の中にカーソルを移動させると『アイコンライブラリー』が選択できますので、クリックしてみてください。
『アイコンライブラリー』をクリックすると、アイコンの選択画面が開きます。
Elementorでは、初めからたくさんのアイコンが選べるようになっています。
テキストに合わせてアイコンを選ぶと良いですね。
好きなアイコンを選択し、右下の『INSERT』ボタンをクリックしましょう。
選んだアイコンが挿入されました。
アイコンの位置やスペース
選んだアイコンは、テキストの前か後ろに設定可能。
『アイコンの位置』を後に変えれば、アイコンが後ろにきます。
またスペースは矢印のように右にスライドさせると、テキストとアイコンの間に間隔があきます。
バランスよく間隔を決めてくださいね。
スタイルタブを解説
スタイルタブでは書体やテキストシャドウ、マウスオーバーなどの設定ができます。
書体については『Elementorのテキストエディターウィジェットの使い方』の記事で詳しく説明していますのでそちらをご覧ください。
テキストシャドウで陰をつける
テキストシャドウの項目で、鉛筆マークをクリックすると、上の画像のような画面が出てきます。
影を分かりやすくするため、今回はぼかしを0にしました。
矢印のように『水平・垂直』をスライドさせると、影も動きます。
やりすぎると違和感が出来てしまいますので、注意してください。
設定を戻したい時は、まるで囲んだところをクリックすれば元に戻ります。
マウスオーバーの通常タブ設定
マウスオーバーとは、マウスをボタンの上に持っていったときに、何が起こるのかを設定できる機能のことです。
マウスオーバーはまず通常時の設定からしていきましょう。
通常とはマウスがボタンの上にないときの設定です。
上の画像のように、番号に沿って選択していってください。
そうすれば問題なく設定できると思います。
補足として4の『ボーダータイプ』は枠線のことで、5の『幅』は枠線の太さになります。
ボックスシャドウは先ほど説明したテキストシャドウとほぼ同じなので、ここでは省きますね。
パディングでテキストと枠線の間隔を設定
パディングではテキストと枠線の間隔を設定できます。
画像の下線部の数値を上げることで、矢印のようにテキストと枠線までの間隔も広く出来ましたね。
初めは上下左右どこの数値を変えても等間隔になるように、リンクされています。
丸で囲んだリンクのアイコンをクリックして解除すれば、それぞれ設定することが可能。
上下と左右でそれぞれ調整して、ちょうどいい間隔を見つけてください。
マウスオーバータブの設定
通常の設定が出来たら、マウスオーバータブをクリックしてください。
こちらでマウスをボタンにのせた後の変化を設定していきます。
文字色や背景色、枠線の色はバランスみて設定すると良いかと思います。
ホバー時のアニメーションも面白い機能なので色々選択して試してみたくださいね。
TOFUラボ・ボタンに関するメンバー質問
TOFUラボ内のメンバーからの質問に
という質問がありました。
※上記のリンクにアクセスすると、その解決方法がご覧いただけます。
また、この他にもTOFUラボのメンバーによるQ＆Aをまとめた『質問と回答』のページがありますので、サイト制作に迷った時の答えや、新しいヒントがもしかしたら見つかるかもしれません！
TOFUラボに入会するとサイト制作で何かしら困った時、自分で調べても限界がある時などラボ内で質問することができます。
たくさんの有識メンバーがその答えを共有してくれ、早期解決、より良いWeb制作に貢献できます！
Elementorのボタンウィジェットの使い方の解説は以上になります。
うまく活用してサイトの見栄えや使い勝手を良くしていきましょう。
また、こちらはボタンウィジェットを使用している訳ではありませんが、 画面右側（または左）に固定され『Contact』などのボタンの設置方法についてこちらの動画で説明していますので、ぜひ参考にしてください！
Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。
「Elementorのボタンウィジェットの使い方」への2件のフィードバック
Internal URLでアンカーを追加できたり、新しいウィンドウで開く以外にtargetウィンドウを指定できると良いのですが…。ここは諦めるしか無いですね。
具体的に何をしようとしてますか？