ページ内でリンクを貼るボタン

ボタンもウィジェットを設置することで簡単に実装できます。サイト内の回遊、外部サイトへのリンク、他にもポップアップを開いたり、メーラーを開いたり、通話ツールを立ち上げるなども可能です。




コンテンツでの設定

コンテンツ設定ではボタン内のテキスト、またそのボタンのリンク先の設定をします。
またテキストの左右どちらかの横に置くアイコンを設定することもできます。


スタイル

ボタンウィジェットで特に作業が多いのが [スタイル] かと思います。マウスオーバーからホバーアクションも設定できます。ボタンなどリンクするもの、目立たせたいものにカーソルを合わせると動きやエフェクトをつけることでユーザーの目を引くボタン・CTAになります。


ここでの設定を見ていきます。

⚫︎ Fixed Size:Height, Widthでサイズ指定、Horizontal Align, Vertical Alignでボタン内の文字の位置を指定

⚫︎ 配置:ウィジェット内のボタンの位置を設定

⚫︎ タイポグラフィ:見出しウィジェットと同じ

⚫︎ Text Shadow:文字へのシャドウの設定

⚫︎ 文字色・Background Typeは通常時と、マウスオーバー時でそれぞれ設定可能

⚫︎ Border Type:なし/単色(1色)/ダブル/点線/破線/Groove

⚫︎ 枠線の丸み:上下左右でそれぞれでの設定が可能

⚫︎ Box Shadow:ボタン自体へのシャドウをかける設定

⚫︎ パディング:ボタンの中のパディング指定で微調整が可能






マウスオーバーから⚫︎ホバー時のアニメーションという設定が可能です。つい押したくなるようなボタンでコンバージョンへつなげていくことが可能です。



次回:開始アニメーションについて

recent post

スマホで崩れない!「アイコンボックス」でサービスの強みを綺麗にレイアウト

サイトがプロっぽくなる!「ホバーアニメーション」の作り方

Elementor 制作の見出しのHTMLタグ(H2・H3)の基本

スクロールしてもついてくる!追従(sticky)ヘッダー(※HappyAddons)

余白作りに「スペーサー」ウィジェットを多用してはいけない理由

Making Design Make Sense.
デザインを、感覚から理解へ。
© Design Decode. 901