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

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

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

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

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

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

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

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

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

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

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

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

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

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

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

タイプを変更

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

ボタンのテキスト変更

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

リンクの設定

リンクの説明

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

リンクの編集画面

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

配置とサイズ

配置の設定画面

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

サイズの設定画面

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

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

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

アイコンの設定画面

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

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

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

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

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

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

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

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

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

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

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

スタイルタブを解説

スタイルタブの説明

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

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

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

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

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

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

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

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

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

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

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

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

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

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

パディングの説明

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

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

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

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

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

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

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

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

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

TOFUラボ・ボタンに関するメンバー質問

TOFUラボ内のメンバーからの質問に

という質問がありました。

※上記のリンクにアクセスすると、その解決方法がご覧いただけます。

また、この他にもTOFUラボのメンバーによるQ&Aをまとめた『質問と回答』のページがありますので、サイト制作に迷った時の答えや、新しいヒントがもしかしたら見つかるかもしれません!

TOFUラボに入会するとサイト制作で何かしら困った時、自分で調べても限界がある時などラボ内で質問することができます。

たくさんの有識メンバーがその答えを共有してくれ、早期解決、より良いWeb制作に貢献できます!


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

また、こちらはボタンウィジェットを使用している訳ではありませんが、 画面右側(または左)に固定され『Contact』などのボタンの設置方法についてこちらの動画で説明していますので、ぜひ参考にしてください!

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

「Elementorのボタンウィジェットの使い方」への2件のフィードバック

  1. Internal URLでアンカーを追加できたり、新しいウィンドウで開く以外にtargetウィンドウを指定できると良いのですが…。ここは諦めるしか無いですね。

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Elementorの無料ウェブサイトテンプレート
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通