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

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

今回はElementorのボタンウィジェットの使い方を説明していきます。

ボタンウィジェットで好きなフォームにリンク付けできるようになります。
大変便利な機能ですので、ぜひ活用してみましょう。

この記事は『Elementor Proの使い方』のコースを元に作っています。
動画でみたい方は是非このコースをチェックしてみてください。
TOFUラボに参加することによって無料で見ることもできます。

ボタンウィジェットの挿入

ボタンウィジェットの挿入

ボタンウィジェット挿入の仕方は、他のウィジェットと同じでドラック&ドロップします。

基本的にここまでの操作はどのウィジェットでも同じですね。

ボタンウィジェットを挿入するとデフォルトのボタンが挿入され、コンテンツタブが開きます。

コンテンツタブで出来ることを解説

ボタンウィジェットが挿入された画像

こちらがボタンウィジェットを挿入した直後の画面。
コンテンツタブではタイプの選択やテキストの変更、リンク設定などが出来ます。

アイコンを入れたりして、自分のサイトに合ったボタンにしていきましょう。
各項目順番に説明していきます。

タイプ選択とテキスト変更

タイプを変更

タイプを選択すると、ボタンの色が変わります。
好きな色があったら、変えてみて下さい。

ボタンのテキスト変更

続いてテキストを変更していきましょう。
丸で囲んだところに入れたいテキストを書きこむと、ボタン内のテキストもかわります。

リンクの設定

リンクの説明

テキストの下にある、リンクの項目にURLを入れて設定します。
次に四角の中にある歯車のアイコンをクリックしてみてください。

リンクの編集画面

するとこのような画面が出てきました。
リンクしたページを新しいウィンドウで開かせたい時は、『新しいウィンドウで開く』の横の四角にチェックを入れてください。

配置とサイズ

配置の設定画面

配置の項目では、ボタンの位置を設定できます。
デフォルトでは左寄せになっているので、中央や右寄せなど、設定したい位置にボタンを配置しましょう。

サイズの設定画面

配置の下にあるのはサイズです。
四角の中の『▼』をクリックすると、サイズを選べるので好きなサイズを選んでください。

因みに特大はこんな感じです。ちょっと大きすぎますよね(笑)

アイコンを入れると見栄えが良くなる

アイコンの設定画面

アイコンを入れると、少し見栄えが良くなりますよね。
四角の中にカーソルを移動させると『アイコンライブラリー』が選択できますので、クリックしてみてください。

アイコンライブラリーの表示

『アイコンライブラリー』をクリックすると、アイコンの選択画面が開きます。

Elementorでは、初めからたくさんのアイコンが選べるようになっています。
テキストに合わせてアイコンを選ぶと良いですね。

好きなアイコンを選択し、右下の『INSERT』ボタンをクリックしましょう。

アイコンが挿入された画面

選んだアイコンが挿入されました。

アイコンの位置やスペース

アイコンの位置とスペース

選んだアイコンは、テキストの前か後ろに設定可能。
『アイコンの位置』を後に変えれば、アイコンが後ろにきます。

またスペースは矢印のように右にスライドさせると、テキストとアイコンの間に間隔があきます。
バランスよく間隔を決めてくださいね。

スタイルタブを解説

スタイルタブの説明

スタイルタブでは書体やテキストシャドウ、マウスオーバーなどの設定ができます。
書体については『Elementorのテキストエディターウィジェットの使い方』の記事で詳しく説明していますのでそちらをご覧ください。

テキストシャドウで陰をつける

テキストシャドウの入れ方

テキストシャドウの項目で、鉛筆マークをクリックすると、上の画像のような画面が出てきます。

影を分かりやすくするため、今回はぼかしを0にしました。

矢印のように『水平・垂直』をスライドさせると、影も動きます。
やりすぎると違和感が出来てしまいますので、注意してください。

設定を戻したい時は、まるで囲んだところをクリックすれば元に戻ります。

マウスオーバーの通常タブ設定

マウスオーバーの通常タブ設定

マウスオーバーとは、マウスをボタンの上に持っていったときに、何が起こるのかを設定できる機能のことです。

マウスオーバーはまず通常時の設定からしていきましょう。
通常とはマウスがボタンの上にないときの設定です。

上の画像のように、番号に沿って選択していってください。
そうすれば問題なく設定できると思います。

補足として4の『ボーダータイプ』は枠線のことで、5の『幅』は枠線の太さになります。
ボックスシャドウは先ほど説明したテキストシャドウとほぼ同じなので、ここでは省きますね。

パディングでテキストと枠線の間隔を設定

パディングの説明

パディングではテキストと枠線の間隔を設定できます。

画像の下線部の数値を上げることで、矢印のようにテキストと枠線までの間隔も広く出来ましたね。

初めは上下左右どこの数値を変えても等間隔になるように、リンクされています。
丸で囲んだリンクのアイコンをクリックして解除すれば、それぞれ設定することが可能。

上下と左右でそれぞれ調整して、ちょうどいい間隔を見つけてください。

マウスオーバータブの設定

マウスオーバータブの説明

通常の設定が出来たら、マウスオーバータブをクリックしてください。

こちらでマウスをボタンにのせた後の変化を設定していきます。
文字色や背景色、枠線の色はバランスみて設定すると良いかと思います。

ホバー時のアニメーションも面白い機能なので色々選択して試してみたくださいね。

Elementorのボタンウィジェットの使い方の解説は以上になります。
うまく活用してサイトの見栄えや使い勝手を良くしていきましょう。

目次

そのElementorの質問
実際に使ってる人に聞いてみませんか?

TOFUラボはElementorを使う人が集まるサロンです。
メンバーは130人を超えます。